Figma Dynamic components & Variants in design systems

Figma Dynamic components & Variants in design systems. 

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 the design system but shows how to play with variants during the creation process.

Start:

• Divide by types: types most often mean contexts, component types, web/mobile, or even color themes, u need to decide on this.
• Then define a 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 giving names for property values or variants. Contexts are unlimited, but you want to limit your library by using only variants of components structure.