Flinto and Figma
This feature has been developed by Flinto. For any questions regarding Flinto or the integration, please contact the Flinto team.
Flinto gives you access to powerful tools for animated transitions, micro-interactions, scroll-based effects and more. With Flinto you can:
- Create custom animated transitions between Frames.
- Design your own micro-interactions with Flinto's Behavior Designer.
- Use a variety of touch gestures, including 3D touch.
- Add GIFs and videos to your prototypes.
- Export recording of your prototypes to share online.
The integration allows you to import your designs from Figma into Flinto. You can then turn them into animated and interactive prototypes.
Note: When importing Frames from Figma, Flinto will preserve most vector shapes and editable text layers. For any features that aren't supported, Flinto will flatten them into bitmap images.
In this article we'll cover:
Connect Figma and Flinto
Before you can import your designs from Figma, you'll need to authorize the connection between Figma and Flinto.
This gives Flinto to access your Files, so they can import them into their app.
You'll only need to do this once, the first time you import a File from Figma.
- Open the Flinto app.
- Click Import in the toolbar. Or go to Flinto > Import in the menu bar.
- Select the Figma tab:
- Click the Sign into Figma button:
- Your web browser will open Figma in a new tab. If you're not signed in, you will be prompted to do so now. Otherwise, click the Allow Access button:
- Click the prompt to return to Flinto.
Import a Design from Figma
Now that the connection is established, you can import your Figma Files into Flinto.
You'll be able to select from the Files you've most recently opened. If you haven't recently opened the File - or don't see the File you're looking for - try opening the File in Figma first.
- In the Flinto app, click the Import button in the toolbar.
- Select the Figma tab. You can then select which File you want to import into Flint. Your most recently edited Files are displayed at the top:
- Select the Screen size for the selected File. Frames. The default will be the size of the current document.
- Click the Import Frames button.
- Now you are ready to create your prototype in Flinto! Visit Flinto’s learn page to learn more about getting started.
Disconnect your Figma Account
- Click the Import button in the toolbar to open the modal.
- Select the Figma tab.
- Click on your profile picture in the bottom left corner and select Log Out: