Introducing Figma’s Integration with Framer
Today I’m excited to announce Figma is integrating with Framer! After releasing Figma in beta last December, our top request has been adding support for various prototyping tools. Of these tools, we hear the most demand for Framer.
Why prototyping?
With the proliferation of mobile, designing static mockups on a 27” Thunderbolt display doesn’t cut it anymore. For designers to create the best possible experience, they need the ability to do three things:
- Design specifically for the context in which work will be viewed.
- Communicate the end user’s experience by showing how a screen changes based on input.
- Add transitions and moments of joy to their design through motion graphics.
These are pain points I’ve experienced myself. Before Evan and I started Figma, I worked on the design team at Flipboard. When I was there in 2012 meeting the needs outlined above was a huge burden; we would either use video editing products like After Effects or build out a full prototype in HTML / JS / CSS, save to a remote server via FTP then load the prototype on a mobile phone over 3G. This workflow was cumbersome and inefficient, less about creative intent and more about working around various browser consistency issues.
Since then designers have demanded a better workflow. In response, an entirely new market of prototyping tools has emerged. It seems like a new prototyping tool launches every week. However, Figma users consistently and constantly request integration with one specifically: Framer.
The integration that launches today simplifies workflows by allowing users to import Figma assets while working in Framer with one click rather than having to export layer-by-layer and then upload to Framer.
Here’s what is looks like:
Working with Framer
When exploring a Framer integration, we talked with a few of our users about why they wanted this functionality. Circle designer Jonathan Simcoe explained it best:
“Since Framer is based in code I have found it to be the most expressive way to prototype. It is entirely open-ended. Framer especially excels at complex, single-page interactions. Figma has been instrumental for our team in designing and iterating on UI quickly. Framer is the best way to prototype. An integration allows us to get our UI ideas into code quickly, test them, and ship faster and better.”
We think it is awesome how Framer is making code-based prototyping accessible to an entire generation of designers. We know Koen, Jorn, and the Framer team well and we are thrilled to be working with them to make our users lives easier. We can’t wait to see what our users will create with Figma and Framer!
PS: Figma is still in Private Release, but if you tweet at us we will prioritize your access.
