Figma is a cloud‑based design tool that many development teams use to turn UI mockups into production code. This guide walks developers through the essential steps: setting up a Figma account, mastering core workflows, applying advanced patterns, and avoiding common pitfalls. By the end you will know how to inspect assets, export clean SVGs, and keep design hand‑off fast and error‑free.
Visit figma.com and sign up with Google or email. The Starter plan allows three projects, unlimited viewers, and 30 days of version history.
The desktop client runs on Windows, macOS, and Linux. It reduces latency when working with large files. Download size is ~150 MB.
Ask your design lead for an invitation link. Once you accept, you will see a “Team” list on the left sidebar. Permissions are:
Go to Menu → Settings → Preferences and enable:
-webkit- when needed.Select any layer and open the right‑hand Inspect tab. You will see:
Copy the CSS with a single click. Example output for a button:
.btn{background:#0069ff;color:#fff;padding:0.5rem 1rem;border-radius:4px;}
Mark the element as a component, then set export settings:
@2x automatically added for high‑DPI assets.For icons, always choose SVG and tick Outline text to avoid missing fonts.
Many teams store colors, spacing, and typography in a shared .json file. In Figma, open Assets → Library → Tokens and click Copy JSON. Paste into your project’s design‑tokens.js and reference it in CSS‑in‑JS or Tailwind config.
Figma files are live, but you can export a .fig file for backup. To sync with Git:
Export → .fig and commit the file..fig and open in Figma.Auto‑Layout mimics CSS flexbox. Select a frame, click + Auto‑Layout, and set:
Hug contents or Fill container.When you add a new button, the layout updates automatically—no need to adjust positions manually.
Variants replace multiple components with a single master. Create a button component, then click Add variant. Define properties such as:
Default, Hover, Disabled.Small, Medium, Large.In the Inspect panel, the generated CSS includes a data-variant attribute you can target in your stylesheet.
| Plugin | Purpose | Free / Paid |
|---|---|---|
| HTML to Figma | Import static HTML snippets as layers. | Free |
| Figmotion | Add simple keyframe animations directly in Figma. | Free |
| Design Lint | Detect missing tokens, unaligned layers. | Free |
| Figma Tokens | Sync design tokens to JSON, SCSS, or Android XML. | Free |
| Zeplin Export | Export frames to Zeplin for teams that still use it. | Paid |
Use Prototype mode to create clickable flows. Set On Click → Navigate To and add Overlay for modals. When you share a prototype link, developers can see interaction timing (ms) which helps estimate animation effort.
| Feature | Figma | Sketch | Adobe XD |
|---|---|---|---|
| Cloud Collaboration | Real‑time editing, unlimited viewers | Requires third‑party plugins | Coediting introduced 2022, limited free tier |
| Auto‑Layout | Native, flex‑like | Plugin‑only | Basic constraints only |
| Component Variants | Built‑in, unlimited | Symbol overrides only | Component states limited |
| Platform | Web + Desktop (Windows/macOS/Linux) | macOS only | Windows & macOS |
| Free Plan Limits | 3 projects, 30‑day history | 30‑day trial, then paid | 1 active shared prototype |
| Export SVG Quality | Clean, outline text option | Often includes hidden groups | Sometimes adds extra xmlns |
Designs use density‑independent pixels (dp). A button set to 44 dp on iOS may appear too small on Android. Always check the Resize setting in the Inspect panel.
When a frame is not set to Fill container, exported CSS will use fixed widths. Convert frames to Auto‑Layout before copying CSS to avoid hard‑coded sizes.
SVG is lossless and scales with CSS. Exporting PNG icons forces you to manage multiple resolutions. Use SVG whenever the icon contains only vector paths.
Many designs include Light and Dark mode variants. Developers often copy only the Light colors. Check the Assets → Library → Themes section for alternate palettes.
The generated markup is a flat div structure with inline styles. It is not production‑ready. Use the CSS from the Inspect panel and recreate semantic HTML yourself.
No. The free Starter plan lets you share files, comment, and copy CSS. For larger teams you may need Professional, but it is not required for basic collaboration.
Select a layer, open the right‑hand Inspect panel, and copy the CSS, iOS, or Android code. Values are ready to paste into your codebase.
Mark the icon as a component, right‑click → Export → Set format to SVG, and tick ‘Outline text’ to avoid font dependencies.
Yes. Plugins like “HTML to Figma” or “Figmotion” add code‑export features, but they rarely replace a hand‑crafted solution. Use them for quick prototypes.
Figma frames include absolute positioning. Convert them to flex or grid in code, or use the auto‑layout feature in Figma to generate responsive constraints.
With this guide you should feel comfortable opening a Figma file, inspecting assets, exporting clean code, and avoiding the typical traps that slow down development. Keep the workflow tight, use auto‑layout, and let designers and developers stay in sync.