Edit product

Figma Freebie - Layout Grids 4.0

$0+
52 ratings

Jumpstart your design process with layout grids that follow all the best design and implementation practices of Material Design, Bootstrap, and Figma.

✅  Grid styles

✅  Breakpoints

✅  Constraints

✅  Playground


What's included? 

Figma design file (.fig) with the following:

Layout grid styles

• Column (fixed): small, medium, large, extra-large

• Column (fluid): small, medium, large, extra-large

• Modular (fixed): small, medium, large, extra-large

• Modular (fluid): small, medium, large, extra-large

• Baseline: small, medium, large, extra-large

• Manuscript: small, medium, large, extra-large

• Container: small, medium, large

• Padding: small, medium, large


Responsive layouts 

• Fixed behavior: small, medium, large, extra-large

• Fluid behavior: small, medium, large, extra-large


Constraint examples

• Card with image on top

• Card with image on left


Quick start guide

• Steps on how to get started

• Helpful resources


Layout grid playground

• Exercise #1: Add layout grid

• Exercise #2: Edit layout grid

• Exercise #3: Using constraints

Watch a quick walkthrough of the full Design System

👉 Learn more at uiprep.com

---

Follow me on Twitter to say hi and learn about new updates and resources

Send an email to molly@quantidesign.io if you have any questions

$0+

Figma Freebie - Layout Grids 4.0

Jumpstart your design process with layout grids that follow all the best design and implementation practices of Material Design, Bootstrap, and Figma.

✅  Grid styles

✅  Breakpoints

✅  Constraints

✅  Playground


What's included? 

Figma design file (.fig) with the following:

Layout grid styles

• Column (fixed): small, medium, large, extra-large

• Column (fluid): small, medium, large, extra-large

• Modular (fixed): small, medium, large, extra-large

• Modular (fluid): small, medium, large, extra-large

• Baseline: small, medium, large, extra-large

• Manuscript: small, medium, large, extra-large

• Container: small, medium, large

• Padding: small, medium, large


Responsive layouts 

• Fixed behavior: small, medium, large, extra-large

• Fluid behavior: small, medium, large, extra-large


Constraint examples

• Card with image on top

• Card with image on left


Quick start guide

• Steps on how to get started

• Helpful resources


Layout grid playground

• Exercise #1: Add layout grid

• Exercise #2: Edit layout grid

• Exercise #3: Using constraints

Watch a quick walkthrough of the full Design System

👉 Learn more at uiprep.com

---

Follow me on Twitter to say hi and learn about new updates and resources

Send an email to molly@quantidesign.io if you have any questions

Ratings

4.634615384615385
(52 ratings)
5 stars
86%
4 stars
4%
3 stars
2%
2 stars
2%
1 star
6%
52 ratings
  • File
    Figma (.fig)
  • Size
    42.4 MB
  • FileFigma (.fig)
  • Size42.4 MB

Ratings

4.634615384615385
(52 ratings)
5 stars
86%
4 stars
4%
3 stars
2%
2 stars
2%
1 star
6%
52 ratings
Powered by

Checkout

Figma Freebie - Layout Grids 4.0

Enter your info to complete your purchase

Give as a gift

Card

or pay with
pp paypal