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

LinkedIn Learning

Designing from Figma to Webflow

via LinkedIn Learning

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
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

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.