Layout Primitives

Layout primitives bring more advanced functionality to a design system. Figma’s auto-layout describes the use of spacers and its auto-layout function describes layouts in terms of flex properties. *Currently layouts cannot be componentized in Figma, but someday they could be!

Layout primitives introduce a shared development language for designers, engineers, and AI agents.

‍

Spacers in Layouts

‍

‍

‍

Padding

‍

‍

Gap

‍

‍

‍

Figma's Auto-Layout and Flex Properties

‍

‍

I found that in my 7 engineering team’s  scss files that flex properties were being described individually everytime. Not only that, but when using AI to generate code, it would also use flex classes.

‍

Layout Primitives as described in Figma and Code, can act as composite classes combining many classes and variables into easy to apply elements. Composite classes can bridge the gap between design and engineering through a shared understanding of what Figma’s auto-layout is describing.

Composite classes are different than utility classes because utility classes only describe one thing whereas composite classes describe many things at once.

‍

‍

.row

Figma’s auto-layout allows designers to orient containers into row or column orientations. Not only that, but designers can describe things like flex-start, flex-end, distribute, space between, and more. Layout primitives should have the equivalent to these attributes.

‍

‍

:Root {

.flex-row {
  display: flex;
  flex-direction: row;
  gap: var(--spacer-rem-m, 16px);
  justify-content: var(--justify-content, flex-start);
}

<!-- Default alignment (flex-start) -->
<div class="flex-row">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Center alignment -->
<div class="flex-row" style="--justify-content: center;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>
}

.column

Figma’s column orientation carries the same properties albeit oriented and distributed vertically.

‍

‍

:root {

.flex-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacer-rem-m, 16px);
  justify-content: var(--justify-content, flex-start);
}

<!-- Default alignment (flex-start) -->
<div class="flex-column">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Center alignment -->
<div class="flex-column" style="--justify-content: center;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>
}

Limitations of Figma

‍

‍

Unit Types: PX

A container might be set to “fill.” what this means is that the container is set to 100% of its parent container. This is not described well in Figma even though an engineer will need to use a variable for it.

‍

Lack of Grid

When grid is more appropriate than flex, Figma dev mode still only shows flex. Unless annotated, it is at the engineers discretion to understand the requirement of the design and the designers intention.

‍

Layout Primitives (Don't repeat yourself)

‍

‍

As a design system matures, dev mode inspect in Figma becomes less useful. After awhile it just becomes unique css properties and variables (which are still useful,) but with layout primitives, writing out flex or grid properties every time is unnecessary. Layout primitives unlock a shared language and intuitive meaning to layouts. 
Onboarding new engineers and AI agents to your repos gets a lot easier, (and your code gets cleaner,) with the use of layout primitives.

‍

Testing AI Agents with Layout Primitives

‍

‍

In my experience, once variables and layout primitives are established, AI generated code gets a lot more sustainable. My biggest frustration with using lovable, bolt, builder.io, and claude, gemini, or openAI in my code editor, is that it struggles to implement wide reaching concepts about development. What I mean is this- does it see your design system repo? Will it code in a way that is sustainable to your already implementing coding practices? 

Once foundational concepts are in place, the code generated seems to be a lot better.