Figma to Webflow | Part 3 -- Starting The Landing Page
In our third instalment of this 4 part series, we'll be building the landing page designed in Figma and finish it in Webflow. 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). Now with the styles built, we will use them as a jumping point to build our landing page.
Part 1 →
• Figma to Webflow | Part 1 — Typography
Part 2 →
• Figma to Webflow | Part 2 — Colors an...
The Hatch Utility Framework can be cloned from Webflow here → https://webflow.com/website/Hatch-A-U...
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. Also if you'd like to check out the documentation on the Hatch Framework, you can get it here →
https://www.notion.so/Hatch-0d4a03cf6...
00:00 Introduction
00:55 Button overview and creation
03:28 Container and layout guidelines for starting the page
05:12 Creating a section
06:05 Calculating padding
06:56 Heading and applying styles
07:56 Unique text spans
09:19 Setting the landing page as the home page
09:50 Placing buttons
11:26 Text links
16:00 Spacer between button and text link
18:45 Footer
Смотрите видео Figma to Webflow | Part 3 -- Starting The Landing Page онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Halftone Digital 12 Декабрь 2020, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 414 раз и оно понравилось 2 людям.