npm is a package manager for JavaScript that helps developers install, share, and manage libraries or pieces of code that are commonly used in applications. These packages can range from small utility functions to full-fledged UI components like buttons, form elements, or even complex layouts.

npm is also a key enabler of the design-development collaboration that UXPin Merge facilitates. By packaging React components through npm, developers can hand off real, functioning UI components to designers, who can then integrate them into their designs effortlessly. This results in a more consistent and efficient workflow, ensuring that your design system and the final product are perfectly aligned.. Discover UXPin Merge.

Design UI with code-backed components.

Use the same components in design as in development. Keep UI consistency at scale.

Try UXPin Merge

What is NPM (Node Package Manager)?

npm or Node Package Manager is an open-source repository of tools engineers use to develop applications and websites.

npm is two things:

1. A repository for publishing open-source projects.
   Simplified version: a digital storage and retrieval facility.
2. A command-line interface (CLI) for interacting with the repository.
   Simplified version: a tool to communicate with the storage facility.

What is a Package Manager?

Before we can explain what npm package is, it’s essential to understand the idea of a package manager. Think of a package manager as a toolkit for developers.

Let’s say you’re building an application that uses Stripe for payments. A package manager installs all the code your product will need to communicate with Stripe and process payments.

Instead of writing all that code or copy/pasting it from Stripe’s docs, engineers simply enter a command, and the package manager installs the code dependencies they need from Stripe.

There are millions of these packages for everything you can think of to develop an application–like different types of search functionality, APIs, payments, authentication tools, maps, icons, hosting, and more.

You get public open-source repositories (like npm) where anyone can upload and install packages, as well as private package repositories with restricted access.

What is a Command Line Interface?

A command-line interface (CLI) is a text interface developers use to interact with computer programs. This CLI allows you to execute commands to run background operations necessary for software development.

In the case of npm, the CLI allows you to interact with the package registry. For example, engineers can use commands like npm install followed by the package name to install a specific package.

The npm Registry

The npm website is where engineers can search and learn about packages. This website is just a registry and doesn’t host the packages. Instead, engineers use platforms like GitHub, Packagecloud, AWS CodeArtifact, and others to host and distribute packages.

For example, if we look at the UXPin Merge CLI on NPM, it has displays GitHub as the repository and relevant link. Above that is the command to install the UXPin Merge CLI and its dependencies: npm i @uxpin/merge-cli. The “i” after npm is an abbreviation for “install.” So, typing npm install @uxpin/merge-cli would render the same result.

What are Dependencies?

Packages consist of other packages that engineers call dependencies–we know, confusing, right! These dependencies are packages of code that perform different tasks within the project.

For example, the UXPin Merge CLI uses Typescript and therefore requires the typescript package as a dependency. Typescript is just one of the 41 dependencies UXPin Merge CLI requires. 

What are Devdependencies?

Looking at the UXPin Merge CLI’s dependencies, you’ll notice 41 Dependencies and 41 Dev Dependencies (also referred to as devDependencies–one word).

• Dependencies: The packages required to run a piece of software
• Dev Dependencies: The packages needed during the development phase only

Dependencies and devDependencies reside in a separate folder called node_modules, so your packages.json file and project code know where to find them.

What is the package.json File?

There’s a package.json file that provides its metadata and dependencies. When installing the project on your computer, npm will reference the package.json file to install the dependencies and devDependencies.

Instead of installing each dependency individually, you simply type npm install in the command line.

Hosting providers also use the package.json file to install the dependencies (excluding devDependencies) needed to run the project on its servers.

What is package-lock.json?

The package-lock.json specifies the exact version of the package used to build the project. This file locks the dependencies so that when the project is installed, it references the versions used during development rather than the latest release.

Engineers update packages regularly, often changing the way the package works. So, locking your dependencies ensures the project operates as intended.

How to use npm

Here are some common npm commands and what they do:

• npm init: Creates a package.json file for your project. If you’re building an application from scratch, npm init will be one of the first commands you use to include key project information. NPM will automatically update your package.json file whenever you install or remove packages.
• npm install: Installs all of the project dependencies in a package.json file.
• npm install <package-name>: Installs a specific package from the NPM registry and saves it to your node_modules folder. For example, npm install @uxpin/merge-cli will install the Merge CLI.
• npm install <package-name> –save: Installs an NPM package and adds it to the dependencies in your package.json file.
• npm install <package-name> –save-dev: installs an NPM package and adds it to the devDependencies 
• npm uninstall <package-name>: Uninstalls a specific package from your project.
• npm doctor: Runs diagnostics on your npm installation to check if it has everything it needs to manage your packages.
• npm update <package-name>: Updates a specific package to the latest version.

These are just a few of the most common npm commands. You can find the complete list in the npm documentation.

Understanding npm as a Designer

npm is simply a toolkit comparable to plugins or app extensions for design tools. You don’t need to know the ins-and-outs of how packages are created, but it may be useful to know a thing or two about it.

First of all, some of code component libraries are shared as npm packages, such as MUI, Ant Design, etc.

How to find component libraries that are distributed as npm packages? Let’s say you search through Adele, UXPin’s library of publicly available Design Systems, for a component library that you can bring in to UXPin. You pick Shopify’s Polaris and notice that it is distributed via npm.

So, you go to the NPM site, look for Shopify’s Polaris, and find it.

UXPin with Merge technology allows you to import UI elements from component libraries via NPM packages. Then, you can use those elements to put together fully-functional prototypes.

UXPin Merge is usually being set up by a developer. But if you lack the development support, you can use our new tool – Merge Component Manager and manage UI components by yourself.

However, if you want to enhance your programming knowledge to collaborate with devs better, then learning about basic code principles (HTML, CSS, Javascript) and component libraries is far more valuable for designers.

What Can You Do with npm Integration?

Even though npm is typically a tool developers use, it plays a crucial role in enabling powerful design workflows—like bringing React components into UXPin for seamless drag-and-drop UI building.

Here’s why npm is important for technical designers working with tools like UXPin Merge:

1. Access to React Components: If your design system is built using React, npm allows you to package these components and make them accessible for use in other applications or tools—like UXPin Merge. React components that are available as npm packages can be directly imported into UXPin, giving designers the ability to drag and drop real code components into their designs without writing code.
2. Easily Manage Updates: npm simplifies version control. When a developer updates a package (such as a new version of a button component), npm can automatically manage this update in UXPin Merge, ensuring that designers always work with the latest components from the development team. This ensures consistency between design and development without the need for manual updates.
3. Collaborate Seamlessly with Developers: npm helps technical designers and developers work from the same source of truth. Developers use npm to publish the components they create, while designers can easily import those components into UXPin using Merge. This ensures that the components designers use for prototyping are exactly the same as the ones developers will implement in the final product.

Improve Collaboration With UXPin Merge

Merge enhances collaboration between design and development because designers and engineers work with the same component library. 

Instead of having a UI kit for designers and code for devs, Merge syncs a repository to UXPin’s editor so design teams can build fully functioning prototypes using code components.

You can sync your company’s design system or a component library like MUI so that you only have to drag and drop UI elements to build interfaces. Request access to Merge.

The post What is npm? appeared first on Studio by UXPin.

Design system naming conventions are the standardized rules and guidelines used to name elements within a design system. This includes naming design tokens, components, patterns, styles, and any other elements that are part of the design system. A well-defined naming convention is crucial for maintaining clarity, consistency, and ease of use across both design and development teams.

If you’re looking to elevate your design system and create a more consistent, efficient workflow, UXPin Merge is the solution for you. By integrating design and development into a unified process, Merge helps you build a robust design system that scales with your organization and meets the highest standards of quality and consistency. Request access to UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

What is the Naming Convention for Design Systems?

Design system naming conventions are a set of rules for naming the different parts of a design system, like colors, fonts, buttons, and other components. These rules help keep names clear and consistent, making it easy for everyone on the team to understand and use the design system.

Design system naming conventions are typically set by the team responsible for creating and maintaining the design system. It can be governed by a dedicated group of designers and developers who focus on building and managing the design system or design leaders at a company. They establish naming conventions to ensure consistency and ease of use across the system.

Why Are Naming Conventions Important in a Design System?

By following these naming conventions, teams can work together more smoothly and keep the design system organized and easy to update. Design system naming systems help in:

1. Clarity and Readability: A good naming convention helps team members easily understand what each element is and how it should be used. This is especially important as the design system grows and more people across different teams start using it.
2. Consistency: Consistent naming reduces confusion and helps ensure that everyone on the team uses the design system in the same way. This is essential for maintaining a cohesive and unified user experience across all products and platforms.
3. Scalability: As your design system expands to include more components and tokens, a well-structured naming convention makes it easier to organize and manage these elements. It provides a scalable framework that can accommodate new additions without causing confusion or requiring significant restructuring.
4. Collaboration: Clear and consistent naming conventions improve collaboration between designers and developers by reducing miscommunication. When both teams use the same language and terms, it’s easier to maintain alignment throughout the development process.

9 Key Elements of Design System Naming Conventions

Design Tokens

Design tokens are the core variables that define a design system’s visual properties, such as colors, typography, spacing, and shadows. Naming conventions for tokens should reflect their purpose and usage rather than specific values, ensuring flexibility and scalability. Examples include color-primary, font-size-heading, or spacing-small.

Components

Components are the building blocks of a design system, representing reusable UI elements like buttons, forms, cards, and navigation bars. Consistent naming for components ensures they are easily identifiable and logically grouped, enhancing usability and collaboration. Examples include ButtonPrimary, FormInputText, or CardWithImage.

Patterns

Patterns are reusable combinations of components that address specific design problems or create common UI layouts. Naming conventions for patterns should describe their function clearly, such as LoginForm, NavbarSticky, or ErrorMessageModal.

Modifiers

Modifiers represent variations or states of a base component or token, such as different sizes, colors, or behaviors. Consistent naming for modifiers typically indicates the relationship between the base element and the variation, using a pattern like BaseComponent–Modifier. Examples include ButtonPrimary–Large, ColorPrimary–Dark, or Card–WithShadow.

Utilities

Utility classes or styles are often used for quick, specific adjustments that apply common design tokens, such as margin or padding. Naming conventions for utilities are typically short and descriptive, indicating the property they affect. Examples include u-margin-small, u-padding-large, or u-text-center.

States

States define different conditions of a component, such as active, disabled, focused, or error states. Clear naming for states helps communicate these conditions within the design system. Examples include Button–Disabled, Input–Error, or Link–Active.

Responsive Variants

These are variations of components or styles that adjust based on screen size or device type. Naming conventions for responsive variants typically follow a pattern that indicates the screen size they target. Examples include Button–SmallScreen, Grid–Desktop, or Image–Responsive.

Accessibility Features

Elements or tokens that enhance accessibility might have specific naming conventions to denote their purpose. For example, Button–AriaLabel or Text–HighContrast indicate elements tailored for accessibility.

Brand-Specific Elements

In some design systems, elements may be specific to different brands or themes. Naming conventions for these elements should clearly indicate their association. Examples include Button–BrandA, Navbar–BrandB, or Typography–Corporate.

Top 10 Best Practices for Naming Conventions in Design Systems

A well-organized design system is the backbone of consistent and scalable design work. Naming conventions play a crucial role in this organization by making your design system intuitive and easy to use. Here are ten essential best practices to help you establish effective naming conventions for your design system:

1. Be Descriptive but Concise

Why It Matters: Clear and concise names help everyone on your team quickly understand what each element is for. Long or vague names can lead to confusion and mistakes, slowing down the design and development process.

How to Implement: Choose names that clearly describe the element’s purpose or function without being overly detailed. For example, instead of naming a primary action button btnSubmitActionPrimary, use ButtonPrimary. This name is direct, easy to remember, and effectively communicates the button’s role.

2. Use Consistent Patterns Across the System

Why It Matters: Consistency in naming makes your design system predictable and easy to navigate. When team members know what to expect from the naming structure, they can find and use elements more efficiently.

How to Implement: Establish a naming pattern like [Category]-[Modifier] for design tokens (color-primary, spacing-small) and ComponentName–Modifier for components (Button–Large, Card–WithShadow). Stick to these patterns throughout your design system to maintain consistency.

3. Avoid Specific Values in Names

Why It Matters: Naming tokens with specific values like 16px or #FFFFFF limits flexibility. If the values change, you would need to rename tokens throughout the system, which is time-consuming and error-prone.

How to Implement: Focus on naming tokens based on their function rather than specific values. For instance, use font-size-base instead of font-size-16px. This approach allows you to adjust the value without changing the name, making your system more adaptable.

4. Reflect the Design Intent, Not Just Implementation

Why It Matters: Names should convey how and when an element should be used, rather than just describing what it is. This helps designers and developers understand the intent behind each element, promoting consistent usage across different contexts.

How to Implement: Use names that indicate the purpose of the element. For example, instead of a generic name like color-red, use color-error to specify that the color is intended for error messages. This provides clarity and reduces the risk of misapplication.

5. Document Your Naming Conventions Clearly

Why It Matters: Clear documentation ensures that everyone on your team understands and follows the naming conventions. This is particularly important as new team members join or as the design system evolves.

How to Implement: Create a comprehensive section in your design system documentation dedicated to naming conventions. Include the reasoning behind each rule, along with examples of correct and incorrect naming. Update this documentation regularly to reflect any changes or additions.

6. Use Readable Naming Formats like Camel Case or Kebab Case

Why It Matters: Readable formats such as camel case (ButtonPrimary) or kebab case (button-primary) make it easy to distinguish different parts of a name at a glance, improving clarity and reducing errors.

How to Implement: Decide on a naming format that aligns with your team’s coding standards or design practices. For instance, use camel case for component names (ButtonPrimary, CardWithImage) and kebab case for CSS class names (button-primary, card-with-image). Apply this format consistently.

7. Include Context in Names When Necessary

Why It Matters: Elements that could be used in multiple contexts should have names that specify their intended use. This prevents confusion and ensures elements are applied correctly across different parts of the design.

How to Implement: When naming tokens or components that serve specific functions, include contextual information in the name. For example, use spacing-card-small instead of just spacing-small to indicate that the spacing value is intended for card components.

8. Plan for Scalability from the Start

Why It Matters: A scalable naming convention allows your design system to grow without needing significant changes to existing names. This is crucial as your system evolves to include more components, tokens, and patterns.

How to Implement: Anticipate future needs by choosing flexible naming conventions. For example, if you might add different button types, start with names like ButtonPrimary, ButtonSecondary, and ButtonTertiary. This approach leaves room for expansion without causing confusion.

9. Minimize the Use of Abbreviations

Why It Matters: Abbreviations can make names shorter, but they also risk making them unclear, especially for new team members or collaborators. Only use abbreviations that are universally understood within your team.

How to Implement: Stick to full words unless an abbreviation is commonly accepted and widely recognized. For instance, btn for button is standard, but using fs for font-size might not be immediately clear to everyone.

10. Regularly Review and Update Naming Conventions

Why It Matters: As your design system grows and changes, your naming conventions might need to evolve. Regular reviews help ensure your system remains intuitive and efficient for all users.

How to Implement: Set up periodic reviews of your naming conventions with key stakeholders. Gather feedback from designers and developers to identify any issues or areas for improvement. Be open to making changes that enhance clarity, consistency, or scalability.

Build Prototypes that Are in Line with Your Design System

Establishing effective naming conventions is crucial for any design system’s success. By being descriptive but concise, maintaining consistent patterns, and regularly reviewing your conventions, you can ensure that your design system remains organized, scalable, and easy to use.

Consistency is key to any successful design system. It ensures that your UI components are cohesive, scalable, and easy to maintain across different teams and projects. But achieving this level of consistency can be challenging, especially when it comes to bridging the gap between design and development. That’s where UXPin Merge comes in.

UXPin Merge is a powerful design technology that allows you to integrate real, production-ready code components from your React-based design system directly into your design tool. This integration creates a unified source of truth for both designers and developers, ensuring that everyone is working with the exact same components and styles. Request access to UXPin Merge.

The post Design System Naming Conventions – How to Set Them appeared first on Studio by UXPin.

Some team members despise design system governance. They see it as a roadblock to rapid growth, creativity, and flexibility. However, design system governance can foster scalability and creativity if properly implemented while maintaining design and usability consistency.

Good design system governance prioritizes users before growth and profits. Company culture also plays a significant role in how a company implements a governance process that team members follow and embrace.

The tools UX and engineering teams also have an impact on design system governance. UX teams must update design tools to match changes to the final product, exposing the process to human error!

With UXPin Merge, teams don’t need to worry about updating two different design systems. UXPin Merge syncs our editor tool with code components from your Git repo or Storybook integration (allowing you to connect with React, Revue, Angular, Ember, and many more), eliminating the need for separate design systems and mitigating human error.

See how UXPin can enhance your design system governance!

What is Design System Governance?

Design system governance is the process and protocols for maintaining and updating a product’s design system.

Even minor changes, like changing an app’s close icon from an X to a — must go through a multi-step approval and implementation process.

Design system governance fulfills several purposes:

• Maintain’s design and brand consistency
• Prevents poor design decisions—leading to usability issues
• Encourages team members to think creatively and try to solve problems with the tools on hand before attempting to make changes
• Ensures updates consider accessibility
• Keeps the entire organization informed of changes
• Updates digital product and design documentation

Without effective design system governance, editing and updating new components is a free-for-all that could create usability issues, inconsistencies and ruin the product’s reputation.

The Challenges of Maintaining a Design System

There are many challenges to maintaining a design system. Every organization must have a dedicated individual or team to manage its design system. 

Here are six common challenges to maintaining a design system and why an effective governance model is essential!

Company Political Forces

Sadly, even successful design systems aren’t safe from power struggles within an organization. Team members might call on executive power to either push or block design changes, overriding the initial decision of a design system team.

Conversely, governance keeps executives and other stakeholders well informed on design changes and the reasoning, making it easier to get buy-in and approval.

Managing Input From Multiple Teams and Departments

A design system is not only for UX and engineering teams. Product teams and other stakeholders share ownership of the organization’s design system. 

Managing all of this input can be challenging without a proper system of governance.

Design Systems are Often an Afterthought or Side Project

In many organizations, especially fledgling startups, the product’s design system isn’t a priority. It’s a side project a UX designer maintains in their spare time or over the weekend—feebly trying to maintain consistency with the demand for growth!

In this environment, a design system is prone to abuse and poor design decisions. Often UX teams have to undo changes to fix usability issues due to poor governance.

Poor Communication

Without proper communication between departments, teams, and individuals, a design system falls apart. For example, two teams might unknowingly work on the same task separately, or worse, crucial usability changes go forgotten because everyone thought “someone else was working on it.”

Design system governance fosters organization-wide communication, so everyone is updated and informed!

Reluctance from Team Members

When teams are reluctant to adopt the product’s design system, they choose the parts they like and develop a “better way” to design the rest. New team members or those not involved in creating the design system believe they can do better—thus undermining the hard work of others.

This reluctance can not only affect the product’s usability and consistency but create unnecessary conflict.

A governance model with multiple checks and balances prevents team members from hijacking a design system.

Reluctance to Change

Sometimes the opposite is true. Design system managers believe the system is fine the way it is, blocking any changes. A design system is never complete. It’s a work in progress that must evolve for the organization to grow.

The Single Source of Truth Dilemma

Many companies struggle with the single source of truth dilemma—working with a single dataset between all departments, primarily UX design, product, and engineering.

The UX team works with design tools, engineers with code, and the product team (often with limited technical know-how) uses all sorts of tools, including powerpoints, PDFs, and paper, to name a few. 

With this scattered workflow, maintaining a single source of truth is challenging. Often requiring additional staff and resources to ensure everyone is up-to-date. Even with good systems of governance, the single source of truth dilemma is a constant challenge.

Global payment giant PayPal solved its single source of truth dilemma with UXPin Merge. PayPal uses UXPin Merge to build and maintain its design system for internal user interfaces with code components from a Git repository.

When developers implement new changes, UXPin’s design editor’s components update simultaneously, so designers and engineers always work with the same design system. 

Establishing Design System Governance Standards

There are four primary scenarios where a design system requires changes or updates. These scenarios require a submission process where teams must ask a series of questions and tests before prototyping or requesting amendments.

• Introducing new elements – Establishing a workflow for adding new elements ensures design system integrity while providing every team member with an equal opportunity to make additions. 
• Promoting patterns – Patterns fall into two categories: one-off or best new practice. Teams must test these new patterns against what’s currently available before promoting them.
• Reviewing and adapting patterns – Every design system must have a team (at least two members) to review patterns before release. This review process ensures new elements meet the standards and practices of the current design system.
• Releasing design system updates – Rather than releasing new updates when they’re ready, teams must establish a release schedule for updates. A strict release schedule ensures teams follow quality assurance and documentation processes correctly.

An effective way to manage this submission process is through a simple decision tree that maps every step a change must follow.

This excellent example from Inayaili de León shows how Canonical’s team adds new patterns to their design system following a simple decision tree—from concept to release.

Inayaili admits that, like their design system, the decision tree is a work-in-progress that they update and refine as the product evolves.

5 Different Design System Governance Models

Design system governance models refer to the frameworks and practices that organizations use to manage, maintain, and evolve their design systems. Effective governance is crucial to ensure consistency, scalability, and collaboration across teams, especially as design systems grow and evolve over time. Here are some common design system governance models:

