My role in spearheading two pivotal projects at Niyo: the development of a comprehensive Design System, an extensive Component Library, and the seamless integration of Dark Mode. These initiatives aimed to streamline design processes, enhance collaboration between design and tech teams, and improve overall efficiency. This document explores the process, challenges, and outcomes of these projects, showcasing the impact on design workflow and company efficiency.
Creating your own design system
Where to start?
When embarking on the journey of creating a design system, the initial steps can significantly influence the system’s success. There are two distinct approaches to consider, each with its merits and considerations.
Organic Growth:
As the system matures, new elements seamlessly integrate to accommodate emerging use cases. When the system reaches a certain level of maturity and saturation, it becomes an opportune moment to formalize it into a structured design system.
Strategic Planning:
It begins with the establishment of a basic system that aligns with the current product’s needs. Subsequently, this evolving system serves as the foundation for accommodating new, unexpected use cases as they arise.
Advantages
- Creative freedom prevails, allowing for innovative solutions.
- Continuous adaptability to evolving needs and unforeseen scenarios.
- No immediate need for rigid guidelines or constraints
Advantages
- Proactive preparation for future design requirements.
- A structured foundation ensures consistency and scalability.
- Gradual integration of new elements enhances system robustness.
Ultimately, the choice between these approaches depends on your specific circumstances, project goals, and team dynamics. Whichever path you choose, the key lies in fostering a design environment that fosters creativity and adaptability while remaining mindful of the system’s long-term vision.
Typography
It’s a pivotal step that requires careful consideration, as fonts wield significant influence over a project’s visual identity and user experience.
Understanding Fonts:
At its core, a font is a unique amalgamation of several attributes, including the typeface family, typeface style, weight, and size. Even fonts with the same typeface family and weight but different sizes are distinct entities. One of the primary objectives should be to minimize the proliferation of fonts within the system.
Controlling Typeface Variety:
The question arises: how many typefaces should be employed in your design system?
Broadly speaking, there are two categories: brand typefaces and UI typefaces, each serving distinct purposes.
Brand Typefaces
- The selection of a brand typeface may not be negotiable, as it plays a pivotal role in giving a brand its unique identity.
- Brand typefaces may embrace quirky features, aiming to be memorable and align aesthetically with the brand’s image.
UI Typefaces
- UI typefaces should aim for invisibility. UI fonts should exhibit clarity and cleanliness, optimized for screens at various font sizes.
- They need not necessarily align with the brand typeface. However, if the brand typeface is clean and suitable for small sizes, it can also serve as the UI font.
Ultimately, the choice between these approaches depends on your specific circumstances, project goals, and team dynamics. Whichever path you choose, the key lies in fostering a design environment that fosters creativity and adaptability while remaining mindful of the system’s long-term vision.
Auditing and Rationalizing:
The next crucial step involves auditing existing screens to identify the assortment of fonts in use. Map out the diverse use cases, striving to minimize font diversity wherever possible. During this process, it’s essential to consider whether the design system will primarily serve web or mobile platforms, as different nomenclatures and considerations apply.
For web design, you commonly encounter designations like H1, H2, H3, H4, H5, H6, and body text. In the mobile context, designations shift to Headline (Small, Medium, Large), Title (Small, Medium, Large), Label (Small, Medium, Large), and Body (Small, Medium, Large).
By scrutinizing and thoughtfully selecting fonts for these categories, you not only enhance visual consistency but also ensure optimal readability and user experience across different screen sizes.
Typography is a pivotal facet of any design system, influencing both aesthetics and usability. Careful typographic considerations are a foundational step towards a robust design system.
Typestyles used at Niyo
Color
A color is a potent tool in design systems, with five primary categories that warrant meticulous consideration: Brand, Status, Surface, Text, and Additional colors. Let’s explore each of these categories in detail to understand their significance in shaping a robust design system.
Brand Colors:
At its core, a font is a unique amalgamation of several attributes, including the typeface family, typeface style, weight, and size. Even fonts with the same typeface family and weight but different sizes are distinct entities. One of the primary objectives should be to minimize the proliferation of fonts within the system.
- Primary and Secondary: Brand colors are the visual embodiment of your brand’s identity. They may consist of primary and secondary hues. These colors typically exhibit strong contrast, ensuring legibility and visual impact. Consider including a lighter version of your primary brand color, referred to as the ‘container’ color, for background use.
- Brand Primary, Brand Primary Container
- Brand Secondary, Brand Secondary Container
Status Colors:
- Categorizing Status: For effective user communication, designate status colors for common states like success, error, and warning. Even if your brand colors resemble these states (e.g., red, yellow, green), define status colors separately to maintain clarity and consistency.
- Error, Error Container
- Success, Success Container
- Warning, Warning Container
Surface Colors:
- White and Greys: Surface colors encompass white and various shades of grey. It’s advisable to employ a linear naming convention to make colors easy to remember. For example, Material theme uses Surface, Surface 1, Surface 2, and so forth. Avoid pure white for backgrounds; opt for a gradient from light to dark.
- Surface
- Interface Light (Surface 1)
- Interface Dark (Surface 2)
- Divider Light (Surface 3)
- Divider Dark (Surface 4)
Text Colors:
- Text Hierarchy: Text colors play a crucial role in readability. Consider four types: primary, secondary, tertiary, and link colors. Primary text should avoid pure black, adding a hint of brand color if desired. Link color is typically blue but can align with the brand color.
- Text primary
- Text secondary
- Text tertiary
- Link
Additional Colors:
- For Special Use Cases: These colors cater to specific, non-standard use cases. Examples include primary CTA colors, overlay hues, and colors for infographics, icons, or charts. Minimize their number and establish a clear hierarchy. For a single color, consider three variations: base color, container color, and overlay color.
- Pink: Base pink color (attention-grabbing)
- Pink Container: Light shade of pink (background)
- On Pink Container: Dark shade of pink (text or icons on the pink background)
Accessibility Considerations:
When selecting colors, ensure they meet accessibility criteria. Colors used for text or icons should maintain a sufficient contrast ratio to ensure legibility, especially for users with visual impairments.
Incorporating these color categories into your design system provides a structured framework that enhances visual consistency and user experience across your products. A harmonious color palette, balanced with accessibility, is a cornerstone of a successful design system.
Colors used at Niyo. Light Mode and Dark Mode
Elevation
Elevation, adds a layer of depth and realism to user interfaces. This section delves into the intricacies of using elevation effectively in your design system.
Understanding Elevation:
Elevation in design refers to the simulated distance between components along the z-axis. It’s a key element that lends dimensionality to your user interface. Elevation can be categorized into various levels, typically from level zero to a higher number, such as level 5.
Strategic Use of Shadows:
Rather than applying shadows indiscriminately, employ them judiciously. Shadows serve specific purposes, such as providing a visual separation between overlapping surfaces or drawing attention to interactive elements. Here are three scenarios where shadows play a vital role:
- Two Surfaces with Distinct Tonal Values: Shadow is not needed to emphasize the separation between two surfaces. With different tonal values, it creates a clear distinction.
- Two Surfaces with the Same Tonal Values: When dealing with surfaces of similar tonal values, employ shadows to visually separate them, ensuring clarity and preventing visual confusion.
- Scrim for Separation: Another approach is to employ a scrim, a semi-transparent overlay, to distinguish between surfaces with identical tonal values. This approach can provide a subtler separation effect.
Less is More
A minimalist approach to elevation yields greater impact. Avoid cluttering your UI with excessive levels of elevation, as this can dilute their effectiveness. A streamlined approach ensures that shadows guide attention and action precisely, enhancing the overall user experience.
By following these principles, you can harness the power of elevation to create visually appealing, intuitive, and user-friendly interfaces.
Elevation used at Niyo
Creating Themes
Themes provide a powerful mechanism to customize your design system to suit different brands, products, or even the preferences of your users. This section explores the significance of themes and how they can be harnessed effectively.
Use the Same Design System for Different Brands:
Imagine you’ve meticulously crafted a design system tailored to brand A, complete with its unique colors, typography, and elevation. Now, your organization intends to deploy the same design system for brand B, which necessitates a distinct visual identity. This is where themes shine.
Creating Themes
To achieve this transition seamlessly, you establish a theme for brand B. Each color from theme A corresponds to a color in theme B, maintaining the same number of colors while ensuring similar contrast levels. The same principle applies to typography, allowing for a cohesive look across diverse brands.
Implementing a Dark Mode
Dark mode, while popular, can be complex to implement, especially when dealing with a multitude of colors. In a simple scenario with just three colors—white, grey, and black—converting to dark mode entails straightforward transformations. White becomes black, grey remains constant, and black transforms into white.
Introducing HCT: However, real-world design systems often encompass a broader color palette. To streamline the dark mode transition, designers turn to the HCT color space—Hue, Chroma, and Tone.
HSL is inefficient in determining percieved lightness. In this example each color has same ‘Lightness’ yet different contrast.
HCT Simplifies Contrast and Accessibility: HCT simplifies the process by integrating contrast through tone, a measure of lightness. It ensures accessibility standards are met, guaranteeing the legibility of text on any background.
Tonal Palettes for Consistency: Designers create tonal palettes, which consist of colors with varying tones but fixed hue and chroma. These palettes ensure consistency in contrast and accessibility.
Tonal palette generated by Material Theme Builder
Streamlining Dark Mode with Tonal Palettes: Using tonal palettes simplifies the selection of dark mode colors. For instance, if color A in light mode has a contrast ratio X with white, you can easily identify the corresponding color in dark mode with the same contrast ratio X against black.
Accessibility Compliance: Tonal palettes facilitate checking the contrast ratio between colors within the same library, ensuring adherence to accessibility criteria.
Incorporating themes and leveraging the HCT color space not only allows for versatile design system adaptation but also simplifies the intricate process of implementing dark mode, ultimately enhancing the usability and accessibility of your products.
Using variables, you can easily switch between dark and light mode designs.
Creating Elements
A design system is a structured framework comprising three fundamental components: Atoms, Molecules, and Organisms. These building blocks form the foundation of your design system and serve as the basis for crafting cohesive and consistent user interfaces. Let’s dive into each of these elements to understand their roles in shaping your design system.
1. Atoms:
Atoms represent the most basic, indivisible design elements that compose your system. These include colors, typography, elevation, and shapes, among others. Atoms set the visual and functional standards that guide the design of more complex elements. By standardizing these atomic components, you establish a robust foundation for your design system.
2. Molecules:
Molecules are the tangible UI components created by combining atoms. These encompass various user interface elements such as buttons, input fields, toggles, radio buttons, checkboxes, navigation elements, chips, sliders, banners, tooltips, indicators, tags, search bars, and more. To maintain consistency and coherence across your design system, it’s essential to identify these molecules, define their variations, and ensure they adhere to standardized guidelines.
3. Organisms:
When molecules are assembled to create more intricate visual elements or UI features, they form organisms. Consider organisms as composed entities that serve specific purposes within your interface. For instance, a card housing an image, buttons, and text can be regarded as an organism. These organisms provide a structured way to design complex UI components by combining molecules and atoms.
Templates:
Templates represent the culmination of your design system’s components. These are pre-designed layouts or structures that can be applied to various parts of your actual product. Creating templates is a valuable practice as it streamlines the design process and ensures consistency. To identify templates, analyze your existing system for recurring patterns or elements that appear frequently in the design. Standardize and make these patterns consistent across different products.
Examples of Templates:
- Terms and Conditions Page: Create a template for terms and conditions pages, ensuring a uniform presentation of legal information.
- Bottom Sheet: Develop a template for bottom sheets, which are commonly used for various interactions in the UI.
- Status Screens: Design templates for success, failure, or warning screens. Vary the templates according to the level of emphasis needed. For instance, use a simple snackbar for small success notifications, a bottom sheet for medium emphasis, and a full-page template for a full emphasis success state.
- Verification and OTP Screens: Standardize templates for verification and OTP (One-Time Password) screens, as these are frequently encountered UI elements.
By systematically creating and utilizing these templates, you accelerate the design process, enhance the verification of your designs, and establish a cohesive and efficient design language.
Technical Considerations
Before creating a design system, it’s essential to address several technical considerations. These factors lay the groundwork for a streamlined and efficient design system development process.
Platform
Platform selection is paramount. Determine whether your intended design system is for web, mobile phones, tablets, or specific operating systems like Android or iOS. Many visual elements are platform-dependent, and something as fundamental as a date picker can vary significantly between iOS and Android. Moreover, the choice of technologies used in building your app plays a crucial role. If you’re developing natively for iOS or Android, you can leverage existing component libraries to save time and effort. Utilize these default elements unless your design requires unique components that don’t exist in the system library. If you’re using frameworks like Flutter, you can access both iOS and Android libraries, allowing you to choose elements that best align with your design system and customize them accordingly. This approach is more efficient than building everything from scratch.
Figma Best Practices
Autolayout and Efficiency: When creating components in Figma, prioritize autolayout wherever possible. Design elements should be constructed efficiently, avoiding unnecessary groups, frames, or autolayouts. Every layer should be appropriately named, reflecting its purpose. Define all variants within the components. Maintain consistent layer names across variants. When hiding elements for specific variants, don’t delete them; instead, hide them from the layers.
Base Component: For complex components, consider creating a base component that provides a framework. This base component can be used to create main components. When future changes are necessary, update the base component, and the changes will cascade to all variants of the main component and every instance of it.
Theme Variables: If your design system includes themes like dark and light modes, utilize variables in Figma. This enables seamless switching between different design modes.
Design System Consistency: In the final design, avoid the use of any colors, fonts, or elevations outside of the established design system. If such a need arises in the future, consider adding it to the design system for consistency.
Maintaining Versions
Managing design versions is crucial. You have several options for version control in Figma. You can create a duplicate file and label it, such as “Product A V1.0,” keeping it untouched and handing it over to developers. Ensure that this file remains unaltered after handover, and communicate any bug fixes or changes to the developers.
- Branching: Figma offers branching for version control. In an ideal scenario, the main branch remains untouched, and all work is done in separate branches. This includes small changes or improvements to the current version. Once the design is ready and approved, it should be merged with the main file. If bugs arise, you can create new branches to fix them.
- Workaround for Large Files: In cases where your design file is extensive and merging branches may lead to conflicts, consider the following workaround. Designers can work in the main branch. When the file is ready for handover, create a new branch with the version name. Share the branch link with developers, and this branch remains untouched. Bug fixes are made in the main file, creating new bug-fixed branches as needed. This allows designers to work on the next version and explore on the main branch, while developers have access to a clean, untouched file on the branch. This approach eliminates the need to merge branches and provides easy access to all versions within the same file.
By addressing these technical considerations, you’ll set the stage for a well-organized, efficient, and adaptable design system.
Conclusion
Creating a design system is a journey without hard-and-fast rules. While you can draw inspiration from existing design systems like Material Design or IBM Design, crafting your unique path is essential. Design systems are inherently use-case specific, and your system may have distinct needs. Here are key takeaways to guide you on your design system journey:
No One-Size-Fits-All
There’s no one-size-fits-all approach to design systems. Observe existing design systems for different products and learn from their solutions. However, keep in mind that your system’s requirements may vary. If a simple design system suffices, don’t complicate it needlessly. A design system should simplify your work, not add unnecessary complexities.
Customization is Key
Design systems are versatile and adaptable tools. Customize them to meet your unique needs. While you can draw inspiration from established systems, remember that your design system should align with your specific project or product.
Collaboration is Crucial
Design systems are not just for designers; they’re for everyone involved in the development process. Collaborate closely with developers while creating your design system. It should be user-friendly, with well-defined components and styles easily discoverable through keywords.
Ease of Use
A user-friendly design system is essential. Ensure that designers can access and utilize components and styles effortlessly. Assign keywords to different elements to facilitate easy retrieval, making the design system a true asset in your workflow.
Remember that your design system is a dynamic tool that should evolve as your project progresses. It’s a powerful resource to maintain consistency, streamline workflows, and enhance the user experience. Embrace the flexibility of design systems, forge your unique path, and create design systems that empower you and your team.
Systematically creating and utilizing these templates, you accelerate the design process, enhance the verification of your designs, and establish a cohesive and efficient design language.
Shoutout
A huge thank you to the tech team for successfully implementing the design system and to the design team for your continuous support. Your efforts have made this design system widely usable and impactful.
