Building Blocks

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