1. Centralized Governance Model

In a centralized governance model, a single, dedicated team (often called the design system team or design system core team) is responsible for the development, maintenance, and updates of the design system. This team typically includes designers, developers, and product managers who collaborate closely to ensure the design system is aligned with the organization’s brand and user experience goals.

Key Characteristics:

• Unified Control: The design system team has full control over the design system’s direction, updates, and maintenance.
• Consistency: Centralized control helps maintain a high level of consistency across all components and design tokens.
• Streamlined Decision-Making: With a single team making decisions, changes and updates can be implemented quickly and efficiently.

Pros:

• Clear ownership and accountability.
• High consistency and quality control.
• Efficient decision-making and streamlined processes.

Cons:

• Can become a bottleneck if the team is small or overburdened.
• May lack input from various product teams, potentially leading to a less flexible or adaptable system.

2. Federated Governance Model

A federated governance model, also known as a decentralized or hybrid model, involves multiple teams contributing to the design system under a set of shared guidelines and standards. In this model, the design system team still exists, but other product or feature teams also have the ability to contribute components, patterns, or updates.

Key Characteristics:

• Shared Responsibility: Different teams contribute to the design system, fostering a sense of ownership and collaboration.
• Guidelines and Standards: The design system team provides overarching guidelines, but individual teams have flexibility within those guidelines.
• Cross-Functional Collaboration: Encourages collaboration across teams, promoting innovation and diverse perspectives.

Pros:

• Increased flexibility and adaptability.
• Encourages innovation and input from various teams.
• Reduces bottlenecks by distributing the workload.

Cons:

• Potential for inconsistencies if guidelines are not strictly followed.
• Requires strong communication and coordination among teams.

3. Community-Driven Governance Model

In a community-driven governance model, the design system is managed in a more open, collaborative manner, often with contributions coming from across the organization, including designers, developers, product managers, and other stakeholders. This model relies heavily on community involvement and collective decision-making.

Key Characteristics:

• Open Contribution: Anyone in the organization can propose changes, updates, or new components.
• Community Moderation: A committee or group of maintainers oversees contributions, ensuring they meet quality and consistency standards.
• Collaborative Decision-Making: Decisions are often made collectively through discussions, voting, or consensus.

Pros:

• Highly inclusive and democratic.
• Promotes widespread adoption and engagement.
• Encourages diverse perspectives and innovation.

Cons:

• Can be challenging to maintain consistency and quality.
• Decision-making can be slower and more complex.
• Requires a strong governance framework to manage contributions effectively.

4. Mixed Governance Model

The mixed governance model combines elements of the centralized, federated, and community-driven models, depending on the needs of the organization and the maturity of the design system. This model provides a flexible approach to governance, allowing teams to adapt based on specific circumstances, project requirements, or organizational culture.

Key Characteristics:

• Flexible Approach: Different governance styles are applied to different parts of the design system, based on complexity, importance, or other factors.
• Balanced Control: Centralized control is maintained for core components, while more flexibility is allowed for less critical elements.
• Adaptive Governance: The governance model can evolve over time as the design system and organization grow.

Pros:

• Balances consistency and flexibility.
• Can adapt to changing needs and contexts.
• Allows for experimentation and innovation.

Cons:

• Can be complex to manage and communicate.
• Requires clear guidelines to prevent confusion and maintain coherence.

5. Open Source Governance Model

The open source governance model is similar to the community-driven model but typically involves an external community beyond the organization. In this model, the design system is open to contributions from anyone, and the community helps drive its development and evolution.

Key Characteristics:

• External Contributions: Contributions come from a wide range of external developers, designers, and other community members.
• Open Development: The design system’s development process is transparent and open to public scrutiny.
• Community-Driven Decision-Making: The community plays a significant role in shaping the direction of the design system.

Pros:

• Leverages a broad pool of talent and ideas.
• Encourages rapid innovation and evolution.
• Promotes transparency and inclusivity.

Cons:

• More challenging to maintain quality and consistency.
• Requires robust community management and governance structures.
• Risk of diverging goals and priorities among contributors.

Choosing the Right Governance Model

Selecting the right governance model for your design system depends on several factors, including the size and structure of your organization, the maturity of your design system, and the level of collaboration and flexibility you want to promote. Some organizations may start with a centralized model and evolve to a federated or community-driven approach as their design system matures and adoption grows.

Ultimately, effective design system governance should align with your organization’s goals and culture, fostering collaboration, maintaining consistency, and ensuring scalability as your design system evolves.

A Step-by-Step Governance Model Example

There are many ways to approach design system governance, but here is a 10-step process inspired by design system guru Brad Frost:

1. Use what’s available – Product teams must exhaust every effort to find a solution using the current component library. This means a design system must be well documented and accessible to everyone. If the current design system does not fulfill the new requirement, teams can proceed to step two.
2. Contact design system (DS) team – Product teams contact the DS team to discuss the problem and the proposed changes. Again, the DS team and product team will work together to find an existing solution. With intimate knowledge of the design system, the DS team might uncover something the product team missed. If there is still no solution, teams proceed to step three.
3. Determine if the change is one-off or part of the design system – The product team and DS team decide whether the amendment is a one-off (snowflake) or part of the design system. One-off changes usually fall on the product team, while the DS team handles design system changes. Either way, teams must prioritize and schedule the changes.
4. Initial Prototyping – Teams prototype and test product changes.
5. Initial Review Process – The DS team and product team review the results from prototyping and testing. If both teams are satisfied, they proceed to the next step. If they determine the changes are lacking, teams return to prototyping and testing.
6. UX & Dev Testing – Once designs pass the initial review, they go to UX and development teams for further testing to ensure the changes meet user experience and technical requirements.
7. Final review – The product team and DS team meet again to review the results of UX and dev testing. If both teams are satisfied, they proceed to the next step. If not, they iterate.
8. Documentation and schedule release – Teams document the new changes, update the changelog (e.g., Github), and schedule the release.
9. Changes released – Changes are released, product version bump according to versioning guidelines, all teams notified (Slack, Asana, Trello, Github, etc.).
10. Quality assurance – Product teams review the final changes for quality assurance.

You can see how this 10-step process will mitigate all of the six common design system challenges we outlined earlier. With multiple checks and balances, a design system maintains its integrity while communicating changes to the entire organization.

While this process solves many design system challenges, checks and balances don’t eliminate human error. Teams need a tool to provide a single source of truth!

Improving Design System Governance with UXPin

UXPin Merge bridges the gap between design and code, creating a single source of truth, so designers and engineers always work with the same tools.

Popular vector-based design tools don’t solve the problem. Designers and engineers must update and sync identical systems separately—an ineffective workflow prone to error.

UXPin is a code-based design editor syncing code components via Git or Storybook to allow product teams, UX designers, and developers to work with the same components—no need to update systems separately!

Lastly, because prototypes are code-based, product updates and design system changes are significantly quicker to engineer.

Ready to switch to the only design tool that fosters good design system governance? Discover UXPin Merge to get the most of your design system and keep all the design and code components up to date.

The post Design System Governance – Scale Your Design appeared first on Studio by UXPin.

The design system revolution of the last decade has brought with it all sorts of tools and strategies to enhance product development workflows.

Design tokens are one of those tools many design systems, including Google’s Material Design 3 and MUI, have adopted to make UI elements easier to implement, manage, and update.

Announcement: UXPin’s design tokens for colors are in beta! Sign up to get notified when they will be officially released: Design tokens in UXPin.

Optimize your design operations across the entire organizations. Use UXPin Merge, a revolutionary design technology for helping teams use React components in design and development. Learn more about Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

What is a Design Token?

Design tokens contain UI data like colors, fonts, spacing, animations, assets, etc. for styling and building cross-platform user interfaces. Instead of hard-coding static values for every operating system, a design token contains multiple formats, allowing front-end developers to use the same variable, whether they’re building an iOS or Android, and even web application.

One of the challenges with cross-platform product development is that operating systems use different style properties and formats. For example, UXPin’s website uses yellow for CTAs. The hex code for this yellow is #FCC821, which you can represent in several ways:

• RGB (CSS): rgb(252, 200, 33)
• RGBA: rgba(252, 200, 33, 1)
• Octal (Android/Flutter): 77144041

Instead of using these static properties, designers and engineers reference a token like “uxpin.cta.primary,” representing all four color codes. The color will always be the same regardless of the platform or programming language.

Design tokens within CSS

To implement design tokens in CSS, they are often converted into CSS variables (also known as custom properties). CSS variables allow you to define reusable values that can be applied throughout your stylesheet, making it easier to maintain and update styles consistently.

Example of Design Tokens as CSS Variables

/* Define Design Tokens as CSS Variables */
:root {
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --font-size-base: 16px;
  --font-family-base: 'Arial, sans-serif';
  --spacing-small: 8px;
  --spacing-medium: 16px;
}

/* Applying Design Tokens in CSS */
body {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  color: var(--color-primary);
  padding: var(--spacing-medium);
}

button {
  background-color: var(--color-primary);
  color: var(--color-secondary);
  padding: var(--spacing-small) var(--spacing-medium);
}

Here’s a section you can add to your blog post about Design Tokens within CSS:

Design Tokens within CSS

Design tokens are a crucial part of modern design systems, helping to maintain consistency and scalability across digital products. When used within CSS, design tokens ensure that your styles are cohesive and easy to manage, allowing for a more efficient and streamlined development process.

What are Design Tokens?

Design tokens are the smallest, repeatable elements of a design system that store visual properties such as colors, typography, spacing, and shadows. They act as a bridge between design and code, providing a single source of truth that can be used across various platforms and technologies.

Using Design Tokens in CSS

To implement design tokens in CSS, they are often converted into CSS variables (also known as custom properties). CSS variables allow you to define reusable values that can be applied throughout your stylesheet, making it easier to maintain and update styles consistently.

Example of Design Tokens as CSS Variables

/* Define Design Tokens as CSS Variables */
:root {
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --font-size-base: 16px;
  --font-family-base: 'Arial, sans-serif';
  --spacing-small: 8px;
  --spacing-medium: 16px;
}

/* Applying Design Tokens in CSS */
body {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  color: var(--color-primary);
  padding: var(--spacing-medium);
}

button {
  background-color: var(--color-primary);
  color: var(--color-secondary);
  padding: var(--spacing-small) var(--spacing-medium);
}

In this example, design tokens for colors, typography, and spacing are defined as CSS variables. These tokens are then applied throughout the CSS to style elements consistently. If you need to update a style, such as changing the primary color, you only need to update the variable definition, and the change will automatically apply everywhere the token is used.

Types of Design Tokens

Organizations use these design tokens for many style properties, including color palette, size, spacing, assets, and drop shadows, to name a few. When we’re at it – here are the primary types of design tokens:

1. Color Tokens: Define the color palette used in a design system. Examples include primary colors, secondary colors, background colors, text colors, border colors, etc.
   • Examples:
     • color-primary: #007bff
     • color-background: #f8f9fa
2. Typography Tokens: Specify text-related properties. These include font families, font sizes, line heights, letter spacing, and font weights.
   • Examples:
     • font-family-body: 'Roboto', sans-serif
     • font-size-heading: 24px
3. Spacing Tokens: Govern the spacing system, including margins, paddings, and gaps. They ensure consistent spacing throughout the design.
   • Examples:
     • spacing-small: 4px
     • spacing-large: 16px
4. Sizing Tokens: Define sizes for components and elements. These can include widths, heights, and maximum and minimum sizes.
   • Examples:
     • size-button-height: 48px
     • size-avatar-small: 32px
5. Border Tokens: Specify border properties, such as width, style, and radius.
   • Examples:
     • border-width-thin: 1px
     • border-radius-medium: 8px
6. Shadow Tokens: Describe the shadow effects used in the design system, including color, offset, blur, and spread.
   • Examples:
     • shadow-small: 0 1px 2px rgba(0, 0, 0, 0.1)
     • shadow-large: 0 4px 8px rgba(0, 0, 0, 0.2)
7. Opacity Tokens: Define the opacity levels for elements.
   • Examples:
     • opacity-low: 0.3
     • opacity-high: 0.9
8. Breakpoints Tokens: Specify the breakpoints for responsive design, dictating how the design adapts to different screen sizes.
   • Examples:
     • breakpoint-mobile: 480px
     • breakpoint-desktop: 1024px
9. Duration Tokens: Govern the timing of animations and transitions.
   • Examples:
     • duration-short: 200ms
     • duration-long: 600ms
10. Easing Tokens: Define the easing functions for animations and transitions.
    • Examples:
      • easing-in-out: cubic-bezier(0.4, 0, 0.2, 1)
      • easing-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55)

Where did Design Tokens Come from?

It is said that design tokens were pioneered by Salesforce. In a 2014 article published in Salesforce Designer, Salesforce UX VP Sönke Rohde described how the company uses design tokens to apply the same design principles across multiple platforms and software.

“At Salesforce, we face this very challenge, and we came up with an agnostic solution: we define our design in a single location and use a system to cascade it down to all platforms. We call it our Single Source of Truth. It’s basically a set of JSON files which contain name-value pairs describing our design tokens.” excerpt from Living Design System by Sönke Rohde.

Instead of using static style properties, engineers reference the design token, which pulls the correct value, depending on the platform, from a JSON file. To automate this process, Salesforce developed Theo–“an abstraction for transforming and formatting design tokens.”

What is the Difference between Atomic Design and Tokens?

Atomic design and design tokens are both concepts used in design systems, but they address different aspects of design consistency and scalability.

Atomic design is a methodology for creating design systems developed by Brad Frost. It breaks down user interfaces into smaller, reusable components called atoms, molecules, organisms, templates, and pages (in ascending order of complexity). Atoms are the basic building blocks like buttons, input fields, icons, etc. Molecules are combinations of atoms, organisms are combinations of molecules, and so on.

Design tokens are a set of variables that define design properties such as colors, typography, spacing, etc., in a design system. They are abstract representations of visual design decisions. Rather than hardcoding specific values (like a hex code for a color) directly into UI components, design tokens provide a centralized way to manage and update design properties across an entire design system.

Design tokens deal with the abstraction and management of design properties. They abstract design decisions into variables, allowing for easier maintenance, scalability, and consistency. They provide a single source of truth for design-related values.

3 Design Tokens Examples

Here are three examples of design tokens for typography. These tokens help ensure that typography styles are consistent across different components and platforms.

Design Token Example #1: Font Family

{
  "font-family": {
    "base": "Roboto, Arial, sans-serif",
    "heading": "Montserrat, Arial, sans-serif",
    "monospace": "'Courier New', Courier, monospace"
  }
}

Design Token Example #2: Font Size

{
  "font-size": {
    "base": "16px",
    "small": "14px",
    "large": "24px",
    "heading": {
      "h1": "32px",
      "h2": "28px",
      "h3": "24px"
    }
  }
}

Design Token Example #3: Line Hight

{
  "line-height": {
    "base": "1.5",
    "tight": "1.25",
    "loose": "1.75",
    "heading": {
      "h1": "1.2",
      "h2": "1.3",
      "h3": "1.4"
    }
  }
}

Are Design Tokens Right for You?

Google’s Material Design 3 documentation offers a list of scenarios where design tokens are most helpful:

• You use a design system for more than one platform or product
• You want an easy way to maintain and update your product’s styles
• You plan to update your product design or build new products and features

Material Design also lists two instances where design tokens might be “less helpful:”

• You don’t plan to change your product in the next few years
• Your product does not have a design system

Benefits of Using Design Tokens

We’ve identified three key benefits to using design tokens.

1. Having a Single Source of Truth

Design tokens are most beneficial for creating a single source of truth–which is what drove Salesforce to start using them. Everyone must speak the same design language when multiple product teams, engineers, and UX designers work on the same product.

Design tokens allow teams to speak the same language, no matter their role, platform, programming language, or responsibilities.

2. Maintaining UI Consistency

UI consistency is a significant challenge when designing at scale. It’s not uncommon for designers to accidentally use slightly different sizing, brand colors, and spacing for a single product! These inconsistencies cause usability issues, increasing engineering and UX debt with every release.

Design tokens eliminate these inconsistencies so that every designer uses the same styles and properties–another single source of truth benefit!

3. Getting Flexibility to Scale

Design tokens give products and design systems flexibility to make changes and scale. If teams need to add platform-specific properties, they simply update the design token.

For example, Android uses octal color codes instead of HEX or RGB. To adapt a design system to accommodate Android, the DS team can add octal codes to each design token to maintain a single source of truth.

These tokens allow engineers to deliver new projects significantly faster with fewer errors or inconsistencies.

This flexibility is also helpful when making changes. For example, if a product changes its typeface from Montserrat to Roboto, the team only has to update the typography token to implement a product-wide change.

How to define a design token structure

While there are no rules for defining your design token structure, this example from Amazon’s Style Dictionary makes the most sense. Many organizations use a similar format for their design tokens.

Amazon’s Style Dictionary uses a hierarchical design token structure:

1. Category (color, time, line-height, size, asset, content, etc.)
2. Type
3. Item
4. Sub-Item
5. State

If we wanted to create a design token for a primary active button using this structure, it might look like color_background_button_primary_active or perhaps shortened color-bg-btn-primary-active. This token will contain every type of color code necessary for cross-platform implementation.

The key to a design token structure is consistency. It must use a predictable naming convention so users can easily find tokens and scale the system.

Architecting Tokens with Options and Decisions

UX expert and founder of eightshapes, Nathan Curtis, wrote an excellent article on architecting tokens. Nathan says the first step is to segment your design tokens into Options (or choices) and Decisions.

• Options: Creates the base token values. Tokens define what Style Dictionary describes above as categories–color, time, asset, content, etc.

• Decisions: Decisions use your Options to create properties for components. For example, interactive color, background color, text color, etc.

The benefit of this system is that if you want to change your white to a different shade, replacing the HEX code under the color Option will automatically sync to every design token and associated UI element. 

Nathan’s methodology also makes it easy to scale because you simply use your Options to create more Decisions. You can read Nathan’s full article for detailed instructions on architecting tokens.

Tips on Design Token Naming Conventions

Naming conventions are a crucial aspect of any design system, ensuring clarity, consistency, and ease of use across design and development teams. A well-thought-out naming convention helps communicate the purpose and function of design tokens, components, and styles, making it easier for team members to understand and use the system effectively. Here are some tips for creating effective naming conventions for your design system:

1. Be Descriptive and Concise

Names should clearly describe the element’s purpose or function without being overly verbose. Aim for a balance between specificity and brevity to ensure names are easy to read and understand.

Example:

• Use color-primary instead of main-blue-color.

2. Use Consistent Patterns

Establish a consistent naming pattern or structure that applies across all elements in your design system. This uniformity helps users quickly recognize the type of element they are working with and understand its role in the system.

Example:

• Use a pattern like [category]-[modifier], such as color-primary, spacing-small, or font-heading-large.

3. Avoid Ambiguity

Names should be clear and unambiguous, avoiding terms that could be interpreted in multiple ways. This helps prevent confusion and ensures that everyone on the team understands what each token or component represents.

Example:

• Instead of button-color, use button-background-color to clarify that the token refers to the button’s background color, not its text or border.

4. Reflect the Design Intent

Names should reflect the design intent rather than specific values. This approach allows for more flexibility and scalability, as the underlying values can change without requiring renaming.

Example:

• Use spacing-medium instead of spacing-16px. This way, if you decide to change the medium spacing from 16px to 20px, you don’t have to rename the token.

5. Align with Your Brand and Language

Ensure that your naming conventions align with your brand’s voice and the terminology used within your organization. This alignment creates a cohesive experience for both the design and development teams and ensures consistency in communication.

Example:

• If your brand uses specific terminology for sizes (e.g., compact, regular, spacious), incorporate these terms into your token names, like spacing-compact or button-size-regular.

6. Include Context When Necessary

When tokens or components could be used in multiple contexts, include contextual information in the name to clarify their use. This is particularly important for tokens that might have different values or meanings depending on the context.

Example:

• Use card-background-color instead of just background-color to specify that the token is for card components.

7. Use Common Abbreviations Sparingly

While abbreviations can save space, overusing them can make your names cryptic and harder to understand. Use common abbreviations where they add clarity and avoid using less common or internal jargon that might confuse new team members.

Example:

• bg for background is a common abbreviation and widely understood, so bg-color-primary is acceptable. However, avoid using abbreviations like clr for color.

8. Document Naming Conventions

Document your naming conventions and provide examples in your design system documentation. This helps ensure that everyone on your team understands the rules and follows them consistently.

Example Documentation Excerpt:

• “All color tokens should follow the pattern color-[modifier], where [modifier] describes the usage (e.g., primary, secondary, error). Example: color-primary, color-error.”

9. Plan for Scalability

As your design system evolves, new components and tokens will be added. Choose naming conventions that can easily accommodate growth and changes without requiring extensive renaming or restructuring.

Example:

• Instead of naming a token button-small, which might be limiting, use button-size-small to leave room for adding other size-related tokens, like button-size-large.

How Design Tokens Work in Practice

In an informative article, Design Tokens for Dummies, Louis Chenais outlines a typical design change workflow with vs. without design tokens.

The Traditional Workflow–Without Design Tokens

