Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Designing from Figma to Webflow

via LinkedIn Learning

Go to class Write review

Details

Provider

LinkedIn Learning
Pricing

Free Trial Available
Languages

English
Certificate

Certificate Available
Duration & workload

2 hours 19 minutes
Sessions

On-Demand
Level

Intermediate

Found in

Scrimba

Our career paths help you become job ready faster

Coursera

Get Coursera Plus for 40% off

Overview

Coursera Flash Sale

40% Off Coursera Plus for 3 Months!

Learn how to prepare your Figma designs to be built into Webflow themes and assets.

Syllabus

Introduction

Design in Figma, build in Webflow
Prerequisites and approaches
Configuring the Figma app and uploading the starting file

1. Create a Webflow Site from Figma Specs

Explore the starting Figma file
Set up a site and variables in Webflow
Set up the style guide in Webflow
Configuring the navbar
Configure the jumbotron
Setting up the tabbed area with vertical tabs
Setting up the tab pane for birthdays
Practice: Setting up the wedding and corporate panes
Finalizing the tab styling
Challenge: Creating the footer
Solution: Creating the footer

2. Make a Webflow Site Responsive

Making the navbar responsive
Challenge: Making the jumbotron responsive
Solution: Making the jumbotron responsive
Configuring mobile tab panes
Configuring mobile tab links

3. Create a Webflow Site from a Figma Plugin

Move desktop About design from Figma to Webflow
Fixing layout problems in Webflow
Ways to improve moving Figma designs to Webflow via the plugin

Conclusion

Next steps

Taught by

Jen Kramer

Reviews

4.9 rating at LinkedIn Learning based on 19 ratings

Start your review of Designing from Figma to Webflow