While discovering exactly how to construct a Figma plugin, I came across a couple of intriguing uses of Flexbox and also Grid in Figma. When I discovered them, I simply obtained sidetracked and also could not stand up to excavating much more.
Flexbox and also Grid have actually been giving us internet designers with great deals of brand-new capacities to construct brand-new designs, and also what I will certainly reveal you in this post is simply that.
To relocate along with this post, you do not require to have an in-depth understanding of Flexbox or Grid, and also I will certainly attempt to describe most instances from scratch.
Allow’s obtain uncovering.
Intro
The objective of this review is to demonstrate how effective flexbox and also grid are and also to highlight those intriguing use-cases for them. There may be a couple of little bits that are concentrated on refined UI information which I such as quite.
Utilizing CSS Grid
On the best side of Figma, we have the default “Layout” tab. When picking a component on the canvas, we can see its x-axis, y-axis, size, and also elevation worths. This likewise can be various relying on the component being a message, team, framework, and also much more.
What I discovered intriguing below is utilizing CSS grid for each and every row in the style tab. I dig that so, a lot.
Take into consideration the complying with number.
Notification exactly how we have numerous lines. Those are for the 28 columns, yes! You check out that right. Any type of row in the style tab is improved top of that grid.
Each column has a size of 8px
raw_components-- _ singleRow {
screen: grid;
grid-template-columns: repeat( 28, 8px);
grid-template-rows: 32px;
}
Additionally, when managing the information of a decrease darkness, for instance, the exact same grid is being made use of.
For me, this is a excellent usage for CSS grid, despite the fact that from the very first glimpse you may believe that those are little designs, however once again, it’s a really legitimate use CSS grid.
Placement switches
In this use, each placement switch is taking 4 columns (32px) of the grid. Notification exactly how the symbol itself is well focused as well.
raw_components-- _ singleRow {
screen: grid;
grid-template-columns: repeat( 28, 8px);
grid-template-rows: 32px;
}
raw_components-- _ iconButton {
grid-column-end: period 4;
}
Aspect placement
In this instance, we see exactly how the inputs for the x-axis and also y-axis are separated, in addition to the newish “Outright placement” switch.
Car design
The little bit that I discovered really intriguing is the Car Format controls.
We have a 28-column * 2 rows grid this time around to fit for the controls that assist us in lining up the kid things within a Vehicle Format container.
stack_panel_v4-- doubleRow {
screen: grid;
grid-template-columns: repeat( 28, 8px);
grid-template-rows: repeat( 2, 32px);
}
Cool. Allow’s explore the information!
On the grid degree, each component is placed utilizing grid-column or grid-row or both.
The placement dots you see are constructed from an SVG pattern. What an amazing information, and also use!
And Also not just that however there is a 3 * 3 grid which contains 9 grid things. I think that those are below to act as a clickable location for each and every placement.
alignment_view_v4-- tooltipGrid {
screen: grid;
grid-template-rows: repeat( 3, 1 fr);
grid-template-columns: repeat( 3, 1 fr);
}
Following, is the indication container where we have the symbol that demonstrates how the components within a Vehicle Format container are lined up.
To make points simpler to recognize, I separated that entire square right into 4 components:
- Base histories
- SVG dots
- The 3 * 3 grid where we have clickable locations
- Sign container (heaven symbol)
We will certainly concentrate on the indication container in the meantime. Allow’s check out the base markup and also CSS.
<
