From Figma to Production in Six Weeks: The Design-to-Code Pipeline We Use to Ship Flutter Apps

Every Flutter team has the same broken ritual. The designer finishes a beautiful Figma file. The developer opens it, stares at a spacing value of "14.3px", sighs, and rebuilds the UI from scratch. Three weeks later, the product ships with colors and paddings that don't match the design. The designer files a bug. The developer pushes back. Trust breaks down. The next project is worse.

This is solvable. Over the last two years, we've shipped more than twenty production Flutter apps at Xenotix Labs, and we've built a design-to-code pipeline that gets us from final Figma to staging build in six working weeks on most projects. Not because our designers and developers are faster than yours — they aren't — but because the handoff is engineered, not improvised.

This is the pipeline. If you're a founder tired of design drift, or a developer tired of rebuilding the same components from scratch, or a designer tired of being told "it'll be fine in development", this is for you.

The Core Principle: Design Tokens Are a Contract

Most teams treat Figma files as a picture of the app. That's the wrong mental model. A Figma file is a contract between design and engineering. Contracts are machine-readable. Pictures aren't.

Before we start any new project at Xenotix Labs, we spend three days — not more, not less — on what we call the token foundation. This is a Figma library that defines:

Color tokens: never named Red_500. Always named by role: color/surface/primary, color/border/danger, color/text/on-inverse. The designer picks the hex; the role is what the developer consumes.
Spacing scale: a rigid 4-point or 8-point grid. No "14px" spacing allowed, ever. If designers need 14, they pick 12 or 16.
Typography ramp: 6–8 text styles, each with font family, weight, size, line-height, and letter-spacing. Named by role (text/heading/large, text/body/default).
Radius and elevation scales: same rigor. Discrete steps, named by role.

This foundation takes three days because most design teams have never built one, and most dev teams have never asked for one. Once it exists, the handoff becomes deterministic.

Step 1: Figma to Tokens Studio to JSON

We use the Tokens Studio plugin for Figma to export our tokens as JSON. The output looks like this:

{
  "color": {
    "surface": { "primary": { "value": "#0F172A" } },
    "text": { "on-inverse": { "value": "#F8FAFC" } }
  },
  "spacing": { "4": { "value": "16" }, "6": { "value": "24" } },
  "radius": { "md": { "value": "12" } }
}

This JSON gets checked into the app's repo, in a folder called design-tokens/. It's version-controlled. It has its own PR review process. Designers can push updates.

Step 2: JSON to Flutter Theme Extensions

We've written a small Dart generator (it's about 200 lines, nothing clever) that takes the tokens JSON and emits strongly-typed Dart code:

class AppColors {
  const AppColors._();
  static const surfacePrimary = Color(0xFF0F172A);
  static const textOnInverse = Color(0xFFF8FAFC);
}

class AppSpacing {
  const AppSpacing._();
  static const s4 = 16.0;
  static const s6 = 24.0;
}

And we register these as a ThemeExtension on the Flutter ThemeData, which means developers can pull tokens out of context like this:

final colors = Theme.of(context).extension<AppColorsExt>();
return Container(color: colors.surfacePrimary);

This is the critical moment. From here on, developers cannot type hex codes into the app code. Our linter catches it. Pull requests get blocked. The only way to add a new color is to add it to the Figma token library, regenerate, and ship.

The outcome: design drift becomes mechanically impossible.

Step 3: Component Library - Built Once, Used Everywhere

After tokens, we build a shared component library in Flutter — around 40 to 60 components, depending on the project. Buttons, input fields, cards, chips, modals, bottom sheets, app bars, typography components. Each one consumes tokens, not raw values.

We version the component library as its own internal package. For a project like Veda Milk (the D2C dairy subscription platform we built), the end-user app and the delivery-boy app both depend on version 1.8.3 of the shared component library. When we update the button component, both apps pick it up on next build. One source of truth.

Developers don't build screens from Figma. They build screens by composing components from the library. If a component they need doesn't exist, they don't invent one — they propose it. It gets added to the library, reviewed by a designer, and then used.

This is the shift that gets us from "twelve weeks" to "six weeks" on most projects. Most Flutter development time gets burned rebuilding buttons, input fields, and cards for the fifth time. Once the component library is solid, developers assemble screens in hours, not days.

Step 4: The Handoff Ritual

Every screen goes through a 15-minute handoff call between the designer and the assigned developer. Not a long meeting. A short, structured one. The developer opens the Figma file. The designer walks them through:

