Introducing Figma’s Integration with Framer

Dylan Field
Aug 23, 2016 · 3 min read

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:

  1. Design specifically for the context in which work will be viewed.
  2. Communicate the end user’s experience by showing how a screen changes based on input.
  3. 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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store