Dynamic Components & Variants In Design Systems Free Figma Template

Dynamic components & Variants in design systems - Free Figma Template

Our short guide on how to use variants when you have to use the same component but different options inside depending on user context. This example does not represent any part of design system but shows how to play with variants during the creation process.

Start:

• Divide by types: types most often means contexts, component types, web/mobile, or even color themes, u need to decide on this.

• Then define dynamic set of options inside: icon, action buttons, close action, content arrangement, heading types, there could be a long list of properties.

• Do not use user contexts when give names for property values or variants. Contexts are unlimited, but you want to limit your library by using only variants of components structure.

Follow us for more updates

This freebie Dynamic components & Variants in design systems was originally shared by HBI Agency on this url.

The category for this freebie is Uncategorized. Tools used to create this freebie are Figma and Adobe XD.

Helpful hint: If the license is unknown, it is usually because they forgot to mention it explicitly; not because they were being stingy. Before using it for a commerical project, you can ask HBI Agency nicely and they will probably allow you to use it.