Designing from Figma to Webflow
2h 19mIntermediate2024-02-07
Authors
Jen Kramer
Teaches web design and development
Course details
In this course, web design and development expert Jen Kramer introduces you to a very useful new workflow that enables you to create your site layout in Figma, then move to Webflow to create the same custom website without code. Explore the essential aspects of your Figma files that are critical for working in Webflow. Find out how to mark individual assets in Figma for export to Webflow, as well as how to compress image and media assets for Webflow. Dive into creating a basic Webflow site for your exported assets, and learn how to integrate your Webflow code, CSS, and images to build out the right look/feel. Plus, go over ways you can make your Webflow views responsive to support all device sizes and screens.
Skills covered
PrototypingFigmaInteraction DesignUser ExperienceProjectProduct and Manufacturing
Concepts
0. Introduction
- 01 - Design in Figma, build in Webflow
- 02 - Prerequisites and approaches
- 03 - Configuring the Figma app and uploading the starting file
1. Create a Webflow Site from Figma Specs
- 04 - Explore the starting Figma file
- 05 - Set up a site and variables in Webflow
- 06 - Set up the style guide in Webflow
- 07 - Configuring the navbar
- 08 - Configure the jumbotron
- 09 - Setting up the tabbed area with vertical tabs
- 10 - Setting up the tab pane for birthdays
- 11 - Practice - Setting up the wedding and corporate panes
- 12 - Finalizing the tab styling
- 13 - Challenge - Creating the footer
- 14 - Solution - Creating the footer
2. Make a Webflow Site Responsive
- 15 - Making the navbar responsive
- 16 - Challenge - Making the jumbotron responsive
- 17 - Solution - Making the jumbotron responsive
- 18 - Configuring mobile tab panes
- 19 - Configuring mobile tab links
3. Create a Webflow Site from a Figma Plugin
- 20 - Move desktop About design from Figma to Webflow
- 21 - Fixing layout problems in Webflow
- 22 - Ways to improve moving Figma designs to Webflow via the plugin
Conclusion
- 23 - Next steps