"Figma to Flutter" covers very different products. Some generate a page inside a visual app builder, some write Dart files into your repository, some hand you a snippet, and the manual route gives you only assets. Choosing a tool is mostly choosing which of those outputs you want to own.

How this was researched: everything below comes from each vendor's public documentation, pricing pages and README files as of November 2026, linked inline. It is not based on hands-on testing of paid plans. Prices and limits change often, so check the linked page before paying. Flutter Shape Builder, which this site publishes, appears in one section for the narrow job it does.

The short version

  • Building the app in a visual builder? FlutterFlow imports Figma themes on every plan and Figma frames on its top plan.
  • Want generated Flutter files in your own project? Locofy, Builder.io Visual Copilot and Codia list Flutter as an output.
  • Want something free and inspectable? The open-source Figma to Code plugin outputs Flutter.
  • Already using an AI coding agent? Figma's MCP server feeds it design data, and you ask for Flutter.
  • Want full control? Export SVG assets, render them with flutter_svg, and write the layout yourself.

FlutterFlow: theme import and AI frame import

FlutterFlow has two Figma features. Theme import pulls colours and typography from a Figma file for you to map to your project's theme. Frame import takes a Figma frame URL, and FlutterFlow's AI analyses the design to generate a page that closely matches the mockup. You preview the result before adding it to the project.

  • Output: a page in FlutterFlow's visual editor, not a standalone Dart file.
  • Code export: the plan comparison lists source-code download on Basic and above, and push to GitHub on Pro and above. Pushes go to a flutterflow branch, and the GitHub docs warn that direct changes there "will be overwritten by the next push", so edits belong in a separate branch.
  • Layout: generated by AI. The docs don't describe how Figma constraints become Flutter layout.
  • Pricing: theme import is on every plan, including Free. Frame import is listed only on Max, at 100 imports a month, and the pricing page lists Max at $150 a month billed monthly.
  • Main limitation: the docs state that it "doesn't support importing SVG elements from Figma frames". You add SVGs afterwards or swap them for PNG or JPEG in Figma.

Locofy

Locofy's plugin quickstart lists Flutter as a mobile target alongside React Native, Swift and Jetpack Compose, and its site marks Figma to Flutter as new. The plugin converts your current selection (up to five designs at a time) and tags elements such as buttons, inputs and images.

  • Output: a generated Flutter project, staged in Locofy Builder for review before export.
  • Code export: the Locofy CLI runs locofy pull to merge generated code into an existing project, keeping your structure and reusing your components. An MCP server is offered for AI editors. GitHub integration is listed under the Enterprise plan.
  • Layout: Locofy applies responsiveness rules, including multiple breakpoints when frames are named consistently, such as "Homepage - Desktop" and "Homepage - Mobile".
  • Pricing: token based. The pricing page lists a Free plan with Hobby features for 7 days and 2,000 LDMtokens, which then auto-converts to Hobby at $40 a month. Pro is $80 a month with 4,000 tokens. Hobby allows 10 frames per project, Pro 25. Hobby notes that your content may be used to improve the platform; Pro states it never is.
  • Main limitation: results depend on file structure. Locofy's FAQ says grouping layers, clear layer names and Auto Layout "can significantly improve the quality of the generated code".

Builder.io Visual Copilot

Builder's Figma-to-code page lists Flutter among its mobile outputs. Its Figma to Flutter guide describes the flow: select layers in the Visual Copilot Figma plugin, click Export Design, and run the generated command in your terminal.

  • Output: "Flutter widgets and Dart code", written into your project.
  • Code export: the CLI docs say it detects your framework and adds files to the right directories. A .builderrules file guides it towards your existing components and styles, and repeating the process syncs later design updates.
  • Layout: the Flutter guide says designs don't need Auto Layout. The CLI docs still recommend it "for best results".
  • Pricing: the pricing page lists a free plan with 60 credits a month and per-user paid plans. See the page for current figures.
  • Main limitation: the Flutter guide, from March 2025, calls the CLI workflow "currently in beta". The current CLI docs mention neither Flutter nor a beta label, so confirm Flutter's status before relying on it.

