Part
3
of
12
19:37
min
Building Blocks
To supplement your learning, check out these links that offer valuable insights and resources.
Setting up the grid properly in Webflow can save your hours of head-aches. Even tho the standard Figma to Webflow plug in is leveraging Flex as a property, understanding how to set up grid properly for your next project and leverage the Figma to Webflow plug in, will save your weeks of development.
Shortcut
CMD + Option + P (Run Figma to Webflow plug in)
Default grid
By default- we’re using the 12 column grid for each project. But as we’ll be adjusting this per project basis we’ll be checking how to set up a custom project grid.
Inspecting the grid
Inspecting to see in which grid system will the project fit in
Cover:
- Container
- Page wrap
- Section
- Container
- Grid
- Headings, Texts
- Buttons
- Positions of Columns
- Grow, Shink Expand
- Centering of the Elements