1. Designer updates a style in a design tool
2. Designer documents the changes for the design handoff
3. Engineer updates the component’s properties (CSS, LESS, SASS, etc.)
4. The design team confirms the changes during quality assurance (QA)

There are several problems with this workflow:

• It creates more work and attention to detail during the design handoff.
• It’s prone to errors and miscommunication.
• Creates more tickets, thus increasing technical debt.
• It costs unnecessary time and money making the changes and fixing any corresponding errors.

The Design Token Way

1. Designer updates a syle in a design tool.
2. A design tokens generator updates a centralized repository creating platform-specific files (JSON/YAML).
3. Engineers pull the new repo, add any new tokens, and automatically update the project’s styles.

Using design tokens reduces documentation for design handoffs and saves programming time for engineers. This automated system significantly reduces human error, streamlining the development and QA process.

A Single Source of Truth With UXPin Merge

As digital products get more complex, designers and engineers must find solutions to integrate workflows–a problem UXPin has solved with our revolutionary Merge technology.

Merge allows you to import a component library from a repository to UXPin’s design editor so designers can use the same UI elements engineers use to develop the final product.

Merge components have the same fidelity and functionality as those in the repository. The design system team can use React props (or Args for our Storybook integration) to restrict changes or provide designers with the flexibility to make design decisions.

Whenever engineers make changes to the repository, they automatically sync to UXPin, notifying designers of the update. Merge comes with version control, allowing designers to switch to an earlier version–helpful for updating older projects.

Take your product development to new heights and create a single source of truth with UXPin Merge. Visit our Merge page for more information and details to request access.

The post What Are Design Tokens? appeared first on Studio by UXPin.

Design systems provide you with a complete set of standards to enhance and manage your design efforts – from beginning to end. But in order to build and maintain a functional design system, first, you’ll have to commit time and effort before enjoying the benefits of a well-oiled design machine.

Looking for a design system management tool? UXPin Merge is a technology for bringing design library’s components to UXPin and using them in prototyping. Read more about UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

What is design system documentation? 

Design system documentation is a comprehensive guide on using a design system. It contains UI elements, components, and design language together with an explanation of how to use them. It helps share, consume, and execute these rules. This ultimately helps designers and developers to model their efforts around delivering a more predictable UI.

Design system documentation plays a crucial role in facilitating the adoption and implementation of a design system. It helps ensure consistency, efficiency, and predictability in UI design and development efforts, ultimately leading to a better user experience across products and platforms.

Two types of structuring design system documentation

A typical design system comprises a component library encompassing UI design elements and other components along with workflows. Design systems thus work to unify pattern libraries and style guides into a single cohesive experience.

Task-specific design system documentation

According to Heidi Adkisson, Principal UX Designer & Partner at Blink UX, while there are many different design documentation variants, some of the more task-specific types include:

• User Stories – allow designers to base their approach on the user needs perspective.
• Screen Flow Diagrams – are great for showing how a user might navigate between screens. 
• Use Cases – offer longer, more objective narratives which hold enormous benefits down the line. 
• Page-Level Documentation – describes an overview of a page’s function, purpose, and instructions for demos. 
• Scenario Narratives – outline descriptive narratives around how to perform specific tasks. 

Structural design system documentation

Other design documentation types related to docs from a structural perspective and often include:

• Object Model – which provides a structural view of a system.
• Architecture Map – communicates how the app or site is structured in general.
• Standardized Components – talk about standardized elements which are shared across the system. 
• System Vocabulary – lists the specific words, phrases, and other relevant system-specific language. 
• Navigational Framework – describes menu items, navigation elements, and control mechanisms. 

Why do you need to document your design system? 

Design documentation is today an essential component of any design system. From providing context to describing team coordination efforts and maintaining a clear record of the system’s component library, component documentation is fundamental to successful design. 

Design system documentation was once considered “non-critical” and was often overlooked. Without ever being exposed to the potential of design system documentation, stakeholders had no idea of the value that documentation could bring. 

Following the emergence of Google’s Material Design, it quickly became clear that design documentation was critical. Most design documentation consisted of disorganized notes and bullet points, leaving most of the vital information out of the system. Material Design changed all that, adding the necessary structure and warranting the need to document.

Documenting a design system comes with a raft of benefits as well:

• It provides a vision for the team to buy into – By creating design documentation that focuses on people, instead of black and white technical directives, you’re able to establish a clear vision that teams can refer back to when they lose focus. 
•  It gives the design system a clear, material structure – By keeping ahold of processes, designers and developers can better rely on a plan which has been laid out in front of them, instead of existing as an idea or general objective. 
•  It helps you to save resources – A good, high-quality document design infrastructure will save on costly trial-and-error mistakes, allow teams to optimize their time and effort, and ensure that reusable design patterns get recorded and later replicated. 
•  It drives engagement and satisfaction – Big projects can take a hefty toll on teams. Effective design documentation gives them something real to work towards – something they can count on when the going gets tough. 
•  It improves efficiency and productivity – With everything the team needs documented and made available, things get done faster, while keeping everyone on the same page. 

Without effective design documentation, successfully designing and delivering a product to market is near-impossible. Design system documentation has become essential by providing the rationale behind specific design decisions and helping users understand and interact with the model. 

9 steps to creating design system documentation

Step 1: Understand who is going to use the documentation

The very first step in design system documentation is to kick things off by looking at the market you’re doing all this work for – your users. Without understanding what they want, you’ll likely get your design goals and results very wrong. 

Think about categorizing your documentation as a product and your team as the consumers of that product. Focus on who will be using this documentation, what you’ll need to include to give them the context they’re looking for and how to structure it in a way that it’ll be easy to consume. 

Step 2: Outline the documentation needs of each component

Next, you’ll need to establish an outline covering the needs of each component and should include design guidelines on:

• Patterns
• Code snippets
• Colours
• Images
• Fonts 
• ADA compliance guidelines and more.

Component documentation should consider the needs of your organization first and foremost before considering the outline in the context of other design elements. 

Step 3: Create a style guide

Style guides help to establish the basis for the visual presentations of the documentation and offer a guideline for the visual and content elements of a design system. Style guides begin by looking at the other design documentation elements and describe the colors, logo prominence, and overall language tone. Ultimately, they serve as the template for others to use.  

Step 4: Create a reusable template that you can share with your team

Then, you’ll need to draft a template your team can reuse over and over while sharing it with one another. Having a recyclable documentation template saves your team time, keeps things consistent and ensures that everyone understands what they’re looking at.

Step 5: Develop a single source of truth

Establishing, articulating, and documenting a single source of truth is probably one of the most important product design components. This universally approved agreement centers on everything your design team will be working on. From icons and color schemes to type scales and buttons – if everyone knows and understands what things need to look like, things will flow far more smoothly. 

Start either with basic design components, found in your component library – created with tools like UXPin – or commence with the development phase, with React components defining the origins. UXPin, for example, allows you to ensure consistency throughout the company with UXPin Merge’s design system versioning. 

Keep creating a single source of truth for your team to design from when working on projects. UXPin Merge offers a design system versioning, allowing you to optimize your single source of truth design approach and to manage code-driven prototyping with it. With tools like UXPin, you can make use of baked-in open-source libraries or import your own design system via Git, Storybook or NPM integration.

Step 6: Include a starter’s kit

Design kits are a sometimes-overlooked component of good design system documentation. However, these necessary resources represent the “starting point” elements that are so essential for good user experience. Starter kits are the perfect onboarding tools and are flexible enough to range from step-by-step guidelines to advanced user manuals.   

Step 7: Collect feedback

Feedback lets you know when a design system is working well, and when it isn’t. Some organizations, for example, limit their feedback collection mechanisms to GitHub issues, creating challenges for designers and less-technical role players in giving their thoughts. 

Alternative feedback collection methods like website feedback boxes on documentation sites allow users to describe and submit the issue. A streamlined feedback channel without the need to open a GitHub issue allows anyone looking to provide any feedback the ability to do so quickly and via the documentation platform.

Step 8: Distribute the responsibility

Documenting can be a labor-intensive task for which people aren’t always willing to volunteer. But sharing its importance with the team helps them to understand the value of taking care of it. Instead of burdening one person with this challenge, consider sharing the responsibility of doing so across the team. This way, you’ll get a variety of insights as well as make the task easier to accomplish. 

Step 9: Update it regularly

Design systems need to be maintained, kept clean, and relevant. Continually keep an eye on identifying potential problem areas, reducing discrepancies, and streamlining the number of active systems. 

A good example here would be to establish a single source of truth for your React story code examples for your documentation site and design system components, updated regularly to ensure they align with each other. 

UXPin also boasts a regular update feature. Whenever making changes to a master component from a design system, UXPin allows you to update it in the system immediately, ensuring everything stays completely aligned.

Design System Documentation Template

Here is a template that you can use when writing your own design system documentation. Use it as a reference.

1. Introduction

• Overview: Provide a brief introduction to your design system. Explain its purpose, key goals, and the value it brings to your organization.
• Principles: List the core principles or guidelines that underpin your design system. These might include consistency, accessibility, responsiveness, and scalability.

2. Getting Started

• Quick Start Guide: Include a step-by-step guide on how to get started with the design system. This should cover how to access the system, what tools or resources are needed, and any initial setup required.
• Installation: Provide detailed instructions for installing any necessary software or dependencies, including commands for installing packages or setting up development environments.
• Contributing: Outline the process for contributing to the design system. This might include a guide on submitting changes, creating new components, or reporting issues.

3. Design Tokens

• What are Design Tokens?: Briefly explain what design tokens are and why they are important. Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes.
• Token Categories: List and describe the different categories of design tokens used in your design system. Common categories might include color, typography, spacing, and shadows.
• Usage Guidelines: Provide guidelines on how to use design tokens in both design and code. Include examples for clarity.

4. UI Kit

• Color: Document your color palette, including primary, secondary, and tertiary colors. Include color codes and usage examples for background, text, and UI elements.
• Typography: Define your typography styles, including font families, sizes, weights, and line heights. Provide examples of how to apply these styles in various contexts.
• Spacing: Detail your spacing system, including values for margins, padding, and grid spacing. Provide examples of consistent spacing usage.
• Icons and Imagery: Describe the guidelines for using icons and imagery within the design system. Include icon libraries, image dimensions, and file formats.

5. UI Components

• Component Library: List all available UI components, such as buttons, forms, modals, and navigation elements. Provide a brief description of each component.
• Component Usage: For each component, include the following details:
  • Description: A brief explanation of the component and its purpose.
  • Anatomy: A breakdown of the component’s structure, including any variants or states.
  • Usage Guidelines: Best practices for when and how to use the component effectively.
  • Code Examples: Include code snippets in HTML, CSS, and JavaScript (or React, Angular, etc.) to demonstrate how to implement the component.
  • Accessibility Considerations: Guidelines for ensuring the component is accessible to all users, including keyboard navigation, screen reader support, and contrast ratios.

6. Patterns

• Design Patterns: Document common design patterns used across your product or website. Examples might include forms, navigation, authentication flows, or error handling.
• Pattern Usage: For each pattern, provide a description, usage guidelines, and code examples. Explain how patterns can be combined with components to create a cohesive user experience.

7. Brand Guidelines

• Voice and Tone: Outline the brand’s voice and tone, including guidelines for writing style, terminology, and messaging.
• Logo Usage: Provide rules for logo usage, including minimum sizes, clear space requirements, and acceptable variations.
• Brand Assets: Include links to downloadable brand assets, such as logos, fonts, and color palettes.

8. Accessibility

• Accessibility Standards: Detail the accessibility standards your design system adheres to, such as WCAG (Web Content Accessibility Guidelines).
• Best Practices: Provide guidelines for creating accessible designs and components, including considerations for screen readers, keyboard navigation, and color contrast.
• Testing Tools: Recommend tools and techniques for testing accessibility in both design and development.

9. Changelog

• Versioning: Explain your versioning system and how changes to the design system are documented.
• Recent Updates: Include a log of recent changes, updates, and additions to the design system. Provide links to specific updates or new components for easy reference.

10. Resources

• Tools and Plugins: List any tools or plugins that support your design system, such as Figma libraries, Sketch files, or browser extensions.
• Training and Tutorials: Provide links to training materials, tutorials, or webinars that help users understand and use the design system effectively.
• Support and Community: Include information on how to get support, report issues, or connect with other users of the design system.

Build Prototypes with your Design System

A sound design system needs to be supported by clear, unambiguous component documentation that enriches your component library and revolves around a single source of truth. 

As a general good practice rule – documentation is everything. It keeps track of progress, milestones, wins, and losses, lets you go back, review and learn, and – most importantly – allows people to understand and follow the design system itself. 

Do you need to ensure that your design system is being implemented? UXPin with Merge technology allows you to use UI components from your design system in prototyping. Simply import them to UXPin, drag and drop them in design editor and create consistent prototypes that look like a finished product. Read more about UXPin Merge.

The post Design System Documentation in 9 Easy Steps appeared first on Studio by UXPin.

Now that UXPin has a Storybook integration that breaks down design-dev inconsistencies and makes it easier than ever to manage your UI components library, you might want to take some time to look at Storybook examples.

Plenty of world-renowned websites use Storybook. Look at some of the best Storybook examples that you can use as inspiration for developing your digital products.

Take UI components directly from Storybook and import them to UXPin. Design interactive and visually stunning layouts without extensive design skills. Discover UXPin Merge.

Design UI with code-backed components.

Use the same components in design as in development. Keep UI consistency at scale.

Try UXPin Merge

What is Storybook?

Storybook is an open-source tool for developing UI components in isolation for React, Vue, Angular, and other frameworks. It allows developers to build, test, and document components in a standalone environment outside of the main application, promoting better modularity and reusability.

It enhances the efficiency of UI development by providing a focused environment for creating, testing, and documenting UI components, making it easier for developers to build consistent and robust user interfaces.

BBC iPlayer Web

BBC iPlayer Web switched to Storybook when it needed more custom components. Preview their Storybook here: BBC iPlayer Storybook.

A growing number of movie and television show producers now have streaming platforms that let people watch specific content when they like. BBC iPlayer Web makes it incredibly easy for viewers to find specific types of content by title, category, or topic.

When the streaming service started, it built its back end with Node.js. It didn’t take long, though, before the development team decided to make the migration to React. React components were an obvious improvement as the platform grew.

Around 2019, though, the team realized that its approach didn’t work as well as expected. The UX professionals and developers didn’t have a common language that helped them work toward goals. They also found it difficult to locate the components they needed to add content and update the website’s appearance.

Ultimately, the BBC iPlayer Web team realized that they were spending way too much time maintaining their component library.

Storybook became a significant tool that helped them address these problems.

BBC iPlayer Web has a public design system, so you can look at it to learn a few tricks and find inspiration when you feel stuck on a project.

The design system includes everything from iconography to navigation.

Spend some time browsing BBC iPlayer’s Storybook example. Then, visit the website. You will immediately see how the designers and developers combined components to create a tool that works exceptionally well for viewers.

Related reading: Top 9 Design System Examples

The Guardian

The Guardian publishes a tremendous number of articles daily. It’s often one of the first news outlets to report on breaking news. It also has frequent articles about sports, culture, and lifestyle topics. Considering that The Guardian covers events all over the world, it needs a fast, reliable way to turn written text into published web pages.

The Guardian Storybook components library (access the Guardian Storybook here) streamlines the design and publication process. Building the design system, however, must have taken quite a bit of time because it includes every component that the well-designed website could possibly need. It even features slightly different versions of designs. For example, the CaptionBlockComponent Story includes:

• with defaults
• PhotoEssay using html
• when padded
• with width limited
• with credit
• when overlayed

No matter what type of caption block the designers want to include, they just have to search the component library, choose the correct option, and add text for the specific story.

The design team even created multiple donut graphs to fit unique circumstances.

Of course, The Guardian also maintains designs that help readers identify what type of content they’re reading.

A Review headline doesn’t look the same as a Photo Essay headline.

Again, it took a lot of effort to build this Storybook design system. Now that The Guardian editors and publishers have it, though, they can quickly publish coherent content that keeps readers informed without misdirecting them.

Here’s a great video about The Guardian’s Storybook component library.

IBM‘s Carbon Design System in Storybook

Carbon, the design system used by IBM, primarily gets used to build digital products with specific functions, such as adding files to a project, submitting reports, and tracking an activity’s progress. IBM uses Carbon for internal and external products, so you might recognize some of the components in the Storybook UI design system.

This Storybook example contains countless components. You’ll find everything from tabs to pagination. The company just wants to make sure that it has functional tools that share an aesthetic.

The components in Carbon’s design system also tend to have extensive Stories that let coders make subtle changes when necessary.

Even the Basic Checkbox component has 184 lines of JavaScript code in its Story.

A significant advantage of using Storybook is that designers and developers can see how components respond to interactions.

Three interactions with the select button:

The designer or developer can see all of these interactions result from within the same environment. They don’t need to export it to a prototyping app or add it to a designing app. The interactions happen right there to save time and meet expectations.

Salesforce Lightning Design System for React

You can also find a Storybook with components of one of the best design systems – Salesforce Lightning. This design system is based in React, a JavaScript library, which is commonly used for building user interfaces. React is a popular front-end library developed by Facebook that allows developers to create interactive and dynamic UI components.

When we talk about React in the context of design systems, it usually means using React to implement the components and design guidelines provided by the design system.

By leveraging the Salesforce Design System, developers and designers can create applications that not only look great but also provide a consistent and intuitive user experience, ultimately leading to increased user satisfaction and productivity. Additionally, adherence to the design system ensures compatibility and seamless integration with other Salesforce products and services.

Salesforce Lightning Design System was created to be framework agnostic, yet it is still compatible with other front-end frameworks, and developers have the flexibility to choose the technology stack that best suits their needs and preferences.

This Storybook example is based on React and it has UI components such as a data table, checkbox, button, card, carousel, and more.

Audi UI React

Another React-based Storybook is a design system by Audi. Crafted with precision, the Audi Design System serves as the ultimate beacon of truth for our global teams dedicated to crafting Audi’s finest offerings.

From insightful Getting Started guides to indispensable Core Components, this Storybook example empowers every team member, ensuring a unified approach across all Audi products worldwide. The Audi Design System embodies the essence of precision, innovation, and seamless collaboration that the design team at Audi chose as its defining qualities.

It sets the standard for design systems in the automotive industry and beyond. Check out its Storybook to see for yourself. It has navigational, input, text, and many other useful components.

FAQ

1. What is Storybook used for?

Storybook is an open-source tool used for developing, testing, and documenting UI components in isolation. It provides a sandbox environment where developers can create and showcase components independently from the main application. This helps in building components that are reusable, consistent, and well-documented.

Storybook is particularly useful in the development of design systems and component libraries, as it allows developers to visualize and interact with components outside the context of the application, ensuring they function correctly and look as expected. It also supports a range of add-ons for accessibility, responsive design, and performance testing, making it a versatile tool for front-end development.

2. What are some advanced Storybook examples?

Advanced Storybook examples demonstrate the tool’s capability to handle more complex scenarios and enhance the development experience. Here are a few examples:

• Component Interactions: Using Storybook’s Controls add-on, you can create interactive components that respond to user input directly in the Storybook UI. This is useful for testing props and states dynamically.
• Composite Components: Showcase components that are composed of multiple child components, such as a form with inputs, buttons, and validation messages. This helps in understanding how components work together in a real-world context.
• Data Fetching and Mocking: Demonstrate how components behave with data fetching by using tools like MSW (Mock Service Worker) to mock API requests within Storybook. This is particularly useful for testing components that depend on external data sources.
• Theming and Styling: Create stories that demonstrate how components adapt to different themes or styles. This is especially useful for design systems that support dark and light modes or multiple branding themes.
• Accessibility Testing: Use the a11y add-on to automatically check for accessibility issues in your components and display the results directly in Storybook. This ensures your components are usable for all users, including those with disabilities.

3. What are public Storybooks?

Public Storybooks are Storybook instances that are accessible to the public over the internet. They are typically hosted on platforms like GitHub Pages, Netlify, or Vercel, allowing anyone to view and interact with the documented UI components. Public Storybooks are often used by companies and open-source projects to showcase their component libraries or design systems, providing developers and designers with a comprehensive reference for how each component should look and behave.

By sharing a public Storybook, teams can improve collaboration, provide clear documentation, and promote consistency across different projects. Public Storybooks are also valuable for onboarding new team members and for providing external contributors or users with insights into the UI components available within a project.

4. What is the difference between Storybook for React and Storybook for Angular?

Storybook is a versatile tool that supports multiple frameworks, including React and Angular, but the way it integrates and functions with each framework can differ slightly due to the inherent differences between React and Angular themselves.

Nevertheless, the core purpose of Storybook remains the same across both frameworks: to provide a powerful environment for developing, testing, and documenting UI components in isolation. Both Storybook for React and Storybook for Angular offer robust features that cater to the unique needs of their respective frameworks, ensuring that developers can maintain a consistent and efficient workflow.

5. How can I use Storybook with UXPin Merge?

Using Storybook with UXPin Merge allows you to import your React components directly from Storybook into UXPin, enabling a seamless integration between design and development. This integration ensures that designers are working with the exact same components that developers are using in production, leading to more accurate and efficient design processes. Here’s how you can use Storybook with UXPin Merge:

