If you are a designer just starting out with design systems, all those complex components, styles, and pages you often see can feel overwhelming. However, experienced designer Tim Gabe explains in his recent video that a design system doesn’t have to be complicated. In fact, it’s best to start simple.
In this post, I’ll walk through Tim’s step by step guide to building a basic design system that saves you time as your projects grow.
Before Design System, Start Designing Freely
When beginning a new project, Tim advises not to think about the design system right away, this is how I do it also (top to bottom approach). Just focus on designing screens and flows based on the product requirements and use cases.
Once you start reusing the same elements repeatedly, like buttons, icons, and text styles, that’s a sign it’s time to start extracting them into a design system. The reuse signifies they are core elements that you can standardize on.
Extract Reusable Elements into “Atoms”
The initial building blocks of a design systems are called “atoms” in the atomic design methodology. These are basic elements like icons, buttons, and text styles that are used repeatedly.
For example, if you find yourself reusing a specific icon size and button style throughout your project, promote them to be the first components in your design system. Make icons flexible by providing multiple sizes and build different button states like hover and active.
Doing this early on will save you time down the road.
Combine Atoms into “Molecules”
The next step is to look for combinations of atoms that appear together frequently. For example, maybe a certain icon always appears next to a certain text style in a label. Combine them into a new component as a “molecule” in your system.
Making molecules out of repeated patterns like this further reduces duplication in your design files.
Build Complex “Organisms”
The third tier of components are “organisms” – more complex interfaces made of grouped molecules and atoms. A great example is cards, which commonly contain things like icons, images, text, and buttons arranged together.
Make organisms like cards flexible by creating variations of them, such as “success” and “error” states that alter the content and styles appropriately.
Create Template Pages
Lastly, you can optionally capture full sections or pages of an interface as templates in your system. Think of common arrangements like “pricing page” or “product listing” that have standardized structures and layouts across your site or app.
By planning these types of templates early in your design system, you start off new pages with proven layouts already solved.
Design System Best Practices
Tim shared a few closing recommendations for developing design systems effectively:
- Stay context-aware – don’t overcomplicate your system. Expand gradually as your needs evolve.
- Focus on saving time by repurposing elements, not rebuilding.
- Rely on design tools like Figma’s component properties to enhance flexibility.
The key is starting with a light-weight foundation of just the most reused elements. You can build up complexity over multiple projects. Let the design system evolve naturally from how you work.
Start Building Your Own Design System
Hopefully this gives you a simplified way to think about creating a design system, even as a solo designer or on small teams. Follow the steps to extract reusable components, combine into new elements, and capture organization and layout patterns.
The system will grow along with your product, so don’t aim for perfection upfront. Focus on saving time by reusing elements wisely right from the start of your next project.
For more useful design advice and tutorials, read my other articles where I write about anything and everything about design or check out content creator’s like Tim Gabe! Here is his full video ↓
Conclusion and Design System Takeaways
In summary, building an effective yet simple design system does not need to be an intimidating process, even for beginners. The key is starting small and letting your system evolve naturally based on the components and patterns you find yourself reusing across your project.
Follow an incremental approach – extract basic atoms first, then combine them into molecules and larger organisms. Optionally capture page section templates too. Focus on repurposing elements to save time, rather than rebuilding from scratch.
The video provides a straightforward methodology for constructing a design system tailored to your needs. Implementing these atomic design principles will help streamline your workflow and maintain consistency as your product grows.
The main takeaways are:
- Design freely at first, then identify reusable elements
- Promote reusable UI atoms into your system first
- Combine related atoms into molecule components
- Build larger organism components like cards
- Optionally create template layouts for pages
- Expand your system gradually as needed
- Reuse components to save time
Starting simple sets you up for success building a design system. Follow these steps to create a flexible yet consistent foundation for all your design work moving forward. Good luck 👍🏻