Select Update settings within the Figma area.In the inspector panel on the right click the Details section.If you have nested frames in Figma, Lingo lets you navigate the frame hierarchy and select specific frames to import.įrom Lingo, you can navigate back to a specific asset in Figma. You can import multiple frames and components at once by checking the checkboxes. The import modal has two tabs for selecting either frames or components from a Figma file. Paste the link to your Figma frame or file.Drag and drop an asset from the insert panel into the gallery.Open the kit where you want to add your Figma assets.Open the file with the assets you want to add to Lingo.Make sure Link to selected frame is checked.Select the frame you want to add to Lingo.Link to a file when you want to import multiple assets at once. You can link to a single frame or to a whole file in Lingo. Note: It may take several minutes for changes to be reflected in Lingo. Click the Integrations tab and select the Figma integration.You can find your team ID represented by in the following URL: Highlight and copy the team ID from the URL in the address bar.From the Figma file browser, click on the team you’d like to give Lingo access to.This step is only required if you want Lingo to receive updates when an asset changes in Figma. Paste your Figma team ID into Lingo (optional)Īdd your team ID to Lingo to keep your files in sync.
In Lingo, select Settings in the left rail.Navigate to Personal access tokens, enter a name for your new token (for example, Lingo integration), and press Return.From the file browser, click on your profile icon in the upper right corner, and then click Settings.To connect Figma to Lingo, do the following: Generate a Figma API token Note: Lingo stores Figma assets as SVGs, which you can resize and convert to different file types before downloading. 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). Figma renders shadows based on the object's position on the canvas, whereas Principle will show the shadow based on the object itself. Working with Shadows in Figma and Principleĭrop and Inner Shadows will behave differently between Figma and Principle. You can then start the Import process again, to reconnect or connect to a different account.Select Disconnect from Figma from the options:.Click on the Principle menu in the Apple menu bar.If you want to change the Figma account associated with your Principle account, or disconnect the two completely, you can do this in Principle. You can select individual objects in either the Layers panel on the left, or directly in the canvas: Each object will be rendered as an individual layer, just like it is in Figma.The Frames will then be added to your Artboard in Principle:.A status message will indicate that the layers are currently being rendered by Figma:.This will update the selection in Principle. Note: At this point, you can also hop over to Figma and select any specific Frames you want to import. A dialog box will prompt you to return to Principle:.If you're not logged in, you'll be prompted to login to your Figma account: Head to File in the main menu and select Import from Figma:.This will only happen the first time you use the Import from Figma option. When you first go to import a design from Figma, you will be prompted to enter your Figma account details to authorize the connection. Principle is currently available on macOS only. You'll need to have an account created with Figma and Principle to get the two connected. Disconnect your Figma account from Principle.With Figma and Principle, your designs look and feel like the real deal. Once you connect Figma to your Principle account, you can easily import your designs from Figma and start building advanced animations. You have a whole host of interactions available from scrolling or swiping, managing multiple states, building custom animations and super slick transitions. Principle is an interaction design tool that allows you to bring your digital designs and prototypes to life.