Figma

The single most important step happens in Figma before you ever touch FlutterFlow. Open your Figma file and check each screen frame you plan to import. Every layout container — cards, rows of buttons, form fields, lists — should use Figma's Auto Layout (the pink stacking icon in the right panel). Auto Layout in Figma is what tells the importer 'these elements are in a horizontal row' or 'these stack vertically' — without it, the importer has no structural information and must place everything at absolute pixel coordinates, producing a fixed-position Stack in FlutterFlow that overflows on different screen sizes. To add Auto Layout to a frame or group, select it and press Shift+A, or right-click → Add Auto Layout. Set the direction (horizontal or vertical), spacing, and padding. Also clean up your layer names: double-click each layer in the Figma panel and give it a descriptive name (ProfileAvatar, LoginButton, EmailInputField) — these names carry over as widget names in FlutterFlow, making the imported tree much easier to navigate. If your design file was built without Auto Layout, the quickest path is to spend 30–60 minutes restructuring the key screens before importing rather than cleaning up the resulting FlutterFlow widget tree after a messy import. Finally, ensure all image assets are embedded in the Figma file rather than linked from external sources — linked images may not resolve during import.

In your FlutterFlow project, look for the Figma import option. As of recent FlutterFlow versions, this is accessible from the left navigation bar — look for an import or 'Add from Figma' option, sometimes inside the Pages panel or a dedicated Import menu. FlutterFlow has revised this UI in past product updates, so if you don't see it in the expected place, check the FlutterFlow documentation for the current import path or look for a 'Figma' entry in the project settings. When you open the Figma import dialog, it will ask you to connect your Figma account. Click 'Connect Figma' and complete the OAuth authorization on Figma's site — you're granting FlutterFlow read access to your Figma files. Once connected, you'll see a file browser showing your Figma files and projects. Navigate to the file containing the screens you want to import. The importer shows a preview of available frames — select the specific frames (screens) you want to bring into FlutterFlow rather than importing the entire file at once. Importing one or two screens at a time makes it much easier to review and clean up the resulting widget tree before importing the next batch. Large Figma files with 50+ frames can time out or import partially, so the screen-by-screen approach is more reliable.

Select the frames you want to import — start with one or two screens to verify the quality before importing all 15. Click 'Import' (or 'Import Selected'). FlutterFlow will process the Figma file and convert the selected frames into FlutterFlow pages with a widget tree. This takes 10–60 seconds per screen depending on complexity. When the import completes, the new pages appear in your Pages list in the left navigation. Click on the first imported page to view it in the canvas. What you should see is a widget tree in the left panel that mirrors the layer structure of your Figma frame, with Row and Column widgets where you had Auto Layout frames, Text widgets with the correct content, and Container widgets where you had rectangles or shapes. If instead you see a flat list of many Positioned widgets inside a Stack, that means some elements were using absolute positioning in Figma — those specific sections need manual restructuring. The canvas preview will show the imported design — it may not be pixel-perfect, especially around fonts (if Figma uses a font not available in FlutterFlow's font library, a fallback renders instead), shadows, gradients, or complex blend modes. These visual differences are expected and need to be manually adjusted.

The import gives you a structural scaffold, not a finished screen. Plan to spend 20–40 minutes on cleanup per imported screen. Common issues to fix: First, overflow — imported widgets sometimes have fixed pixel heights that work on the Figma canvas (which has no real device constraints) but overflow on a real 375px-wide phone. Click each Column and Container, check the height settings (in the Properties panel on the right), and switch fixed pixel heights to 'Expand' or '% height' where appropriate. Second, font availability — if the Figma design uses a font not in FlutterFlow's Google Fonts library, you'll see a fallback. Go to the Text widget properties, open the font selector, and either choose the closest Google Font available or upload the custom font asset via Settings → Design System → Custom Fonts. Third, repeated elements — if the import created duplicate widgets for list items or cards, convert them to a FlutterFlow Component (right-click the widget → Convert to Component) so you can edit once and update everywhere. Fourth, images — check that image Container widgets are set to 'Network' or 'Asset' as appropriate, because the import may leave placeholder backgrounds that need to be wired to real data.

A Figma design system has color styles, text styles, and effect styles. To keep your imported screens and any new screens you build in FlutterFlow visually consistent, transfer those design tokens into FlutterFlow's Design System. Open FlutterFlow's Design System by clicking the palette icon in the left nav or going to Settings → Design System (the exact path depends on your FlutterFlow version). In the Colors section, add a named color for each Figma color style you use in the design — for example, add 'Primary' with the hex value from Figma's primary color, 'Surface' for the background color, 'TextPrimary' for the main text color. In the Typography section, add text styles matching Figma's text styles — Heading1, Body, Caption — with the same font family, size, weight, and line height. Once these theme tokens exist, go back through the imported widget tree and replace hardcoded colors and font sizes on each widget with the theme tokens. This takes extra time upfront but means that if the brand color changes, you update it once in the Design System and it propagates to every screen — both imported and hand-built.

Imported screens are static — buttons don't navigate, forms don't submit, lists don't load data. This step transforms the visual import into a working app. Start with navigation: click each Button widget in the imported screens, open the Actions panel on the right, and add a 'Navigate To' action pointing at the next screen. For a login button, this might navigate to the home screen; for a back arrow, it navigates back. Next, identify what data each screen needs to display. A profile screen probably needs a logged-in user's name, avatar URL, and bio — these come from your Supabase or Firebase backend. Connect FlutterFlow's Supabase or Firebase integration (Settings → Integrations), then use Backend Queries to load the right records and bind widget properties (Text content, Image URL) to the returned data fields. For forms — sign up, profile edit, booking creation — wire each TextField to an App State variable, then add a 'Backend Call' action to the submit button that sends the data to your backend. Finally, add any conditional visibility logic: show a loading spinner while data is loading, show an 'empty state' widget if the list returns no results, or hide admin buttons for non-admin users. This logic layer is built entirely in FlutterFlow's Action Flow Editor — click any widget, open Actions, and chain the logic visually.