Figma has become the dominant tool for UI and UX work, collaborative product design, and increasingly for presentations and marketing assets. Its browser-based architecture means designers, developers, and stakeholders can all open the same file simultaneously without installing anything — a collaboration model that Adobe XD, Sketch, and most traditional tools can’t match. This fits into the wider topic we cover in our Complete Guide to Software and Apps.
But Figma‘s power comes with a learning curve. Frames, components, auto layout, prototyping, and the collaborative features each require deliberate understanding. Whether you’re a designer learning a new tool or a product manager trying to navigate design files, this guide covers what you need to work in Figma confidently.
The canvas, frames, and the layer panel
The Figma canvas is the infinite workspace where everything lives — an unbounded space where you place designs for screens, print, or any format, zooming out to see everything at once and in to work on details.
The toolbar at the top provides the primary tools: Move (V) for selecting and moving, Frame (F) for creating frames, Shape tools, Text (T), Pen (P), and Hand (H) for panning without accidentally selecting things.
Frames are the most important concept in Figma. A frame is a fixed-size container that represents a screen, a page, a component, or any bounded design area. Press F, drag on the canvas, and you’ve created one. The right panel offers preset frame sizes for every common device — iPhone, iPad, Android, desktop browsers, various social media formats. Frames have clipping (elements outside the boundary are hidden), auto layout (automatic resizing and spacing), and can be nested inside each other to create complex component structures. Unlike simple groups, frames are what make responsive design possible.
The Layers panel (left sidebar) shows the hierarchy of every element in the current page — frames, groups, shapes, text, components, images — all nested in tree form. In large files this panel gets complex fast. Use Ctrl+G to group layers, rename groups meaningfully (double-click any layer name to rename), and use the eye icon to toggle visibility. A well-named layer hierarchy is the difference between a file that anyone can navigate and one that only the original designer can understand.
Components and the design system
Components are the feature that transforms Figma from a drawing tool into a systematic design environment. A component is a reusable element — a button, input field, navigation bar, card — that can be placed throughout the file and updated globally from one place.
Creating a component: select any element or group → right-click → “Create component” (or Ctrl+Alt+K). The element becomes a main component (purple diamond icon). Any element copied from the main component becomes an instance — a linked copy that mirrors the main component’s properties but can have instance-specific overrides for content like text or images.
When you update the main component — change a button’s colour, update its font, add an icon — all instances throughout the file update simultaneously. Instead of manually updating 50 button instances when the design changes, one edit propagates everywhere.
Variants extend components by grouping related states into a single switchable component. A button component might have variants covering: Primary/Secondary/Tertiary style × Default/Hover/Pressed/Disabled state = 12 variants in one component set. In the design panel, anyone placing the button selects the desired variant from a dropdown rather than managing separate components for each state.
Component libraries: components can be published to a Figma team library, making them available across multiple files within an organisation — the basis of a shared design system where UI consistency is enforced not through style guides but through shared components that designers use directly.
Auto Layout — step by step
Auto layout is the feature that most separates productive Figma users from those building static designs manually. It converts containers into responsive flex-box-style containers that automatically size themselves based on their contents.
- Add auto layout. Select a frame or group → press Shift+A (or right-click → “Add auto layout”). The container is now auto layout-enabled.
- Set the direction. Design panel → auto layout section → Horizontal (items stack left to right) or Vertical (items stack top to bottom).
- Set spacing and padding. Spacing between items (gap between each child element) and padding (space between the container edge and its children — top, bottom, left, right independently). Values update live as you type.
- Set sizing behaviour per dimension. Each auto layout frame’s width and height can be: Fixed (stays the same regardless of content), Hug contents (shrinks or grows to fit children), or Fill container (stretches to fill its parent). “Hug” is what makes auto layout responsive — a button with Hug grows wider as its label text becomes longer, maintaining defined padding automatically.
- Enable wrapping for multiple rows. For horizontal containers with many items — a tag list, an icon grid — enable “Wrap” so items wrap to a new row rather than overflowing. The wrap gap controls spacing between rows.
- Nest auto layout frames. The most powerful pattern: an outer vertical frame containing multiple horizontal frames, each containing text and icon combinations. Complex responsive layouts that adapt to content changes without any manual adjustment.
With auto layout, resizing a design to accommodate longer text, adding items to a list, or adapting from mobile to tablet layout becomes a matter of changing content rather than repositioning every element manually.
Prototyping and developer handoff
Creating prototypes: switch to the Prototype tab (right panel) when an element is selected → click the “+” that appears on the element’s edge → drag the connection arrow to a destination frame → configure the trigger (On click, On hover, On drag, After delay) and the animation (Instant, Dissolve, Slide, Push, etc.). The first prototype flow connection establishes the starting frame; additional connections build out the clickable paths.
Preview the prototype: the Play button (top right of the Figma toolbar) opens the prototype in a browser window. Share a prototype link (Share → “Anyone with the link can view” → copy the prototype link) so stakeholders can click through without needing a Figma account or any design knowledge.
Developer handoff is one of Figma’s most valuable capabilities. When a developer needs to inspect a design file, they can view it in “Dev mode” (the icon in the toolbar or via a Dev Mode viewer link) — a specialised view that shows exact measurements, spacing, padding, colours in hex/RGB, font properties, and automatically generated CSS for selected elements.
- Click any element in Dev Mode → the Inspect panel shows all dimensions, typography, colours, and effects as developer-ready values
- Figma auto-generates CSS, iOS Swift, and Android Kotlin code snippets for selected elements — copy directly into code
- Assets in the file can be exported as SVG, PNG at various scales, WebP, or PDF from the Inspect panel
Sharing design files with developers as view-only links means no version mismatch — developers always see the current design, not a PDF exported a week ago. Any changes the designer makes are immediately visible to the developer without re-sharing.
Styles, variables, and design tokens
Styles save design properties for reuse — create a style: select an element with the property → click the style icon next to the property in the design panel → “Create style” → name it. Text styles save font, size, weight, line height, and letter spacing together. Colour styles save a specific colour for fills and strokes. Using named styles throughout a file means updating the style once updates every element using it.
Variables (Figma’s more powerful alternative to styles) support theming at scale — define a colour as a variable and then create different modes (light/dark/brand) where the variable resolves to different values. Switching a frame’s mode switches all variable-referenced values simultaneously. This enables light/dark mode design in minutes rather than maintaining duplicate files.
Design tokens bridge design and code. A design token is a named design decision — a colour, a spacing value, a border radius — expressed in a format that both Figma and development codebases understand. Using a plugin like Tokens Studio, tokens defined in Figma can be exported as JSON files that developers use directly in the frontend codebase, ensuring design system values and component library values stay perfectly in sync. Related: Windows 11 Quick Settings.
Figma AI features and FigJam
Figma has integrated AI features across the product in 2025–2026:
- AI component generation: describe a UI component in text and Figma generates a starting design — useful for rapid wireframing before detailed design work begins
- Auto-rename layers: Figma AI can automatically name layers based on their content — addresses the perennial problem of files full of “Rectangle 47” and “Group 12”
- Make grid: generate a repeated layout (icon grid, card grid) from a single component in seconds
FigJam is Figma’s collaborative whiteboard tool — separate from the design tool but sharing the same file-based collaboration model. Use FigJam for brainstorming, user journey mapping, diagramming, and retrospectives. FigJam files and Figma design files can be linked to each other, connecting early ideation work to the resulting design. For team workshops that precede design work, FigJam eliminates the context switch to a separate whiteboarding tool. If this sounds familiar, Windows 11 Group Policy Editor is worth a look.
Figma’s collaboration model — where multiple team members can comment, inspect, and contribute to the same file simultaneously — is the capability that makes it genuinely different from single-user design tools. The most common mistake is using Figma as a solo tool and exporting static files for review; using the shareable view/comment links for feedback instead of PDF exports is the shift that unlocks the full value of the platform. Our guide on How to Use Canva covers an adjacent issue.
