Principle and Figma
Principle is an interaction design tool that allows you to bring your digital designs and prototypes to life.
You have a whole host of interactions available; from scrolling or swiping, managing multiple states, building custom animations and super slick transitions. Learn more about Principle here.
Once you connect Figma to your Principle account, you can easily import your designs from Figma and start building advanced animations.
With Figma and Principle, your designs look and feel like the real deal.
In this article we'll cover how to:
Connect Figma and Principle
You'll need to have an account created with Figma and Principle to get the two connected. Principle is currently available on macOS only.
When you first go to import a design from Figma, you will be prompted to enter your Figma account details to authorize the connection. This will only happen the first time you use the Import from Figma option.
- Open up Principle.
- Head to File in the main menu and select Import from Figma:
- Or, click the Import button:
- Select Figma from the options:
- Click the Connect to Figma button:
- This will open up a browser window. If you're not logged in, you'll be prompted to login to your Figma account:
- Click Allow access to confirm:
- A dialog box will prompt you to return to Principle:
Note: If you don't get redirected to Principle directly, you can close the authorization window and return to Principle. While it may not look like it, the connection has now been successfully established.
Import a Design from Figma
Now that the two applications are connected, you'll be able to import your designs directly into Principle. Note: It's not possible to export a File to Principle from within Figma.
You can import all of the Frames from a page in a File, or a selection of Frames.
- Open up Principle.
- Head to File in the main menu and select Import from Figma:
- Or, click the Import button:
- Select Figma from the options:
- You will then be able to select a Document from the field provided. This will show you any Recently Edited Files.
Note: Any files that have been using Multiplayer (i.e. Files where multiple Editors are collaborating) will be prioritized in the Recently Edited Files suggestions.
- Click Import Page to import all Frames on the Page.
- Or, click Import Selected Frames to import any Frames that are currently selected in Figma.
Note: At this point, you can also hop over to Figma and select any specific Frames you want to import. This will update the selection in Principle.
- A status message will indicate that the layers are currently being rendered by Figma:
- The Frames will then be added to your Artboard in Principle:
- Each object will be rendered as an individual layer, just like it is in Figma. You can select individual objects in either the Layers panel on the left, or directly in the canvas:
Disconnect your Figma account
If you want to change the Figma account associated with your Principle account, or disconnect the two completely, you can do this in Principle.
- Click on the Principle menu in the Apple menu bar.
- Select Disconnect from Figma from the options:
- You can then start the Import process again, to reconnect or connect to a different account.
Working with Shadows in Figma and Principle
Drop and Inner Shadows will behave differently between Figma and Principle. Figma renders shadows based on the object's position on the canvas, whereas Principle will show the shadow based on the object itself.
This means that rotating an object in Principle will also rotate the location of the object's shadow (versus remaining consistent as it would in Figma).
Note: Learn more about Figma and Principle in our Medium post: Animate your Figma designs with our new Principle integration.
