Live example
Implementation
By using a grid, we can design and build consistent layouts - they function a little differently across the Figma and Development environments.
In Figma, grids are built in as a layout grid style you can apply to your frames. There are different grids for different screen sizes.
In React and React Native we have “Rows” and “Columns”. When creating layouts we match the number of columns each area needs to the grid in Figma. The grid is responsive so all we need to do is specify the correct amount of columns for each screen size.
Properties
Grid
|
Name |
Values |
Default |
|---|---|---|
|
span |
Number |
12 |
|
small |
Number |
|
|
medium |
Number |
|
|
large |
Number |
|
|
... |
JSX.IntrinsicElements["div"] |
|
Row
|
Name |
Values |
Default |
|---|---|---|
|
isNested |
Boolean |
False |
|
... |
JSX.IntrinsicElements["div"] |
|
Col
Set the width (in columns out of 12) that this Col should span at each breakpoint.
|
Name |
Values |
Default |
|---|---|---|
|
span |
Number |
12 |
|
small |
Number |
|
|
medium |
Number |
|
|
large |
Number |
|
|
... |
JSX.IntrinsicElements["div"] |
|
Composition
- Margin
- Column
- Gutter
- Desktop (Grid width: 961px-1200px)
- Tablet (Grid width: 577px-960px)
- Mobile (Grid width: <576px)
|
Tokens |
|
|---|---|
|
Breakpoint - Small, medium, large |
breakpoint.small breakpoint.medium breakpoint.large |
|
Media query - Small, medium, large |
mediaQuery.small mediaQuery.medium mediaQuery.large |
|
Custom media query - Small, medium, large |
customMediaQuery.small-and-up customMediaQuery.medium-and-up customMediaQuery.large-and-up |