1. Set Up Storybook: Ensure that your React components are documented and organized in Storybook. You should have a well-structured Storybook instance with all the components you want to use in UXPin.
2. Sync Components: Integrate Storybook with UXPin and use UI components in your UXPin design projects, allowing designers to drag and drop components into their prototypes while maintaining full functionality and interactivity.
3. Design and Iterate: With the components imported from Storybook, designers can create high-fidelity prototypes in UXPin that are consistent with the development environment. This integration helps streamline the design-to-development workflow, reducing the risk of inconsistencies and ensuring that both teams are aligned.

Using Storybook with UXPin Merge is a powerful way to bridge the gap between design and development, ensuring that your UI components are consistent, reusable, and accurately represented across all stages of product development.

Try UXPin Merge and Storybook integration for fast prototyping

Use Storybook components to build interactive prototypes 8.6x faster than with vector-based tools like Figma. Import them to UXPin via our integration with Storybook and build products quickly. UXPin Merge’s Storybook integration lets you import your components within one minute. It doesn’t even require any technical knowledge, especially when you maintain a public Storybook design system. Discover UXPin Merge.

The post These Storybook Examples Will Inspire Your Component Library appeared first on Studio by UXPin.

Design system tools help drive adoption while making it easier to scale and maintain. With so many options on the market, how do you know which one is right for your product?

Having worked with design tools for over a decade, we’ve put together seven of the best design system tools–including solutions for both: designers and engineers.

Bring a component library from your design system to UXPin and enjoy the interactivity of component-driven prototyping. Your own components are easier to maintain, keep in sync, and share with devs as a single source of truth for design and code. Request access to UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

UXPin

UXPin allows you to create and manage design systems directly within the platform. You can set up your design guidelines, resources, and documentation early in a project, which helps maintain consistency and ensures that everyone on the team is aligned.

The Design Systems tab in UXPin’s dashboard is the central hub where all your design systems are created and stored. This centralization simplifies access and management, making it easy for teams to work with design systems efficiently.

• Flexibility in Creation: UXPin supports creating design systems from scratch or using existing libraries. This flexibility allows teams to either start fresh or build upon a foundation of pre-existing assets, accelerating the design process.
• Drag-and-Drop Simplicity: Designers can simply drag and drop the design system’s components and assets to start building layouts, with no need for external files or plugins. With everything integrated inside UXPin, teams achieve maximum consistency and efficiency without needing to leave the tool to access design system documentation.

A well-organized design system includes various resources like colors, typography, assets, and UI patterns. UXPin excels at managing these resources by providing specific sections for each:

• Colors and Typography: UXPin allows designers to easily add colors by typing HEX codes, importing from a website URL, or linking directly to CSS files. Similarly, text styles can be managed directly from the editor, making it easy to maintain consistent typography across all projects.
• Assets and UI Patterns: Designers can upload images, icons, and other assets in various formats, including SVG. UXPin’s UI patterns feature allows designers to create reusable components and add them to the design system anytime, ensuring that all design elements are consistent and reusable.
• Link to documentation: UXPin also makes it easy to link to external documentation for engineers, like a component library hosted in Storybook. This documentation is accessible through UXPin’s Spec mode, where developers can easily access properties such as colors, typography, CSS code, and the component’s origin.

As your design system matures, upgrade to UXPin Merge–a technology that lets you sync a design system from a repository to UXPin’s editor so designers can build layouts using fully functional code components.

With Merge, designers and engineers use the same components, thus creating a single source of truth for your design system. Any updates to the repository automatically sync to UXPin’s editor, notifying designers of the new version.

Teams can use UXPin’s Version Control to switch between different versions of the design system. They also have the freedom to use different versions for each project or prototype.

Zeroheight

Zeroheight is a hub for hosting your design system documentation to share across the organization. Unlike UXPin, where designers can draw components directly from the library, Zeroheight lets you host design files that team members must download and install.

The platform does, however, allow you to embed your design system’s components from Storybook with code snippets.

Zeroheight offers a standard dashboard layout for your design system, similar to Lightning, Polaris, Stacks, and others, with main navigation on the left and a table of contents to the right. This familiar layout helps with onboarding, allowing teams to navigate the design system to find what they need.

You can store all of your design system’s assets in Zeroheight, and the DS team can embed YouTube, Vimeo, Loom, or Google Drive videos for tutorials and explainers.

Supernova

Supernova is an excellent alternative to Zeroheight with a similar layout and features but slightly more functionality.

One of Supernova’s best features is the ability to automatically “convert design data into code or assets for any tech stack.” You can also include starter templates for developers in your product’s formats, like iOS, Android, React, Angular, Flutter, and others, ensuring engineers always have the correct code and assets at the beginning of every project.

Supernova’s VSCode extension syncs your design system to the popular IDE, so developers have everything they need in one place. You can also sync Supernova to popular design tools so designers don’t have to download and import files.

Storybook

Storybook is a popular tool for engineers who want to build and store UI components in isolation. Storybook also integrates with other design and development tools.

One of those tools is UXPin. With Merge’s Storybook integration, you can sync your library to UXPin’s editor so that designers can access the same components–creating a single source of truth.

A sandbox environment inside Storybook makes it easy for engineers to focus on individual UI components, including states and interactions. The dashboard layout allows you to organize and categorize your Storybook component library, so it’s easy to find what you need.

Storybook is a collaborative tool allowing you to review new components with teams and stakeholders to get input and sign-off before publishing. The Chromatic add-on lets you automate visual testing across browsers and gather feedback from QA teams.

Storybook automatically creates basic documentation for each UI component, which you can edit to include your design system’s guidelines, usage, principles, and more.

Storybook is an open-source tool, and it’s free to use. Simply follow the comprehensive documentation to get started. Check out these best practices and Storybook examples for inspiration.

Pattern Lab

Pattern Lab is an open-source front-end environment for building, viewing, testing, and showcasing your design system’s UI components. The platform uses Brad Front’s Atomic Design principles that “stitches together UI components” to build patterns and templates.

You can build components in Handlebars or Twigs markup and use a separate JSON file to create variations. Pattern Lab automatically categorizes your elements and displays them in a dashboard-style UI. 

Users can inspect each element from the dashboard to view the markup and HTML language with CSS classes. You can also include documentation for each component to give users more information and context.

If you’re building a custom design system management tool, Pattern Lab provides an excellent starting environment for you to customize.

Adobe XD

Out of the box Adobe XD doesn’t provide features for managing a design system, but it does integrate with design system tools like Zeroheight, Frontify, Zeplin, and others.

Like UXPin, designers can share component libraries and assets from your design system–albeit without the context and instructions of documentation and style guides.

The problem with using Adobe XD for mature design systems, is you have separate components for design and development, one code-based and the other image-based for designers to use in XD. You also need additional tools and plugins to sync and manage your design system and deal with design system contribution.

Design System Manager – InVision

Until 2024, Design System Manager (DSM) from InVision was another popular design system management tool. DSM looked and functioned very similar to Supernova or Zeroheight with a clear dashboard layout and intuitive navigation.

DSM synced to InVision’s design tool, so teams could drag components from the design system to build layouts. Like UXPin Merge, it kept design systems unified.

Sadly, InVision is no longer available. It was shutdown in January 2024. If you are looking for a compelling alternative, we recommend you try UXPin Merge.

What to Look for in a Design System Management Tool?

Your design system tool must provide a good user experience for your designers and engineers. Here are some essentials to look for when choosing design system management tools.

Version Control

Versioning is a crucial feature every design system must have. Version control creates a new file for every design system release so that teams can switch between versions. Some of the benefits of design system version control include:

• Allows teams to update to the latest design system release when they’re ready–preventing interruptions to workflows
• Allows teams to work on the same file simultaneously
• Track changes over time
• Informs teams of what’s in each release
• The ability to switch between versions
• Helps with fault finding

Read more about versioning: Version Control for Design – Is it Worth it?

Style Guide

Most design systems start as style guides (usually PDF) that designers use to design components and UIs. A style guide provides context and instructions for a design system’s patterns and components–for example, color HEX codes, typography scales, usage, dos and don’ts, etc.

Component Storage

Component examples are most helpful for developers because they’re interactive and include code snippets. This is important because it allows engineers to see exactly how the component is supposed to work.

Asset Storage

It’s important to keep all of your design system assets (logos, images, etc.) with your component library and documentation so everything is in one place.

Documentation & Guidelines

Documentation is the core of every design system. This documentation provides users with principles and guidelines to design products, including:

• Brand guidelines
• Design principles
• Copy guidelines
• Design system governance
• Design and code best practices
• Design system accessibility
• Resources
• Tools

Feedback

Every design system must be open to feedback and suggestions. This communication is also crucial for flagging bugs or errors. Including a contact page or comment form in your design system allows teams to submit feedback.

Which Design System Management Tool Will You Choose?

It’s your turn now. Pick a design system tool that fits your needs. Test every tool that we compared here and see which one you like best. To speed up interactive prototyping, scale design operations, and boost collaboration, try Merge. Read more about UXPin Merge.

The post 7 Great Design System Management Tools  appeared first on Studio by UXPin.

In 2016, we did an intense user research campaign. After 40+ interviews with design and engineering leaders and a survey of 3,100+ designers and developers, we concluded traditional design tools aren’t good enough to serve modern product development.

Workflows are too fragmented, disconnected, and unfocused. Design system tools must be a complete hub for design and development. 

We summarized our findings with three simple rules for our first release of UXPin Design Systems:

• Dynamic environment, not static documentation
• An actionable system, not a reference document
• Facilitate a connection between design and development, not just a library of design patterns

With these principles in mind, we released the first design system platform on June 13th, 2017.

UXPin’s Design System Libraries support various stages of design system maturity. The final stage is syncing design and development to create a fully integrated system where designers and engineers share one component library—a single source of truth.

UXPin Merge allows you to import code components from your design system’s repository as visual design elements. Designers can use these components to build prototypes using a simple drag-and-drop workflow. Merge components render on UXPin’s canvas exactly as they do in the repository, enabling designers to create fully functioning prototypes indistinguishable from the final product. Request access to UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

How to Create a Design System in UXPin

To begin, open the Design Systems tab in the top bar of your UXPin dashboard. Here, you can create a new design system or view existing ones. Let’s start by clicking the “Create Design System” button.

You can build a design system in two ways:

• Using an Existing Library: UXPin provides pre-built libraries that you can use as a foundation.
• Starting from Scratch: For this tutorial, we’ll start with a blank slate by clicking “Create from Scratch.”

Note: All examples here are created within UXPin, but UXPin Design Systems also support Sketch and Figma imports.

Create a Library of Styles

A solid design system begins with the most prevalent design elements—text styles and color palettes. UXPin lets you pull these directly from your design projects and save them in a shared Design Systems Library, which acts as an actionable toolkit for your product’s design system.

Adding Colors and Text Styles

To add colors or text styles, select the relevant layers in Sketch or UXPin. UXPin will automatically pull the styling and add it to your system. These styles stay synced with the library in UXPin or Sketch, making your system dynamic and up-to-date.

• Typography: Text styles can be added directly from the Editor, allowing you to maintain a consistent typography system across all designs.
• Colors: Add colors by typing their HEX code and pressing “Enter,” importing colors from a website URL, or linking directly to a CSS file. This ensures that all color palettes are centralized and easy to update.

Create a Library of Assets

Next, save your graphic design assets and share them alongside your colors and text styles—such as logos, approved stock photos, or icon libraries. These assets can be stored in the Design Systems Library, providing your entire team with easy access to a centralized design toolkit.

Assets: Upload images and icons in various formats, including SVG. This makes it easy to maintain a library of all design assets that can be reused across different projects.

Create an Actionable Library of Patterns

Design patterns are essential components and elements in your design system. In UXPin, you can create, save, and share these patterns, including those imported from Sketch. You can also add interactivity and animations, enabling designers to reuse these patterns without starting from scratch for each new project.

UI Patterns: These are reusable components and elements designed and prototyped in UXPin. Add them to your design system to ensure consistency and streamline the design process.

Generate a System and Keep it in Sync

Having a library of shared assets is an excellent first step, but it’s not enough to solve the problem of scaling software development.

Most solutions stop here and don’t move toward development. We’ve decided to go all the way.

In UXPin Design Systems, all the colors, text styles, assets, and patterns become a living system with one click. When you add new patterns, text styles, assets, or colors, UXPin automatically updates your design system and generates documentation. These changes are immediately available to all team members and stakeholders.

Add Documentation for Developers

Once you’ve built your system, you can add documentation, including code snippets for patterns and components. Developers can view this documentation with prototypes and mockups, keeping style guides, assets, and instructions in one platform for smoother, faster design handoffs.

Make Documentation Actionable

Design system documentation shouldn’t just be a reference document. It must be where the action is – inside the design projects.

With UXPin, your design system documentation follows your projects.

When you deliver a new release, UXPin automatically generates documentation from the product’s design system, including markup, imports, names of Javascript components, etc

Scaling Design Systems With UXPin Merge

UXPin’s Design System Libraries take you from stage one to three in design system maturity. The final stage is syncing design and development to create a fully integrated design system where designers and engineers share one component library–a single source of truth.

And that’s where UXPin Merge comes in.

Merge imports code components from your design system’s repository as visual design elements designers can use to build prototypes using a simple drag-and-drop workflow.

Merge components render on UXPin’s canvas exactly as they do in the repository, allowing designers to build fully functioning prototypes indistinguishable from code.

This high degree of fidelity and code-like functionality enables design teams to get meaningful, actionable feedback from usability testing and stakeholders who can interact and engage with prototypes as they would the final product.

Single source of truth

Merge also significantly enhances the product development process by centralizing the design system’s management and distribution from a single repository–no more managing UI kits and a component library with separate instructions and documentation to maintain.

Any changes to the repository automatically sync to UXPin, notifying teams of the update. With UXPin’s Version Control, designers can choose which projects to update and even revert to earlier design system releases when needed.

Teams can use Merge Design System Documentation or Storybook’s Docs (for Merge Storybook Integration) to manage documentation for all team members, simplifying one of the most time-consuming governance and maintenance procedures.

Scaling and streamlining with Patterns

UXPin’s Patterns enable design teams to create new patterns and templates by combining Merge components. They can use elements from the design system or combine components from other design systems.

UXPin’s Patterns are also helpful for saving multiple versions or states of a component, template, or screen, allowing designers to swap out and try different variations during testing or feedback sessions with stakeholders. These “on-the-fly” changes allow designers to iterate faster and maximize valuable testing time.

Final Thoughts

To recap, setting up a design system in UXPin involves:

• Creating and organizing design elements like colors, typography, assets, and UI patterns.
• Documenting each element with descriptions, code, and links.
• Using the Spec mode to inspect elements and ensure consistent implementation across your project.
• Scaling and syncing design and development with UXPin Merge to maintain a single source of truth.

By following this guide, you’ll be able to create, manage, and scale a comprehensive design system that supports your team from design to development. Visit our Merge page and explore how UXPin can transform your design workflow today! Request access to UXPin Merge.

The post Creating a Design System in UXPin – The 3-Minute Guide appeared first on Studio by UXPin.

Little icons have a big job. With limited real estate, they must convey meaning to people who expect to be informed about function or status. Maybe that’s why thousands of icons sets exist, many for free. But there’s nothing quite like making your own.

Project-specific icons help the project to stand apart and convey meaning unique to its functions. For example, most apps or dashboards let you create new records. But fewer systems will let you assign one record to another. That may require a creative symbol that people will come to recognize as they learn your product.

Their role in design systems leaves little room for ambiguity: meaning must remain clear in a variety of surrounding contexts, while fitting into the system’s overall aesthetic.

Unify your design and development team with a single source of truth – coded components shared across UI design and engineering. Bring your design system to the final level of maturity and speed up the entire product development process. Try UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

What are Icons in Design System?

Icons in a design system are visual symbols that represent ideas, objects, or actions. They are a fundamental element of user interface that helps products have a unique look and feel. Plus, they indicate that an element is clickable. They can provide visual cues where to click or tap to perform actions like saving, editing, sharing, or navigating within the interface.

Examples of icons in design system include:

• navigational icons – aid navigating through the interface, such as menus, home, arrows.
• action icons – help users perform some task like arrow for adding an item.
• media icons – indicate that users can manage media like play button or speed up button.
• utility icons – represent settings, configurations, and other customization mechanisms.
• status icons – show errors, loading, or approval.
• communication icons – such as chat bubble, phone or envelope.

Why Icons are Part of Design System?

Iconography is more than tiny pictures. Together they form an entire family, not unlike a set of typefaces, that reinforce a brand.

They also prevent extra work. When you need an icon, just grab one from the project’s style library, or use the library as inspiration. To that end writing (and drawing) guidelines for new icons is important.

• Make guidelines for icons. Part of your design system should include parameters on what your team can and can’t do with icons.
• Practice style. One of the best ways to develop a visual language is to apply it to new ideas. As you invent icons, make sure they fit the same look — but don’t be afraid to modify that look early in your work.
• Test each iteration. Do your icons make sense? Can people figure out what they mean? Getting stylish while retaining clear meaning requires showing your work to users.

Where to get ideas for icons

Where do icons come from? Your imagination is just the beginning. Seeking inspiration from outside sources can be critical to success.

• Look up synonyms for the word or concept you want to represent.
• Look for styles beyond the obvious. What inspiration might you find from, say, Polynesian symbols or Mandarin letterforms?
• Doodle shapes at random, avoiding backgrounds like circles or squares.
• Use the brand. Does your project’s logo have an eye-catching characteristic you can use? How about the project’s typography?
• Create negative space. How can the interactions of three or four regular geometric shapes overlap to create new and interesting forms?

Base complex forms on the same shapes

Recognizability is the most important aspect of an icon. If people don’t know it at a glance, they may waste precious time deciphering it — or look elsewhere for a shape they associate with the function at hand.

With that in mind we start by defining icons’ silhouettes. But don’t just start drawing lines.

• Use the same geometry. Here we make shapes based entirely on small circles and rectangles. When you base icons on the same general elements, they look like they belong to the same family
• Use the same angles, e.g. 90°, 45°, 30°. Doing so will make them more legible and more consistent.
• Same line weight throughout. Here, basing glyphs on the same few shapes will help keep your icons looking similar without looking derivative.
• Stick to symmetry — or the same asymmetry. Tilting your icons is a great way to make them stand out from other sets. But if you do so, tilt them all at the same angle to reinforce that they’re part of the same family. Otherwise stick to good ol’ right angles.

This example may stick to its base shapes a little too closely for practical design work, but demonstrates how simple geometry can create complex forms that look like they belong together.

Make a consistent color palette

Like using geometry to make icons look like a set, if you plan to use color, then you should use the same color palette. But which colors?

• Seek inspiration from your photos. If you have final art for your project, make the icons look harmonious by sampling colors from that art.
• Borrow from Google’s MDL palette. They’ve done a great job of selecting bright colors that stand out against a variety of backgrounds, yet rarely clash among themselves.
• Make sure the colors work well together. Speaking of clashes, test every combination of your preferred colors to keep them from looking awkward when adjacent to each other.
• Use one color per icon. The contemporary “flat” look works best without shading, shadows, gradients, or other details that detract from their silhouettes.
• Use values. If you must use multiple colors, try to use different shades of the same hues.
• Consider meaning. Should colors imply function? It’s up to you, but remember that many people associate color with actions, like red for “delete,” green for “create,” and faded (usually less opaque) for “disabled.”

How much color is too much? How much is too little? Determine your color palette based on one factor: attention. If your icons need to grab people’s eyes, then make ’em bright. Otherwise aim for consistency.

Remember that symbols have preconceived meanings

People often associate certain “universal” icons with certain functions. The trash can, for example, means “delete.” Hamburger icons, though, aren’t universally understood … yet.

Using microcopy with icons is a good idea. Rely on shapes for quick identification, and text for folks who don’t get it.

Designing a system

Icons must do a lot with a little. In spite of running small, people expect to “get it” at first glance. That’s why silhouettes, consistency, color, and meaning all work together for a great, on-brand icon set.

The post Design a System of Icons With These Techniques appeared first on Studio by UXPin.

You’ll often see the terms design system, pattern library, component library, and style guide used interchangeably. While these concepts are connected, they refer to different parts of a whole.

There’s also confusion about a design system vs. a component library. Design systems have component libraries, but a component library is also a stand-alone ecosystem, like MUI, React-Bootstrap, and others.

Confusing? Don’t worry; this article will help define all of these terms and put everything into perspective. We also explore the benefits of design systems and component libraries and how designers and developers use these differently.

Integrate your design system directly into the design tool. Use UXPin Merge to design with dev-ready components and eliminate the discrepancies of design to code translation. This not only speeds up the handoff process but also ensures that your final product is visually consistent, user-friendly, and true to your brand. Discover UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

What is a Design System?

A design system is a complete set of design standards (style guide) and documentation accompanying a UI tool kit, including UI patterns, UX design principles, and components. When we look at a design system in this context, it incorporates everything designers and developers need to build and scale digital products.

Some other things you’ll find within a design system include:

• Brand guidelines
• Accessibility guidelines
• UI Design guidelines
• Governance
• Best practices
• Design system roadmap and releases
• Code snippets
• CSS variables & design tokens
• UI kit (an image-based version of design system components)
• Downloadable assets

