How to Use Figma for Developers

Figma is a cloud‑based design tool that many developers need to translate into code. This tutorial shows you, step by step, how to read specs, export assets, and pull design tokens so you can build pixel‑perfect interfaces. Follow each section and you’ll finish with a working HTML/CSS page that matches the original mockup.

Table of Contents

• 1. Setting Up Your Figma Account
• 2. Inspecting Layers and Getting CSS
• 3. Exporting Images, Icons, and SVGs
• 4. Syncing Design Tokens with Code
• 5. Working with Components and Variants
• 6. Handoff Comparison: Figma vs Sketch vs Adobe XD
• 7. FAQ

1. Setting Up Your Figma Account

1.1 Create a free account

Visit figma.com and click “Sign up”. Use your work email to avoid the 30‑day limit on free projects.

1.2 Join a team

Ask your designer for an invitation link. Once you accept, the file appears under “Team > Projects”.

1.3 Install the desktop app (optional)

The desktop client reduces latency and supports offline mode. Download it from the same site and sign in with the same credentials.

2. Inspecting Layers and Getting CSS

2.1 Open the Code panel

Select any layer. The right sidebar shows “Design”, “Prototype”, and “Code”. Click “Code”. You will see CSS properties for that element.

2.2 Copy CSS snippet

Click the copy icon next to the CSS block. Paste it into your stylesheet.

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: #0069ff;
  color: #fff;
  border-radius: 4px;
}

2.3 Limitations

Figma outputs only visual CSS. It does not generate layout frameworks (Flexbox vs Grid) automatically. Adjust manually for responsive needs.

3. Exporting Images, Icons, and SVGs

3.1 Select assets

Hold Shift and click each icon you need. The Export section appears at the bottom of the right panel.

3.2 Choose format

• PNG – raster bitmap, good for photos.
• JPG – smaller size for photographic content.
• SVG – vector, ideal for icons and logos.

3.3 Export settings

Set scale to 2× for Retina displays. Tick “Outline Text” for SVG if you don’t want font dependencies.

3.4 Code example for SVG import

<svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2L2 22h20L12 2z"/>
</svg>

4. Syncing Design Tokens with Code

4.1 What are design tokens?

Tokens are single‑source values for colors, spacing, typography, and shadows. Keeping them in sync avoids “hard‑coded” values.

4.2 Using the Figma Tokens plugin

1. Open the plugins menu (⌘/ or Ctrl/).
2. Search “Figma Tokens” and install.
3. Run the plugin, then click “Export” → choose JSON or SCSS.

4.3 Example JSON output

{
  "color": {
    "primary": "#0069ff",
    "secondary": "#f2f2f2"
  },
  "spacing": {
    "sm": "8px",
    "md": "16px"
  }
}

4.4 Importing into a build pipeline

Place the JSON file in src/design/tokens.json and import it in your CSS‑in‑JS solution.

import tokens from './tokens.json';
const button = {
  background: tokens.color.primary,
  padding: tokens.spacing.md,
};

5. Working with Components and Variants

5.1 Identify components

Components are marked with a diamond icon in the layers panel. Click to see all instances.

5.2 Inspect variant properties

Variants are stored as a single component with multiple property combos (e.g., size, state). The right panel lists these as dropdowns.

5.3 Exporting component code with a plugin

Install “Figma to Code”. It can output JSX for React components.

export const Button = ({size = 'md', disabled = false, children}) => {
  const classes = \`btn btn-\${size} \${disabled ? 'btn-disabled' : ''}\`;
  return <button className={classes} disabled={disabled}>{children}</button>;
};

5.4 Keep components up to date

When designers change a component, the plugin’s “Refresh” button updates the generated code. Commit the new files to version control.

6. Handoff Comparison: Figma vs Sketch vs Adobe XD

Feature	Figma	Sketch	Adobe XD
Cloud collaboration	Real‑time multi‑user editing	Requires Sketch Cloud add‑on	Coediting (beta)
CSS inspection	Built‑in Code panel	Third‑party plugins only	Limited CSS view
Design token export	Figma Tokens plugin (JSON/SCSS)	Sketch Tokens (JSON)	Variable export via plugins
Component variants	Native support	Symbol overrides only	Component states only
Free tier limits	3 files, unlimited viewers	Only on macOS, 30‑day trial	Limited to 1 active prototype

7. FAQ

Can I export CSS directly from Figma?

Yes. Select a layer, open the Code tab on the right panel, and copy the generated CSS snippet.

What is the best way to get SVG icons from Figma?

Select the icon, click Export → SVG, and choose “Outline Text” if you need pure vector shapes.

How do I keep design tokens in sync with code?

Use the Figma Tokens plugin to export JSON or SCSS variables, then import them into your build pipeline.

Is Figma suitable for large design systems?

Yes. Figma supports libraries, shared styles, and component variants that scale to thousands of elements.

Can I view component code for React or Vue?

Figma does not generate framework code natively, but plugins like “Figma to Code” can output JSX or Vue templates.

With these steps you can turn any Figma mockup into production‑ready code. Set up your account, inspect layers, export assets, sync tokens, and keep components current. The result is a faster handoff, fewer bugs, and a UI that matches the designer’s vision.