Which components are reused, which are new.
Any states not immediately visible (empty state, error state, loading state, skeleton).
Any animations (we document these in a separate Framer or Principle file, not left to imagination).
The "one weird thing": every screen has one non-obvious interaction. Surfacing it upfront costs 30 seconds and saves two days.

We log this call in a one-page doc in Notion. Developer signs off ("I understand everything here"). Designer signs off ("I've covered everything"). If a bug surfaces later that one of them missed, it becomes a learning moment for the ritual, not a blame moment for the person.

Step 5: The Three-Pass Review

Every screen goes through three reviews before it ships to staging:

Pass 1: Pixel review. Developer takes screenshots of the built screen and overlays them on the Figma frame in Figma Jam or Eagle. Diffs over 2 pixels get fixed. This takes 5 minutes per screen.

Pass 2: Interaction review. Designer plays with the built screen on a real device. Not the simulator. A mid-range Android and an iPhone. This is where you catch "the button hit area is too small" or "the loading shimmer flickers when the screen loads fast."

Pass 3: Production-state review. QA runs the screen through real data — empty lists, 200-character names, missing images, bad network. This is where most Flutter apps visibly fail in App Store reviews. Catching it internally saves a review rejection cycle.

Step 6: The Continuous Design QA Loop

Once the app is in staging, we run a weekly Design QA pass. The designer opens the app for an hour, notes everything that feels off, and files tickets. These tickets are labeled design-qa, tagged to the designer and a developer, and don't count against the feature backlog — they're treated as debt, paid down every sprint.

This is how we avoid the classic pattern where the app ships and then feels 80% right for the rest of its life. Design QA is a practice, not an event.

The Tech Stack That Makes This Possible

For anyone trying to build this pipeline:

Design tooling: Figma + Tokens Studio plugin + Storybook-equivalent (we use Widgetbook for Flutter).
Code tooling: Dart token generator, Flutter ThemeExtension, strict linter rules (avoid_hardcoded_colors), Melos for monorepo packages.
Review tooling: Figma Jam for pixel diff overlays, Eagle for screenshot comparisons, Notion for handoff docs.
CI/CD: Every PR runs a visual diff test (we use golden tests) that flags any screen where pixels have shifted without an accompanying design update.

None of these tools are exotic. The discipline is what's rare.

What Six Weeks Looks Like in Practice

To make this concrete, here's the timeline for a typical Xenotix Labs project — say, a two-sided marketplace mobile app:

Week 1: Token foundation + component library skeleton + Figma sign-off on flows.
Week 2: 70% of components built and in Widgetbook. Screens start getting composed.
Week 3: First 12 screens complete, first pixel review pass, first interaction review.
Week 4: Remaining screens, state handling, empty/error/loading states.
Week 5: Integration with backend APIs, real data testing, production-state review.
Week 6: Design QA pass, App Store / Play Store submissions, staging-to-production migration.

Six weeks. Two designers, two developers, one QA. A shippable production app that matches the Figma file within 2 pixels on every screen.

The Real Unlock Isn't Speed - It's Trust

The pipeline above sounds like it's about speed. It isn't. It's about trust.

When designers and developers trust each other, they ship better work. When they don't, they ship compromised work and gradually dislike each other. The pipeline isn't there to make development faster. It's there to remove the friction points that cause teams to distrust each other.

Six weeks is a byproduct. The product is mutual respect.

Where to Go From Here

If you're a founder looking at a Flutter build and wondering how to avoid the design-drift disaster, there are three things you can do tomorrow:

Make the design tokens a contract. Don't start coding until the token library is locked.
Build the component library before the first screen. It feels slow on week one. It pays back threefold by week three.
Institute the three-pass review. Pixel, interaction, production-state. Every screen. No exceptions.

If you want the pipeline built for you — or you're looking at a product roadmap and want a team that already operates this way — you can browse our full-stack development services or read how we've applied this to 30+ production apps including Veda Milk, Cricket Winner, and Nursery Wallah. If you're hiring in India and want to skip the ramp-up, we also offer an option to hire React Native developers in India who already know this workflow.

Good design-to-code is engineered. The teams that get it right aren't smarter than the ones that don't. They're just a little more disciplined about the contract.

Ujjawal Tyagi is the founder of Xenotix Labs, a product engineering studio building mobile apps, web platforms, and AI solutions for startups. His team has shipped 30+ production apps using the Figma-to-Flutter pipeline described above.

推荐订阅源

DEV Community