Design System Approach

Welcome, curious minds, to the magical realm of design systems! Today, we embark on a whimsical journey to uncover the secrets of style guides and components. Prepare your imagination for a delightful adventure!

So, what is design system?

Imagine this: You’re working on a new project, and instead of reinventing the wheel every step of the way, you have a set of guidelines and reusable components at your disposal. Need a button? It’s there. Typography? Got it. Color palette? All set. That’s the power of a design system - a centralized collection of rules, constraints, and reusable components that ensure consistency and efficiency in your design process.

But wait, there’s more! Design systems aren’t just about making your life easier (although they definitely do that). They also play a crucial role in creating a cohesive and delightful user experience. Consistent design patterns and interactions help users navigate your product with ease, building trust and loyalty along the way.

I'd like to introduce you to my ways of creating, defining and maintaining design systems across multiple products and platforms.

Atomic Design

The atomic design approach is a methodology for creating and maintaining design systems, which are sets of reusable components, styles, and guidelines that ensure visual and functional consistency across digital products. Atomic design breaks down the UI (user interface) into smaller, reusable elements called atoms, which are then combined to form more complex components and layouts.

General Structure

In the early stages of preparing a design system, it is crucial to define the project's structure and library. It is important that the library is extracted into a separate file. This ensures that the library remains independent and self-contained, allowing for easy maintenance and scalability. By establishing a clear project structure and a dedicated library file, you can streamline the design system's implementation and empower teams to work efficiently and consistently.

Design System Structure

Implementing a hierarchical structure brings organisation and clarity to the design process. By creating subgroups within these categories, designers can easily access and reuse the most crucial elements, enhancing efficiency and navigation.

Colours - Establishing a comprehensive palette for both light and dark modes, comprising base and token colours.

Typography - Organising fonts into a hierarchical structure that covers various text elements like headlines, subtitles, body text, captions, and overlines.

Grid & Spacing - Defining consistent measurements for paddings, margins, and gaps to maintain visual harmony throughout the project.

Icons - Curating a categorised list of project icons, grouped based on their visual characteristics, such as outlines or solid versions.

Logotypes - Presenting the product logotype in multiple sizes, including 1024, 512, 256, 128, 64, 32, and 16 pixels, for versatile usage.

Design Covers - Creating a master component for covers, ensuring consistent usage across all pages within the design system.

UI Components - Containing all master components essential to the product, fostering design consistency and reusability.

Archive - Archiving elements that are no longer in active use, promoting a clutter-free and focused design system.

Thumbnail - Selecting a design system cover photo to serve as a visually appealing representation of the design system in Figma.

Base Colors

Incorporating base colours in the development of a design system provides a solid foundation for visual consistency and cohesiveness throughout the product. By establishing a set of base colours, designers ensure a unified and harmonious colourpalette that can be used as a foundation for further building tokens. Basic colours contain information such as Hex Colourand easy-to-remember name representation such as eg. green-500.

Typography

The typography system is thoughtfully designed, encompassing a range of font weights to cater to different design requirements. It categorises typography elements into headlines, subtitles, body text, captions, and overlines, ensuring consistency and hierarchy throughout the design system. Each font type is accompanied by detailed specifications, including font-size, line-height, and letter spacing values provided in both pixel (px) and relative em (rem) units, enabling flexible and responsive typography that can be easily scaled and adapted across various screens.

Grid & Spacing

In the design system, grid values are meticulously defined to establish consistent column widths, margins, and gaps between columns. This ensures a well-structured and organised layout throughout the product. Additionally, the system incorporates a spacing unit, measured in pixels (px), which defines consistent spacing and alignment between elements, enabling precise and efficient spacing control within the design system.

Icons

The design system encompasses a comprehensive icon library that serves as a central repository for icons used throughout the product. These icons are thoughtfully organised and categorised based on their distinct types, such as Solid or Outlines. Each icon is accompanied by its own unique name, facilitating easy identification and selection.

Logotypes

Within the design system, there are various sizes of assets available for the logotype. This ensures versatility and adaptability across different contexts and use cases. Whether it's for larger-scale presentations or smaller icons, the availability of different logotype sizes guarantees visual consistency.

Tokens Structure

The Token Structure in Figma allows for the systematic organisation of design elements within a product. Each element, such as a button, is constructed using a combination of dedicated tokens. These tokens follow a three-stage process.

For example - starting with defining the colour in HEX format. Then, the colour is transformed into a base colour, providing consistency across the design system. Finally, the token is assigned a specific name, enabling easy reference and reusability throughout the project.

Tokens Scalability

The tokens created, such as the colourtokens, are designed for reusability within the design system. These tokens can be easily applied and attached to different elements that represent similar functionalities or design components, ensuring consistency and coherence throughout the product. By leveraging token-based design, changes to the underlying tokens automatically propagate across all associated elements, streamlining design updates and maintaining visual harmony across the entire system. This approach saves time and effort, promotes design efficiency, and allows for scalable and consistent design implementation.

Tokens List

In the design system, every defined token is meticulously listed to provide a comprehensive overview of all tokens used in the product. The list is thoughtfully organised into categories such as Content, Background, and Border, allowing for the storage and management of variable tokens based on the specific purposes of each element.

Native Elements

We leverage pre-existing native components within our apps, incorporating variable fonts and colourtokens to maintain consistency and visual harmony. Additionally, we ensure responsiveness by meticulously preparing Auto Layouts, enabling our designs to seamlessly adapt to various screen sizes and orientations. This native-centric design approach not only enhances user experience but also streamlines the design process, promoting efficiency and familiarity for both designers and users.

Auto Layouts

For every master component, we design Auto Layouts to ensure optimal responsiveness for dedicated device resolutions. By carefully configuring constraints, we create flexible and adaptable components that seamlessly adjust their layout and appearance across different screen sizes.

Master Components

To ensure a well-organised and easily understandable design library, all master components are stored on separate pages and organised within dedicated frames. This approach promotes a clear structure, allowing designers to quickly locate and access the desired components. Each page represents a distinct category or section, while frames within them group related components together. This systematic organisation enhances collaboration, facilitates consistency, and streamlines the design workflow, making it effortless to navigate and maintain the design system's integrity.

Responsive & Adaptive Views

By leveraging well-designed master components across product screens, we achieve efficient scalability and a cohesive design approach. These reusable components serve as building blocks, ensuring consistency in the product's interface. As a result, the design process becomes streamlined, allowing for quick iterations and updates while maintaining visual harmony. This approach not only saves time but also guarantees a unified user experience, making it easier to adapt and evolve the product in a cohesive manner.

Developer Handover

My workflow contains using the Tokens Studio plugin for generating .json files. Tokens Studio generates code that consolidates all styles in a developer-friendly format. We provide this .json file to the development team, ensuring consistency between Figma and the development environment, such as Xcode. With each design system update, a new .json file is generated, allowing for seamless synchronisation and maintaining design system integrity throughout the design and development workflow.

Design systems are made of many components, patterns, styles, and guidelines, which can help operationalize and optimize your design efforts. However, they are designed, managed, and implemented by people. The main factors to consider when creating a design system are the scale and replicability of your projects, as well as the resources and time available. When poorly implemented and maintained, design systems can become unwieldly collections of components and code; but, when implemented well, they can educate team members, streamline work, and enable designers to tackle complex UX problems.