Introducing Framer Figma Sync

After a teasing six months ago with this video masterpiece, the web builder company unleashed another level of superpowers with the release of plugins, making it possible to interact with the canvas, the styles, and the content.

When I joined the Beta program and had access to plugins six months ago, the immediate idea I had was to fix my main pain point when starting a new project in Framer: copying and pasting color and text styles from one tool to another and keeping them updated.

It’s now available on the Framer Marketplace, give it a try and let me know what you think.

Coming up with the idea

Like a lot of projects I’ve been doing, I encounter the problem myself. I love to explore new ideas for my website, tweaking my library and adjusting contrast here and there in Figma. However, updating Framer manually with these new values always felt tedious.

So, in a weekend I came up with a first version of the plugin and shared it with the others Framer plugin makers in Slack. And well, reactions were immediate: community needed this.

Framer/Figma Sync is born

Once connected to your Figma account, the plugin can fetch any file with a published library and retrieve all the color and text styles it contains. You simply need to press a button, and it will automatically import them into your Framer project, updating any existing styles.

I had previously used Framer X and older versions, but this was my first time designing with this latest version on the canvas for something other than icons or small design elements. Designing directly on the same canvas that will be used for the final product is a great experience; it allows you to ensure that everything looks and feels native. Although performance gradually declined after several explorations and a reset of the shortcut gymnastics inherited from Figma, the experience was genuinely enjoyable. 

For this initial version, I decided to allow users to sync colors from Figma to Framer without any limits for free. This felt like a way to give back to a community I’ve seen grow, learn from, and where I’ve met many skilled designers and wonderful people.

Text styles and light/dark modes required a bit more hustle to make them work with the plugin, given their inherent complexity and the number of use cases to handle. So it felt right to charge users for this if they want to use it, with a single payment license: 

• Plus ($4.99 per project): text styles and light/dark modes creation

• Plus Unlimited ($49 lifetime license): everything in Plus, unlimited number of Framer projects, roadmap influence, and priority support

Who should use it?

The plugin is available for anyone with Figma styles who wants to leverage Framer's superpowers. It benefits:

• Makers with ideas they've been contemplating for weeks; now, bringing those ideas to life over a weekend is even easier.

• Freelancers and agencies managing multiple Framer projects for clients with different libraries, all supported by the Plus Unlimited license of the plugin.

• Designers like me, who continually refine their websites and still appreciate Figma for exploration, using Framer for building, and seeking a quick way to sync their styles.

Details

Let’s dive into some of the areas of the plugin I loved polishing: page transitions, the login animation, and the menu icon.

Pages transition

This plugin was also a good excuse to experiment more with React combined with Framer Motion, and page transitions have been a nice challenge for this.

When opening the menu, I combined a scale (1 → 0.95), opacity (1 → 0), and blur (0 → 8px) transition on the page, with a delay when moving down the menu. You can observe the different parts below.

Login animation

I wanted the first few seconds to feel a bit special, so I reached out to Gavin Nelson, and he kindly let me use his custom Figma app icon. When connecting the plugin to your Figma account, some waves slowly surround the plugin before fading out.

If you pay closer attention to the background, you’ll also see some colorful shapes slowly moving when trying to connect. These are, in fact, a double Figma logo with a large blur amount.

Configuration options

I felt the need to add an option to ignore folders when creating styles, as Framer doesn’t support them yet (I heard they are working on this)¹. Additionally, allowing users to uncheck the “Create missing styles” option seemed like an interesting use case to handle. This would enable users to:

• Import their entire styles library into Framer

• Decide which styles to keep or discard for various reasons (some styles may not apply to a website, for example)

• Ensure the plugin only updates existing styles

Light and dark modes have been highly praised since Framer launched in March 2023, so I wanted to find a way to support them. If you have worked with the Figma Variables API, you might wonder how I accessed collections, modes, and bond variables without the Enterprise plan-only REST API. The truth is, I didn’t.

Interacting with the REST API for Variables was somewhat frustrating, as we can’t access any of the mentioned entities, only the computed raw value. Figma does provide the raw value behind a variable when a style uses it, which is a small win. I recalled what I did for my Figma plugin, Styles to Variables, and how people managed before the launch of Variables: by using light and dark folders at the top of their styles. It felt like a step backward, but it works really well. I have a few ideas to experiment with to offer better support for it.

Challenges

License management and payments. While most of the heavy lifting was done by Lemon Squeezy, plugging everything in and adding additional rules to make my system work resulted in a lot of hours spent debugging. It was my first time building a paid product, handling transactions, and adding usage limitations.

Ultimately, I managed to make it work and made some sales, so I’m now ready to build even more complex products!

https://www.framer.com/updates/december-update-2024

Technical stack

• Framework: React

• Animation: Framer Motion

• Functional graphics: Rive

• Analytics: Fathom

• Database: Vercel KV

• Payments: Lemon Squeezy

• Screen recording: Screen Studio

• Titles animation: Jitter

• Video editing: iMovie

Credits:

• Inter: Rasmus Andersson

• Figma Icon: Gavin Nelson

• Beta: Framer team

• OAuth: Rémi Bonnet

• Pricing strategy: Romario Lourenço

• Support: Hassan Boujnikh, Junior

What’s next

Well, people seemed to be quite excited about it, so I’ll keep an eye on the different setups and contexts they used for the plugin. I have a few issues in the post-launch milestone on Linear that I’d love to bring to life after a short break.

With this new project launched, I think it really shows that creating something from scratch has never been easier, especially when it relies on existing ecosystems like Figma, Framer, or Raycast, with solid SDKs/APIs, passionate communities, and talented teams and support.

I highly encourage designers to give plugins/widgets/extensions creation a try if they want to become more familiar with coding. To me, it’s a great way to find solutions to a problem, experiment with new technologies, and overcome the fear of launching.