Figma to Webflow | Part 3 — Building the Landing Page

January 6, 2021
Liam Matteson
Designer
Sarah Corner
Designer & Animator

In our final installment of this Figma to Webflow series, we'll be building the landing page using the Hatch Utility Framework. In this series, we're using the newly released Hatch Utility Framework to build out the beginning pieces, such as Typography, Color, and Elements (Buttons & Form Fields).

We recommend checking out the Hatch Documentation, which goes in depth on how to use the framework. In many ways, Hatch is similar to the Tailwind.CSS documentation. The documentation can be found on the Hatch website linked here.

Building the landing page:

Typography styles in Webflow:

Blog on Webflow typography

Color and elements in Webflow:

Blog on colors and elements