- Services
Digital Marketing
Other Services
Eternity Coders - Web and Mobile Development Company
- Services
Digital Marketing
Other Services
While learning how to build a Figma plugin, I stumbled upon a few interesting usages of Flexbox and Grid in Figma. When I found them, I just got distracted and couldn’t resist digging more.
Flexbox and Grid are powerful tools in modern web design, offering solutions for a wide range of layout challenges. This write-up aims to demonstrate their capabilities and showcase interesting use cases that illustrate their strengths.
In particular, there are subtle UI details that can be effectively achieved through these layout systems, details that add a level of polish and refinement to a design.
Flexbox and Grid are not just about creating basic layouts; they allow for nuanced control over spacing, alignment, and responsiveness, making them indispensable in a designer’s toolkit.
Through the following examples, the versatility and elegance of Flexbox and Grid will be highlighted, illustrating how these tools can be leveraged to enhance the user experience with subtle, yet impactful, design elements.
On the right side of Figma, we have the default “Design” tab. When selecting an element on the canvas, we can see its x-axis, y-axis, width, and height values. This also can be different depending on the element being a text, group, frame, and more.
What I found interesting here is using a CSS grid for each row in the design tab. I dig that so, so much.
Consider the following figure.
Each column has a width of 8px.
.raw_components--_singleRow {
display: grid;
grid-template-columns: repeat(28, 8px);
grid-template-rows: 32px;
}
Also, when controlling the details of a some css, for example, the same grid is being used.
