Importing from Figma

Base44 connects to Figma so you can build directly from your designs. Import a Figma frame when starting a new app, or add pages from Figma to an existing app at any point during development.

---

​

Start a new app from Figma

Use Import from Figma on the home screen to turn a Figma frame into a new Base44 app. Base44 recreates the layout, structure, and visual style of your design as a starting point. To start a new app from a Figma design:

1. Go to Base44.
2. Click the + icon in the prompt box.
3. Click Import from Figma.
4. Click Connect to Figma.
5. Follow the on-screen instructions to give Base44 access to Figma.
6. Paste your Figma link and click Generate.

The import focuses on the selected frame or section. Other parts of the Figma file are not included unless you import them separately.

---

​

Add a page from Figma

Once your app is in the app editor, you can add Figma frames as new pages at any point. You are not limited to the initial import. Editor access is required to add pages from Figma. Viewers cannot add pages, and you must wait for any active generation to finish before adding a page. To add a page from Figma:

1. Open your app in the app editor.
2. In the AI chat, click the + icon and select Add page from Figma.
3. In Figma, right-click the frame or section you want to import.
4. Choose “Copy/Paste as”, then select “Copy link to selection”.
5. Paste the link into the dialog and click Add page.

---

​

Figma import guidelines

Preparing your Figma file before you import helps Base44 read your design and recreate it as a clean, accurate layout. Follow these guidelines to get the best results.

​

Structuring your Figma layout

A clear structure in Figma makes it easier for Base44 to build a responsive layout that matches your intent.

• Divide the page into logical sections: Wrap related content (for example, a hero, feature row, or footer) inside frames or groups so each area of the page is clearly defined.
• Use auto layout for hierarchy: Apply Auto Layout to components such as cards, navigation bars, and repeating content blocks. For example, an info card with an image, title and description should be grouped as Frame or Group, or preferably Auto Layout. This helps Base44 understand how elements relate to each other and how they should resize.
  
• Keep nesting meaningful: Group elements that belong together (for example, image + title + description in a card), and avoid deep, unnecessary nesting that does not reflect the visual structure.
  
• Align and space consistently: Use consistent padding, gaps, and alignment inside your frames so Base44 can preserve your spacing and hierarchy.

​

Working with vectors and shapes

Cleaning up vector elements before import makes positioning and rendering more accurate. Flattening and simplifying vectors reduces surprises in how elements align, scale, and render once they are in Base44.

• Flatten complex vectors: If a vector is built from many separate paths (for example, an icon made from multiple shapes), flatten it into a single vector whenever you can.
  
• Outline strokes before flattening: For lines, circles, stars, and similar shapes:
  • Use Outline Stroke then flatten the result into a single vector element.
• Remove hidden elements: Delete layers that are completely hidden or pushed far off canvas so they do not interfere with the imported layout.
  
• Simplify fills: If an element has multiple fills, keep only what you actually need. Base44 only imports the last fill on an element.
  

​

Fonts, effects, and other limitations

Some parts of your Figma design are adapted during import so the resulting layout works reliably in Base44.

• Fonts:
  • Only Google Fonts are fully supported.
  • Custom fonts are replaced with a default font during import. You can update typography later inside Base44.
• Design effects that may not be preserved exactly:
  • Image filters
  • Multiple background layers on a single element
  • Variables and variable-driven styles
• Layout refinements:
  • Fine-tune spacing, responsiveness, and interactions after import using the AI chat or Visual Edit mode.
  • If something does not look right, adjust the structure directly in Base44 or update your Figma file and import again from a cleaner frame.

​

Building the rest of your app

Once your Figma frame is imported, you can treat the new page as the foundation for a full app or website.

• Use the imported page as your home page and main reference for structure, layout, and visual language.
• Ask the AI chat to:
  • Identify which additional pages are missing (for example, About, Pricing, Blog, or Contact).
  • Create new pages that follow the same design language and layout principles.
  • Connect buttons, menus, and links on the home page to the new internal pages.

You can use a prompt like:

Review the home page carefully, including both its content and its design style. Use the home page as the main reference to understand the website's structure and design language. Identify which additional pages are needed to create a complete website. Create the missing pages while maintaining the same design language, layout principles, and visual style as the home page, so they feel like a direct continuation and not disconnected. When finished, return to the home page and connect all relevant buttons and links so each one navigates to the appropriate internal page.