Size and Spacing. Variables. Design System • Yellow

∴​​​​​​​ 30 days of Design System • Yellow ∴​​​​​​​ Day 4 ∴

I hope you are still full of energy. One more key part of DS·Y.

Today it's a Size and Spacing section based on Figma variations option.

Thanks to the new Figma function, we have the opportunity to maintain design consistency by controlling the size of design system elements. For now, we can work with Global and Alias size tokens.

Global tokens are elementary values. They are applied to the complete list of all available options in the design system. This list of sizes is the basis for planning the rules for using Padding, Radius and Gap.

Design tokens that are context-specific and reference Global tokens are called Alias. They are also known as semantic tokens.

Padding

This list of sizes allows you to control the allowable Paddings to maintain design consistency.

Radius

This list of sizes allows you to control the allowable Radius to maintain design consistency.

Gap

This list of sizes allows you to control the allowable Gaps to maintain design consistency.

Thats it. Thanks to new Figma features we have an opportunity to use a Variable option for this process. Variables in DS·Y for Figma design store reusable values that can be applied to all kinds of design properties and prototyping actions. They help save time and effort in designs, managing design systems, and creating complex prototyping flows.

For the Token logic. This is a separate topic of conversation. You can find more in the documentation for the Design system Yellow inside the Figma file.

Design tokens that are context-specific and reference Global tokens are called Alias. They are also known as semantic tokens.

Padding

This list of sizes allows you to control the allowable Paddings to maintain design consistency.

Radius

This list of sizes allows you to control the allowable Radius to maintain design consistency.

Gap

This list of sizes allows you to control the allowable Gaps to maintain design consistency.

Thats it. Thanks to new Figma features we have an opportunity to use a Variable option for this process. Variables in DS·Y for Figma design store reusable values that can be applied to all kinds of design properties and prototyping actions. They help save time and effort in designs, managing design systems, and creating complex prototyping flows.

For the Token logic. This is a separate topic of conversation. You can find more in the documentation for the Design system Yellow inside the Figma file.

You can find Design System • Yellow file in Figma here 👉 https://www.figma.com/community/file/1312130033201614801/design-system-yellow

I would love to hear your feedback.

Please share your thoughts with me.