Skip to content
Agentic Coding Toolkit

Figma to Flutter

/act-figma-to-flutter is an experimental ACT skill for Flutter work based on Figma’s official MCP server.

It is not a blind “paste a Figma URL and generate code” workflow. The skill starts in inspection mode, reports what the selected design appears to represent, asks clarification questions, and only proceeds after you confirm the intended scope.

Why is this needed?

Section titled “Why is this needed?”

Figma’s official MCP server exposes design context in Figma’s language: nodes, frames, variants, constraints, and tokens. Flutter implementation work uses a different language: widgets, layout constraints, state, semantics, assets, and themes.

ACT’s Figma-to-Flutter skill focuses on this translation step. It helps agents infer semantic meaning from static designs, identify where the design is ambiguous, and ask the questions needed before mapping the design to Flutter code.

When to use it

Section titled “When to use it”

Use this workflow when you want to:

  • implement a Flutter component from a Figma component or frame
  • translate a screen mockup into a Flutter screen
  • inspect a design before writing a spec or implementation plan
  • identify which assets should be exported and which parts should be built with Flutter primitives
  • decide whether repeated frames are states of one component or separate screens

Avoid pointing the skill at an entire Figma page or large design file. Select the smallest relevant node: one component, one screen, or one focused state group.

Setup

Section titled “Setup”

You can ask ACT for MCP server setup instructions directly:

Terminal window
/act-figma-to-flutter setup

Here’s how to configure the MCP server in your AI client:

OpenCode uses the official Figma Desktop MCP server.

Add this server to ~/.config/opencode/opencode.json:

{
  "mcp": {
    "figma": {
      "type": "remote",
      "url": "http://127.0.0.1:3845/mcp",
      "enabled": true
    }
  }
}

Then in Figma Desktop:

  1. Open the target design file.
  2. Switch to Dev Mode with Shift+D.
  3. Select the target layer or frame.
  4. Use “Copy URL for selected layer” when you want to pass a URL to the skill.
  5. In the MCP server section, enable the desktop MCP server.
  6. Restart OpenCode after changing MCP configuration.

Figma Desktop must stay open while the agent is using the local MCP endpoint.

Run the workflow

Section titled “Run the workflow”

Start with a selected Figma node or a Figma URL that includes a node-id query parameter.

Terminal window
/act-figma-to-flutter https://www.figma.com/design/<file>/<name>?node-id=123-456

You can also ask the skill to inspect the currently selected node if your client exposes that through the Figma MCP integration:

Terminal window
/act-figma-to-flutter selected Figma node

The first response should be an initial Figma report, not code. The report should cover:

  • the node name, type, and dimensions
  • whether the design appears to be a screen, component, component set, state matrix, flow, sample data, decoration, or interactive UI
  • the likely implementation scope and what should stay out of scope
  • layout, spacing, typography, color, effects, and responsive risks
  • component states such as focused, error, disabled, loading, selected, or active
  • likely asset export candidates
  • how the design maps to Flutter widgets, state, validation, and theming

After reviewing the report, confirm the scope or answer the clarification questions before asking the agent to implement anything.

Clarify before coding

Section titled “Clarify before coding”

Figma files often include examples, decoration, and state matrices that should not be copied literally. Before implementation, make sure the agent has resolved:

  • Scope - whether to build only the selected component or include surrounding phone chrome, sample screens, and decoration
  • States - whether repeated frames are separate destinations or states of one widget
  • Data - whether visible values are sample content, real defaults, or runtime data
  • Validation - required fields, error timing, helper text, disabled behavior, and CTA enablement
  • Assets - which icons and images need export, and whether they should be SVG, PNG, or Flutter primitives
  • Theme - which colors, text styles, radii, spacing, and control states belong in the project theme
  • Target project - which Flutter project path and feature area the agent should modify

Flutter implementation guidance

Section titled “Flutter implementation guidance”

Don’t try to convert the Figma design to Flutter code in one shot. Think logically through the steps you’d follow and iterate while asking the agent to surface decisions, so you remain in control.

For example, if you want to fully adopt a mobile app design system such as this, you might run multiple sessions:

  • Session 1: Establish initial theme (color palette, typography)
  • Session 2: Create a component library (buttons, checkboxes, text fields, etc.)
  • Session 3: Implement a specific screen or complex form

Within each session, you would inspect a specific node, agree on the scope, figure out the mapping from design to code, and iterate until you’re happy with the result.

This kind of UI work is usually best done directly with /act-figma-to-flutter, in a focused session where you can inspect the output and iterate quickly.

Once the standalone UI is working, start a fresh session and resume the regular ACT workflow to integrate it with the rest of the app. That is where /act-workflow-spec, /act-workflow-plan, and /act-workflow-work are more useful: connecting the UI to app state, navigation, persistence, tests, and production conventions.

Troubleshooting

Section titled “Troubleshooting”

Run /mcp in your AI client to check if the MCP server is available and connected.

  • If no Figma tools appear, restart your AI client after changing MCP configuration.
  • If remote MCP authentication is pending, open the client’s MCP or plugin UI and complete Figma OAuth.
  • If OpenCode cannot reach Figma, confirm Figma Desktop is open, Dev Mode is active, and the desktop MCP server is enabled.
  • If the target file is unavailable, open it in Figma Desktop or confirm the authenticated Figma account has access.
  • If the agent inspects too much design context, stop and rerun the skill with a smaller node.
Section titled “Related”