Part

3

of

12

19:37

min

Building Blocks

Play button
Useful links

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