Tool · DesignFree

Figma

Figma is the standard for product design. Real-time collaboration, components, variants, auto-layout, Dev Mode for engineers. With the Figma MCP, Claude reads designs directly to generate code.

Visit the site ↗Free. Pro $15/month/editor

How I use it

›Wireframes and hi-fi mockups
›Design system with variants and tokens
›Clickable prototypes for user tests

Installation

Prérequis.Account on figma.com (free is enough to start). The desktop app is significantly more performant than the browser, especially for heavy files and Dev Mode.

One line, one terminal

$ brew install --cask figma

Pro plan ($15/editor/month) required if you want to publish shared components or use libraries. Free plan is enough for personal design or a few screens.

Configs and workflows worth knowing

Auto-layout everywhere (otherwise your design breaks when text changes)

As soon as you have 2 aligned elements, use Auto-layout (Shift+A). Define spacing, alignment, hug/fill behavior. Benefit: a button that fits its text, a card that grows with its content. Without auto-layout, you spend your life aligning manually.

Component variants

A button = ONE component with 4-5 variants (primary/ghost/disabled/loading/danger), not 5 different components. Switch variants via a dropdown in the Inspector. Your designs stay consistent, and style changes propagate everywhere.

Figma MCP + Claude Code to generate code from a design

Enable Dev Mode in Figma, connect the Figma MCP in Claude Code, then you can say 'generate the React component for the selected frame respecting my Tailwind tokens'. Claude reads the design structure, variables, auto-layout, and returns a component aligned with your design system.

Example

# Dans Figma Desktop → Preferences → Enable Dev Mode MCP Server
# Claude Code détecte auto le serveur local (port 3845)
# Tape dans Claude : "Génère le composant du frame sélectionné en React + Tailwind"

Alternatives

SketchPenpotFramer