Codia

Codia's design-to-code page lists Flutter among its native targets, with iOS, Android, React Native and macOS. You select up to 20 frames, and each becomes a page.

  • Output: Flutter source with run instructions. In-plugin previews cover web targets only.
  • Code export: copy, or download a ZIP.
  • Layout: Auto Layout "becomes flexbox or native stacks instead of fixed positions".
  • Pricing: a free plan with paid upgrades. See the plugin pricing page.
  • Main limitation: Codia calls its output "a strong first implementation pass". Engineers still add data, state and business logic, and review responsive behaviour and accessibility.

Figma's own options

Dev Mode code snippets

Dev Mode's built-in code snippets cover CSS, SwiftUI or UIKit, and Compose or XML. Flutter is not among them, though codegen plugins can add languages to that dropdown. Dev Mode is available on the Professional, Education, Organization, Government and Enterprise plans, not the free Starter plan. It is still useful for the manual route, since spacing, colour and type values are there to read.

Figma's post on codegen sets expectations plainly: "codegen is not a hands-off replacement for translating design to code."

The Figma MCP server

The Figma MCP server gives AI coding agents structured design data. Its get_design_context tool returns a "React + Tailwind representation" described as "a starting point that your AI assistant can translate into any framework or code style, depending on your prompt". Flutter isn't named, so Flutter output depends on your prompt, project rules and agent.

  • Limits: Starter plan users and View or Collab seats get up to 6 tool calls a month. Dev and Full seats on paid plans get per-minute rate limits.
  • Main limitation: the server supplies design data, not Flutter code. Quality is whatever your agent produces.

Figma to Code (open-source plugin)

Figma to Code is a GPL-3.0 licensed plugin that Figma's codegen post describes as a free, open source community tool. For Flutter it outputs a full app, a stateless widget or a snippet. It also targets HTML, Tailwind and SwiftUI.

  • Layout: the README says it handles mixed flow and absolute positioning, including Auto Layout, nested frames and groups.
  • Main limitation: "Vector support is optional for web and limited in native targets." It runs "no AI inference" and has "no codebase connection". Its own advice: "Treat the result as editable starter code and review it before shipping."

The manual route: export assets, write the widgets

Here you translate the layout by hand and export only what widgets can't rebuild: icons, illustrations and logos.

  1. Select the layer and use Copy as SVG or the export panel (Figma help). Figma exports SVG at 1x only, and text is exported as outlined glyphs by default.
  2. Render the files with flutter_svg, published by flutter.dev. Its README notes that CSS "is not fully supported", so prefer presentation attributes. Its vector_graphics backend can also precompile SVGs to a binary format.
  3. Write the layout yourself, reading values from Dev Mode.
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class PlanCard extends StatelessWidget {
  const PlanCard({super.key, required this.title, required this.price});

  final String title;
  final String price;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Row(
          children: [
            SvgPicture.asset(
              'assets/icons/storage.svg',
              width: 40,
              height: 40,
              colorFilter: ColorFilter.mode(
                theme.colorScheme.primary,
                BlendMode.srcIn,
              ),
              semanticsLabel: 'Storage plan',
            ),
            const SizedBox(width: 16),
            Expanded(
              child: Text(title, style: theme.textTheme.titleMedium),
            ),
            Text(price, style: theme.textTheme.titleMedium),
          ],
        ),
      ),
    );
  }
}

Only the icon came from Figma. Width comes from Expanded rather than a fixed number, and colour and type come from the theme, so the card adapts to screen size and dark mode. Register the folder in pubspec.yaml:

flutter:
  assets:
    - assets/icons/
  • Main limitation: it is the slowest route, and every layout decision is yours. In return, there is nothing to regenerate or untangle later.

Where Flutter Shape Builder fits

