Skip to content

Import from Figma Frame #384

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Import from Figma Frame #384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f8121d5
Import from Figma
pinkeshmars Jun 7, 2025
ec00bbc
Merge branch 'main' into feature/import-figma-frame
pinkeshmars Jun 7, 2025
2406e3f
Update arcade
pinkeshmars Jun 7, 2025
1e6da8e
Merge branch 'feature/import-figma-frame' of https://github.com/Flutt…
pinkeshmars Jun 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified docs/intro/ff-ui/imgs/toolbar.avif
View file
Open in desktop
Binary file not shown.
193 changes: 18 additions & 175 deletions docs/intro/ff-ui/toolbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ The Toolbar, located at the top of the app builder, provides easy access to nume

![toolbar](imgs/toolbar.avif)

## Project info
## Project Info

Hovering over this section reveals the essential information about your project. Here, you can easily check the project name, branch name, environment name and the current version of FlutterFlow that you're using, along with its release date. Additionally, it shows the Flutter version that your project is currently running on.

## Help
## Help Menu

From here, you will get access to essential resource links that will come in handy while building your apps.

Expand All @@ -31,7 +31,7 @@ From here, you will get access to essential resource links that will come in han
8. **Current Status/Known Issues**: We want to keep you informed about the current status of FlutterFlow and provide updates regarding any known issues. We aim to ensure transparency and keep you in the loop about the platform's performance and potential issues.
9. **Show/Hide Chat**: You can use this option to show or hide the chat button at the bottom right of the app builder.

## Keyboard shortcuts
## Keyboard Shortcuts

With keyboard shortcuts, you can perform common actions related to widgets and run your project in Test or Run mode with just a few keystrokes, saving you time and effort. Select this option to see all the shortcuts.

Expand All @@ -43,168 +43,12 @@ The Command Palette makes it easy to find and use things in the App Builder. Ope

![command-palette.avif](imgs/command-palette.avif)

## AI Tools
FlutterFlow AI Tools is a powerful set of features designed to speed up app development by leveraging artificial intelligence. These tools allow you to quickly generate app elements such as pages, components, and even entire page layouts with relevant widgets automatically populated.

### New Page Creation
Instantly create pages in your app from a prompt. To create a page, open the **AI Tools** menu from the Toolbar. Next, select **New Page Creation** and enter a description for your page.

