Part
1
of
12
13:56
min
Figma to Webflow Plug-in
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?
- Auto layout
- Typography styles
- Border styles
- Shadow styles
- Background images and linear gradients
- Vector and shape conversion to SVGs
- Images
- Opacity
- Absolute position