Pattern Library vs. Component Library–What’s The Difference?

Another big cause for confusion is “the difference between a pattern library vs. a component library.” Most designers use these terms interchangeably. To some extent, that’s not incorrect, but it’s also not completely accurate.

The difference between components and patterns is best explained using Brad Frost’s Atomic Design methodology:

• Atoms: The foundational design elements that you cannot break down further. For example, buttons, icons, forms, etc.
• Molecules: Created by combining atoms to create larger UI components or patterns, like pagination, breadcrumbs, etc.
• Organisms: Complex UI patterns comprising of atoms and molecules. These patterns shape a user interface with cards, navigation bars, logos, search fields, etc.
• Templates: Complete layouts and wireframes which include atoms, molecules, and organisms. A template starts to resemble parts of a webpage or mobile application.
• Page: A page brings everything together on one screen.

Using Atomic Design, we can define patterns and components as follows:

• Component library (Atoms): A component is a reusable block of code that can stand alone or form part of multiple UI patterns–for example, a button. A component library is a collection of UI components within a design system.
• Pattern library (Molecules & Organisms): A pattern is a group of components that designers use to solve usability issues–for example, a navbar with a logo, links, search form, and CTA button. A pattern library is a collection of UI patterns within a design system.

What is a Style Guide?

And lastly, we have a style guide. A style guide is a piece of documentation that provides context and instructions for a design system’s patterns and components–for example, color HEX codes, typography scales, usage, dos and don’ts, etc.

Design System vs. Component Library

When people talk about component libraries like MUI, React-Bootstrap, and others, things get even more confusing. Aren’t these design systems? 

Although these component libraries have extensive documentation and guidelines, they’re not design systems. Designers and engineers can use these open-source component libraries however they choose.

They can edit the library’s components without limitations (so that they’re indistinguishable from the original), build new patterns, combine with other libraries or create custom components.

A design system is different. Designers and engineers must use the components as building blocks. They must follow the system’s guidelines, style guide, principles, and other documentation to design consistent-looking user interfaces–like following the instructions to build a Lego set.

If team members want to change a component or introduce a new pattern, they must follow the design system’s governance procedures. In some cases, the design system team will have the final say about how to build that new component.

Design Systems in Practical Sense

Design systems might seem restrictive, but there’s a good reason for these processes and protocols. Let’s take Atlassian as an example. Atlassian has a suite of business tools with a global userbase.

The company’s biggest selling point is that organizations can use and sync Atlassian’s product suite for a cohesive, consistent experience across the company, from customer support to sales, design, and development.

It’s challenging to achieve that level of consistency when you have a global team of designers, product teams, and engineers. So, Atlassian’s design system stipulates how teams must design its products for a seamless user experience.

In another example, Shopify allows third-party applications, themes, and other integrations. These add-ons come from freelancers and agencies worldwide–which is even more challenging to maintain cohesion and consistency than Atlassian!

Shopify developed its design system Polaris to ensure a consistent user experience, which both internal and third-party developers use to build Shopify products. The design system includes a UI kit for designers and React component library for engineers. 

In this case, Polaris is the complete design system of principles, written content, visual properties, and UI components. The style guide is simply the static documentation on the Polaris website which describes how to use the design system. The pattern library is part of the “Components” in the Polaris design system.

The differences are subtle but unmistakably important when it comes to improving product development. A style guide on its own becomes quickly outdated since documentation requires maintenance. A pattern library lacks the instructions and principles for coherent implementation.

The design system ties everything together.

Creating a Design System

Now that you know what these terms mean and how they work together, let’s quickly review how to build a design system. Here’s a quick overview of the steps involved from our 50-page e-book Creating a Design System: The 100-Point Process Checklist.

1. Create the UI inventory: First list and describe all of the design patterns currently used in your interface and note the inconsistencies therein. 

2. Get support of the organization: Present your findings and explain the utility of a common design language to everyone. As explained in our Evangelizing Design Systems templates, estimate the number of design and engineering hours wasted on redundant work and how product coherence can improve NPS scores.

3. Establish design principles: Codify your practices. You’re now starting to work on the style guide for the design system.

4. Build the color palette: When building the UI inventory, we found 116 different shades of grey that needed consolidation. Create the palette and its naming convention.

5. Build the typographic scale: You can optimize the scale to serve existing styles, or you might try to build a harmonious scale using the golden ratio or major second. When building the scale, don’t forget that you’re not only setting the size of the font, but also weight, line-height and other properties.

6. Implement icons library and other styles: Decide which icons from the UI inventory will become part of the design system, then standardize the implementation.

7. Start building your first patterns:  This is the task that will never end. Patterns should always either reflect the truth about the product, or reflect the aspirational state of the product in the near future.

Learn More About Design Systems

We’ve defined and organize the terms design system, style guide, and pattern library into a hierarchical structure. We’ve also quickly described how to build your own design system.

For a step-by-step walkthrough of how to build a design system, download the 50-page ebook Creating a Design System: The 100-Point Process Checklist. All the advice is based on UXPin CEO Marcin Treder’s experience building the internal design system.

Once you build the system, there’s still things to do to ensure its success. We prepared a checklist of things that you should do after releasing a design system at your organization.

On Using a Component Library

Component libraries provide design and engineering teams with a comprehensive collection of UI elements and components for digital product design. 

The most significant benefit is that teams don’t have to start from scratch–they can begin prototyping and testing immediately using a thoroughly tested component library.

MUI (based on Google’s Material Design UI), one of the world’s most comprehensive and widely used component libraries, even provides customization through theming, so you can separate your UIs from competitors–even if they’re using the same component library.

While component libraries are customizable, they also provide a single source of truth between design and development–something particularly challenging, especially in the early stages of a product’s lifecycle.

Using the same components as engineers gives designers some constraints to minimize drift. At design handoff, engineers simply copy the component library’s components and make changes according to the designer’s mockups and prototypes.

Another significant benefit of a component library is that it gives solo engineers and startups professionally styled UI elements to build products and prototypes, making it easier to enter the market and compete.

How Can Designers and Engineers Use Design Systems?

Designers and engineers follow the same design principles but the guidelines and documentation differ. 

For example, with Polaris, designers and engineers must follow Foundations and Experiences to understand the principles, brand requirements, and approach to designing Shopify products. This knowledge is essential to know before you can start designing and coding.

Polaris also includes a Resources section with a UI kit, Polaris tools (icons set), Polaris GitHub page, links to Shopify’s blogs, additional developer documentation, and forums/communities.

Polaris’ Content and Design is designer-specific documentation for designing Shopify products. The Design section includes a style guide with Polaris’ design language, colors, typography, illustrations, sounds, icons, states, spacing, and data visualization.

Developers must familiarize themselves with Polaris’ design documentation (especially if it’s a solo developer) to understand the reasons behind design decisions and build layouts accordingly, but they have separate documentation under Components.

The Components section includes interactive example components with a code snippet and a link to open it in CodeSandbox. Devs can explore each component and use the snippet as starter code to develop a Shopify product.

Using Component Libraries and Design Systems with UXPin Merge

UXPin Merge allows you to sync any design system or component library hosted in a repository to UXPin’s editor. Instead of using a UI kit, designers build mockups and prototypes using fully functioning code components.

The design system team can set constraints and provide flexibility via the component’s props with our Git integration (for React) or Args with Merge’s Storybook integration (Vue, Ember, Angular, and more). Any updates the DS team makes to the repository automatically sync to the design editor, and UXPin notifies teams of the changes–creating a single source of truth across the organization!

Designers can make adjustments to components via UXPin’s properties panel or switch to JSX to edit code directly–perfect for you designer/developers who want the best of both worlds. At design handoff, engineers copy each component’s JSX properties to develop the final product.

UXPin also generates an automatic design system with interactive components generated from your code. You can also include a style guide and other documentation, keeping your entire design language in one place. Instead of downloading and importing assets and components, design teams grab what they need from the Design Libraries Panel to build layouts. Discover UXPin Merge.

The post The Difference Between Design Systems, Pattern Libraries, Style Guides & Component Libraries appeared first on Studio by UXPin.

One of the key design principles, no matter if your designing a mobile app or a desktop one, is to keep your UI consistent. But what does it mean? How do you achieve consistent user interface? Which design decisions you need to make to achieve that? It’s time to explore that.

Good UX design doesn’t come from following UX design best practices. You need to test your product to tell if it offers great UX and fulfills user needs. That’s where prototyping tools come in. With a tool like UXPin, design teams can prototype their product, and then optimize their design through series of iterations and usability testing with real users.

Maintaining consistency between design and development can be challenging, especially in complex projects. UXPin Merge bridges this gap by allowing designers and developers to work with the exact same components. With Merge, your design team can create complex interfaces using the same elements your developers use in production, ensuring that what you design is exactly what gets built. Discover UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

What Exactly is Design Consistency?

Design consistency is what ties UI elements together with distinguishable and predictable actions, which is key for great product experience and an important thing to consider for UX designers. A way to simplify things is to think of it as a commitment that you make to your users (“whenever you see the light grey button in the pop-up on a homepage, you can assume that it will cancel and the pop-up will close”) so that they can easily interact with your product.

As they become more acquainted and become regular users, they begin to trust the product more and more, which is a reflection of the consistent design. To provide users with a consistent UI, here are UI and UX best practices I’ve found useful for product design.

4 Types of Design Consistency

There are four types of design consistency that comprise visual, functional, internal, and external consistency.

1. Visual Consistency
   • Color Palette: Using a uniform set of colors across the entire design.
   • Typography: Keeping font choices consistent in terms of style, size, and weight.
   • Spacing and Layout: Maintaining uniform margins, padding, and grid systems.
2. Functional Consistency
   • Interactions: Ensuring that similar actions (like clicking buttons or navigating menus) yield similar outcomes.
   • Controls and Components: Using the same design for similar controls and UI components (e.g., buttons, forms) across different sections.
3. Internal Consistency
   • Within a Product: Ensuring all parts of a single product or system look and behave consistently, even across platforms.
4. External Consistency
   • Across Products: Aligning design elements and interactions with other products in the same ecosystem or brand family.

What are the Benefits of Design Consistency?

Design consistency enhances usability by making elements predictable, and it also shortens the learning curve, improves aesthetics, reduces user errors, and strengthens brand recognition by using uniform visual and functional elements.

• Improved Usability – users can predict how elements behave, leading to a smoother and more intuitive experience.
• Faster Learning Curve – users familiar with one part of the system can easily navigate others, reducing the need for extensive learning.
• Enhanced Aesthetics – a cohesive look enhances the visual appeal and professionalism of the design.
• Reduced Errors – predictable interactions minimize user errors and enhance reliability.
• Brand Recognition – consistent use of visual and functional elements strengthens brand identity.

How to Achieve Design Consistency

1. Design Systems and Style Guides – develop and adhere to comprehensive design systems or style guides that outline standards for visual and functional elements.
2. Component Libraries – use component libraries to maintain consistent design elements and interactions.
3. User Testing – Conduct regular user testing to ensure consistency meets user expectations and needs.
4. Documentation and Training – provide documentation and onboarding for new designers and developers to maintain consistency.

9 UI and UX Best Practices for Consistent Design

Start with research

Nothing is more important for a consistent experience than quality research.

This should not be underestimated or hurried. Time and budget are always a necessary consideration in product design. Without either of these, a product would never ship. Although they are important to the process, we can’t lose sight of who actually uses the product, what their customer journey looks like, whether they are desktop or mobile users.

Keep your users top of mind and don’t overlook UX research in the beginning stages of product design planning.

Define user goals

Get into the mindset of a new user. What do they want to accomplish? How will the application help them? List our goals and refer back to these throughout the UI or UX design process.

For example, let’s assume we’re building a travel app. This travel application allows users to select a vacation timeframe and find deals on flights and hotels within their budget. But it’s not just the standard travel site. It connects to your Facebook account, works its magic, and plans the top five vacations based on the content that you’ve shared. The user selects the vacation plan that they like best and all the details are taken care of.

Here are some of the user goals:

• View vacation options within a specified timeframe
• Compare different vacation options
• Select a vacation based on users interests
• Keep within vacation budget

Now that we know the breakdown of goals, we can design to meet user expectations.

Familiarize yourself with common UI patterns

Don’t reinvent the wheel when it comes to established UI patterns. Recurring patterns solve common UX and UI design problems.

Of course, UX designers shouldn’t just “copy” the entire layout of another similar web or mobile app. They need to filter and modify the patterns based on specific user goals.

 A typical pattern in eCommerce is a product grid. With this pattern users can easily browse and see product information.

It’s safe to say that patterns have been evolving and users become aware of standard locations for elements. Most users would agree that when they want to search for something, they look for the search bar in the upper center or right since this is a common placement.

Establish design patterns for product UI and UX design consistency

One of the keys to a successful — and consistent — UI is the user performing tasks with the minimum number of actions is. If a task that takes four steps can easily be completed in two, the UI should always be modified for the shorter task flow. UI patterns can help with this… after all, this efficiency is why they became patterns in the first place.

Design hierarchy

Along with design patterns, having an established visual hierarchy of UI design elements does wonders for UI consistency. Whether users are aware of it or not, they instinctively pay attention to the order and priority of the elements they interact with.

When it comes to visuals and the human eye, some elements take precedence over others (bigger sizes, bright colors, etc.), depending on how “noticeable” they are. Think about your screen visuals in terms of what people will see first, second, third, and so on.

This allows UX designers to ensure users find primary functions faster than others, but they can also present secondary and tertiary functions with the appropriate amount of attention.

UI elements

There is a multitude of design elements that go into an application’s UI, and each makes up the building blocks that form UI patterns. Keep an organized inventory and check that elements are used properly to maintain a consistent experience.

Branding elements

Stay consistent with the overall brand. Typography, logo, correct image styles, brand color schemes, etc. should be reflected in the application, just like the rest of the brand’s properties.

Is the correct logo used? Are branding colors consistent? Does the typeface match the others? Brand consistency helps new projects feel like part of the brand’s family, rather than a black sheep. Style guides usually provide all the information you’ll need.

Making sure colors and typography are on brand gives each of the company’s products a consistent look and feel.

Typography

Elements with the most visual impact like typography should always be “on brand.”

This visual element is especially important, not just for hierarchy, but for the entire UX as well. Changing the sizes, fonts, and arrangement of the text can improve scanability, legibility, readability, and even navigation.

UI components

During user research, become familiar with UI patterns and their components. Knowing how each component behaves, within the pattern and outside it, lets UX designers properly prioritize all elements on the screen without anything slipping through the cracks.

“Components” can refer to any number of elements that make up a pattern, such as:

• Buttons
• Cards
• Forms
• Lists
• Panels
• Progress bars

Let’s say you’re considering adding pagination to long lists so the user doesn’t have to scroll far with long lists.

As you examine the wireframes, you notice that one list has pagination with 20 or more items, while in another part of the application, a list only has pagination with 40 or more items. Which is correct? This example illustrates how making definitive decisions about guidelines is the backbone of UI and UX design consistency.

Templates

If you’re having difficulty standardizing your site or app, try using templates.

Most applications allow them, and because the layout and elements look the same, they streamline UI features across the products. Plus, you can reuse the same UI templates over and over, even years down the line.

Pattern library and design system

It may not be user-facing, but it is one of the keys to consistency. Today, many teams have a pattern library or design system as a point of reference to keep everyone on the same page.  Pattern libraries and design systems are the rulebooks that anyone on the team can reference at any time. For team-wide consistency, they are essential.

A pattern library may not be as robust as a design system since it’s limited to design patterns specifically. A design system has more information all around, including helpful documentation about all the UI patterns and various components. A pattern library can also be a subsection of a design system.

Make actions consistent

Everyone loves when an application is user-friendly. It saves time, avoids headaches, and helps users accomplish their goals by eliminating confusion — all requirements for creating satisfied customers.

Consistent actions remove the need for user discovery and therefore make their task flow run more smoothly. If a user knows how to use the functionality in one section, they know how to use it in all sections (as long as it’s consistent).

Users inherently transfer past knowledge to new contexts as they explore new parts of the application. Consistent actions become second nature and eventually, the user can use the application without even thinking. Furthermore, users bring these expectations into new features or aspects of the product that they haven’t explored yet, minimizing the learning curve.

 “View” placement is not consistent. On most of the cards, it’s toward the top, but on the collection card, it’s at the bottom. This inconsistency might cause the user to pause for a moment to search for the “View” option, not to mention it undermines their own natural habit-forming processes.  

So what, specifically, should you consider when designing your interface? Ask yourself these questions during the entire process:

• Do all parts of the application behave the same way?
• How do interactions work? Are they predictable and consistent?
• How much discovery is needed for a user to understand this interaction?

The example on the left has inconsistent sorting; not all columns have the option to sort. Users may want to sort data in other columns. The example on the right has consistent sorting on all columns.

Review your content

It’s not just about the visual elements, but also the text throughout the application.

Consistent copy — especially consistent terminology — in each place in the application is another key. Using two different words for the same function makes them seem like different functions, causing a momentary pause in the workflow while the user sorts out the discrepancy.

Consistent copy avoids this confusion.

Content structure

Content plays a crucial role in UI elements, whether something as simple as navigation listings or as complex as product documentation. It’s not just the words themselves, but how to copy text is presented visually, such as body copy, list items, table content, etc.

In particular, pay attention to how content is handled in these areas:

• Navigation
• Dropdowns
• Form fields
• Validation messages
• Tooltips
• Charts
• Image captions
• Error messages
• Loading screens
• Confirmation pages
• Product support documentation

Brand consistency in content

You know that feeling when a certain part of an application feels “off.” A lot of times the reason is an inconsistency in the content’s language, for example, if one button says “Logout” and another says “Sign out.”

Even less noticeable inconsistencies can create that “off” feeling.

For the Oxford comma fans out there, something as “minor” as comma usage is picked up subconsciously. After enough of these subconscious flags, the user’s conscious brain starts to notice.

Other writing guidelines such as title case and voice/tone also influence the user’s experience. While title typography is more empirical, voice and tone are a little harder to pin down.  The trouble escalates if most content uses a casual style that clashes with a more formal “brand language.”

Appropriate user defaults

By considering user goals upfront, you can set realistic defaults to reduce the burden on the user.

If the defaults are set to the most popular preferences, the user may not have to make any adjustments at all. Take the date picker on an airline or car rental site. Often the starting default date is sometime in the near future, the most likely choice according to past statistics.

Pay close attention to forms, too; they’re a great opportunity for defaults to reduce the amount of user effort.

Consistent communication

Search results, form submit messages, error windows — every interaction with your user is communication. For an app to be successful, it must speak to the user and keep them informed on what’s happening. And, as with everything else, the way you communicate should be consistent.

Changes in state and helpful information

Users appreciate feedback: a toggle that changes color to indicate “on” or “off,” for example, or a sound effect to verify a completed action.

Your user should never waste time wondering whether an action took place or not. Form field submissions are notorious for this, but it happens in other areas as well. In situations where it may not be clear, a quick success (or error) message is all you need.

Play it safe. Even when it’s apparent that the action was successful, a lot of users still prefer a quick confirmation.

Reduce user frustration

The most common cause of user frustration happens when it’s not clear what to do next. Some tasks are not so self-explanatory, but UI and UX designers are often too close to it to notice. Luckily, some instructional text — even just a line or two — can solve the problem.

For the same reason, error messages are useful too. While users may not like seeing them, they still need to know what happened and how it can be corrected.

Which Design Tools Help in Maintaining Consistency?

There are several tools on the market that help designers and developers keep consistency. We will discuss three of them. If you want to learn about more tools, you can see our article with Design System Management Tools.

UXPin Merge

UXPin with Merge technology allows design teams to build interfaces with production-ready UI components that can be further used to build the end-product. It ensures that the user interface that you design stays consistent and functional with the end-product that gets developed.

This means that design and development teams can be on the same page throughout the full product development process, from early-stage prototyping to creating fully interactive prototypes, eliminating discrepancies and reducing rework by maintaining a single source of truth.

Merge also allows designers to create fully functional prototypes using actual, interactive UI components, leading to more accurate user testing and a seamless handoff to development. Overall, it speeds up the design process by enabling real-time updates and feedback using the latest components, making it easier to maintain consistency and quickly adapt to changes.

Read about dotSource case of using UXPin Merge in their process.

Figma

Figma is a collaborative design tool that allows teams to create, share, and maintain consistent UI design and style guides in real-time. Designers use it to design interfaces of websites, apps, and other digital products that are consistent and easily shareable with other designers.

Read how Porsche uses Figma and UXPin together to create consistent interfaces at scale: Code or Design – Which is a Better Source of Truth?

Storybook

Storybook is a tool for developers that use it to create and maintain UI components, enabling designers and developers to ensure consistency and proper integration of design elements. UXPin integrates with Storybook, so designers and developers can share coded components as a single source of truth.

The integration works by allowing designers and developers to use real UI components from Storybook directly within UXPin. Here’s how:

1. Component Sync: UXPin imports Storybook’s components, enabling designers to drag and drop them into UXPin prototypes.
2. Live Preview: Design changes in UXPin reflect in real-time, using the actual code components from Storybook.
3. Shared Libraries: Both tools use the same source of truth, ensuring that design and development stay aligned and consistent with the latest UI components.

