How to craft high-quality, reusable and scalable design system components
Hi! 👋 I’m Kim and I currently work as a Product Designer for the Design System Squad at Alcumus. Throughout my career, I have worked as a UI Designer, a UX Designer and, in recent years, a Product Designer specializing in Design Systems. I’ve used and built my fair share of reusable interface design components and I’d like to share what I’ve learned in my experience.
In the realm of software design, where creativity and functionality converge, the significance of creating reusable, scalable, and consistent design components cannot be emphasized enough. The ever-evolving landscape of software development pushes designers to stay ahead of the game. Just like reusable code exists, designers must ensure design consistency by utilizing robust and reusable design assets.
What are reusable components and what are their benefits?
Reusable design components are pre-built, modular elements that can be used across different parts of a software application, website, or any other design project. These components are designed to perform a specific function or provide a particular user interface (UI) element. They are created to be easily integrated into various parts of a project without the need to recreate them from scratch each time.
The benefits of using reusable design components include:
- Efficiency: Reusable design components eliminate the need to start from scratch with every new project. This accelerates the design process, allowing designers to focus on refining and tailoring elements rather than reinventing them.
- Consistency: Reusable components ensure a uniform and harmonious design language across different sections of an application or multiple projects, enhancing user experience and brand identity.
- Innovation: By building upon existing design elements, designers can experiment and innovate more effectively, pushing the boundaries of creativity while maintaining a familiar user experience.
- Maintenance and future readiness: As technology evolves, new devices and platforms emerge—scalable design components future-proof designs, saving you from significant redesign efforts down the road.
So, how do you build easy-to-use and reusable components?
Building quality components requires careful research, planning, organization, and attention to detail. Here’s a step-by-step guide to building quality components:
Know and understand best practices and patterns of similar components used elsewhere
Reinventing the wheel can be detrimental to Designers and users of what you are designing (e.g., Software apps). Ensuring familiarity enhances user experience and diminishes cognitive load, making the software easy to use. Do your research and understand how components are built by leading software companies such as Human Interface Guidelines and Material Design, as generally, they are the most recognized and familiar.
Know and understand the use cases of the components you are to build
What are some ways a component will be used? For example, an input field can be used in places like a questionnaire, a search field in navigation, or a purchase checkout. It’s important to know what visual variations are needed for each use case beforehand to not over-engineer the component requirements, which would add unnecessary scope to your work.
Understand the design system
Ensure the colour palette, typography, spacing, patterns and other design elements used consistently throughout your project are well-defined. These assets will be used repeatedly in your components, so it’s essential to understand them well before you start your component design.
Know your tools
Stay up to speed with the newest features of your preferred component-building tool. For example, Figma recently dropped some massively helpful features such as style variables, mathematical expressions, nested instances and conditional logic. These features align your components with the latest technologies, allowing them to be quickly amended to the next new thing that comes around.
Create a separate library file for components
Start by creating a new Figma file dedicated explicitly to building components. This file will be your design system library, where you’ll organize and store all the components. Utilize separate libraries for specific device types: web, tablet, and phone. This allows components to have device-specific patterns and makes it easy for Designers to know which component to use in their designs.
Build components atomically
Begin by atomically creating the foundational components, such as buttons, icons, inputs, form input wrappers, cards, etc. These should be the basic building blocks used across various components and designs. This allows for quick maintenance where changes to the atoms will waterfall into the larger molecules and organisms that utilize them.
Build to avoid parent detachment
The main goal here is to ensure the component provides all the overrides needed to build a mockup and prototype. Designers should be able to avoid detaching a component instance from the library. Detaching a component instance from its original parent component eliminates the capability to inherit any changes made to the parent component, thus losing any future iterations and maintenance.
Name and organize layers and pages
Use clear and consistent naming conventions for your layers and groups. This makes finding and using the components easier for you and your team. Also, ensure that layer names match across component variations for prototyping.
Use Auto Layout and Constraints
Ensure your components resize and adapt appropriately in different contexts or screen sizes.
Build variations
As mentioned previously, components can have a vast amount of use cases. Build variations of a component to keep components streamlined without duplicating them, creating an overabundance of inventory. For example, you can create a button component with different states like “Primary,” “Secondary,” “Disabled,” etc., all within the same component.
Know and apply rules and guidelines for accessibility
Follow WCAG standards to ensure the component is accessible to all users. Incorporate these standards into every component where possible.
Document component guidelines
Alongside your components, create design system documentation (we use zeroheight and Storybook) that explains how to use each component. Include details like colour usage, text styles, anatomy, states, spacing, patterns, accessibility, and any other guidelines that help maintain design consistency.
Gather feedback and iterate
Collaborate with your team members or stakeholders to gather feedback on the components. Iterate and refine them based on the input to ensure they meet project requirements.
Version control
As your design system evolves, maintain version control to track changes and updates. If needed, Figma’s version history feature allows you to roll back to previous versions.
Share and collaborate
Once you have a robust set of quality components, share the design system library with your team so everyone can access and use the components consistently.
Test components in actual use cases
Put your components to the test by using them in real design projects. This will help you identify any issues or improvements needed.
So there you have it; you should have a well-thought-out component library that can be utilized in countless mockups. Know, however, that building quality components is an ongoing process, as component libraries are living, breathing documents. As you continue to work on projects, you might discover new requirements or areas for improvement. Regularly update and refine your components to ensure they remain relevant and effective in your design system.
Thanks for reading! 😊
