Figma changed how design teams work, and most of the reasons trace back to one decision: the file lives in the browser. You open a URL and you are editing, with no install, no local copy, and no "send me the latest version" thread. The advantages below all grow out of that, and each one comes with the menu, panel, or shortcut that makes it real.
It runs in the browser
There is nothing to download and nothing to keep in sync across machines. A Figma URL ends in something like /file/abc123/Project?node-id=12-345, and that node id points at one exact frame. Paste that link into a ticket or a chat and the other person lands on the same frame you are looking at, on Mac, Windows, ChromeOS, or Linux. The desktop app exists, but it is the same file rendered in an Electron shell, so a teammate on the web app sees identical pixels.
Do this first
- Select a frame, right click, and choose Copy link to selection. That gives you a URL with the node id baked in, not just a link to the page.
- Turn on version history from the main menu under File > Show version history. Figma autosaves continuously, and you can name a point in time before a big change so you can roll back to it cleanly.
Real-time collaboration
Several people can edit one file at the same time, the way they would in a shared document. You see each person as a colored cursor with their name, and you can click a collaborator's avatar in the top right to follow their viewport and watch where they scroll and zoom. Comments live on the canvas rather than in a separate doc, so feedback stays attached to the thing it is about.
Make review faster
- Press C to switch to the comment tool, then click anywhere to pin a note. Type @ and a name to tag someone, and they get notified with a direct link back to that pin.
- Use Shift + C to toggle comments on and off so review threads do not clutter the canvas while you are designing.
- For a structured pass, give reviewers can comment access rather than can edit from the Share dialog. They can still leave pins, but they cannot move your layers by accident.
Components and auto layout
A component is a master element you define once and reuse everywhere as instances. Change the main component and every instance updates with it, which is how a button that appears on forty screens stays consistent. Auto layout is the other half of this: it makes a frame behave like a flexbox container, so it resizes and reflows as content changes instead of staying a fixed rectangle.
The shortcuts worth memorizing
- Select an element and press Ctrl/Cmd + Alt + K to turn it into a component. The main component then gets a four-diamond icon in the layers panel.
- Wrap a selection in auto layout with Shift + A. In the right panel you then set the direction, the gap between items, and the padding, and you choose whether the frame hugs its contents or fills the available space.
- Promote repeated values to variables from the right panel so colors, spacing, and text styles live in one place. When the brand changes a blue, you update the variable and it cascades through every component bound to it.
A practical rule that saves rework: build the smallest reusable piece first, such as a single list row, give it auto layout, then nest it inside a larger frame that also has auto layout. Resizing the outer frame now pushes the change down through the whole stack.
Prototyping in the same tool
You can wire screens into a clickable prototype without exporting to a separate app. Switch to the Prototype tab in the right panel, drag the blue connector from a layer to a target frame, and pick the trigger and animation. Press Shift + Space or the play button to preview the flow, and share that same preview link for feedback while the design is still easy to change.
Keep prototypes honest
- Use Smart animate as the transition when two frames share named layers, and Figma will tween position, size, and opacity between them. Matching layer names is what makes the motion look intentional rather than a hard cut.
- Set a top navigation bar to a fixed position so it stays put while the body scrolls, which mirrors how the built screen will actually behave.
One source of truth for handoff
Developers open the same file and read it directly. With a frame selected, the right panel exposes exact spacing, color values, typography, and per-property code, and Figma's Dev Mode adds a focused inspect view with measurements between elements when you hover. Because the file is always current, the design a team ships from and the build an engineer works against do not drift apart.
Hand off cleanly
- Mark a frame Ready for dev in Dev Mode so engineers know which screens are final and which are still moving.
- Define text and color styles instead of loose hex values. A developer reading Primary/600 can map it to a token in code far more reliably than a raw #2563EB they have to guess the meaning of.
- Hold Alt and hover between two layers to read the pixel gap. That single measurement habit removes most of the spacing questions that usually bounce back during a build.
A genuinely useful free tier
You can do real work on the Starter plan without paying. It allows unlimited drafts and three Figma design files in a shared project, which is enough for a portfolio piece, a small side project, or learning the tool properly before a team commits. The main thing you give up is the count of shared files and some org-level controls, not the core editor.
- Keep exploratory work in Drafts, which do not count against the shared-file limit, and only move a file into a team project once it needs collaborators.
A large plugin ecosystem
Plugins handle the repetitive parts of building screens. You install them from the Figma Community, then run one from the canvas with right click > Plugins or the quick action bar at Ctrl/Cmd + /, where you can type a plugin's name and run it without leaving the keyboard. A small, deliberate set does more good than a long list you never open.
A starter set that earns its place
- Content Reel or a similar data plugin to drop in realistic names, avatars, and copy instead of placeholder text that hides layout problems.
- An accessibility checker such as Stark to flag color contrast failures before they reach a build.
- An icon plugin so you pull consistent, correctly sized icons rather than pasting mismatched SVGs.
The thread running through all of this is leverage. Define a component once, bind it to variables, drive it with auto layout, and a single edit ripples out to every screen that uses it. Set those up early on a project and the rest of the work gets noticeably lighter.