Read more about the integration: Storybook and UXPin integration.

Level up Design Consistency with UXPin

Consistency in UI is a huge undertaking, and it’s easy for some parts to slip through the cracks. The end goal is, of course, a perfectly consistent and in-sync interface, but that’s not always possible right out of the gate.

For startups, you can try an MVP (minimum viable product). Even if the product starts out with some inconsistencies, your team can iron them out one by one over time once you start receiving feedback.

If you’re making updates to an existing product, it can be more difficult to remain consistent. This is where the right prototyping software comes in handy. UXPin allows you to build interactive prototypes fast and keep them in line with your design system. Discover UXPin Merge.

The post Design Consistency Guide UI and UX Best Practices appeared first on Studio by UXPin.

Many teams envision creating a design system as a difficult, time-consuming project. It forces team members to audit their user interface, create a repository of design system elements and design guidelines and combine it in a way it’s usable for the entire organization

It’s not the only way you structure a design system, though. There are some simpler methods of creating this toolkit that is meant to speed up the design process. Let’s explore the best approaches for arranging a design system structure that achieves these goals. 

Maximize the use of your design system in prototyping. Bring your design system’s building blocks to UXPin and design interactive prototypes that your devs can quickly translate to code. Discover UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

What is a Design System Structure?

A design system structure is a comprehensive framework that helps manage design at scale by providing a set of shared principles, patterns, and tools. It enables a consistent, coherent, and efficient design process across multiple teams and projects. The structure typically includes various components, each serving a distinct role in the overall system.

By having a well-structured design system, organizations can ensure a cohesive user experience across all products and platforms, streamline the design and development process, and foster collaboration among team members.

Design systems can be broadly categorized into three types based on their scope, usage, and complexity. Here they are:

• Simple visual design repository
• Atomic design system structure
• Code-based design system structure.

Let’s explore them closely.

How Can You Structure a Design System? 

When you combine design elements with the relevant documentation and guidelines, the system should form a coherent repository of things that are important for building user interfaces for a brand. But to achieve optimal design efficiency and system effectiveness, first, you must arrange it into a discernible structure. One that best suits your team’s needs and your organizational design objectives. 

Simple visual design repository

This is the most basic of design system structures. As the NN Group explains, these visual design repositories come in various configurations, though the core focus here is simplicity.

At its fundamental level, a simple repository’s primary design system components consist of a style guide, a component library, and a pattern library. Together, these form the essentials for any functioning design system repository.  

This structure only contains the essentials that constitute the system. It intends to provide the team members with what they need from the outset and allows them to create and add other assets and documentation as they go along. Shopify’s Polaris and Atlassian Design System use this type of design system structure.

Advantages: 

• The arrangement is simple to create and implement.
• It encourages the design system team to tell the system’s basic structure from commencement.
• And decisions are made on the move, fast-tracking development.

Drawbacks: 

• This arrangement lacks the structure provided by a strict hierarchy.
• Teams tend to list the design system elements alphabetically or by their degree of importance, ignoring critical distinctions.
• And it can be challenging to update and maintain this arrangement. 

Atomic design 

The atomic design structure was created by design systems advocate and author Brad Frost. It focuses on using order and a structured hierarchy to create an effective UI design system. 

The atomic design methodology approaches design system structure by separating the process into five stages. The first three are modeled around the chemistry world, with the subsequent two relating to aspects of the world we can see. We explored atomic design system and its components in a separate article, but let’s recap the most important information here.

Each stage uses the previous one as its foundation. Every level consists of aggregated items from the preceding one. Like atoms constitute a molecule and molecules form an organism, this structure considers the smallest elemental components before moving on to the larger ones.

• Atoms – These represent the most basic components of the design system.
• Molecules – When those ‘atomic-level’ individual elements combine into groups, you’ll start to see bigger elements, coming together like lego pieces.
• Organisms – By developing combinations of elemental design components into molecular groupings, organisms emerge. These form more complex design system UI components.
• Templates – The next stage departs the realm of chemistry and heads into a more ‘macro’ world. Templates are where organisms can be curated and compiled into a cohesive, recognizable design.
• Pages – Once you take a template and customize it, you have a page. By replacing the placeholder content in templates with tailored design content, you obtain the final, tangible product of the design system. Pages may not need to be designed for each and every case, but ensuring that there exist a few variations is a good idea.

Advantages: 

• Atomic design structure makes use of reusable components. Teams can divide various elements into basic atoms. These can then be applied and reapplied in different combinations and configurations.
• Teams can easily spot those parts of a website or app that need various elemental components and create molecules and organisms accordingly. 
• This arrangement enables designers to use a design language that clearly defines a separation between content and structure. 
• This helps them be more creative and come up with different variants of the same components.

Disadvantages:

• An atomic design structure can result in long, complex lists of components. 
• In some instances, having only a few components means maintaining multiple categories for them is pointless. This can complicate the overall methodology.  

Code-based design system structure

This approach is among the most potent and effective for designing system structures. It is ideally suited for design teams working on digital product and new functionalities. Think about Material Design or Fluent UI design system.

This structure enables you to develop prototypes that look and behave just like the developer-built final product. This arrangement allows for more collaboration between designers and developers. The whole product team can count on a single source of truth informing their efforts. 

The code-based design system arrangement is considered a relatively new approach in digital product system design. With it, designers can now employ functioning, developer-approved coded UI elements to scale digital product design.

Advantages:

• The structure improves designer-developer cooperation. 
• It helps teams track changes in UI elements more effectively. 
• It improves overall efficiency from prototyping through to design handoff. 

Disadvantages:

• Designers need tools like UXPin with Merge tech to benefit from code-based design system.
• Components can take lots of time to create.
• Designers may require developer assistance to develop the system.

How Do You Choose the Right Design System Structure? 

Deciding on the right design system structure is essential to giving your team the framework they need to design more efficiently. A design system structure aligned with your product design objectives will help designers collaborate better. This assists them in producing the digital products they’re capable of. 

To ensure you’re picking a design system structure that aligns with your product team’s needs, ask yourself:

• For whom is your design system being optimized? Is it for everybody across the organization, user experience designers, or, say, front-end developers only? 
• How many components and content types – from design patterns, coded UI components, and design guidelines to rollout plans and best practice policies – are you looking to integrate into the system? 
• At what stage of maturity is your design system currently at?

Effective design systems are dynamic entities capable of adapting to the challenges that come with growth and change. A design system’s inherent value lies in its ability to reduce the duplication of effort and facilitated collaboration. 

Why UXPin Prefers a Code-Based Design System structure?

Using coded components in a design system enables sharing among design and developer teams. This allows them to rely on a single source of truth and to collaborate more effectively.

Teams across the organization can also manage all their design and prototyping projects simultaneously. This maintains a higher degree of consistency. In turn, developers can get stuck into translating design patterns into developer’s language.

UXPin Merge uses a code-based design system structure to design prototypes with a single source of truth. With it, designers can create prototypes for digital products that are consistent with developer’s workflow. Discover UXPin’s code-to-design solution.

The post Top 3 Design System Structures appeared first on Studio by UXPin.

As part of our commitment to help you create consistent user interfaces, we’re excited to introduce Color Tokens — a powerful tool that brings a new level of precision and organization to your design workflow.

In open beta, you can set up a color token library, easily update your design system and control colors of your components. In the future, you will be able to facilitate the full design process with colors. Follow along the advice posted in this article. Set up a UXPin account. Try UXPin for free.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What are Color Tokens?

Color tokens are a set of predefined, reusable variables representing colors used in a design system.

Instead of manually applying hex codes or RGB values across different elements, designers can now use these tokens to ensure uniformity, consistency, as well as simplify updates and maintenance of colors in their design system.

Learn more about design tokens: What are design tokens?

Why Are Color Tokens Important?

Color Tokens help keep designs consistent by using the same colors across projects. They make updates easy, reducing manual work. They also help teams use a common set of colors, so everything looks cohesive and in line with company standards.

1. Consistency: By using Color Tokens, teams can ensure that the same color values are applied consistently across all design assets, eliminating discrepancies and maintaining brand integrity.
2. Efficiency: Tokens streamline the design process by reducing the need for repetitive tasks. When a color change is required, tokens can help designers and engineers do it quickly, saving time and reducing errors.
3. Collaboration: Color tokens facilitate better collaboration between designers and developers. With a shared language and defined color standards, design handoffs are smoother, and the implementation is more accurate.

How to Access Color Tokens in UXPin

Before you can access Color Tokens, you need to set them up. You can do that manually or convert an existing library into a Color Token library. See UXPin’s documentation for detailed instructions: Color Design Tokens.

Convert an existing library

If you created a Color library in UXPin before July 17th, 2024, you can convert it to a token library and use the saved colors as token colors.

Open the existing library, click Library Settings and Click ‘convert library to use colors as tokens’. Save changes and you’re good to use those colors as tokens.

Set up a new library

To create a Color Token library, you need to navigate to Design System Library in UXPin. Open Design System Libraries (or press “cmd” + “2” to get there faster).

Then, at the bottom of the panel, click “+ New library”. Navigate to the colors section and get ready to add Color Tokens.

You can set up Color Tokens in two ways:

• Copy colors from selected elements – select one or more elements on the canvas and click “+Add” in the library panel to add the colors as tokens.
• Type in a color HEX code – enter the HEX codes to set up Color Tokens automatically.

The colors from your library will also appear in the Color Picker, so you can quickly apply them to elements on the canvas. Select the element that you want to switch a color of and choose an appropriate color from the library.

This trick works for setting up the colors for properties like fill, border, and shadow.

What Can You Do with Color Tokens in UXPin?

1. Change colors of elements that you have on the canvas – Pick an element and add a color to it from the saved Color Tokens.
2. Update colors in your design system – If you use a design system, you can now try new colors and change your design system library for a more modern look.
3. Maintain a uniform look within a project – Access the same Color Tokens in every new prototype that you and your teammates create within a project.
4. Share Color Tokens across your organization – Share your design system library with tokens across your organizations, so everyone can use the same Color Tokens.
5. Manage Color Tokens as you like – Set up new Color Tokens, update existing ones, share them with your team, and more. 

A Step Towards Comprehensive Design Tokens

Introducing Color Tokens is just the beginning. At UXPin, we understand that Design Tokens extend far beyond color. As part of our commitment to creating a robust design system, we are actively working on expanding our token offerings to include typography, spacing, and other design elements.

This comprehensive approach will further enhance consistency, improve scalability, and streamline the entire design-to-development workflow.

Use code-backed components in both design and development. Build advanced prototypes effortlessly and generate production-ready code directly from the design. Try UXPin for free.

The post Color Tokens in Open Beta – Simplify Color Management appeared first on Studio by UXPin.

Design system is a set of components, rules, style guides, and documentation used to build a coherent and on-brand interface of a product. Most brands create their own design system and we prepared a list of nine most popular design systems that you can learn a lot from. Those and other design systems can be found in our design system repository called Adele.

Boost design system adoption and governance with UXPin Merge. Bring all interactive components from your design system to the editor, build fully interactive prototypes, and keep your designs consistent. Read more about UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

What is a Design System?

A design system is a collection of all design resources that a product team may use to build user interface of their app, website, eCommerce store or any other UI design they need to develop.

Design systems aren’t only for designers. They are also for developers, as they contain all code snippets and development resources with necessary front-end code together with documentation as well as design guidelines, relevant plugins, design patterns, style guides, reusable components, rules plus guidelines, and all other building blocks useful for web design and development workflow.

These design systems are then hosted as websites online and can be publicly available (they are open-source design systems) or internal, whatever the brand decides.

We can think of a design system as a vast data library that acts as a valuable document with applicable instructions and examples, product design and coding guidelines, and a part of the UI kit all at the same time.

As you can see, there are many product design concepts related to design systems. If you want to learn to differentiate design systems from pattern libraries, component libraries, and UI kits, read our previous article on the topic: The difference between design system, pattern libraries, style guides, and component libraries.

Why Are Companies Building Unique Design Systems?

Companies like Shopify, Google, AirBnB, and other are building their own unique design systems because they want:

• Consistency – design systems act as a single source of truth for design and development.
• Transparency – developers can use the design system components directly, without needing to interpret design decisions.
• Scale – designers are able to build prototypes faster and streamline developer handoff.
• Reusability – design systems facilitate the creation of prototypes with consistent components that can be shared within the organization.
• Clarity – design systems help ensure that design decisions are based on shared knowledge, making it easier for team members to understand and contribute effectively.

What is There to Learn from Design Systems?

The majority of design systems follow rather general setup patterns.

The system often features its top navigation with the main categories: Design, Code, Language, Components, etc.

Each of these main categories has its subcategories that discuss things in more detail, making the most out of the atomic design structure. For instance, these subcategories could be something like Typography, Color, Forms, Banners, etc.

Following this intuitive navigation can get you valuable information about best practices in terms of design.

The Benefits of Creating a Design System

With a well-built design system in place, businesses can considerably improve their teamwork and streamline decision-making process, but that’s not all that you can get from creating a design system.

Such collection of guidelines, elements, and data minimizes communication issues between designers and developers and minimizes the room for potential UX design bugs or acquiring UX debt.

What’s more, having such a reference-rich library significantly reduces the necessary time to go from a prototype to an actual product.

For example, PayPal uses Fluent UI together with Merge technology. This allows them to incorporate the interactive components to the UXPin library. That way, both designers and product team members alike can easily access these components and design with them over and over again.

Design systems are a great way to minimize the disconnect between designers and developers but are still not the ideal solution on their own. Thanks to the Merge technology revolution, product team members can easily use the same tools and improve their DesignOps workflow processes. This means that both developers and designers can access and use the same UI elements from one single source. 

Design System Challenges and Solution

Even when companies try to create their design system, specific issues and consistency disconnects can still happen, especially when maintaining all the elements, documentation and code. 

Learn more about design system challenges and solutions from one of the top design leaders – Johnson & Johnson. During our webinar, the J&J team shared all their best practices. 

Example 1: Porsche Design System

The Porsche Design System is an exemplary model due to its comprehensive, well-documented, and high-standard approach to design and implementation, making it a valuable reference for anyone looking to create top-tier web applications.

The Porsche Design System stands out because it provides the essential design fundamentals and elements required for creating visually appealing and high-quality web applications. One of its key strengths lies in its pixel-based libraries for Figma and then coded ones in UXPin, which streamline the design process for digital creators. Additionally, it includes coded Web Components and detailed usage guidelines, ensuring that the implementation is as smooth and consistent as the design.

What truly sets this system apart is its adherence to the rigorous Porsche quality standards and corporate design principles. Every component is meticulously built and tested, guaranteeing not only aesthetic excellence but also functional reliability. This holistic approach ensures that the final products are both beautiful and robust, reflecting the esteemed Porsche brand.

Example 2: Google Material Design System

One of the most popular design system is Google’s Material Design. Google created and publicly shared their Material Design System that goes into the tiniest details regarding everything there is to know about the design and design principles. Every UXPin user can easily use the Material Design components as they are one of the UXPin libraries. 

Thanks to this system, users can get valuable information that perfectly unifies UI and UX across different devices, platforms and input methods.

Material Design allows other brands and individuals to have a strong foundation for building upon when it comes to their own approach to atomic design, industry innovation and unique brand expression.

The main features of the Google Material Design System include:

• Starter Kits
• Design Source Files
• Material Theming
• Layout
• Typography
• Color
• Components
• Mobile Guidelines

Google’s Material Design System looks very mature. It has a lot of design guidelines, but it also contains documentation about UI components that are used in development. Did you know that such components can be used in design? Bring your developers’ components to design with UXPin’s Merge technology. Request access to UXPin Merge.

Example 3: Apple Human Interface Guidelines

Apple has one of the top design system. It is called Apple Human Interface Guidelines and it presents a vast and rather valuable design system resource for the web design essentials and pattern libraries but downloadable templates. The iOS UI kit library is also available with a UXPin account. 

The system follows Steve Job’s design principles:

• Craft with great precision and attention to detail
• Emphasize user experience and connection with the users
• Focus on what’s truly important on a larger scale
• Generate wanted user reactions thanks to the specific design language and practices
• Utilize the friendly aspect of high tech for both novice and advanced users
• Simplify everything

Features of Apple Design System

Apple Human Interface Guidelines consist of practical resources, visual guidelines and style guides for both designers and developers for iOS, macOS, vOS and watchOS.

Its includes design system documentation about using:

• Menus
• Buttons
• Icons and Images
• Fields and Labels
• Window and View
• Touch Bar
• Indicators
• Selectors
• Extensions
• Visual Design
• Visual Index
• App Architecture
• System Capabilities
• User Interaction
• Themes

Example 4: Atlassian Design System

Atlassian Design System is one of the best out there. Atlassian Design System focuses on providing valuable assistance to teams from all over the world by making their collaboration seamless and easy. Atlassian Design Guidelines are also a part of UXPin’s library collection. 

Atlassian design philosophy is all about utilizing the digital experience to improve the productivity and overall potential of teams and individual team members, perfectly reflected in their globally used collaboration tools Trello and Jira.

That said, Atlassian Design System features agile practices and efficient tracking of every single step within a project that ultimately yields valuable results in terms of product delivery and development.

Features of Atlassian’s design system

Atlassian’s design system includes

• UI components
• brand values
• UI kit
• UI patterns
• design tokens
• illustration library
• content guidelines

Example 5: Uber Design System

According to Uber, movement ignites opportunity and that’s how they structured their design system.

After all, Uber service bases on movement with ride-hailing, peer-to-peer ridesharing, food delivery and micro-mobility involving scooters and electric bikes.

For this type of service to work impeccably, from sub-brands to internal ones and products to programs, Uber requires an effective design system that the company shares with the rest of the world.

Features of Uber Design System

Main features of Uber Design System:

• Brand Architecture
• Composition
• Tone of Voice
• Motion
• Illustration
• Photography
• Iconography
• Color
• Logo
• Typography

Example 6: Shopify Design System Polaris

Shopify is a global eCommerce platform that provides everything a brand may need to run and grow its business in one place.

It’s no wonder that their design principles focus on creating a better and more accessible commerce experience.

Shopify’s public design system called Polaris encompasses the company’s core values:

• Be caring and considerate to the users
• Provide people with the right tools to accomplish whatever they set out to do
• Enjoy the top level of craftsmanship that matches the brand image
• Minimize the hustle by providing accurate and quick solutions
• Always build upon users’ trust
• Make the users feel comfortable with using the products

Polaris Design System provides an easy-to-follow and practical style guide for designing for the Shopify platform. It offers a vast knowledge base on utilizing UI components, visual elements, content, and design language for creating a better user experience and product in general.

Features of Shopify’s Design System

Shopify Design System Polaris includes main features that follow the practices mentioned above to a tee:

• Data Visualization
• Accessibility
• Interaction States
• Colors
• Typography
• Icons
• Illustrations
• Spacing
• Sounds
• Resources

Example 7: IBM Carbon Design System

IBM operates on a global scale by meeting large enterprise IT needs.

Their services range from business consulting and financing, software development and IT hosting/management to software-to-hardware products.

IBM’s core belief revolves around making constant progress, be that human condition, society or a brand, by utilizing science, reason and intelligence.

According to IBM, a good design is not only a mere requirement but an actual responsibility to the users.

Features of IBM’s Design System

This is where their Carbon Design System shines with its main features, offering plenty of tools and visual resources for Adobe, Axure and Sketch designers as well as developers:

• Data Visualization
• Patterns
• Components
• Guidelines
• Tutorials

UXPin users can conveniently find everything they need from Carbon in their account as well. 

Example 8: Mailchimp Design System

Mailchimp has come a long way from being a renowned email marketing leader to providing an all-in-one marketing platform that goes beyond email only.

Mailchimp has one clear goal: to help small businesses grow while remaining true to their brand identity and image.

Features of Mailchimpr’s Design System

That is also one of the many reasons behind creating the Mailchimp Design System and its main features that focus on creative expression, better user experience and top quality:

• Data Visualization
• Grid System
• Color
• Typography
• Components

Example 9: Salesforce Lightning Design System

Salesforce goes above and beyond to deliver a personalized experience to its users through the integrated cloud-based CRM software.

The purpose of the Salesforce CRM is to improve marketing, commerce, IT, service and sales efforts – and allows their users to do the same with their users.

Their design philosophy is reflected in the Hawaiian word for intentional family, Ohana, with four core values that drive their company actions and overall culture:

• Innovation
• Equality
• Trust
• Customer Success

Features of Salesforce Design System

Salesforce has put out their own Lightning Design System that allows everyone working with content management systems to learn and benefit from its main features:

• Design Guidelines
• Platforms
• Accessibility
• Components (and a lot of them)

Lightning components are a part of the UXPin account libraries as well. 

Make the Most of Design System: the UXPin Merge Way

Merge tech is created as an adequate solution to common challenges that often happen when there’s a communication gap between design and development teams. So, various UI components, coding and documentation inconsistencies can arise, affecting the product’s efficiency and maintenance.

With the design system that organizes all of the necessary components as a first step in the right direction, Merge will then take all those UI elements right to the design editor.

You’ll save time and money by avoiding inconsistencies, not to mention the joy of seeing an end product that’s exactly the same as what you originally envisioned!

