Design to code

Turn a frame into Flutter or React + Tailwind code.

Pick a frame

Select a frame in Figma and ask your agent:

implement the selected Figma frame

Or paste a Figma link that has a node-id. The id in the link (node-id=1-2) is the node 1:2. With no id, the tools use the current selection.

implement https://www.figma.com/design/AbC123/App?node-id=42-1337

What the agent gets

get_design_context is the main tool. For a node it returns:

• Reference code for your stack
• The assets the code uses (SVGs and images), saved to disk
• A screenshot of the node to compare against
• The variables the node uses

Flutter or React

The framework is chosen in this order:

1. The framework argument, when the agent passes one.
2. The client's languages and frameworks (for example dart or flutter).
3. The FIGMA_LOCAL_MCP_FRAMEWORK environment variable (flutter or react).
4. A pubspec.yaml in the working directory means Flutter. Anything else gets React + Tailwind.

Flutter

Start your agent in the Flutter project (the folder with pubspec.yaml) and Flutter is picked automatically. The code uses standard widgets, and SVGs are drawn with SvgPicture.asset, so add flutter_svg if the project doesn't have it:

flutter pub add flutter_svg

Portrait frames of a phone's width (300–480) are drawn as a screen that fills the device and scrolls when it's tall. The agent can turn this on or off with screen.

Assets

SVGs and images go into the folders your pubspec.yaml declares under flutter: assets:. Folders named like assets/svg or assets/icons get the SVGs, and assets/images or assets/png get the images. Without them, both go to assets/figma. The agent can override this with assetsDir.

flutter:
  assets:
    - assets/svg/
    - assets/images/

implement the selected Figma frame as a Flutter screen

React + Tailwind

Every project without a pubspec.yaml gets React with Tailwind classes: Next.js, Vite, Remix or plain React. Auto layout frames become flex boxes, grids become CSS grids, and everything else is placed by its constraints. Colours and sizes that don't match the Tailwind scale use arbitrary values like text-[#0a1f44].

Using Vue, Svelte or plain HTML? The React output still works as a reference: ask the agent to convert it to your stack.

implement the selected Figma frame as a React component with Tailwind

Large frames

Very large nodes return metadata (the layer outline) instead of code, so the agent can read the sections one by one. Ask for a child frame, or have the agent pass forceCode to get code for the whole node.

Tips

• Use auto layout in Figma where you can. It maps directly to rows, columns and flex.
• Name your layers. Names show up in the code and help the agent pick widget names.
• Map shared components with Code Connect so instances become your own components.
• Ask the agent to compare its result with get_screenshot when the details matter.