Figma to Flutter
A phone design in Figma is drawn on one frame size. The app will run on a small Android handset, a tall iPhone with a notch, a folding phone and a tablet held sideways, with the system font set larger than the designer ever imagined.
We build Flutter interfaces from Figma files with that range in mind. Flutter draws every pixel itself, so the design can be followed closely on both platforms from one codebase. The work is in making it bend without breaking.
How Figma structure becomes a widget tree
Flutter layout and Figma auto layout think alike, which helps.
Auto layout to Row and Column
Direction, gap, padding and alignment map onto Row, Column, Padding and their alignment settings. Hug and fill become intrinsic size and Expanded.
Components to widget classes
Each Figma component becomes one widget with constructor parameters for its variants. Enums replace variant names.
Absolute layers to Stack
Badges and overlapping avatars use Stack with Positioned. We keep this rare, because fixed offsets do not adapt.
Lists to builders
A list drawn with five rows becomes a lazily built list that handles five thousand, plus the empty and loading cases.
Vectors and images
Icons are shipped as SVG or an icon font. Photographs are supplied at one, two and three times density.
One theme object, not colours scattered through screens
No widget names a colour or a font size directly.
ColorScheme
Figma colour variables are mapped to the roles in the colour scheme: primary, surface, error and their on-colours.
TextTheme
Text styles from the file become the named styles of the text theme, with the font files bundled in the app.
Theme extensions
Tokens with no Material equivalent, such as a spacing scale or brand gradients, live in a theme extension so they switch with the theme.
Dark theme
If the file has a dark mode, a second theme is built from it and follows the system setting.
Where iOS and Android users expect different things
One design can serve both, but a few behaviours should follow the platform.
Going back
iOS users swipe from the left edge. Android users use the system back gesture. Both must work on every screen, including inside modal sheets.
Safe areas
Content stays clear of the notch, the home indicator and the status bar on each device.
Scrolling feel
iOS bounces at the end of a list and Android stretches. Flutter applies each by default and we leave it that way.
Pickers and dialogs
Date pickers, alerts and share sheets can use the platform style even inside a custom design. We ask which you prefer.
Tablets
A bottom navigation bar on a phone usually becomes a side rail on a tablet, and single-column lists become list and detail side by side.
What the app file should contain
App designs need more states per screen than web pages.
- A small phone frame and a large phone frame
- A tablet frame for key screens, if tablets are in scope
- Every screen with keyboard open, where there is a text field
- Empty, loading, error and offline states
- Pressed and disabled states for buttons and rows
- App icon, splash screen and notification icon artwork
- Prototype links showing which transition each screen uses
- Font files with a licence that covers app embedding
How the screens get built
You hold a build on your own phone early.
Theme and tokens
Colours, type and spacing are in place before any screen.
Widget catalogue
Shared widgets are built and shown in a catalogue app where each state can be viewed alone.
Screens and navigation
Screens are assembled and connected with routes, using sample data until your API is ready.
Device comparison
Screens are compared with Figma on the agreed device sizes, with large system text switched on. Differences are listed for your decision.
Golden tests
Reference images of key widgets are stored so later changes that alter the look are caught.
Before starting an app build
Can Flutter web and desktop use the same widgets?
Mostly, yes. Pointer hover, keyboard shortcuts and wide windows need extra design, so tell us early if those targets matter.
Do you connect the screens to our back end?
Yes, as a separate item in the estimate. Interface and data layers are kept apart so either can change.
What about screen readers?
Widgets carry semantic labels and are tried with VoiceOver and TalkBack. Formal accessibility audit is done by your auditor.
Tell us which devices matter
Share the Figma file and say which phones and tablets your users have. We reply within one business day.