<div style={{
position: 'relative',
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/jAH6Ar0X8fTIk3PTRNej?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

### New Component Creation
Aside from pages, you can also create [Components](/resources/ui/components) directly from a prompt. To create a component, open the **AI Tools** menu from the Toolbar. Next, select **New Component Creation** and enter a description for your UI component.

<div style={{
position: 'relative',
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/qTqZVHv7EOjw0Gcfp697?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

### Sketch To Component
Sketch to Component allows you to add a sketch of your [Component](/resources/ui/components). This sketch can include outlines of widgets or layouts to incorporate, and it can also include annotations that tell the AI tool more about the design you have in mind.

To create a Component from a sketch, open the **AI Tools** menu from the Toolbar. Next, select **Sketch to Component** and draw directly in the input or upload an image file of your sketch.

<div style={{
position: 'relative',
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/llUMoLjlVutwhBfi5rxH?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

### Page Autocomplete
Page Autocomplete intelligently adds relevant widgets to a page based on the pages’s context, making it easy to complete partially built pages.
The project context includes the existing widgets and design of those widgets, as well as the page's description.

If the page does not have a description, you will be asked to describe what you want the page to contain.

To use Page Autocomplete, open the **AI Tools** menu from the Toolbar. Next, and select **Page Autocomplete** on the page that
you want FlutterFlow AI to complete.

<div style={{
position: 'relative',
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/nI1ECv9gcuY4iurJaWJC?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

## Canvas size

We allow you to visualize and design your app for various mobile, tablet, and desktop devices. The [canvas](../ff-ui/canvas.md) size is defined as width (in pixels) x height (in pixels). This size is determined according to the device selected. To set a custom canvas size, click on the Canvas Size and enter the width and height (in pixels) you want.

<div style={{
position: 'relative',
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'
}}>
<iframe
src="https://demo.arcade.software/6TBNjYNfVDmV4NawxA4f?embed&show_copy_link=true"
title="Sharing a Project with a User"
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>

## Project history

Understand the crucial concepts of project history, such as saving and versioning [here](../../testing-deployment-publishing/branching-collaboration/saving-versioning.md).

## Project comments
## AI Generation History

The **AI Generation History** panel lets you track the status of your AI-generated items. It provides a list of all previously generated pages and components, and you can easily preview them from here.


## Project Comments

This helps you leave your thoughts, opinions, questions, or feedback on a specific widget with your project team or a client. While adding a comment, you can tag users, and they will be able to respond, creating a thread of conversation.

Expand All @@ -214,7 +58,7 @@ To tag users, select the @ symbol and choose the project team member(s).

:::

## Optimizations & Enhancements
## Project Suggestions

We scan and suggest enhancements to elevate your app's design and speed. Imagine having a personal consultant for design and performance dedicated to improving the user experience of your app.

Expand All @@ -230,7 +74,7 @@ You can control what kind of suggestions you would like to receive by clicking o

![Optimization.avif](imgs/Optimization.avif)

## Project issues
## Project Issues

If there are any issues or warnings present in your current project that might result in a build failure or app crash, they will be displayed in this section. You can click this option to view a short description of each issue and navigate to the place where you can fix the issue by clicking on the respective issue.

Expand All @@ -242,11 +86,12 @@ If there are any issues or warnings present in your current project that might r

![Warning-and-errors.avif](imgs/Warning-and-errors.avif)

## Branching

[Branching](../../testing-deployment-publishing/branching-collaboration/branching.md) enables you to create a separate copy of your existing project, allowing you to develop new features without affecting the current functionality.
## Version Control
**Version Control** is a system that tracks changes to your project's files over time, allowing you to revert to previous states if needed. In FlutterFlow, you can utilize [Branching](../../testing-deployment-publishing/branching-collaboration/branching.md) to create a separate copy of your project to build or test features without affecting the main version.

## Developer menu

## Developer Menu
The Developer Menu provides developers with access to tools such as code viewing, GitHub integration, and source code download capabilities.

1. **View Code**: This option lets you display the *Dart* code for all the pages of your FlutterFlow project. You can also take a look at the dependencies being used by the app here.
Expand All @@ -267,9 +112,7 @@ _Connect GitHub Repo_, _Download Code_, and _Download APK_ features requires a [

7. **Refactor Project**: This option opens your FlutterFlow project in a YAML-based file editor, allowing you to perform bulk edits more efficiently. You can search, edit, and replace values across multiple files—useful for renaming keys, updating data types, or migrating resources to a Library. Check out the [**Refactor Project**](../../resources/projects/refactor-project.md) documentation for more details.



## Share project
## Share Project

You can make a project public so that others can view and clone your project. Before you share your project, make sure to remove any sensitive information.

Expand All @@ -280,10 +123,10 @@ You can make a project public so that others can view and clone your project. Be

:::

## Preview
## Preview App

You can use this option to run your app in [Preview mode](../../testing-deployment-publishing/running-your-app/run-your-app.md#preview-mode).

## Testing
## Test Mode

This menu allows you to run your app in [Test](../../testing-deployment-publishing/running-your-app/run-your-app.md#test-mode) or [Run](../../testing-deployment-publishing/running-your-app/run-your-app.md#run-mode) mode.
2 changes: 1 addition & 1 deletion docs/misc/customer-support-policy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ Lastly, you can connect with a [FlutterFlow Expert](https://experts.flutterflow.

We regularly release feature updates and bug releases. To make sure you are on the most recent version of FlutterFlow select Ctrl/Cmd + R.

If you think you've found a bug, please submit an [in-app bug report](../intro/ff-ui/toolbar.md#help) or let us know via chat (Standard and Pro users only). Please make sure to include:
If you think you've found a bug, please submit an [in-app bug report](../intro/ff-ui/toolbar.md#help-menu) or let us know via chat (Standard and Pro users only). Please make sure to include:

* A link to your project
* The page(s) effected
Expand Down
66 changes: 57 additions & 9 deletions docs/resources/ui/components/creating-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import levComponentParam from '@site/static/img/leverage-component-parameter.png
Components are reusable widgets you create to meet the specific needs of your app. This approach ensures consistency, saves
time, and simplifies maintenance across your project.

## Creating a component from scratch
## Creating a Component from Scratch

To create a component from scratch, click the **Add Button** in the **Page Selector** or **Widget Tree** tab. Then choose **New Component.**

Expand Down Expand Up @@ -43,7 +43,7 @@ To create a component from scratch, click the **Add Button** in the **Page Selec
</iframe>
</div>

## Convert into a component
## Convert into a Component

If you have already built a complex widget in your page, you can convert that entire widget into a component and reuse it throughout your app.

Expand Down Expand Up @@ -76,7 +76,7 @@ entire widget tree you want to convert, then select **Convert to Component.**
</iframe>
</div>

## Creating a component from a popular template
## Creating a Component from a Popular Template

FlutterFlow offers multiple popular templates for components across various use cases that you can
apply to your project in seconds, saving you a lot of time.
Expand Down Expand Up @@ -107,12 +107,60 @@ apply to your project in seconds, saving you a lot of time.
</iframe>
</div>

## Create an AI generated component
## Create an AI Generated Component

FlutterFlow's **AI Gen** feature allows you to generate various elements,
including components, from a prompt. This can be particularly useful when you're
unsure where to start. Once the component is generated, you can preview it with different color
schemes, in both light and dark themes, and make modifications as desired.
You can quickly create a component using FlutterFlow AI by describing what you want in natural language. The AI uses your description or visual reference, along with your project context, to build the component.

To create and add an AI-generated component, open the **Widget Tree**, click **Generate with AI** (magic wand) button and select the **Component** tab. Next, describe the component you want to build, and hit the **Send** (up arrow) button.

FlutterFlow will process your request and display progress in the **AI Generation History** panel in the toolbar. Once the component is ready, you can preview it in both light and dark themes and apply various color schemes. If you're happy with the result, give it a name and add it to your project.

:::tip

- You can also upload a screenshot or image of the component you want to build. FlutterFlow AI will use it as a reference to generate the layout.
- While the AI is generating your component, you can continue working on other tasks within FlutterFlow, but make sure you don’t close the FlutterFlow app.

:::

<div style={{
position: 'relative',
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'
}}>
<iframe
src="https://demo.arcade.software/BZD7f7OmwPdyHuOia2lY?embed&show_copy_link=true"
title="AI Generated Component"
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>

#### Import from Figma Frame

You can also quickly turn your Figma designs into functional components in FlutterFlow. By providing a Figma Frame URL, FlutterFlow AI will analyze the design and automatically generate UI layouts that closely match your mockup.

To import from a Figma Frame, first, connect your Figma account, [import the Figma theme](../../../ff-concepts/design-system/design-system.md#import-figma-theme), and map your colors and typography accordingly. Next, open the **Generate with AI** dialog and click the **Plus (+)** button. Select **Import from Figma**, enter your **Figma frame URL**, and press **Send**.

A preview of the frame you are importing will appear. To finalize the import, click **Send** again. Once completed, the component will appear in the AI Generation History, where you can preview and add it to your project.

:::warning

Currently, we don't support importing SVG elements from Figma frames. However, you can manually add the SVGs directly to your project [**assets**](../../../generated-code/directory-structure.md#assets) after generation is complete, or replace them in Figma with supported image formats like PNG or JPEG.

:::

<div style={{
position: 'relative',
Expand All @@ -121,7 +169,7 @@ schemes, in both light and dark themes, and make modifications as desired.
width: '100%'
}}>
<iframe
src="https://demo.arcade.software/Tv2kaRClaUD9TQnpaXmJ?embed&show_copy_link=true"
src="https://demo.arcade.software/cBQGb2T9VXneQ6gSlQMk?embed&show_copy_link=true"
title="AI Generated Component"
style={{
position: 'absolute',
Expand Down
Loading