Your design system is more than a collection of reusable, shared assets. It should be an adaptable system of foundations, design principles, patterns, guidelines, components, and tools. Think of it as the hub that combines all the best practices for creating products.
Your design system is more than a collection of reusable, shared assets. It should be an adaptable system of foundations, design principles, patterns, guidelines, components, and tools. Think of it as the hub that combines all the best practices for creating products.
STEP 1
Define your building blocks
Defining foundations will get you far.
Defining foundations will get you far.
Design Principles
Design principles aren't just about aesthetics; they're your organization's way of saying, "This is us." Think about what you want to convey. Playful startup or polished corporate? Your design is your first impression, your silent ambassador. Balance and contrast aren't just artistic fluff; they're crucial in making your design resonate or fall flat. Repetition is your brand's sticky note, and proper alignment and hierarchy ensure your key message doesn't get lost in the noise.
Space, movement, unity, variety – these give your design its voice. Space lets your message breathe, movement directs the eye, unity ties everything together, and variety keeps it fresh.
All in all, design is more than a pretty face; it's a declaration of your identity. Make it bold, and most importantly, make it yours.
Design principles aren't just about aesthetics; they're your organization's way of saying, "This is us." Think about what you want to convey. Playful startup or polished corporate? Your design is your first impression, your silent ambassador. Balance and contrast aren't just artistic fluff; they're crucial in making your design resonate or fall flat. Repetition is your brand's sticky note, and proper alignment and hierarchy ensure your key message doesn't get lost in the noise.
Space, movement, unity, variety – these give your design its voice. Space lets your message breathe, movement directs the eye, unity ties everything together, and variety keeps it fresh.
All in all, design is more than a pretty face; it's a declaration of your identity. Make it bold, and most importantly, make it yours.
Design principles are closely connected with Brand tone and Voice.
Design principles are closely connected with Brand tone and Voice.
Color Palette
Each color sets a tone, evokes an emotion, and tells a part of your story. Your color palette is the first impact on the user. Make it harmonious and don't forget to make it accessible.
Each color sets a tone, evokes an emotion, and tells a part of your story. Your color palette is the first impact on the user. Make it harmonious and don't forget to make it accessible.
STEP 2
Components
When you are considering if the component is valuable enough to be part of the design system, ask yourself:
When you are considering if the component is valuable enough to be part of the design system, ask yourself:
You're looking to start with the most impactful steps first. Begin with the commonly used components. Move from the smallest building blocks to the bigger ones. Don't overcomplicate. Start with a few components, create them, share the Figma library and see what works and what not.
You're looking to start with the most impactful steps first. Begin with the commonly used components. Move from the smallest building blocks to the bigger ones. Don't overcomplicate. Start with a few components, create them, share the Figma library and see what works and what not.
Another exercise that helps when creating a design system is defining what you want your finished system to include. Not all design systems are the same — some are relatively basic, and others are much more advanced. Some are public, some will stay private forever.
Another exercise that helps when creating a design system is defining what you want your finished system to include. Not all design systems are the same — some are relatively basic, and others are much more advanced. Some are public, some will stay private forever.
For example: do you want to search through your components, write extensive documentation, add downloadable assets (branding materials, .svg icons, etc.), accessibility guidelines, etc.?
For example: do you want to search through your components, write extensive documentation, add downloadable assets (branding materials, .svg icons, etc.), accessibility guidelines, etc.?
What is the primary purpose of this component?
What is the primary purpose of this component?
What is the primary purpose of this component?
What functionality does it need to provide?
What functionality does it need to provide?
What functionality does it need to provide?
How does it contribute to the user experience?
How does it contribute to the user experience?
How does it contribute to the user experience?
Is it visually and functionally consistent with other components?
Is it visually and functionally consistent with other components?
Is it visually and functionally consistent with other components?
Does it follow our design principles?
Does it follow our design principles?
Does it follow our design principles?
How does it interact with existing components?
How does it interact with existing components?
How does it interact with existing components?
Is the component flexible enough to be used in different contexts and brands?
Is the component flexible enough to be used in different contexts and brands?
Is the component flexible enough to be used in different contexts and brands?
How will it scale across various screen sizes and devices?
How will it scale across various screen sizes and devices?
How will it scale across various screen sizes and devices?
Is the component accessible to all users, including those with disabilities?
Is the component accessible to all users, including those with disabilities?
Is the component accessible to all users, including those with disabilities?
Did you test it?
Did you test it?
Did you test it?
Are there any technical constraints or requirements for this component?
Are there any technical constraints or requirements for this component?
Are there any technical constraints or requirements for this component?
How will this component be maintained and updated over time?
How will this component be maintained and updated over time?
How will this component be maintained and updated over time?
Is the design adaptable to future changes in technology or user needs?
Is the design adaptable to future changes in technology or user needs?
Is the design adaptable to future changes in technology or user needs?
Don't end up with 1000 components with slight differences. You will add a lot of complexity and, ultimately, design and tech debt.
Don't end up with 1000 components with slight differences. You will add a lot of complexity and, ultimately, design and tech debt.
It's like baking a cake. 🎂
If you add too many layers,
everything will fall apart.
It's like baking a cake. 🎂
If you add too many layers,
everything will fall apart.
Learn
About me
The Design System Guide Newsletter
Get new design system tips, tutorials, and insights in your inbox. No ads, no fluff.
© 2022 - 2024 The Design System Guide by Romina Kavcic
Learn
About me
The Design System Guide Newsletter
Get new design system tips, tutorials, and insights in your inbox.
No ads, no fluff.
© 2022 - 2024 The Design System Guide by Romina Kavcic
Learn
About me
The Design System Guide Newsletter
Get new design system tips, tutorials, and insights in your inbox. No ads, no fluff.
© 2022 - 2024 The Design System Guide by Romina Kavcic