Figma

active design 4.5

Figma's Code Connect CLI represents a paradigm shift in design-to-code workflows. Running locally in a repository, the CLI maps Figma component attributes to actual React/Swift codebase implementations. Combined with Figma's official MCP server and Agent Skills, AI assistants can now read design intent and generate pixel-perfect, component-aware frontend code directly from the terminal.

https://www.figma.com/ → Docs →Source →

#ui#ux#design-system#codegen

⌨️ Install

standalone

CLI

npm official

npm install --global @figma/code-connect@latest

Skills

claude official

claude plugin install figma@claude-plugins-official

Raw: figma.md · figma.json

What it can do

› generate accurate boilerplate code for complex UI elements using `npx skills add figma`
› publish bidirectional property mappings to ensure design and code stay synchronized
› allow autonomous agents to inspect layout bounds and colors without needing visual rendering

Comments

Loading…