Flutter Shape Builder is not a Figma converter. It doesn't produce screens, layout, text or images. It covers one narrow step: custom shapes.

  • From Figma: Copy as SVG, paste it into the SVG importer, and get the paths as Flutter Path code in a CustomPainter (painter class, StatelessWidget wrapper or runnable app). The painter scales the shape to fit the widget.
  • By hand: draw the outline with the pen tool, primitives and boolean operations. The wave and blob generators also export CustomClipper code.
  • Limitations: one shape or decoration at a time. Gradients, text and embedded images in an imported SVG are not carried over.
  • Pricing: free, in the browser.

Comparison table

Output Exportable, editable code Layout handling (per vendor docs) Price / free tier Main limitation
FlutterFlow Pages in FlutterFlow; theme import Download on Basic+, GitHub on Pro+ AI-generated from the frame Theme import free; frame import Max only No SVG elements in frame import
Locofy Flutter project from selected frames Yes: Builder, CLI merge, MCP Responsiveness rules, breakpoints via frame names 7-day trial, then $40/month Token and frames-per-project limits
Builder.io Visual Copilot Flutter widgets in your repo Yes, via CLI Auto Layout recommended Free plan (60 credits/month) Flutter CLI described as beta (2025 guide)
Codia Flutter source per frame Copy or ZIP Auto Layout to native stacks Free plan; see pricing No in-plugin Flutter preview
Figma to Code Snippet, widget or app file Copy; GPL-3.0 Flow and absolute positioning Free Limited vector support in native targets
Figma Dev Mode Inspect values; no Flutter snippets n/a n/a Not on free Starter plan Flutter needs a plugin
Figma MCP + AI agent Whatever the agent writes Yes, in your repo Depends on prompt and rules 6 calls/month on Starter Quality depends on the agent
Manual + flutter_svg SVG assets; you write widgets Yes Yours Free Slowest
Flutter Shape Builder CustomPainter / CustomClipper for one shape Copy Scales the path to the widget Free Shapes only, no screens

What generated code is good and bad at

Going only by what the vendors themselves say:

Where it does well

  • Structure from Auto Layout. Locofy, Builder.io and Codia all tie output quality to well-structured files with Auto Layout.
  • A first pass of static UI. Codia calls its output "a strong first implementation pass"; Figma to Code calls its output "editable starter code".
  • Design tokens. FlutterFlow's theme import brings colours and typography in on every plan.

Where it needs help

  • Vectors. FlutterFlow's frame import skips SVG elements, and Figma to Code's vector support is limited in native targets.
  • State, data, responsiveness and accessibility. Codia says engineers still add or review all of these.
  • Round trips. FlutterFlow overwrites its own GitHub branch on each push, and Locofy's CLI docs don't say how manual edits are treated on a later pull.

Practical advice

  1. Prepare the Figma file. Use Auto Layout, components and clear layer names. Codia notes that layer names carry over into component and class names.
  2. Convert one screen first and review the code like a pull request before committing to a tool.
  3. Review layout constraints. Look for fixed widths and heights on containers that should stretch, and test a narrow phone, a tablet and a larger text scale. Use Expanded, Flexible or LayoutBuilder where content should adapt.
  4. Move colours and text styles into ThemeData if the output repeats literal values.
  5. Keep custom painting hand-written. Export icons as SVG, and turn custom outlines into a Path you control with CustomPainter, CustomClipper or a ShapeBorder (compared here).
  6. Decide who owns the code. Either the tool stays the source of truth and you regenerate, or you export once and edit freely. Mixing the two is how hand edits get overwritten, as FlutterFlow's GitHub docs warn.

Tools not included

  • DhiWise, which now operates as Rocket.new, discontinued its Figma import on 29 September 2026, according to the Rocket changelog.
  • Anima lists HTML, React, CSS, Vue, Tailwind and other web outputs on its Figma page, and its API docs offer react or html. Flutter is not listed.

Related articles