Merge tech focuses on design with code components, that is converting a code component into the design. In that respect, designers don’t simply create prototypes based solely on the visual aspect of the final product (while only faking the necessary interactions); instead, designers use already coded components to design the prototype image.

There’s no need to go back and forth between the design and dev team since the design team can take the already existing coded components, synchronize them with UXPin’s editor, and drag and drop the components they need to create new designs.

Essentially, designers don’t have to create fake interactions, add them or search for the right colors.

On the other end, developers get the prototype preview and continue to work with the available production-ready elements.

Which Design System Example is Your Favorite?

Design systems consist of tons of UI components and guidelines that are meant to optimize and improve the design efforts and promote consistency among the teams.

However, if the design system is poorly maintained and implemented, the said system can turn into nothing more than many clunky and confusing code snippets, libraries and components.

A design system can quickly help team members to promote consistency while also allowing designers to deal with more complex UX issues. And when you add revolutionary Merge tech to the mix, you can truly take your design system organization to the next level. Learn more about UXPin Merge.

The post 9 Best Design System Examples in 2024 appeared first on Studio by UXPin.

Material UI, developed and maintained by MUI, is a popular React component library that implements Google’s Material Design guidelines. It offers a comprehensive set of reusable and customizable components, such as buttons, cards, menus, form elements, predefined styles, and themes.

The library promotes a modular and structured approach to building user interfaces, enabling developers to create visually consistent and responsive designs. With Material UI, developers can streamline their front-end development process and deliver intuitive and visually appealing web apps.

Use Material UI’s React components for prototyping and testing your design without the need of translating pixels into code. Discover how smooth prototyping can be. Try UXPin Merge for free.

Ant Design

Best for: web applications, cross-platform applications, native apps

The Ant Design library is a comprehensive UI component library developed by Ant Design that offers a wide range of reusable and well-documented components for building high-quality applications. It follows the principles of the Ant Design system, emphasizing a clean and minimalist design aesthetic with a focus on usability and accessibility.

The library also provides powerful features like internationalization support, theming capabilities, and responsive design, making it a popular choice among developers for creating professional and user-friendly interfaces.

Developers can quickly create consistent and visually appealing interfaces by leveraging its extensive collection of components, including forms, tables, navigation menus, and more. 

The Ant Design system also offers libraries for mobile and charts, giving product teams a comprehensive set of components and patterns for a wide variety of cross-platform applications.

React-Bootstrap

Best for: web applications

React-Bootstrap is a widely used React UI library for building responsive web applications with React. It combines the power of React’s component-based architecture with Bootstrap’s flexibility and styling capabilities, offering a comprehensive set of pre-designed and customizable components.

React-Bootstrap provides a range of UI elements such as buttons, forms, modals, navigation menus, and more, allowing developers to rapidly create visually appealing and functional interfaces.

React-Bootstrap’s detailed docs and active community support simplify web development by providing reusable and well-tested components, enabling developers to focus on building robust and user-friendly applications.

Fluent UI

Best for: web applications, iOS & Android applications, native apps, cross-platform applications

Fluent UI is a robust and comprehensive design system developed by Microsoft that provides reusable components and styling options for building cross-platform and mobile apps. The library follows the principles of Fluent Design, focusing on clarity, content prioritization, and smooth animations. 

It offers a consistent and cohesive experience across different platforms and devices, making it suitable for many cross-platform and mobile projects.

With its extensive documentation and active community, Fluent UI empowers teams to build intuitive and accessible user interfaces that align with Microsoft’s design language. From buttons and forms to complex data grids and charts, Fluent UI provides the necessary tools to deliver delightful and user-centered experiences.

Read about the differences between Material UI and Fluent UI.

Carbon Design System

Best for: web applications, iOS & Android applications, native apps, cross-platform applications

Built on the principles of IBM’s design philosophy, Carbon focuses on simplicity, clarity, and purposeful interactions. It provides a range of components, from buttons and forms to data visualizations and icons, enabling designers and developers to create intuitive and visually appealing interfaces.

With its modular and flexible architecture, the Carbon Design System promotes reusability and scalability, making it suitable for large-scale enterprise applications and smaller projects. The system’s documentation and resources empower teams to maintain design consistency and streamline collaboration.

Tailwind CSS

Best for: web applications

The Tailwind CSS library enables developers to rapidly build custom user interfaces using a utility-first CSS framework. It provides a comprehensive set of pre-defined utility classes, eliminating the need for writing custom CSS styles.

The library supports React, Vue, and HTML. Developers can easily apply these utility classes to HTML elements, giving them granular control over the appearance and behavior of their UI components. 

Tailwind CSS promotes a modular approach to styling, where devs can combine classes to create unique and responsive designs. It offers utilities for layout, typography, colors, spacing, and more, allowing developers to create consistent and visually appealing interfaces with minimal effort.

Semantic UI

Best for: web applications

Semantic UI is a versatile front-end framework that offers a wide range of semantic and intuitive components for creating user interfaces. It provides a comprehensive collection of pre-designed UI elements for web applications, including buttons, forms, menus, cards, and modals.

The framework follows a natural language naming convention, making it user-friendly and easy to understand. Developers can leverage Semantic UI’s extensive set of CSS classes to build visually appealing and responsive designs quickly. The library supports React, Meteor, Ember, and Angular front-end frameworks.

Semantic UI supports theming and customization, allowing developers to customize the appearance of their UI components to align with their project’s branding. With its intuitive syntax and detailed documentation, Semantic UI is a valuable tool for designing and developing modern web interfaces.

Foundation

Best for: web applications, email templates, landing pages

Foundation is a responsive front-end framework with CSS and JavaScript components for building modern, mobile-friendly websites. It offers a comprehensive toolkit with a modular approach, allowing developers to customize and tailor their designs to meet specific project requirements.

Devs can easily create responsive grids, navigation menus, forms, buttons, and other UI elements that adapt seamlessly across different screen sizes. The framework also includes a powerful JavaScript library that enables interactive features and smooth animations.

With its extensive documentation and active community support, Foundation empowers developers to create visually appealing and highly functional web interfaces.

Chakra UI

Best for: web applications

Chakra UI is a modern and accessible React component library for streamlining user interface development. The library supports several frameworks, including React, Next.js, Meteor, and Gatsby, to name a few.

The project was founded by Segun Adebayo of Nigeria, making it one of the most prominent open-source component libraries to come out of Africa.

Chakra UI provides pre-designed components and utility functions, allowing developers to create visually appealing and responsive websites. Developers can leverage Chakra UI’s customizable and reusable components, such as buttons, forms, cards, and navigation elements, to design intuitive and accessible user interfaces.

The library also focuses on accessibility by adhering to WCAG standards, ensuring that the created interfaces are usable by individuals with disabilities. Chakra UI’s simplicity, flexibility, and robust documentation make it a popular choice among developers looking to build efficient and visually stunning React applications.

Bulma

Best for: web applications, landing pages

Bulma is a lightweight and modern CSS framework based on Flexbox, providing a flexible and responsive grid system and a set of ready-to-use UI components. The framework’s intuitive class naming convention supports quick and efficient styling, while its modular architecture ensures scalability and customization.

Bulma’s simplicity, extensive documentation, and community support make it a popular choice for projects of all sizes. Whether you’re building a landing page, a dashboard, or an eCommerce site, Bulma provides a solid foundation for building aesthetically pleasing and functional interfaces.

Styled Components

Best for: web applications, landing pages

Styled Components is a popular JavaScript library that allows developers to write CSS directly in their JavaScript code using tagged template literals. It provides a way to encapsulate styles within components, making them more maintainable and reusable. 

Styled Components is widely used in the React ecosystem and offers seamless integration with popular UI frameworks and libraries. Developers can create dynamic and responsive styles by leveraging the power of JavaScript, including the ability to access component props and states. The library offers many features, including support for CSS-in-JS, automatic vendor prefixing, and theme management.

PrimeReact

Best for: web applications, landing pages

PrimeReact is a comprehensive UI component library for React applications, offering ready-to-use components and advanced features. It provides a wide range of UI elements, including buttons, inputs, tables, modals, and charts, for various digital products.

PrimeReact follows a responsive design approach, ensuring components adapt well to different screen sizes and devices. The library also offers powerful features, such as data binding, filtering, sorting, and pagination, making it suitable for building data-intensive applications. 

By leveraging PrimeReact’s pre-built components and features, developers can save time and effort, resulting in faster development cycles and improved user experiences. The library is regularly updated, ensuring compatibility with the latest React versions and providing ongoing support and bug fixes.

High-Quality Prototypes with UXPin’s Code-to-Design Methodology

UXPin’s Merge technology enables product teams to import these and other open-source design systems into UXPin’s design editor so designers can prototype and test using code components.

Use the same components in the design process as you would use to develop the final product. Build immersive prototype experiences for user testing and stakeholders, providing meaningful feedback to iterate and improve concepts. Share a single source of truth across the product development environment, from early-stage design to development and the final product. Try UXPin Merge for free.

The post 11 Best Material UI Alternatives appeared first on Studio by UXPin.

Collaboration doesn’t end at the design handoff stage, right? Yet, seldomly is it discussed what happens next. We’re inviting you to a webinar that will show you how enterprise teams like Porsche, IBM, and Salesforce collaborate to boost their design system adoption and scale consistency.

Spoiler alert! You can replicate those strategies to amplify collaboration at your organization. Join us on Wednesday, May 29th, for a free webinar: “Removing Friction from Design System Workflows.”

👉 Save your free spot here.

What will we cover during the webinar?

Wanna ship products faster? Then, you need to master processes and tools that will get you there. This webinar will give you first-hand experience on what you can do to keep the speed of action in a multi-disciplinary team of engineers, designers, and stakeholders.

You’ll learn:

• How to empower developers and designers to communicate using live examples
• How to increase the adoption of your design system with interactive documentation
• How to streamline efficient bug reporting and updating the design system library

👉 Save your spot here.

About the expert

We invited Tomek Sułkowski to host this webinar. He’s a DevRel and a founding engineer of StackBlitz – an in-browser dev environment for building web apps. He helps teams optimize the browser development environment by utilizing a variety of built-in, open-source, and commercial tools.

During the webinar, he will explain how to enhance collaboration between designers and developers, as well as, stay in control of design system adoption with dev environments, version control systems, and design tools.

Sign up to discover the secrets of real-time collaboration and boost quality of output.

👉 Save your spot here.

The post Join our Free Webinar: “Removing Friction from Design System Workflows” appeared first on Studio by UXPin.

Building a React design system from scratch requires careful planning and consideration. Input from multiple departments and stakeholders is crucial for creating a component library that serves the organization and its end users.

This article is an introduction to React design systems and how to approach component development, documentation, governance, design tools, and more. We also have a step-by-step guide to building a design system which covers 12 essential topics.

Bring UI components to UXPin and create well-designed prototypes based on your React design system. Speed up your development by building apps 10x faster. Discover UXPin Merge.

Design UI with code-backed components.

Use the same components in design as in development. Keep UI consistency at scale.

Try UXPin Merge

What is a React Design System?

A React Design System is a collection of reusable UI components and guidelines built specifically for use with React, a popular JavaScript library for building user interfaces. It encompasses a set of pre-designed, customizable components such as buttons, forms, navigation bars, cards, and more, along with guidelines for their usage and implementation within React applications.

The main purpose of a React Design System is to promote consistency, efficiency, and scalability in UI development by providing a unified set of components and design patterns that can be easily reused across projects. By leveraging a React Design System, developers can streamline the development process, reduce code duplication, and ensure a cohesive and polished look and feel across their applications.

Key components of a React Design System typically include:

1. Reusable Components: A library of React components that encapsulate common UI patterns and functionalities, such as input fields, dropdown menus, modals, and tabs.
2. Design Guidelines: Clear documentation and guidelines on how to use each component, including information on props, styling options, accessibility considerations, and best practices for integration within React applications.
3. Theming and Customization: Support for theming and customization, allowing developers to easily adapt the design system to match their brand identity and design requirements.
4. Responsive Design: Components designed to be responsive and adaptable to different screen sizes and devices, ensuring a consistent user experience across desktop, tablet, and mobile platforms.
5. Accessibility: Considerations for accessibility, with components designed to meet accessibility standards and guidelines, ensuring that applications built with the design system are usable by all users, including those with disabilities.

Overall, a React Design System provides a solid foundation for building React applications, enabling developers to create consistent, high-quality user interfaces with minimal effort. It promotes collaboration, efficiency, and maintainability, making it an invaluable tool for teams working on React-based projects.

The Benefits of a React Design System

There are many benefits to using or building a React design system. React’s component-driven development approach makes it the perfect modular-style UI library for design systems. Front-end developers can strip React components down to atoms and combine these to create new UI elements, patterns, and templates.

React is one of the most widely used UI libraries, which offers many benefits for building design systems:

• A big community of developers to ask questions and solve problems
• An abundance of Javascript tools and integrations
• Many well-established design systems for inspiration

Which companies use React design systems?

Here is a short list of companies using React for their design systems:

• Instacart’s Snacks
• Shopify Polaris
• Atlassian Design System
• Salesforce Lightning
• IBM’s Carbon Design System
• Microsoft’s Fluent UI
• MUI (Material UI)–built on Google’s Material Design

We recommend checking out these design systems to learn about component syntax, documentation, guidelines, and other design system factors.

Check out Adele for more design system inspiration. It’s a repository of publicly available design systems and pattern libraries with links to GitHub repos to download and analyze.

React Design System Fundamentals

Understanding Atomic Design Principles

Atomic Design is a system created by Brad Frost where he organizes UI elements into five categories:

• Atoms: foundational UI elements you cannot break down further–e.g., HTML tags, fonts, buttons, animations, and color palettes.
• Molecules: groups of atoms create components that serve a specific function or purpose. e.g., search input, nav links, dropdown menu, etc.
• Organisms: Complex UI patterns that combine to create user interfaces. e.g., a header nav bar, footer, image carousel, etc.
• Templates: represent a complete user interface with multiple organisms working together. e.g., a dashboard, news feed, chat UI, etc.
• Pages: represent the different instances of the template and how content changes within the screen–for example, refreshing content in a newsfeed or receiving a message through chat.

Why is Atomic Design important for React design systems? 

The Atomic Design methodology enables you to leverage React’s modularity and reusability benefits. By approaching a design system as a sum of many atoms (or Lego pieces), it’s easier to develop a flexible, scalable UI library that can adapt and evolve with your product.

The design system team can build new components and patterns much quicker by combining atoms and molecules. This modular approach also makes building one-off solutions easier and more cost-effective because it’s a matter of combining what you have rather than developing from scratch.

The role of components in a React design system

React components are the building blocks that help ensure consistency, reusability, and maintainability across user interfaces and apps. These UI elements serve many vital purposes, including:

• Modularity: React components are modular by design, making it easy to combine, reuse, and manage the UI library.
• Consistency: React’s effortless reusability enables developers to build design principles, styles, and interactions into each component and recall it anywhere in the application.
• Reusability: Developers can leverage a UI library of reusable components to save time and resources when developing new products. This reusability also reduces errors and technical debt because devs don’t have to write code from scratch.
• Customizability: developers can easily customize specific components while still adhering to design guidelines or affecting the UI library, allowing for flexibility when necessary.
• Maintainability: With components stored in a centralized repository, developers can push updates and bug fixes from one place, making it easy to maintain and improve the design system and its products.
• Scalability: Engineers can extend and adapt React components to evolve with products and new technology.
• Accessibility: Developers can incorporate foundational accessibility standards at the component level, making it easier to implement product-wide.

The importance of using design tokens

Design tokens incorporate the core values of a React design system. These tokens contain properties such as colors, typography, spacing, sizing, states, interactivity, and more to maintain a consistent design language across multiple platforms, devices, and operating systems.

A design token can contain many values for multiple platforms. For example, UXPin’s homepage uses yellow for CTAs. The hex code for this yellow is #FCC821, which you can represent in several ways:

• HEX: #FCC821
• RGB (CSS): rgb(252, 200, 33)
• RGBA: rgba(252, 200, 33, 1)
• Octal (Android/Flutter): 77144041

We can encapsulate all four values under one design token:

• cta-background-primary

So, if you’re implementing this color in any platform, you use the token instead of the code. Design tokens also make cross-functional collaboration easier because everyone uses the same language rather than one team referencing the HEX, another the RGB, and another the octal–which can get confusing and lead to errors.

Design tokens also allow the design system team to implement product-wide modifications simply by changing the properties in the token file. For example, the team can change the cta-background-primary design token from yellow to blue across the product ecosystem by adjusting the four codes in one place rather than updating every instance or stylesheet individually.

Getting Started with a React Design System

On the surface, a design system appears simple. But, in reality, these UI libraries are complex organisms with many moving parts. Here are some things to consider when planning your React design system.

These factors will lay the foundation for your design system’s governance protocols and procedures. For this reason, it’s essential to document every stage of this early decision-making process.

Mono-repo vs. poly-repo repositories

Decide whether to use a single repository (mono-repo) or multiple repositories (poly-repo) for your design system’s React component library.

Mono-repos simplify dependency management and make it easier to work on multiple packages simultaneously. Poly-repos offer more modularity and isolation between packages, making it easier to maintain and use individual components independently.

Accenture shares the pros and cons of using mono vs. poly-repos.

Component organization

Organize your component library in a way that makes the most sense to your product and team. For example, you can group components by functionality, domain, or Atomic Design–MUI organizes its UI library by functionality:

• Inputs: Button, Switch, Text Field, etc.
• Navigation: Drawer, Menu, Pagination, etc.
• Layouts: Box, Container, Grid, etc.
• Data Display: Avatar, Icons, List, etc.

No matter how you categorize these components, each must have its own source code, styles, tests, and documentation.

Design token management

Centralize design token management in a dedicated folder or package controlled by the design system team. This centralized management helps facilitate better maintenance and governance while simplifying changes and updates.

Theming and customization

Design system theming and customization are vital for modern product development, typically requiring at least two themes, light and dark modes. Multi-brand design systems require greater customization and flexibility, so you must consider these factors before developing.

Check out “Theming and Theme Switching with React and styled-components” from CSS Tricks for details on how to set up themes for React libraries.

Documentation

Design system documentation is vital for successful adoption and consistent implementation. The docs must include your design language, guidelines (content, design, code, accessibility, etc.), style guide, use cases, code examples, tools, and other critical information.

A tool like Storybook can help centralize your design system’s documentation management and updates. You can sync your Storybook to UXPin using Merge and create a single source of truth across design and development.

Testing

Plan a structure for managing and organizing your component tests–another reason to consider Storybook. Storybook offers built-in component testing automation with multiple bug-prevention tests, including visual, interaction, accessibility, snapshot, and more.

Versioning and release management

Establish your React library’s versioning strategy and release management process to ensure your design system remains updated and compatible with your products.

Design tools

Designers will need access to your React design system for prototyping and testing. A common strategy is to use vector-based tools, but this means updating and maintaining two formats of your React design system:

• The component library in the repository
• UI kits for design teams

With UXPin Merge, you can import your React library into UXPin’s design editor so designers and engineers use the exact same UI components. There are a couple of options for syncing code components. Learn more about them and discover UXPin Merge.

The post React Design System – Where to Start? appeared first on Studio by UXPin.

Visual communication is exceptionally complicated. It’s diverse, boundless, and relentless. A design language establishes principles and constraints that induce the clarity, consistency, and cohesion necessary for designers to communicate with end users.

Developing this design language is a time-consuming undertaking requiring feedback and collaboration from multiple departments and stakeholders.

The final result will allow an organization to create convergent and coherent experiences, significantly decrease spending, and set a high design standard that’s easy to follow.

Bake your design language into your component library with a single source of truth from UXPin Merge. Visit our Merge page for more details and how to request access to this revolutionary technology.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

What is design language?

Design language is the collection of visual and interactive elements designers use to communicate with users. It ensures that designers create cohesive and consistent user experiences across platforms, products, user interfaces, and features.

The design language typically relates to the company’s brand values and identity–allowing people to recognize a brand through its designs and content.

There are two perspectives of design language: internal and external.

• Internal: ensures that every team follows the same rules and methodologies using a set of reference points and coordinates, making the design process efficient and free of confusion.
• External: facilitates familiar, intuitive user experiences for customers across multiple platforms and products.

By blending these two perspectives, companies create more efficient design processes, craft a memorable brand identity, and enhance usability.

What goes into a design language?

A design language covers many facets of a product, such as

• Colors
• Fonts
• Icons
• Sounds
• Spacing and layouts
• Copy
• Graphic design and illustrations
• Data visualizations
• States

What’s the difference between design language and design system?

A design language typically exists within a design system or style guide, providing product teams with guidelines, usage, and instructions. In a 2017 article, UXPin founder Marcin Treder made the argument that design systems are a language:

“A design system is a dynamic dictionary that describes the ever-changing current state of the language, prescribes the proper usage of it, and invites all the users of the language to extend it.” – Marcin Treder.

If you aim to build a design system, defining your visual language first will help guide the development of your UI components and pattern library.

Why is having a design language important?

A design language is a set of rules and principles that guide an organization’s visual identity, ensuring designs have a sense of continuity.

A well-defined design language offers many benefits, including:

