Importing from Figma

There’s a few simple steps to get Figma syncing with Flow. So, follow along and we’ll have you up and running in no time.

Create a Flow Account

This is the first thing you need. A Flow account will allow you to set up the auth between Flow and Figma. Here’s how to do it.

This step starts at 0:25

1. Go to the Flow Account Signup page.
2. Put in your deets.
3. Hit the Sign Up button.
4. Verify your account via the email we’ll send you.

For the moment, there’s not much you can do with a Flow account. But, stay tuned for some rad sharing features we’ll soon be shipping.

Sign Into Your Flow Account

Next, you need to sign into your new account.

This step starts at 01:03

1. Open Flow
2. Choose Account > Sign In
3. Enter your email and password

Voilà. Now you’re ready to link your Figma account.

Link Your Flow ↔︎ Figma Accounts

If you haven’t already authorized Flow to access your Figma account, you’ll be prompted in the app to do just this.

This step starts at 1:14

1. Hit the Authenticate button if it appears.
2. A permissions page will pop up.
3. Click Allow Access

Import a Full Figma File

Now we’re good to go.

This step starts at 01:46

1. Hit the Link a Figma File button or File > Account > Figma Import
2. Go to Figma, hit the Share button to copy a link to your file.
3. Paste the URL into Flow
4. Animate to your heart’s content!

Flow Plugin

The Flow plugin allows you to select and import specific layers. This is awesome for when you’re working with big files.

This step starts at 03:04

Installing the Plugin

The plugin is published in Figma’s community.

1. In Figma, go to the community tab.
2. Search for Flow.
3. Click the plugins filter
4. Find Flow Exporter
5. Click the install button.
6. Back in your design file, click the plugins menu option and open Flow.

Import a Single Frame

The easiest way to use the plugin is to import a single frame from your project.

This step starts at 03:40

1. Select a frame
2. In the plugin, click Make Exportable
3. Go back to Flow
4. Create a new timeline from your file
5. Voilà! Only one frame appears in the import window

Import any Layer

What’s really cool, is you can select any later or node in Figma and import those directly into Flow.

This step starts at 04:36

1. Back in Figma, select a few layers
2. Make them all exportable
3. Go back to Flow, and create a new timeline
4. Wham! Individual layers, frames and groups… anything made exportable, will appear in the importer!

Animate a Single Layer of your Design

This is where the plugin shines. Let’s say you have a big file, full of views, pages, and layouts. But, you want to simply animate an icon from one of the pages… This is exactly what our plugin was meant to help with.

This step starts at 05:13

1. Pick a design you have
2. Select a button, or an icon
3. Import that into Flow

Working with the Plugin

Here’s a few tips on how the plugin actually works.

This step starts at 06:08

• You can select multiple layers and add them all at the same time
• A selected layer will appear blue in the plugin
• You can remove a layer from the exporter by clicking the minus button
• You can remove all the layers by hitting the clear button
• When there are 0 exported layers, Flow will import all of the top-level frames in your design

Overriding the Plugin

In some cases, you’ll want to ignore the exported layers in the plugin. Here’s how you do that…

This step starts at 07:07

1. Re-sync your file by clicking its name in the tool bar
2. Select the Grab All Files checkbox
3. Click import

You’re Going to Working with Flow

Byeeeee.