How To Use The Figma To Framer Plugin

Introduction

You’ve created an awesome design in Figma, and it’s now time to build it out in Framer. While it’s true that Framer makes it easy to build a website in just a few hours, it’s still a lot of work!

Wouldn’t it be easier just to copy and paste the design and hit publish? Well, you can do it (kinda).

Framer has developed a powerful plugin that allows you to copy and paste your entire website layout in seconds. While it’s true that the plugin has some limitations, it can still save you plenty of time!

However, most people don’t know that you need to create the design in a specific way if you want the plugin to work as expected. Otherwise, the final website will look like a mess and be far from responsive.

So, in this guide, you’ll learn:

✅ What is the Figma to Framer plugin?

✅ How to install the plugin.

✅ How to use the Figma to Framer plugin (+ tips and best practices)

Let’s get started!

What Is The Figma To Framer Plugin?

The Figma to Framer plugin (aka the “Figma to HTML with Framer” plugin) allows you to quickly convert your Figma design into a working website.

While the plugin is not perfect and cannot build the website for you, it can still save you a ton of time as it allows you to quickly import the general layout and all the design elements in just a couple of clicks.

A really cool feature about this plugin is that it does not change a thing when importing to Framer. It completely preserves the layout, the elements, their names, the groups you created, etc.

This means that the layout in Framer will be identical to the design you created in Figma. This seamless transition is what everybody loves about this plugin and why almost 200,000 designers have decided to use it (174k at the time of writing).

What The Plugin Can And Cannot Do

Let’s now quickly analyse what you can and cannot do with the plugin. In general, everything that does not regard the layout cannot be imported (with some exceptions). This also includes animations, interaction, and custom fonts.

So, here’s a complete list of what can be imported:

• Layout.

• Elements.

• Images, videos, SVGs…

• Group names.

• Text (not custom fonts).

• Colors.

  
  

And here’s what you’ll have to create manually using Framer:

• Animations.

• Interactions.

• Custom fonts.

• Everything native to Framer, like the CMS, components, localisation…

  
  

Here’s a list of the Figma features that Framer currently doesn’t support:

• Justified Text.

• Image strokes.

• Paragraph indent.

• OpenType features.

Sounds good? Let’s learn how you can install and use it!

How To Install The Plugin

Installing the plugin is super easy. Just head over to the plugin’s official Figma community page and click “Open in Figma”.

It will automatically open your Figma dashboard, and you can now use the plugin in every project you have.

How To Use The Figma To HTML With Framer Plugin

Now that we’re done with the setup, let’s get to the exciting part of the guide.

The first step is to select the layer you want to copy. It can be anything, from a simple line of text to the entire frame you’re working on.

Pro Tip: The plugin generally works better when selecting a smaller group. For example, if you have a landing page design with five different sections, try to import one at a time instead of the whole design.

Once you’ve selected what to export, go to the Figma menu > plugins > Figma to HTML in Framer. When you click on the plugin, you should see a small toast message at the bottom of the screen telling you that N layers have been copied, and you can now paste them in Framer.

What do we do now? You guessed it! We open a new or existing project in Framer and paste the selected layers. And voilà! Your design has now been converted into a functioning website.

As stated earlier, the plugin only works with the layout, and you will have to do some work before the website is ready to be published. However, you’re already halfway there.

Now, let’s look at some tips and best practices to follow if you want to make the most out of the plugin.

Using Auto Layout

If you now try to preview the website, you’ll see that it always looks the same regardless of the window’ size. However, that’s not how websites usually work!

Typically, the layout grows/shrinks based on the viewport’s width and height. So, what’s going on here? Did we miss anything? We did, but don’t worry; we can easily fix that.

The problem is that as powerful as this plugin is, it cannot create a responsive layout for you. If, on your Figma design, you’ve just dragged and dropped elements on the frame without any constraints, the live website will reflect that.

This means that if you want your website to be responsive, you’ll have to use the Auto Layout property throughout the entire design.

If you have never heard of this term, here’s how the official Figma documentation describes it: “Auto layout is a property you can add to frames and components. It lets you create designs that grow to fill or shrink to fit, and reflow as their contents change”.

By using this property, you can set some “constraints” to your design that allow it to grow/shrink based on the frame’s size.

If you use the plugin on a design that uses auto layout, you’ll see that the final website will look fantastic on all desktop sizes.

Making The Website Responsive

Note: If you’re not familiar with how breakpoints work in Framer, I encourage you to check out this tutorial from the Framer Academy.

Once you’ve imported the main breakpoint of your design, be it the desktop or the mobile one, it’s now time to make the website responsive.

If you try to add the table breakpoint, you’ll see it still preserves the desktop (or mobile) layout.

At this point, I often see people make the mistake of “deleting” the inherited layout and copying and pasting the tablet design from Figma.

While the final result might look fine, you’re actually making a big mistake.

You see, when you “delete” an inherited layout, you’re not actually deleting it. You’re just adding a rule override that tells the browser to hide that layout.

While it might look fine to the user, you’re massively slowing down the website load speed as it has to load a ton of elements that don’t get shown.

If you repeat the same process with the last breakpoint, you’ll now have two entire layouts that get loaded but not displayed, which will have a huge impact on performance.

So what do you do instead? You only copy and paste the layout once (for the main breakpoint). Then, you adjust it for the other breakpoints using only Framer properties.

This will ensure you’re only adding a couple of CSS rules instead of adding more and more elements to the page.

Conclusion

The Figma to HTML in Framer is a powerful plugin that can help you import your whole design layout in seconds. While it presents some limitations, it can still save you a ton of time when transitioning from a design to a working website.

That being said, I want to thank you for having read the whole guide. If you need any assistance with your Framer website, do not hesitate to reach out.

If you’ve found this article helpful, I kindly invite you to share it with a friend. Thanks in advance ;)