• Ensuring design teams deliver consistent and coherent results, no matter who works on the project
• Streamlines onboarding and handovers by providing new team members with instructions and guidelines
• Creates brand consistency which helps develop a strong brand identity and trust
• Makes digital products more intuitive by providing users with a familiar and consistent user experience
• Provides a foundation for scalability because product teams make fewer design decisions, increasing efficiency and productivity

Design Language Examples

There are two organizations many designers use as models for developing their design language and building a design system:

• IBM
• Airbnb

IBM Design Language

Part of IBM’s design philosophy is to create instantly recognizable designs. Users must be able to identify an IBM product by its design characteristics rather than the logo itself.

A distinguishable visual identity is vital for building brand recall and user fidelity. One of the ways IBM achieves that is by engineering its grid systems like the 2x Grid.

“Precise use of the grid, along with consistent shapes, angles, and radii, help define a particular aesthetic that’s critical in expressing the “IBMness” of our illustrations and reveals a well-considered and systematic approach” – IBM.

Airbnb’s Visual Language

Airbnb’s Visual Language aims to achieve similar results but with the flexibility to scale. The company’s design language prioritizes speed and growth while preserving Airbnb’s strong brand identity.

“Here’s the simple truth: you can’t innovate on products without first innovating the way you build them.” – Alex Schleifer, VP of Design at Airbnb.

Airbnb’s language makes communication between designers and stakeholders much easier and standardizes practices across platforms and devices.

How to Create a Design Language

Developing a design language is arduous and time-consuming but well worth the effort. The earlier you start, the less work you’ll have, and the sooner your teams will start reaping the rewards.

Start with UI audit

It’s often best to complete a UI audit before developing your design language. An audit will allow you to identify issues, inconsistencies, or design decisions that don’t align with your principles or values.

Create a vocabulary

A vocabulary should contain and clearly define a product’s visual elements. The aim is to include a systematized pattern library and UI components accompanied by a style guide.

Your style guide must provide directions for each element’s purpose and how they promote consistency and clarity–for example:

“This [design element] from the [library] allows us to express [purpose].”

Keeping these directions (principles) succinct, easy to understand, and implement is crucial. For example, Shopify Polaris, used by thousands of designers worldwide, articulates its design principles in fewer than 100 words:

• “Fresh visual style: A clean, simple style makes things feel approachable and efficient.
• Faster performance: Elegant code and lightweight assets means pages load more quickly.
• Future-friendliness: Built for flexibility, design tokens and new infrastructure let us iterate easily across experiences.
• Purposeful brand presence: Being intentional about when the Shopify brand comes forward, and when it takes a backseat, directs the focus to where it matters most.
• Familiarity across experiences: Defined patterns and guidelines help us design a wide variety of experiences that still always feel like Shopify.”

Polaris uses this simplified approach across its documentation.

This simplification enables organizations to establish the meaningful constraints mentioned above while allowing designers to streamline decision-making. For example, here’s how Atlassian explains the logic behind their color palettes:

“Our primary palette is comprised of neutrals, white, and blue to bring boldness to our brand and is used in logical ways throughout product and marketing to guide the eye and highlight the important bits. We pepper warmer, secondary palette colors throughout to soften the experience and to impart confidence and optimism.” – Atlassian Design System.

Defining your design principles

The principles behind a product’s design philosophy are a litmus test for evaluating a design’s quality and purpose. It allows an organization to assess whether prototypes adhere to its general guidelines.

Some key points to consider include:

• Consistency
• Clarity
• Simplicity
• Usability
• Accessibility

For example, Airbnb’s design principles prioritize accessibility and functionality. They aim to create “unified, universal, iconic, and conversational” designs.

IBM’s principles aim to create “carefully considered, uniquely unified, expertly executed, and positively progressive” designs.

Set the rules

Principles define what your organization’s values are, while the rules guide teams on how to achieve them. These rules are essential for creating consistent workflows and outcomes to deliver great user experiences.

The rigidity of your rules will vary–some will be strict, while others will promote creativity and flexibility to innovate. You might not recognize these differences from the beginning, so it is crucial to encourage feedback from team members.

Facilitate growth

Your design language and system are ever-evolving organisms adapting to product, market, and technological changes. The design system team must adjust to these changes while encouraging users to contribute.

“A unified design language shouldn’t be just a set of static rules and individual atoms; it should be an evolving ecosystem.” – Karri Saarinen, Principal Designer at Airbnb.

Here are three ways to remain flexible and update your design language:

• Follow market trends and adjust to ensure your design language stays relevant to users.
• Keep personas up-to-date so that your design language aligns with the people your products serve.
• Monitor your competitive landscape to explore strategic design opportunities and create a distinct visual identity.

Who’s Responsible for Creating a Design Language?

While designers are responsible for developing an organization’s design language, it’s a collaborative effort requiring input from multiple departments and stakeholders. This collaboration increases adoption and ownership across the organization.

Here are some key departments and specialists you’ll want to include when developing a design language:

• UX/UI Designers: responsible for the visual components of the language.
• Accessibility specialists: ensure that the language abides by accessibility standards.
• UX writers or Content strategists: responsible for the tone of voice guidelines and brand spokesperson parameters.
• Researchers: provide valuable insight into the needs of the end-users.
• Front-end developers: instrumental in writing efficient programming syntax and assisting with documentation.
• Stakeholders: ensure that the language aligns with the organization’s goals and identity.

Unify Design Language With UXPin Merge

UXPin Merge is a technology for syncing a product’s UI library with UXPin’s design editor. By bridging the gap, Merge enables designers to use the same components during the UX design process as engineers use to develop the final product.

This single source of truth eliminates design drift and enhances designer/developer collaboration with built-in properties, principles, and constraints.

Instead of designing from scratch, designers use these components like building blocks and create prototypes for user testing. Because engineers already have the same UI library, design handoffs are smoother, almost non-existent, thus reducing time-to-market with minimal errors and debt.

Unify your product development process with a single source of truth from UXPin Merge. Visit our Merge page for more details and how to request access.

The post What Actually Constitutes Design Language? appeared first on Studio by UXPin.

Design System Engineers don’t just bridge gaps; they ensure a smooth transition from pixel to code. This comprehensive guide digs deep into what a DSE does, the skill set required, and how they fit into the product development cycle. Whether you’re an aspiring DSE, a hiring manager, or just intrigued, read on to unravel the multifaceted role of a Design System Engineer.

Key takeaways:

• A Design System Engineer is the crucial link between designers and developers, standardizing UI components and design guidelines.
• Beyond code and design, DSEs play an active role in quality assurance, documentation, and cross-team collaboration.
• Mastery of front-end development languages like HTML, CSS, and JavaScript, as well as design tools like Sketch and Figma, is essential for a DSE.
• DSEs are instrumental throughout the product development cycle, ensuring design systems are consistently implemented and updated.
• Familiarity with version control systems like Git and frameworks like React enhances a DSE’s ability to manage and scale design systems effectively.

Bridge the gap to serve designers and engineers more efficiently with UXPin’s Merge technology. Visit our Merge page for more details and how to request access.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

Who is a Design System Engineer?

A Design System Engineer ensures a seamless transition from visual concept to functional code. 

DSEs curate and maintain the design system, a centralized repository standardizing UI components and design guidelines. They share the responsibility of code with developers and user experience and design principles with the UX design team.

DSEs have a broad skill set from design tools and design thinking to writing code (HTML, CSS, and Javascript) and using front-end technologies (React, Vue, Angular, etc.). DSEs are the go-to experts for design system’s consistency, component’s structure, and cross-team collaboration within a design system team. They keep the design and development workflows cohesive and streamlined.

How is a DSE different from a UX designer or front-end engineer?

Filling all three roles, designer, developer, and design system engineer, facilitates a seamless transition from a user’s need to a functional, well-designed product. Each position complements the other, ensuring that nothing falls through the cracks.

• UX Designers: focus on the overall user experience of the product. Their realm is user-centric design, not code.
• Developers: turn designs into functional applications. They may or may not have a deep understanding of UX principles.
• Design System Engineers (DSE): DSEs bridge the gap between design and development. They implement design systems, ensuring consistency and scalability across products.

How these three complement each other in developing and maintaining a design system:

• User Insight: UX designers bring invaluable user insights, guiding the team on what works best for the end-user.
• Technical Implementation: Developers make sure everything runs smoothly under the hood. No user insights or design systems matter if the application doesn’t work.
• Design Scalability: DSEs ensure that design remains consistent and easily implementable across different parts of a project. They allow both design and engineering teams to work more efficiently.

What are a Design System Engineer’s Responsibilities?

• Create and Update Design System: Build the foundational design system and keep it updated to ensure it aligns with project requirements.
• Quality Assurance: Implement automated testing for UI components to guarantee they meet design and functionality standards.
• Documentation: Produce clear, actionable guidelines that help designers and developers understand the design system.
• Version Control: Use tools like Git to manage changes, ensuring every update is adequately tracked and documented.
• Code Reviews: Participate in code reviews to ensure adherence to design guidelines and code quality.
• Cross-Team Collaboration: Act as the liaison between the design and development teams, ensuring design principles are implemented accurately in code.
• Training: Conduct workshops and training sessions to familiarize team members with the design system’s components and best practices.
• Tool Integration: Set up and maintain tools like Storybook that facilitate easier design system implementation.
• Performance Optimization: Regularly audit the design system to remove redundancy and improve load times.
• Stakeholder Communication: Regularly update stakeholders on the state of the design system, any changes made, and how it impacts projects.

What Skills Does a Design System Engineer Need?

While the design system engineer is a specialist role, their skill set must be broad to meet the position’s multifaceted demands. Here are the hard and soft skills you’ll need to be a design system engineer.

Hard Skills

• Front-End Development: HTML, CSS, and JavaScript are non-negotiable. It’s the bedrock for implementing a robust design system.
• Frameworks and Libraries: Familiarity with React, Angular, or Vue is often required, given that these technologies power modern web applications.
• Version Control: Proficiency in Git is another non-negotiable for tracking and managing design system changes.
• Design Tools: Competency in Sketch, Figma, or UXPin facilitates collaborating with design teams to create and modify UI components.
• Automated Testing: Skills in Jest, Mocha, or similar testing frameworks guarantee the design system’s quality and reliability.
• Accessibility Standards: Understanding WCAG guidelines ensures the design system is inclusive and legally compliant.

Soft Skills

• Communication skills: Clear articulation of complex technical ideas to designers, developers, and stakeholders makes everyone’s life easier.
• Attention to Detail: Minor visual or functional inconsistencies can derail a project. Accuracy is key.
• Problem-Solving: Design systems are complex, requiring an ability to troubleshoot issues swiftly and effectively.
• Collaboration: The role sits at the intersection of design and development; teamwork skills are crucial.
• Time Management: Juggling design, development, and stakeholder meetings means strong organizational skills are essential.

What is a Design System Engineer’s Role in the Product Development Cycle?

DSEs ensure that design and functionality merge into a coherent, scalable product throughout the product development cycle. They act as the bridge between different departments, ensuring the design system remains consistent and up-to-date.

Inception phase

During the idea validation and planning stage, DSEs assess potential design systems or components that can be reused or adapted. They work closely with product managers and designers to define the design system’s scope, feasibility, and technical requirements.

Design phase

DSEs actively collaborate with UX/UI designers in design critiques and offer technical guidance on implementing design systems without compromising functionality.

For example, when a UX designer proposes a new button style, a DSE ensures the design fits existing patterns and is easily implementable in code.

Development phase

DSEs turn approved design elements into reusable code components. They also provide documentation to facilitate implementation by developers.

For example, if a designer creates a new card layout, the DSE transfers it to code, makes it a reusable component, and documents how to implement it in different scenarios.

Post-launch

After release, DSEs monitor design system components’ usage and make updates for scalability and performance. Additionally, they collect feedback for continuous improvement.

For example, analytics indicate a navigation component is not as intuitive as expected, DSEs work with the designers and developers to optimize it.

How to Become a Design System Engineer

Educational and career steps to becoming a design system engineer

1. Earn a Bachelor’s Degree (+- 4 years): Usually in Computer Science, Graphic Design, or a related field.
2. Learn Relevant Skills: Parallel to your degree, master HTML, CSS, and JavaScript, and familiarize yourself with design tools like Figma, UXPin, and Sketch.
3. Entry-Level Position: Start as a Junior Developer or Designer, typically requiring 1-2 years of experience.
4. Specialized Training: Take specialized courses in Design Systems or UX/UI Design–a few months to a year.
5. Mid-Level Role: Move to a role like Front-End Developer or UX Designer.
6. Gain Experience in Design Systems: In your mid-level position, focus on projects that allow you to work with design systems.
7. Transition to DSE: With adequate experience and a strong portfolio, transition into a Design System Engineer role.

Growth prospects for a design system engineer

• Lead Design System Engineer: Lead projects and teams. Requires at least 2-3 years as a DSE and proven leadership skills.
• Design Systems Manager: Oversee multiple projects and multiple design systems. Requires 4-6 years of specialized experience.
• Director of Design or Engineering: Reach the pinnacle by heading an entire department. Generally requires 10+ years in the field and extensive leadership experience.

What are a Design System Engineer’s Tools of the Trade?

Here’s a breakdown of essential tool categories and examples for a DSE. Familiarizing yourself with these tools will help your career prospects and enhance your understanding of this complex role.

Version control systems

• Git: The gold standard for version control, essential for tracking changes and collaborating with others.
• SVN: Less popular than Git but valuable in certain enterprise environments.

Design tools

• Sketch: Offers powerful design functionalities; however, it’s Mac-only.
• Figma: Cloud-based and collaborative; allows real-time changes.
• UXPin Merge: Unique in allowing design and code components to be combined and reused.

Programming languages and frameworks

• HTML: The building block for web development.
• CSS: Critical for styling and layout.
• JavaScript: Enables interactivity and controls web behavior.
• React: A go-to library for design systems due to its component-based architecture and cross-platform efficiency.

Utilizing UXPin Merge and React to Design, Develop, Maintain, and Scale Design Systems

Building and maintaining a design system is a complex, time-consuming undertaking involving a multi-disciplinary team and a vast tool set. UXPin and Merge technology combined with your framework (React, Vue, Angular, and other popular front-end technologies) simplify design system management and governance while bridging design and development.

A single source of truth

The holy grail of design system maturity is a single source of truth, but few organizations ever reach this stage–even though they claim to possess one. High costs and tool constraints mean most design systems maintain two versions:

• Design tool UI kit
• Development component library

Design and development must have platform-specific documentation, adding to maintenance and costs.

Merge facilitates a genuine single source of truth by importing UI components from a design system repository into UXPin. This integration means designers use the same UI library during the design process as engineers use to develop the final product.

Any changes to the repository automatically sync to UXPin and notify design teams of the update. Merge’s Version Control lets designers choose when to switch to the latest release or revert to an older version.

Using UXPin’s Patterns to scale design systems

Design system engineers can collaborate with design teams to scale design systems using UXPin’s Patterns. Rather than starting from scratch, Patterns allows designers to combine UI elements from multiple design systems to create new component, pattern, and template prototypes.

Designers can test these Patterns thoroughly in UXPin before working with DSEs to promote the new component to the design system’s library. 

Smoother design handoffs for design system engineers

Design handoffs are one of the biggest product development challenges. Even with a DSE’s competency on both sides of the fence, the process of converting designs to code is time-consuming and error-prone.

Using code components for design and development streamlines the handoff for design system engineers. Creating new components with Patterns means design teams never have to design from scratch, leveraging existing open-source libraries to scale while making it easy for DSEs and developers to implement.

If UXPin Merge and design system engineers have one thing in common, it’s bridging the gap between design and development.

Simplify your design system management with the world’s most advanced design tool. Visit our Merge page for more details and how to request access.

The post Design System Engineer – Job Description, Responsibilities, and Skills appeared first on Studio by UXPin.

When optimizing development across many platforms, it’s wise to consider using a component library. By offering an accessible, open-source repository of production-ready, customizable, and reusable code components—like buttons and accordions—component libraries let UI and UX designers leverage faster development and growth.

Key takeaways:

• A component library is a set of pre-made, tested, and well-documented UI components that can be easily reused across the user interface of a product.
• It ensures that the product has a consistent look and feel and promotes efficiency and scalability.
• With component libraries, designers and developers can quickly add new features and pages while preserving the overall design consistency.

Share a single source of truth between designers and engineers. Use UXPin Merge to bring one of the component libraries to our design tool and use its elements to create interactive prototypes that can be easily passed to developers for production. Learn more about UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

What is a Component Library?

UI component library is a collection of pre-designed and pre-built user interface elements used to create user interfaces for digital products, such as websites and applications that have a unified look.

These libraries include a range of pre-made UI elements, such as buttons, forms, navigation menus, icons, and more, each designed with a consistent look and feel.

UI component libraries are particularly useful in collaborative design and development environments, as they help ensure that all team members are using the same source of truth and that the end product maintains a professional and polished appearance.

Component Library Can Offer a Single Source of Truth

Component library can reduce the risk of any variation between products, or ending up with different components in different places. They handle the source code for UI elements and usually leverage CSS and JavaScript.

React is a prime example of a popular open-source framework, developed by Facebook as a component library but since grown into a large ecosystem for creating apps, static sites, and desktop applications.

There are many more advantages of using a component library that are worth highlighting: 

• Accessibility: As a single repository for housing ready-made, reusable components, a component library offers quick access to developers and designers everywhere. This improves collaboration and communication between developers and designers working across teams.
• Reduced code duplication: Often, code gets duplicated across varying designs and projects. But with a component library, there’s no need to convert every pixel to code. Instead, you can use already coded components with no further development.
• Consistency: Promoting a single source of truth is more likely with a component library. By enabling consistent UI and UX across entire projects, it’s easier to achieve uniformity. And this is a key advantage that makes you work faster and more efficiently.
• Speed: By avoiding building from the bottom up, teams save time. Instead of recreating or designing a calendar, it’s already there to use. Plus, thanks to a set of ready-made, pre-set components, teams can avoid any drawn-out, time-draining decision-making processes they may have once faced. 
• Compatibility: Frontend developers can struggle with ensuring cross-browser and cross-device compatibility. But a component library will go a long way to avoiding incompatibility through standardization.

When Is It Best to Use a Component Library?

There are some particular situations where a component library can add measurable value to a project. So let’s look at what they are: 

Code-first prototyping

Projects that focus on functionality over visual design are more likely to benefit from a component library. Plus, prototyping with code is more efficient than starting with images and then converting them into code. So rather than expecting developers to interpret image-based designs and then create the codes, they simply take the code component from the ready-made design.

This also opens up the chance for developers to design with pre-built components without worrying about any lack of design skills.

When you lack the skills or experience to build your own

Creating your own component library or developing one as part of your own enterprise design system may be your dream. But this may not be a reality when your team lacks experience in building reusable UI components or you’re working to tight project deadlines. 

Instead, integrated component libraries provide all the code components designers and developers need to test functionality, usability, and design before conversion to digital products.

If you’re a smaller company or team

Startups and small or medium-sized businesses may need to be more careful with financial resources. And with a wide range of effective, versatile, open-source component libraries around, smaller companies can set themselves up to scale, step by step. After all, no industry giant got there overnight. And many of them continue to stick with their original component library throughout their evolution.

There Are Some Exceptional Tools Available to Help You Scale 

If it’s not yet clear how you’ll benefit from a component library, then here are some questions that could prompt your thinking:

1. Do you see developers building the same components for each project but with slight variations?
2. Are any developers confused about which UI or UX convention they should use in interfaces?
3. Do you need to release updates and changes fast?
4. Do you need a lot of customization?
5. Are you looking for a combined design system and component library?

If the answer to any of these questions is yes, then consider one of the tools below.

1. Merge Component Manager

Merge Component Manager is a design operations tool for managing React UI components in UXPin. You can bring your own component library and use Component Manager to manage component’s properties. It’s perfect for those of you who lack active development support.

Once you upload UI components, you can use them to design UI in UXPin. The components have their full interactivity in UXPin since they’re coded in React.

2. Merge npm integration

One of the ways to bring UI components from your component library to UXPin is through NPM package integration. All you need to import the components is a library name. Then, you would use Merge Component Manager to set up props and write desicriptions, etc. Read more about npm integration.

3. Merge Storybook integration

Storybook is an open-source tool for developing UI components in 15 different frameworks, among others the most popular ones: React, Vue, and Angular. It’s a combined coded design system and component library that acts as a sandbox for effective components and page development, testing, and documentation. Your developers can take a more effective component-driven approach over a visual one.

As Storybook is used by developers, there’s an integration with UXPin that can help you with designing as well.  With UXPin Merge technology, you can sync any Storybook with UXPin editor to design with code components. The fully functional UI elements will show up in one of the UXPin libraries so that you have access to them right away. 

Be the First to Design with Code Using Innovative Merge technology

Component libraries offer the chance to standardize development, reduce code duplications, improve collaboration between teams, and drive scalability. And with so much influence over your project deliverable and team motivation, it’s important to choose the right solution for your needs.

But if you’re looking to improve design consistency and development productivity, UXPin’s Merge technology offers a unique point of integration with Storybook, as well as its own tool, Merge Component Manager for managing components in design. Discover more about UXPin Merge.

The post What is a Component Library, and Why Should You Use One for UI Development? appeared first on Studio by UXPin.