Figma to Webflow | Part 3 — Building the Landing Page

December 14, 2020


Liam Matteson
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

Contact Us

Interested in working with us? Get an estimate or send us a message.