Animate your Figma designs with our new Principle integration

Today we have some special news that’s been months…perhaps years…in the making. Figma now integrates with the prototyping tool Principle, so you can easily build advanced animations of your Figma designs. Yes, we know, you’re really excited. We are too — we’ve admired Principle since it first launched in 2015. Your requests for an integration — whether in the most upvoted comment on Principle’s latest Product Hunt launch, or in constant tweets to us — didn’t go unnoticed.

With this new integration, import your designs from Figma, then use motion in Principle to bring them to life. Add scrolling to your pages or swiping between image cards. Give buttons different states based on how people interact with them. Play with animation between objects like spring, ease in, ease out or linear transitions. In short, add all the functionality to make your static designs feel like an actual mobile app.

You’ll soon see why Principle inspires fanatic obsession in its users. It strikes the perfect balance between simplicity and power, giving people everything they need to create realistic prototypes, without having to learn to code.

“Even if you’re a person who knows both design and engineering, your brain operates very differently in each state,” Daniel Hooper, Principle’s creator, said. “Putting people in the technical engineering mindset suppresses their innate visual creative skills.”

You can do everything in Principle using its straightforward visual UI, which will feel familiar for interface designers. Enable the Figma-Principle integration by opening Principle, clicking import and authorizing Figma as a source.

If you need to tweak your Figma design after you already imported it to Principle, it’s easy to sync between the two tools. Principle will automatically recognize changes you make in Figma and merge them. Make a button bigger in Figma? The button will automatically resize in Principle, while keeping the same animations you originally set for it.

The integration was built using Figma’s web-based API, and Daniel spent a lot of time exploring our documentation and tools there. “The API explorer on the developer page is really useful,” Daniel said. “It’s a convenient way to get a handle on how it works.”

With the API Explorer, developers can put in the ID of a specific Figma file to see how the API will ultimately call it. That way, they can test the building blocks of the Figma API and understand its functionality. “It’s a very web thing,” Daniel added.

Principle itself is intuitive to use, even for beginners. To see for yourself, play with the first Figma file ever imported to Principle. Download Principle and import the file to get started.

Let us know what you think of the new functionality over on Spectrum!