Figma to Webflow Plug-in

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?

• Auto layout
• Typography styles
• Border styles
• Shadow styles
• Background images and linear gradients
• Vector and shape conversion to SVGs
• Images
• Opacity
• Absolute position

Videos & Assets

• Figma to Webflow Plug In
• What is REM? & Why you should use rem
• HTML Tags