Part

1

of

12

13:56

min

Figma to Webflow Plug-in

Play button
Useful links

To supplement your learning, check out these links that offer valuable insights and resources.

In order to make our life easier, we’ll be heavily relying on the Figma to Webflow plug in.

This way we can cover two use-cases:

  • If you’re designing a website from scratch (How to properly set up the Figma file)
  • If you’re migrating a Website, we always like to clone it to Figma first, in order to make everything global & to allow us to scale the website in the future a lot more easier

Plug-in overview

You can download the plug in on the link below, and install it in your Figma to prepare for the course.

Set-up the plug in defaults

  • We always design in REMS, so this way you can set up the file to automatically convert sizes to REM
  • Set default value to 16 rem
  • At the time of recording the video, you need to set this up per project

Connect your Webflow project

Layouts & Structure

You can use pre build layouts built by Webflow or use structures to help you build new pages.

HTML Tags overview

As you would have in Webflow, we can now use HTML tags in Figma to make sure our designs are SEO friendly.  You’ll want to use the usual SEO HTML structures. By leveraging how you want to scan the designs, you’ll want to use proper tags, links etc. We’ll cover this in depth in the HTML elements in Figma module.

What does the plug in support?

Videos & Assets