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.

One of the questions organizations ask themselves at the start of a new project is, “do we adopt a component library or start from scratch?” There are pros and cons to weigh, and it depends on the project’s scope and priorities. 

One of the most popular component libraries is MUI – a comprehensive React UI library modelled at first on Google’s Material Design UI. 

We’re going to take a look at MUI, why you’d want to use it, what makes it different from other component libraries, and how you can get started designing your next project.

Have you ever wondered what it would be like to design in code? UXPin Merge is a revolutionary technology that allows teams to create fully functioning layouts without design skills. Find out more about Merge.

Create beautiful layouts without designers

Take UI components directly from Git repo, Storybook, or through NPM and design production-ready prototypes.

Bring code to design

What is MUI?

MUI is a massive library of UI components designers and developers can use to build React applications. The open-source project follows Google’s guidelines for creating components, giving you a customizable library of foundational and advanced UI elements.

MUI also sells a collection of React templates and tools, giving you ready-made user interfaces to tweak for your project. 

Why Would You Use a Component Library Like MUI?

Designers often use UI kits to build new products or feature add-ons for existing projects. These libraries allow designers to drag and drop the components they need to design interfaces quickly. 

Let’s explore 7 reasons why you would want to use the MUI component library.

1. Faster Time-to-Market

In today’s highly competitive tech landscape, time-to-market is a metric that organizations always seek to optimize. A component library gives designers and developers a massive headstart with thoroughly tested UI elements ready to go.

Designers can drag and drop elements to build user interfaces and customize components to meet product and branding requirements. Design teams can spend more time designing great customer experiences rather than getting bogged down building and testing UI components from scratch–a process that increases time-to-market significantly!

Usability testing is much faster because designers can prototype, test, and iterate quickly. If a user interface isn’t working during testing, they can make changes on the fly, drawing from a massive library, to get instant feedback from participants and stakeholders.

When it comes to the design handoff, engineers can install the component library and copy/paste changes from prototypes and style guides to develop the product without starting from scratch.

2. A Single Source of Truth

One of the biggest design system governance challenges is maintaining a single source of truth. It’s not uncommon for product teams, UX designers, and developers to have out-of-sync design systems–resulting in errors, rework, and massive headaches and challenges for DesignOps.

Using MUI’s component library can significantly reduce these challenges while creating a single source of truth between design and development. Designers and engineers will still have separate design systems (image-based for designers and code for engineers), but MUI gives them the same starting blocks.

When using Merge with UXPin’s code-based editor, designers and engineers use the same design system components synced via a single repository. Any updates to the repo sync back to UXPin, notifying designers of the changes. You can connect Merge using Git for React component libraries or Storybook for other popular technologies.

3. Design Consistency

Consistency is vital for user experience, building trust, and brand loyalty. Using the same UI components allows designers to increase consistency while minimizing errors and rework.

4. Scalability

Scalability is another vital product design factor. If you’re building a design system from scratch, designers must design, prototype, and test new components before scaling the product.

With MUI’s comprehensive UI library, designers can search for the components they need to prototype and scale right away. Engineers can copy/paste the identical React components from MUI and customize them to the designer’s specifications.

MUI X includes a library of advanced React components teams can use to scale complex products even faster, including data grids, date pickers, charts, pagination, filtering, and more.

5. Easy Maintenance

A component library like MUI comes with detailed documentation for installing, using, updating, and customizing components. Designers and engineers can use this framework to maintain the organization’s design system, making it easier to establish governance systems and protocols.

MUI also provides how-to guides for migrating from one version to the next. So, organizations can take advantage of the latest UI styles, technologies, and trends whenever MUI releases an update.

6. Accessibility

Those experienced with setting up a design system will know the time and money it takes to ensure every component passes accessibility standards. MUI’s designers have taken great care in designing components to meet WCAD 2.0 accessibility guidelines – reducing the work for researchers and designers.

It’s important to note that even when you design interfaces using accessible components, you must still test navigation and user flows to ensure the product as a whole meets accessibility standards.

7. Skills Empowerment

MUI’s open-source component UI library empowers startups and young entrepreneurs to build new products–especially in developing nations where they don’t have the same access to education, mentoring, and skills transfer.

The library is also incredibly beneficial for charities, non-profits, NGOs, and similar organizations who want to develop products and tools but don’t have the budget to invest in a design system. 

Anyone can leverage the skills of MUI’s talented designers and developers using the same component library used by Fortune 500 companies to develop sophisticated digital products and compete in a global market.

What Makes MUI Stand Apart From Other Component Libraries?

Google’s Material Design UI is arguably one of the best and most comprehensive design libraries in the world. By building on top of Material Design, MUI delivers a React component library to match.

The ability to easily customize MUI using its Theming feature and the libraries’ excellent documentation make it accessible to build products for multinational corporations or a single developer with a product idea.

Because MUI is so widely used, there is a massive global community of designers, researchers, and developers to reach out to for guidance and support. Added to the fact that React is one of the most popular front-end frameworks, makes MUI an attractive component library.

MUI – Interesting Facts and Figures

Here are some interesting MUI facts and figures:

Note: MUI’s stats continue to climb. These facts were accurate as of Jan 2022.

• MUI started in 2014 as Material UI but decided to change its name to differentiate itself from Google. Many people assumed Material UI was a Google product.
• MUI has over 2,200 open-source contributors.
• There are over 2,3 million NPM downloads of MUI per week.
• Over 73,700 stars on GitHub.
• Of the 1,488 respondents to MUI’s 2020 survey, 35% of developers worked in an organization with less than five people.
• In the survey, 27% of developers use MUI for enterprise applications, while 20% use the library for admin dashboards.

UXPin’s MUI 5 Kit

Using UXPin Merge’s MUI integration, you can leverage the power of prototyping with UI React components.

MUI helps you create designs with fully functioning code components. With a single source of truth, designers, developers, product teams, and others can collaborate more effectively with fewer errors and friction.

Higher fidelity means better usability testing with meaningful feedback from participants and stakeholders. The result? A better overall user experience and increased business value.

Find out more about UXPin’s MUI kit and how you can sign up to request access to this revolutionary code-based design technology: MUI library in UXPin: Design Faster.

Syncing a Component Library With UXPin Merge

With UXPin Merge, you can build fully functioning high-fidelity prototypes with an open-source component library. With complex UI components like menus, forms, tabs, data tables, date pickers, accordions, and more, you can build beautiful and functional layouts in minutes. Check out Merge.

The post What Is MUI and What Do You Need to Know About It? appeared first on Studio by UXPin.

Ant Design is a popular design system for developing enterprise products. The comprehensive component library has everything product teams need to solve most modern B2B design problems.

Key takeaways:

• Ant Design is a collection of high-quality UI components that cover a wide range of use cases, including buttons, forms, navigation menus, data tables, modals, and more.
• Ant Design is known for its adherence to design principles and guidelines that promote consistency and usability.
• It follows the principles of the “Ant Design Language,” which emphasizes clarity, efficiency, and simplicity in design.
• Ant Design has a strong and active community of designers and developers, which contributes to its ongoing development and support.

With UXPin Merge, design teams can import Ant Design UI components to build fully functioning prototypes. This article outlines the benefits of working with Ant Design, its vast component library, and how to build Ant Design prototypes that look and feel like the final product.

Create a single source of truth between design and development with UXPin Merge. Visit our Merge page for more details and how to gain access to this advanced prototyping technology.

Reach a new level of prototyping

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

Discover UXPin Merge

What is Ant Design (AntD)?

Ant Design is an open-source design system developed by the Ant Group–parent company of Alibaba, Alipay, Huabei, and MYbank, to name a few. The component library supports React, Vue, and Angular front-end frameworks.

Ant Design includes layouts, iconography, typography, navigation, data entry/forms, data visualizations, and more. Design tokens allow organizations to customize the component library to meet your product requirements.

Key Ant Design Benefits

One of the primary reasons product developers choose Ant Design is its comprehensive component library and features. You can find just about every type of UI pattern, including data visualizations, making it an excellent choice for enterprise products.

Here are some Ant Design benefits we’ve learned from software developers:

• Well maintained: Ant Design’s team continually works to improve the design system with frequent updates. Engineers also report finding little or no bugs.
• Comprehensive library: Ant Design has a component, pattern, or icon to solve every design problem. Additionally, each element has multiple versions to accommodate any scenario.
• Native library: Ant Design Mobile offers an extensive library for building native cross-platform applications.
• Animation library: Ant Motion provides animations for common patterns and microinteractions to complement its native and web component libraries. 
• Third-party libraries: Ant Design’s third-party React libraries include data visualizations, infinite scroll, maps, media queries, and others that increase the design system’s capabilities.
• Internationalization-ready: Ant Design’s internationalization feature supports languages from around the world with the option for developers to add more.
• Forms: an extensive form library with excellent form handling.
• Scaffolds: 100+ template projects for dashboards, reports, tables, admin UIs, chat, logins, and more.
• Typescript compatible

Material Design vs. Ant Design

Material Design and Ant Design present more similarities than differences. Both offer comprehensive design systems for building cross-platform applications with excellent documentation and large global communities.

Theming

Material Design and Ant Design use design tokens for theming, making it easy for developers to customize UI components and patterns.

Accessibility

Accessibility is one of the most significant differences between the two design systems. Material Design has accessibility “baked-in” to every component with principles and best practices, whereas Ant Design leaves this to developers.

Tech stack compatibility

Material Design is the best option for developing cross-platform Flutter applications. Developers can call components with a few lines of code and build user interfaces effortlessly. Material Design is also available for React apps through MUI.

Ant Design accommodates React, Vue, and Angular frameworks, making the design system accessible to more software developers.

Ant Design vs. Bootstrap

Bootstrap is one of the oldest front-end CSS frameworks for building responsive websites and web applications. Many engineers use Bootstrap for prototyping because they can leverage the framework’s CSS and Javascript libraries to develop websites and web applications with little effort.

Like Ant Design, Bootstrap supports React, Vue, and Angular. The biggest difference between these two is that Bootstrap is a framework, whereas Ant Design is a design system. 

Bootstrap is a better option for prototyping and building websites, whereas Ant Design offers more features for building web and native cross-platform applications.

What Can You Build With Ant Design?

Ant Design’s vast library of components, patterns, templates, and icons makes it possible to develop B2B and B2C digital products. The design system’s form and data visualization patterns make it a popular choice for enterprise applications.

Here are some enterprise companies that use Ant Design:

• Yuque: knowledge management platform
• Alibaba: the world’s largest online marketplace
• Baidu: the Chinese Google equivalent and one of the world’s largest AI and Internet companies with multiple products running Ant Design
• Fielda: a mobile data collection application for field research
• Moment: project management software
• Videsk: video-based customer service platform
• Solvvy: chatbot software from Zoom
• Ant Financial: One of China’s leading FinTech organizations

Ant Design’s Design Language

1. Design Language

Ant Design’s Design Values include principles and patterns for solving many usability problems. The design system has four values:

1. Natural: products and user interfaces must be intuitive to minimize cognitive load.
2. Certain: designers must use components and patterns consistently to enhance collaboration and deliver consistent user experiences.
3. Meaningful: products must have clear goals and provide immediate feedback to each action to help users. Designers must create experiences that enable users to focus on tasks without distraction.
4. Growing: designers must consider the human-computer interaction symbiosis and design for scalability.

2. Motion Principles

Ant Design has three Motion Principles:

1. Natural: designers must base motion on the laws of nature with smooth and intuitive animations and transitions
2. Performant: animations must have low transition times and not impact a product’s performance
3. Concise: designers must create justified, meaningful interactions while avoiding excessive animations that don’t add value to the user experience

3. Global Styles

The Global Styles section of Ant Design’s docs includes color, layout, font, icons, and dark mode guidelines.

Ant Design’s Palette Generation Tool will generate a ten-shade palette based on your product’s primary color. The tool is somewhat primitive compared to the Material Theme Builder and other palette generators.

The font scale and line height provide helpful guidelines based on user reading efficiency calculated on an average distance of 50cm (20inches) and 0.3-degree angle. The base font is 14 px with a line height of 22 px.

Ant Design’s icons are available as outlined, filled, and two-tone. The are also instructions for creating custom icons that conform to the design system’s iconography principles, ensuring maximum consistency for customizations.

Ant Design Components

Here is an overview and key features of the Ant Design component library.

General

General components include buttons, icons, and typography. There are five button types:

• Primary: main CTA
• Default: secondary CTA
• Dashed
• Text button
• Link button

Additionally, there are four button properties:

• Danger: high-risk actions like delete
• Ghost: also called outlined button
• Disabled: when actions are unavailable
• Loading: adds a spinner and disables the controller to prevent multiple submits

Layout

AntD’s layout includes dividers, grids, and space (alignment, direction, size, etc.).

Navigation

Navigational patterns include affix (sticky), breadcrumb, dropdown, menu, page header, pagination, and steps.

Data Entry

Ant Design’s Data Entry components make the design system a preferred choice for enterprise application development. Product teams can build enterprise UIs fast with Ant Design’s out-of-the-box patterns, including:

• Auto Complete input fields
• Cascading dropdown menus
• Checkboxes
• Date pickers
• Forms
• Inputs (text and number only)
• Mentions (tagging users)
• Radios
• Ratings (icons and emojis)
• Select menus
• Sliders
• Switches
• Time pickers
• Transfer select boxes
• Tree selectors
• Uploads

Data display

Connected to data entry is data display–visualizing and presenting data to users.

• Avatars
• Badges
• Calendars
• Cards
• Carousels
• Collapse (accordions)
• Comments (user discussions)
• Descriptions (tables for orders, transactions, records, etc.)
• Empty (placeholders for empty components)
• Images
• Lists
• Popovers
• Segmented
• Statistics (numerical components for dashboards)
• Tables
• Tabs
• Tags
• Timelines
• Tooltips
• Trees

Feedback

Designers use Ant Design’s feedback components to communicate with users.

• Alerts
• Drawers
• Messages (display system feedback at the top of the screen)
• Modals
• Notifications
• Popconfirm
• Progress
• Result (success, fail, error, etc.)
• Skeletons (lazy loading placeholders)
• Spin (spinners)

Other

The final category includes anchor (table of contents) and back top (back to top), essentially navigational components. There’s also a config provider which enables developers to group components.

Importing Ant Design React Components into UXPin

One of the challenges with any design system is that although there’s “a single source of truth,” designers and engineers still use different UI elements–designers use an image-based UI kit. Engineers use a code-based component library (React, Vue, Angular, etc.).

UXPin Merge creates a real single source of truth. Software developers can bring their product’s design system or open-source component library (like Ant Design) into UXPin, so designers use the same UI elements for prototyping that engineers use to develop the final product.

Merge components are powered by code, giving designers complete interactivity and properties defined by the design system. For example, this Ant Design button includes hover and click interactions by default without changing anything in UXPin!

Designers can access the component’s properties defined by the design system (color, size, type, content, etc.) via the Properties Panel to make changes. 

UXPin renders these as JSX so that engineers can copy/paste from Spec Mode to begin development–no drift, 100% consistency every time!

Ant Design npm integration

UXPin’s npm integration allows designers to import UI elements from open-source component libraries hosted in the npm registry, including Ant Design (antd).

Using the Merge Component Manager, designers simply add Ant Design’s npm details:

• Package name: antd
• Assets location: antd/dist/antd.css

And UXPin connects to Ant Design’s GitHub repo via npm. Designers can use Ant Design’s documentation to choose the components and properties they need for prototyping. 

Follow this step-by-step guide for importing Ant Design components into UXPin.

You can also watch CoderOne’s YouTube tutorial, which takes you through the setup and building a basic prototype.

Build fully functioning Ant Design prototypes that produce meaningful results during user testing. Increase your design team’s value by solving more problems during the design process while identifying more opportunities. Visit our Merge page to find out more and how to request access.

The post Ant Design 101 – Introduction to a Design System for Enterprises appeared first on Studio by UXPin.

Breaking down silos makes it easier for everyone involved in a project to work together towards a common goal. Unfortunately, traditional working environments make cross-team collaboration different.

Newer tools with a code approach can give you an easier way to eliminate organizational silos. Explore one of them – UXPin Merge. UXPin powered with Merge technology help to break the silos between design, development, and product teams at your organization. It allows you to build prototypes with a single source of truth – coded components. Discover UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

Why Do You Need to Break the Silo Mentality?

Silos create inefficiencies that can adversely affect your teams. You might not even know that silos exist within your organization. Once you learn to notice their effects, though, you will likely spot departmental silos everywhere and see how they interfere with your company achieving a common goal.

Here are 5 common problems created by silos:

• A narrow focus on individual tasks that do not contribute to the bigger picture.
• Continued functionality issues that no one within the design team knows how to solve.
• Longer product development, testing, and release timelines.
• Lack of insight into how the company could improve its product development process.
• Inefficiencies that add to project expenses and disappoint stakeholders.

6 Practical Tips to Break Down Silos

With these issues in mind, consider how the following steps could break down silos and build a better company culture.

Tip #1: Form a leadership team that includes a representative from every department

You can build trust and improve communication by creating a leadership team that includes at least one representative from every department. The leadership team can keep the big picture in mind while steering the project toward its final goal.

Tip #2: Establish a unified vision before breaking the common goal into individual tasks

Communication doesn’t always trickle down to every member of a team. You can eliminate this problem by creating a unified vision and breaking the common goal into individual tasks. The tasks can get assigned to teams.

If you start with small tasks and hope that they come together in the end, you will likely find disappointment.

Tip #3: Invite team members from different departments to meetings

The pandemic forced companies to adopt remote working environments. Luckily, videoconferencing apps stepped up to help colleagues and freelancers from all over the world engage with each other in virtual environments.

Since you might need to invite marketers, developers, designers, and other colleagues, you should choose a videoconferencing service that can accommodate several people. You can even get marketing teams engaged to learn from their insights and help them plan for how they will sell the finished product.

Some of the top options include:

• Zoom, 
• BlueJeans,
• Google Meet

If you expect fewer or more participants, you can usually choose plans that match your unique needs. Choosing the right plan helps ensure that you get input from different teams without spending more money than necessary.

Many teleconferencing apps will also let you track metrics and record your meetings so you can focus on interacting with colleagues instead of taking notes. You should notice improved employee engagement when people can talk to each other without writing down their thoughts. You have to put a premium on engagement when working with remote teams.

Tip #4: Choose collaboration tools that appeal to all departments

Until recently, designers and developers often found themselves at odds when creating digital products. Even when they share long-term goals, their specializations encourage them to think about creating products in different ways.

That’s why there’s drift when it comes to the handoff process. It’s best to use a tool that will allow both devs and designers to collaborate without getting in each other’s ways. A solution with code-powered technology can help with that. 

When designers use already-coded components that can be easily reused, there’s no room for a disconnect between what is designed and what can be coded. Not to mention the time efficiency that tools like that offer – both with designing and coding the final product based on the prototype. 

Create a design system that contains all approved assets

Every team working on a product should have access to a design system that contains all approved assets and components. A design system ensures that diverse teams work toward a shared aesthetic and function even when they do not spend much time talking to each other.

When you go for a code-to-design approach in design on top of that, you don’t have to worry about syncing the changes in the code with the design components as that can be done automatically. Thanks to that you have all the approved assets up to date. 

Share information between teams as you make progress

Regular updates can incentivize developers, designers, and team members of other departments to stay focused on their projects.

Working in a vacuum often feels like a thankless—or even pointless—task. Someone designing icons might lose inspiration because they do not see what role the icons will play in the product. Similarly, a developer tweaking interactive forms might not see the point of their work until they witness it in action.

When you reach a milestone, celebrate by showing how everyone’s cumulative efforts have taken you closer to your ultimate goal. If possible, you might enjoy lunch or a drink together. If you work remotely, you can still enjoy a fun meeting that focuses more on building excitement and trust than working on the project.

Eliminate organizational silos with UXPin Merge

UXPin has always been a code-based tool for digital design. UXPin Merge takes the technology a step further by letting designers design with production-ready components That means developers get the opportunity to review designs from the perspective of fully functional code and quickly implement it

UXPin Merge also works in conjunction with several systems, including Material UI, CA Technologies Mineral UI, and IBM Carbon. This approach makes it even easier for engineers to participate in prototype development and making sure designers use components that have already been coded.

Discover more effective, collaborative ways to solve DesignOps challenges. UXPin Merge can help break down silos, reduce design inefficiency, and improve customer experience to meet your company’s goals better than ever.

The post Breaking Down Silos to Improve Digital Product Development appeared first on Studio by UXPin.

Storybook has become THE DevOps tool for developing and maintaining design systems. The platform’s excellent documentation, intuitive UI, built-in testing, and collaborative features make it the perfect tool for building and releasing components.

Understanding how Storybook works can help designers collaborate with front-end devs better and leverage the platform’s features to improve prototyping and testing.

One of Storybooks best features for design teams is its ability to sync a component library with UXPin using Merge technology. Merge creates a drag-and-drop design environment for assembling layouts fast. Discover UXPin Merge.

Create beautiful layouts without designers

Take UI components directly from Git repo, Storybook, or through NPM and design production-ready prototypes.

Bring code to design

Why Devs use Storybook for Design Systems

These are a few reasons why Storybook is the preferred DevOps tool for managing design systems.

Developing and testing components in isolation

Storybook enables engineers to develop UI components in isolation. This development workflow is great for design systems and component-driven front-end frameworks like React–which many organizations use for their component libraries.

Before Storybook, engineers would use sandbox platforms like CodePen and CodeSandbox to build and test components in isolation. Storybook offers this sandbox-style development environment with an intuitive user interface for engineers and stakeholders to view, test, and approve UI elements. They can also combine components and build little prototype patterns for testing.

Quality Assurance

Developing in isolation also benefits design system quality assurance. Engineers can invite designers, product managers, and other stakeholders to test and submit feedback on new UI elements before release.

Documentation

Documentation is crucial for component libraries, but it’s often the last thing anyone wants to think about because it’s time-consuming.

Storybook’s DocsPage is a “zero-config default documentation” that automates basic doc creation. Product and engineering teams can expand this documentation to create usage and guideline information.

Single source of truth

Managing the codebase for cross-platform applications is challenging. Storybook provides a single source of truth for testing components and patterns for each platform from a centralized environment.

This centralized environment maximizes consistency, as engineers can view components and patterns side-by-side and collaborate with developers responsible for each platform–iOS, Web, Android, etc.

Accessibility

Storybook’s A11y Accessibility add-on enables engineers to automate accessibility testing. The add-on creates a new Accessibility tab for each element showing WCAG standards in three categories:

• Violations: accessibility issues to resolve
• Passed: standards met
• Incomplete: A checklist of accessibility to-dos

How Devs Work With a Design System in Storybook

Storybook’s docs outline a standard five-step design system workflow:

1. Build
2. Document
3. Review
4. Test
5. Distribute

Build

Once engineers have set up Storybook and connected to a GitHub repository, they begin developing each component and its variants. For example, a button might have several states, sizes, types, etc.

During the build process, engineers can install Storybook add-ons to automate workflows, integrate with other tools, or enhance the Storybook environment.

Document

Engineers can add comments to components during the build process to enrich the automatically generated documentation. This example from Storybook’s docs demonstrates how these comments appear in your Storybook UI.

This documentation is crucial for the next step, Review, because it shows stakeholders how front-end developers interpret designs and what each ‘prop’ represents.

Review

The component is now staged and ready to be promoted to the design system. Engineers can invite designers, product managers, and other stakeholders to review the element to ensure it meets interactive and aesthetic expectations.

Traditionally, engineers would have to create a staging environment or meet with stakeholders to present the component. With Storybook, it’s as easy as visiting a website, making the review process more accessible. Stakeholders can log in on their own time, interact with the component, read the docs, and leave feedback.

If there are any changes, engineers may iterate steps one to three until the new components meet all stakeholder’s expectations.

Test

Jest and Playwright power Storybook’s framework-agnostic testing. When engineers commit the component, Storybook tests its code to ensure there are no programming errors, including:

• Visual tests (visual regression tests): creates screenshots of every commit and compares them to catch UI inconsistencies.
• Accessibility tests: runs code against WCAG standards and reports any issues.
• Interaction tests: checks interactivity and states to ensure there are issues with links or functionality.
• Test coverage: examines code against industry standards, including conditions, logic branches, functions, and variables.
• Snapshot tests: identifies markup changes by comparing rendered code to the baseline.

Distribute

The final step is to update the design system package on GitHub. Once complete, it’ll automatically sync the changes to npm. Engineers can install the updated npm package to use the new component(s).

Syncing Design With Storybook Through UXPin Merge

If your design team works with UXPin Merge, these engineering changes will also be distributed to UXPin’s design editor and notify team members of the latest design system release.

UXPin’s Version Control allows designers to change to the latest release whenever they choose and switch to earlier versions of the design system.

What is UXPin Merge?

UXPin Merge is a technology that bridges (or Merges) the gap between design and development. Organizations can sync a design system hosted in a repository to UXPin’s design editor so designers can use the same component library as engineers to build fully functioning prototypes.

Merge components are fully interactive and include React props (or Args for Storybook) defined by the design system, including colors, typography, states, sizes, etc. These props appear in UXPin’s Properties Panel so designers can adjust components to meet prototyping requirements while maintaining absolute consistency and zero drift.

Enhanced testing and stakeholder feedback

Merge prototypes look and function like the final product because they use the same components. For example, a button in Storybook will render exactly the same in UXPin, including interactivity and styling. 

Usability participants and stakeholders can interact with these UI elements and Merge prototypes like they would the final product, giving design teams accurate, actionable testing insights.

“It’s been so helpful for us to have these high-fidelity prototypes built with UXPin. We build high-fidelity prototypes much quicker, and we get immediate feedback after the session. If there’s something we can fix immediately, we make that change before the next participant and get feedback much faster than before.” Erica Rider – UX Lead EPX at PayPal, talking about how UXPin Merge enhances user testing.

Scaling component libraries with UXPin Patterns

Design systems evolve as products grow and scale. The design system team is constantly making changes and promoting new UI elements and patterns.

UXPin Patterns enables design teams to create new patterns for the design system–as one-offs or as a best new practice. Designers can combine UI elements (atoms and molecules) from the design system to create new patterns or use UXPin’s npm integration to import components from open-source libraries if the current library doesn’t support their needs.

Designers can save and share these patterns across the organization, so teams can continue prototyping while they wait for the DS team to follow governance procedures to develop and release the new component–following the five-step Storybook development process outlined above.

Stage four design system maturity with UXPin Merge

Iress achieved stage three design system maturity in 2017. For the next few years, the design system team searched for a design tool to take them to the next and final maturity level–Stage Four – Fully Integrated:

• Design in (no) code
• No design drift
• Consistent design
• Seamless (no) handoff

Merge solves these four design system challenges by default.

• Designers use ready-made components with styling and interactive properties–no designing from scratch. Drag and drop UI elements to design new products.
• No code development. Engineers install a package and copy prototypes that use the exact same UI library. UXPin renders JSX for each component, so engineers copy/paste to apply styling and interactivity.
• Drift is nonexistent when everyone uses the same component library (design and engineering teams) with the same constraints.
• Using the same components with built-in constraints ensures ultimate consistency across design teams.
• With Merge, there’s a seamless handoff because designers and engineers use the same single source of truth. Designers don’t have to explain UIs or provide endless documentation explaining their prototypes–they already look and function like the final product.

UXPin reduces the four stages of design system maturity to just two.

1. Design your library using UXPin’s design editor.
2. Convert designs to code components, add them to a repository, and sync back to UXPin using Merge. Iterate to scale.

Take your product development to the next level by Merging the two best design and engineering tools for design systems. Request access to UXPin Merge.

The post How Storybook Helps Developers With Design Systems? appeared first on Studio by UXPin.

Navigating design system contribution can be challenging, often demanding coordinated efforts from multiple stakeholders. This article serves as a comprehensive guide, laying down the structured roadmap of a design system contribution model to standardize practices and ensure quality. From identifying key stakeholders to creating an agile workflow for contributions, it covers every aspect, including how tools can boost your contribution process.

Key takeaways:

• A Design System Contribution Model standardizes how new elements are added to a design system, ensuring quality and consistency.
• Governance, versioning, and documentation are essential elements in controlling and tracking the evolution of a design system.
• UXPin’s Patterns feature accelerates the contribution process, allowing quick iterations and real-world testing of new design system components.

Streamline your design system contribution process while bridging the gap between design and development 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

What is a Design System Contribution Model?

A design system contribution model is a structured roadmap for adding or modifying new elements in a design system. It outlines:

• Who can contribute
• What qualifies for a contribution
• How to go from proposal to implementation

This model standardizes practices, ensuring that the design system evolves in a consistent and controlled manner.

Why Do You Need a Design System Contribution Model?

Organizations use contribution models to overcome the challenges of decentralized digital product development using distributed teams. Design systems often span multiple teams and departments, from designers to developers to product managers. Without a structured approach to contributions, you risk inconsistencies, duplicated efforts, and the dilution of the design system’s quality.

How a Contribution Model Helps Evolve a Design System

The contribution model safeguards a design system’s integrity. It acts as a quality filter, ensuring that every addition aligns with the system’s goals and standards. Setting clear rules and processes helps coordinate multiple stakeholders, thus streamlining efforts and fostering collaboration. This model keeps the evolving design system coherent and efficient.

Who are the Stakeholders in a Design System Contribution Model?

Here are five typical stakeholders for a design system contribution model:

1. Designers
2. Developers
3. Product Managers
4. Quality Assurance Engineers
5. Stakeholders

Designers

Designers are the primary creators and curators of the design system. They contribute graphic elements, UI components, and layout templates. Their expertise ensures the design system aligns with user needs, style guide, and design language.

Developers

Developers implement the designs into reusable code. They ensure the design system remains technically feasible and efficient, turning design assets into functional components. Their contributions often include code samples, technical documentation, and updates on platform limitations.

Product Managers

Product Managers are the bridge between business objectives and design goals. They prioritize contributions based on project needs, timelines, and strategic alignment. By defining the scope and setting priorities, they control the rate and direction at which the design system evolves.

Quality Assurance Engineers

QA Engineers ensure that both the design and code meet quality benchmarks. They validate that contributions adhere to defined guidelines and don’t introduce errors or inconsistencies. Their role is critical for maintaining the design system’s reliability and integrity.

Stakeholders

Management includes executives and decision-makers who provide the resources and support for the design system. They may not contribute directly, but their approval often dictates the scope and scale of contributions. The design system team must inform and align management to ensure long-term investment in the system.

Examples of Design System Contribution Models

Example #1: Pluralsight

Pluralsight’s design system contribution model employs a structured approach, facilitating bug reporting through GitHub issues and feature proposals via bi-weekly meetups or GitHub. 

Contributing code follows a specific guide and demands adherence to coding conventions, thorough testing, and the use of the design system itself in new components. 

Submissions go through Pull Requests (PRs), which require review by the Design System team, often involving multiple rounds of feedback. The Design System team prioritizes the review of submitted PRs within a 7-day window and updates affected packages after merging. The process encourages teams to contribute regularly and real-world testing of the newly implemented features.

Example #2: Atlassian

Atlassian’s design system contribution model emphasizes participation and contribution. Participation includes open communication via Slack channels and bi-weekly Design System sparring sessions for robust feedback. 

The design system team only accepts specific contributions: code bug fixes, Figma library corrections, and documentation updates. It does not accept small enhancements or major changes.

The restriction on larger contributions is due to the time needed to consider the system-wide impact, but the company encourages engagement through participation channels for ongoing collaboration and support.

Example #3: GOV.UK

GOV.UK’s Design System has a strict contribution model that ensures high-quality components and patterns. Contributions begin with a proposal demonstrating a new component or pattern’s usefulness and uniqueness. Proposals meeting these criteria undergo a review by the Design System working group.

Before publication, the Design System working group scrutinizes the implementation to ensure it is usable, consistent, and versatile based on defined criteria, including user research, coding standards, and versatility across services.

For community resources or tools linked to the Design System, a set of checks ensures it has a clear owner, aligns with the system’s standards, and meets other requirements, including documentation and support.

Example #4: Zalando

Zalando’s design system relies on a contribution model that balances centralized governance with decentralized contributions. 

A central team called ZDS mainly maintains the design system and provides standard components and styles to feature teams. 

When these feature teams, which focus on different segments of the customer journey, identify a need for a new component or modification, they reach out to the ZDS team. Teams submit contributions, ranging from light (minor tweaks) to heavy (new components), through a Google Form that updates a GitHub board for tracking.

The contribution process is structured and involves multiple steps, including proposal, kick-off, collaboration, and review. ZDS hosts weekly meetings to review contribution tickets and provides “Open House” sessions for in-depth discussions. Communication and collaboration are essential, with contributors encouraged to document everything on GitHub and involve the right stakeholders for effective decision-making.

After ZDS finalizes a contribution, several steps ensure the update is well-communicated and integrated before merging the Pull Request. These include:

• Updating the design system documentation and design files,
• Showcasing changes in a weekly demo
• Sending out email newsletters to keep both designers and developers in the loop.

This holistic approach ensures that Zalando’s design system is consistent yet flexible to the needs of a large organization.

Example #5: Nord Health

Nord’s contribution model balances centralized governance and community input. Product teams can propose new features or design tweaks that fit their needs, while a central design system team oversees the overall direction, ensuring quality and consistency. 

The design system team categorizes contributions into light, medium, and heavy. Teams submit their ideas through a contribution ticket that syncs to an issue tracker backlog for review every Monday.

The contribution process involves multiple steps, starting with an initial conversation to understand the requirement and avoid rework. The design system team schedules a kick-off meeting for medium and heavy contributions to finalize the scope and timelines. Nord values collaboration and often pairs its team members with the contributing product team to focus on specific requirements.

Nord provides a comprehensive set of tools and guidelines for contributors, from a Figma Design file and GitHub repository to Slack channels and various design guidelines. These supporting resources facilitate a smooth contribution process and ensure all new additions align with Nord’s high standards for accessibility, usability, and design consistency.

What do you Need to Create a Design System Contribution Model?

Governance: Who owns the design system?

Ownership determines control and accountability. Designate a core team to govern the design system. This team sets guidelines, approves contributions, and ensures the system meets user needs and business goals. Without clear ownership, you risk creating a fragmented system.

Versioning: How to manage updates?

Control design system updates through a robust versioning strategy by implementing semantic versioning to differentiate between minor tweaks, feature additions, and breaking changes. This approach minimizes disruption while allowing the system to evolve and adapt.

Version control prevents conflicts and keeps everyone on the same page.

Documentation standards: What should be included?

Each component or guideline should have documentation detailing its purpose, usage scenarios, and limitations. A well-documented system accelerates onboarding and encourages consistent implementation across projects.

Read this article to learn more about documenting design systems.

How to Create a Design System Contribution Process

The design system contribution process is a structured workflow that guides how team members propose, develop, review, and integrate new features (components, patterns, guidelines, etc.) into the existing design system.

This process involves initial evaluation based on set criteria, an internal review of proposals, a collaborative phase of design and development, and a final review and approval by designated stakeholders.

Here are five key steps of a typical contribution process or workflow.

Perform initial evaluation

• Decide what you aim to contribute–a new UI component, design pattern, or a set of guidelines. Clearly defining the type of contribution filters out irrelevant or redundant inputs right from the start.
• Set rigid criteria for what makes a valid contribution. Criteria could range from code quality to relevance and usability.
• Create a checklist to evaluate contributions quickly. If a contribution fails the checklist, it doesn’t proceed to the next stage. This step saves time and ensures quality.

Make a plan

• Outline the submission process. Use templates to standardize proposal submissions, ensuring contributors provide all necessary information.
• Describe your internal review process, including automated checks, peer reviews, and reviews from governing teams.

Pitch it in a presentation

• Invite stakeholders for a feedback round. This step ensures the proposal aligns with both user needs and business goals.

Design the contribution model

• Clarify the collaboration process between designers and developers. Pinpoint which tools facilitate effective communication and design handoffs.
• Specify the tools and platforms teams must use in the development and design stages. Uniform tools enhance collaboration and reduce friction.

Seek approval

• Determine how many review cycles a contribution goes through and what each process entails. Multiple rounds can ensure rigor but avoid needless complexity.
• State who decides whether a contribution gets accepted or rejected–typically the governance team or a lead stakeholder, maintaining the system’s integrity.

Streamlining Design System Contribution with UXPin

UXPin’s Patterns streamlines contribution by empowering designers to prototype and test code components in the design process. It eliminates the need to develop new patterns and components before testing, letting designers instantly create, test, and share new patterns by combining existing Merge UI elements. 

For example, a team working on an eCommerce platform can quickly assemble a new product card for the homepage with updated micro-interactions, use Patterns to save it, and pass it to developers and other designers for immediate feedback and implementation.

This agile workflow accelerates the contribution process, allowing quick iterations and real-world testing. UXPin’s Patterns feature ensures that all contributions are not just theoretical but immediately usable, bridging the gap between design and development teams. By using Patterns, you’re not just contributing to a design system–you’re making it more dynamic, collaborative, and aligned with the needs of your evolving product.

Evolve your design system with the world’s most advanced UX design tool. Visit our Merge page for more details and how to request access.

The post Design System Contribution Model – How to Set it Up appeared first on Studio by UXPin.

The global design system’s community, Into Design Systems, hosted a webinar in July 2023 where guest speaker Marcel Bertram talked about “Systematic Design With Code.” Marcel made some interesting comparisons about designing using vector-based vs. code-based design tools and how organizations can use the latter to create a single source of truth.

Into Design Systems is a virtual design systems conference for the global Design and DesignOps community, including designers, developers, Design Leads, design managers, DesignOps practitioners, and many others. The community-driven initiative shares knowledge to help evolve the industry and its members.

Marcel Bertram is a Brand Design Specialist leading the Design System team at a global automobile manufacturer. He is also the Co-Founder & UX Coach at MUDX.design, a consultancy for UX Design Operations.

This article is based on Marcel’s Into Design Systems live titled “The Power of Design, Code & Ai in Design Systems.” We have summarized Marcel’s talk into its key points, but you can watch the entire 3-hour webinar here.

Key takaways:

• Vector-based design tools arose from a need to provide scalability and clarity across different resolutions in the digital landscape.
• The release of UXPin’s Merge technology in 2019 marked a significant shift in design paradigms, blending code components directly into the design process for a unified UI library.
• Recognizing code as the “source of truth” ensures consistency, efficiency, and a holistic understanding of application mechanics across design and development teams.
• German-based software agency dotSource utilized UXPin Merge to bridge the gap between design and development, synchronizing code, design, and documentation.
• UXPin’s Merge technology advances modern prototyping, enabling designers to test realistic user interactions and gain accurate insights during the design process.

Use coded components as a single source of truth between designers and developers. Bridge the gap in the process and release products faster. Learn more about it. Discover UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

Why Are There Vector-Based Design Tools?

In the early days of digital design, there was a pressing need to replicate the precision of physical art. Instead of constructing images from tiny dots, as pixel-based methods do, vectors use mathematical equations to shape graphics. As a result, these images stay sharp and scalable, no matter how you adjust their size.

Traditional graphic design laid the groundwork for vector tools. The industry adopted tools like Adobe Illustrator because they consistently delivered crisp visuals across platforms and resolutions. As the need for adaptable designs surged with the rise of websites, applications, and digital ads, designers naturally gravitated toward vector-based tools. Their choice wasn’t just aesthetic–it addressed the practical demands of the digital landscape.

The code-based revolution

While vector-based tools have helped get us to where we are today, they haven’t evolved to bridge the gap between design and development–until the release of UXPin’s Merge technology in 2019. 

Merge’s code-based approach brings code components into the design process, so designers can use the same UI library for prototyping as engineers to develop the final product.

Vector-Based vs. Coded Design Systems

Digital product design is slowly shifting from traditional vector-based systems to the innovative code-based approach. The integration of code in the design process has changed how developers and designers collaborate, streamlining the entire product development process. 

Let’s explore this evolution and understand its implications on design systems and prototyping.

Understanding vector-based systems

What are they?

• These are tools that use mathematical equations to represent images in computer graphics. Popular examples include Figma and Adobe Illustrator.

Advantages:

• Suitable for static prototyping and visual designs.
• Intuitive for designers to visualize, draft, and make rapid alterations.

Limitations:

• Lacks the dynamism of real-life applications.
• Can’t always accurately emulate user interactions, transitions, or advanced component behaviors.
• Doesn’t represent the intricacies and possibilities of code.

Understanding coded design systems

What are they?:

• Design tools that use actual coded components on the design canvas, like UXPin.

Advantages:

• Creates a single source of truth across the organization with automated updates for designers and developers.
• Seamless transition between design and development phases.
• Accurately represents the real-life behavior of components for realistic prototyping.
• More meaningful feedback from user testing and stakeholders.
• Less reliance on engineering teams for complex prototyping.
• Integrated accessibility features, semantics, and browser functionalities like password managers.
• Facilitates exploration based on real coded UI elements.
• Designers get the benefits of code but still work with a familiar design tool interface.

Limitations:

• Only the design system team can implement changes–which is good for governance.

Code as the Source of Truth

The final digital product is based in code. Developers work with code. The design team uses a vector-based tool, creating a gap between them and the final product. Therefore, recognizing code as the central reference point or the “source of truth” is pivotal.

This philosophy ensures:

1. Consistency and cohesion: Ensuring that designers and developers draw components from the same repository ensures uniformity across the board.
2. Efficiency: With everyone referencing the same library and documentation, there’s less room for miscommunication or discrepancies.
3. In-depth understanding: Encourages designers to understand the core mechanics of how applications function, fostering a more holistic design approach.

A Single Source of Truth with UXPin Merge – dotSource’s Case Study

Before switching to UXPin Merge, German-based software development agency dotSource had a problem:

Promoting new patterns and components to a design system involves many redundant processes. Most design system releases require updating in at least three places:

1. The design system’s codebase (component library)
2. The design team’s UI kit (design tool)
3. The design system’s documentation

“Instead of a ‘single source of truth’ that gives ‘three single sources of truth’ for every UI component–this seems counterintuitive and increases errors. If the design system’s update process and technologies don’t align, the team ends up with redundant work because a single change requires three updates.”

dotSource found the only solution to this problem was to implement a code-based design process, creating a true single source of truth between design and development.

The company uses Merge technology to import a product’s design system into UXPin so designers can prototype using code components.

“We use UXPin’s Storybook integration, which allows designers to use our design system’s Storybook components in UXPin’s design editor. The result: a perfect synchronization of code, design, and documentation, making it possible for:

• Designers to participate in QA and help developers identify bugs
• Close collaboration between designers and engineers
• Better testing and faster iterations with high-fidelity interactive components (component-driven prototyping)”

Modern Prototyping – Static vs. Interactive

Static prototyping

Using vector-based tools like Figma works well when the objective is to gauge comprehension or aesthetics. It provides a static visual representation without intricate interactive layers.

Designers typically move from a vector-based tool to a prototyping tool, which adds costs and operational burdens, and they still don’t achieve results comparable to code.

Interactive prototyping

Code-based design tools increase prototyping scope for more comprehensive functionality and user journey tests. Tools like UXPin can emulate real interactions, toggle functionalities, input field behaviors, and more, offering a realistic user experience.

UXPin’s Merge technology goes beyond what you can see into how a prototype feels in a real-world scenario. Design teams can use insights from testing to iterate and improve with greater accuracy. Designers enhance usability and can identify more business opportunities during the design process, increasing their value to the organization.

Transitioning to a Code-Based Design Workflow

The world of digital design is vast and ever-evolving. While vector-based tools serve their purpose in initial design phases, embracing the advantages of coded design system systems is the way forward. This integrated approach reduces inefficiencies and miscommunications while ensuring a more authentic user experience during testing.

As designers and developers continue to collaborate, it’s crucial to remember that our ultimate goal is to craft user-centric, efficient, and aesthetically pleasing applications. Understanding and utilizing the right tools is a significant step in that direction.

Increasing design system maturity with UXPin Merge

UXPin’s Merge technology currently leads the code-based design revolution with tools and features that meet the needs of modern product development teams.

It can take years for organizations to reach full design system maturity–a fully integrated system with designers and developers using the same UI library and documentation. Most never get there, maintaining multiple sources of truth like our friends at dotSource.

UXPin Merge is the bridge to that gap. Organizations can create a fully integrated design system from the start, circumventing many years of wasted resources.

With UXPin Merge, you can:

• Import Javascript-based design systems, including React, Vue, Angular, Ember, and others using Git or Storybook 
• Combine UI elements from multiple design systems using UXPin’s Patterns to create new design system components
• Import components from open-source design systems to test new patterns before committing to development
• Build prototypes 8X faster than traditional vector-based design tools
• Use Version Control to give designers control over updates and design system version history
• Create centralized documentation for product teams to keep everything on one platform
• Use real data for prototyping via JSON

Ready to join the code-based revolution? Visit our Merge page to learn how to create a single source of truth for your design system and develop better product experiences for your users.

The post Code or Design – Which is a Better Source of Truth? appeared first on Studio by UXPin.

Developing digital products from scratch requires a lot of resources. Multi-brand design systems enable organizations to build once, duplicate, and customize–saving thousands of design and development hours.

This centralized approach to design systems means organizations can share costs across different brands while providing a framework to enter markets with new products much faster.

Sync your component library with UXPin’s design editor using our revolutionary Merge technology to create a single source of truth across design and development. Visit our Merge page to learn more and request access.

Reach a new level of prototyping

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

Discover UXPin Merge

What is a Multi-Brand Design System?

A multi-brand design system is a set of guidelines, assets, and rules that allows for the efficient and consistent user interfaces across multiple brands or sub-brands within a larger organization. Multi-brand DS ensures harmony and efficiency in the design process while allowing each brand to shine with its unique personality within the broader context.

How Does it Differ from a Standard Design System?

GroupUI used internal Volkswagen research to compare multi-brand vs. regular design systems, discovering that “multi-brand design systems share costs and enable real collaborative development.”

The results across four key metrics were staggering when comparing multi-brand vs. regular design systems:

• 25% cheaper and faster UI design work
• 30% increased development efficiency & efficacy
• 30% reduction in future managed costs
• 3-4 times faster to market

But for us, there’s one word that sets them apart–flexibility. Multi-brand design systems are optimized for flexibility, enabling product teams to leverage an existing component library to develop products for another brand.

Conversely, companies build mono-brand design systems around principles and constraints that limit flexibility. These limitations ensure designers deliver projects to high standards of quality and consistency.

Facilitating change through design tokens

Most multi-brand design systems use design tokens to facilitate global styling changes, for example, adapting colors, typography, corner radius, spacing, etc., to meet brand requirements simply by modifying the token’s property.

In this way, multi-brand design systems share a lot of parallels with themeable open-source component libraries–built to facilitate change. A multi-brand design system is essentially a template or toolkit with an adaptable codebase, design language, and brand guidelines.

Multi-Brand Design System Examples

1. Forge from Harry’s

Using design tokens is one aspect of a multi-brand design system. Organizations must also make the component library customizable. Personal care brand Harry’s used Brad Frost’s Atomic Design (or layering as they call it) approach to build its multi-brand component library, Forge.

Forge uses two layers:

• Base layer (or sub-components): “flexible base components that cannot be deconstructed further.” Product teams only change styling properties for these base components–possibly through design tokens.
• Complex layer (“second layer “): “multiple base components arranged in specific and opinionated ways.”

By structuring components in “layers,” Harry’s built a multi-brand component library that enabled product teams to keep brand-agnostic layers and swap brand-specific ones to customize user interfaces.

Forge’s layered-component structure also facilitates flexibility because individual brands can use sub-components like Lego blocks to build a design system for a new product.

“With the Forge, brands are free to combine sub-components to create solutions tailored to their users without requiring any changes to the component library.” – Mae Capozzi, Senior Software Engineer at Harry’s

Forge’s design system governance offers product managers four options for promoting new patterns:

• Existing Option A: Build custom components
• Existing Option B: Try to reuse components from the existing codebase
• New Option C: Assemble “new” components out of Forge base components
• New Option D: Use an out-of-the-box Forge component

2. Volkswagen’s GroupUI

Volkswagen’s GroupUI is a multi-brand design system serving some 15+ brands. At the time of recording a webinar with Into Design Systems in 2022, only several of Volkswagen’s brands had adopted GroupUI, including VW, Skoda, Audi, Porche, Man, Scania, and RIO.

Unlike a tech company, Volkswagen has many design layers, including real-world (tangible) products and digital products. 

“You have to bring two things together-the vertical harmonization of touchpoints within one brand. For example, the harmonization of in-car HMI, web applications, and apps, plus some internal VR/AR applications. And then the horizontal harmonization of technology.” – Thorsten Jankowski, User Experience Lead Group IT, Volkswagen AG.

Volkswagen has multiple touchpoint layers within each brand, including:

• Web technology
• Native applications
• AR & VR driver systems
• Automotive UIs

GroupUI focuses on web technology but must align with each brand’s vertical as much as possible to create a consistent user experience across every touchpoint.

For example, when a customer purchases a vehicle through a brand’s website, the user experience and UI must be consistent from website to email marketing and in-car user interfaces.

GroupUI’s Multi-Brand Design System Principles

To achieve this level of flexibility and customizability while maintaining a consistent brand experience across every vertical and touchpoint, GroupUI developed a set of “overarching principles:”

GroupUI’s over overarching principles help guide the group through three pillars that intersect toward a common goal:

• Flexibility
• Collaboration
• Transparency

Flexibility over rigidity: GroupUI is framework-agnostic, meaning brands can adopt a framework (React, Angular, Vue, etc.) that best serves their purpose and goals. To achieve this, GroupUI’s core component library uses Web Components, is token-based, and facilitates Snowflakes.

Global collaboration over stakeholder focus: GroupUI aims for “continuous evolution as a common goal” by putting the group’s needs ahead of a single brand or stakeholder. This generic strategy increases trust. GroupUI’s team works continuously on evangelism and distribution to promote generic over brand-specific implementation.

Transparency over complex documentation: GroupUI uses a centralized backlog for issues and design solutions. This centralization reduces silos vertically within each brand and horizontally across the entire group while facilitating an ecosystem for brands to learn and evolve together.

3 Tips for Building a Multi-Brand Design System

Tip #1: Use fewer tools to increase adoption

The first step to building a multi-brand design system is minimizing design tools! More tools mean the design system team must maintain multiple platforms.

When News UK built its multi-brand design system for The Times, The Sun, Virgin Radio, and The Sunday Times, to name a few, Nick Dorman, Head of Design Systems, found that using multiple tools resulted in a “disjointed solution.” Implementing simple changes would take days or weeks because the DS team had to update and verify changes across each platform systematically.

News UK chose an image-based design tool which helped unify Design but still meant they had to maintain two design systems:

• One for design – image-based UI kit
• One for development – component library

UXPin Merge is a far better design tool solution for multi-brand design systems. Merge syncs a component library hosted in a repository to UXPin’s design editor, so designers and engineers use the same UI elements. Any updates to the repo automatically sync to UXPin, notifying design teams of the changes–creating a single source of truth across design and development. 

Tip #2: Choose a framework-agnostic design system

As we learned from Volkswagen, a framework-agnostic design system allows brands to use a tech stack that best serves their needs. GroupUI supports Web Components/HTML, Angular, and React–the three frameworks used across Volkswagen’s brands. Brands can preview these components through a centralized Storybook, including guidelines and documentation.

Like Forge, GroupUI’s design system works in layers so teams can build components to meet their needs. A brand theme defines each component and nested component’s properties.

Designers can also benefit from a framework-agnostic design system with UXPin Merge. Merge’s Storybook integration enables design teams to sync any Storybook-compatible framework with UXPin’s design editor–eliminating the need for creating UI kits.

At design handoff, engineers install the framework’s package, apply the appropriate theme and copy component changes rendered by UXPin to complete front-end development.

Tip #3: Adopt atomic design methodology

Adopting an Atomic Design methodology is an excellent strategy to future-proof your multi-brand design system. Volkswagen, Harry’s, and News UK applied Atomic Design principles to build flexible, themeable design systems.

The idea is to create a base layer of core components or building blocks that never change. Engineers nest these core components inside a themed master component to apply brand-specific styling via design tokens.

This example from Volkswagen shows two tab patterns. One for Porsche, the other for Volkswagen. Notice how the tab patterns and nested components are identical; only the theme property changes for each brand.

Building components and patterns using this Atomic methodology make it easy to scale the multi-brand design system while providing each brand with a framework to scale individual design systems.

Build Your Multi-Brand Design System With UXPin Merge

Multi-brand design systems are complex beasts with lots for design system teams to consider. The design system team must find ways to simplify workflows, reduce tools, and minimize time-consuming tasks.

As we saw with News UK, using multiple tools creates a massive burden for design system teams updating and maintaining several platforms. 

UXPin Merge solves this design tool challenge by providing designers with a single design, prototyping, and testing solution. No plugins or extensions–everything design teams need is built-in.

Merge has the added benefit of syncing design and development to create a single source of truth across every brand–impossible to achieve with traditional image-based design tools.

With UXPin Patterns, design teams can combine building blocks from a multi-brand design system to promote new patterns for the component library. UXPin Patterns is also helpful for saving multiple component variants, so designers can save time during prototyping by dragging and dropping elements to find the right solution fast!

Sync design and development while unifying multiple brands through a single component-driven design solution. Discover UXPin Merge.

The post Multi-Brand Design System – How to Get Started 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.

Import your design system’s components or an open-source component library with UXPin Merge to create a single source of truth across your organization. Learn more about Merge and how to request access to this revolutionary design technology.

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.

Organizations use these design tokens for many style properties, including color palette, size, spacing, assets, and drop shadows, to name a few.

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.”

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.

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.

Merge is available in three options:

• Git Integration: Direct integration for React component libraries
• Storybook Integration: Connect popular front-end frameworks like Angular, Vue, Ember, HTML, Web Components, and more
• NPM Integration: Sync open-source component libraries through an intuitive dashboard

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.

Figma Component Libraries are a great way to create and share reusable UI elements with team members. Designers can use Figma components to build user interfaces and prototypes, and they help to maintain consistency across projects. 

However, Figma Component Libraries have some limitations, such as the inability to create interactive prototypes. UXPin Merge is a better alternative to Figma Component Libraries, as it allows you to create fully interactive prototypes that look and feel like the final product.

Key takeaways:

• Figma Component Libraries are a great way to create and share reusable UI elements.
• UXPin Merge is a better alternative to Figma Component Libraries, allowing you to create fully interactive prototypes.
• Figma Component Libraries have limitations, such as the inability to create interactive prototypes.
• Merge imports UI components into the design process from a repository, creating a single source of truth between design and development.
• Merge lets you create fully interactive prototypes using code components in the design process to improve testing.

Switch from basic prototyping in Figma to advanced prototyping in UXPin. End the screen spaghetti now. 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 Figma Component Library?

A Figma component library lets you create and share Figma Components and Styles with team members by publishing the file. Team members can access this shared file and use the components and styles as a design system.

Your design team can change these components and styles and push them to the library. You can create permissions, so only authorized team members can modify the component library.

What are Figma Components and Component Instances?

A Figma Component is a single reusable UI element that forms part of a component library. According to Figma’s documentation, you can save many things to the Component Library, including:

• UI components
• Company logos and brand assets
• Icons
• Device mockups
• Platform OS components (Android, iOS, Linux, OSX, etc.)
• Cursors
• Redlining and annotation components
• Post-it notes and voting “stickers” for running collaborative design sprints
• Diagramming “helpers” like flow arrows and flowchart shapes

You can view these master components in your primary component file or under the assets tab in the left sidebar. 

Component Instances are copies of the library component used to create user interfaces and prototypes. For example, you might have an app bar component in your library that appears on 20 screens. Those 20 app bars are instances of the library component. 

Whenever you update the library component, all its instances will change, too. Figma will notify designers whenever a component is updated, and they can choose when to accept the latest version.

What are Figma Styles?

Styles allow you to maintain consistency across teams and projects so everyone uses the same properties and values.

Figma lets you save reusable style properties, like colors, typography, sizing, spacing, border radius, etc. The equivalent of variables in CSS. Instead of entering a HEX code or font size value, you choose a predefined style–i.e., Primary Blue or Headline 1.

How do I Find the Component Library in Figma?

There are a couple of ways to locate your Figma component library:

1. If you’re working inside the design library file, right-click on the component and select Go to main component. You can also click the Figma Component icon in the right sidebar next to the component’s name. 
2. If you don’t have access to the main file, you won’t be able to access the Figma component library, but you can view all the components under the Assets tab in the left sidebar.

How do I use Components From the Figma Component Library?

1. Click the Assets tab in the left sidebar.
2. Search for an asset using the search field or select a library from the dropdown below.
3. Click or drag a component from the Assets tab onto the canvas.
4. Adjust the component’s properties and variants under the Design tab in the left sidebar.

You can redesign components by detaching any instance. Any edits you make to a detached instance won’t impact its former component or instances. Once you complete the changes, you can save this as a new component, which will appear in your Assets folder.

What are the Limitations and Challenges of Figma’s Component Library?

While Figma’s component library makes it easy to reuse and share UI elements, there are some limitations to what you can do with them:

1. Figma components create aesthetically pleasing UI designs but lack the functionality to build interactive prototypes, limiting the scope of what designers can achieve.
2. Design teams require additional tools and plugins to make Figma components more interactive, increasing costs and workflow complexity.
3. Components help design teams build user interfaces and basic prototypes in Figma, but they’re not developer-friendly and might misalign with code UI components.
4. Detaching instances is convenient for creating new components but means design teams can edit and manipulate UI elements without authorization.
5. If you’re using Figma’s Component Library for a design system, the DS team must maintain two versions–one for Figma and the other in code.

Do you want to stay static or get better results with interactive prototyping? Enter Merge–the world’s most advanced UX design technology.

UXPin Merge – The Best Alternative to Figma Libraries

UXPin’s Merge technology imports UI components into the design process from a repository (Github, Bitbucket, GitLab, etc.). Design teams can use these fully interactive code components to build prototypes that look and feel like the final product.

Built-in styling and interactivity

Merge components have properties like styling and interactivity “baked-in,” so design teams never worry about entering the correct values or copying animations from a code component library. 

The design system team uses React props or Storybook Args to define these properties, which appear in UXPin’s Properties Panel. For example, a button’s states, text styles, colors, sizes, icons, and interactions are available for designers to select via dropdowns. 

Merge eliminates design drift and prevents unauthorized modifications to UI elements. Designers cannot detach Merge components and modify them. Only the design system team can change code components in the repository that syncs to UXPin and notify designers of the update.

A single source of truth

Many design tools claim to offer a single source of truth. But the reality is these image-based solutions require updating in multiple areas, including design tools, prototyping tools, documentation, and the code UI library.

As German-based software development agency dotSouce points out: 

“Promoting new patterns and components to a design system is chaotic, with many redundant processes. Most design system releases require updating in at least three places: the design system’s codebase (component library), the design team’s UI kit (design tool), and the design system’s documentation. Instead of a “single source of truth” that gives “three single sources of truth” for every UI component–this seems counterintuitive and increases errors.”

With Merge, the entire product development team–UX designers, product teams, and engineers–pull components from the same repository. Any changes to the repo automatically sync to UXPin, notifying designers of the update–a real single source of truth.

Instead of updating a UI kit, code components, and relevant documentation, the design system team pushes one release to everyone simultaneously.

How to use a Merge Component Library in UXPin

Once the design system team completes the setup, the component library is available in UXPin. Here’s a step-by-step tutorial on how to use a Merge component library:

Step 1. Open Design System Libraries

All your design systems will appear under Design System Libraries in UXPin’s left sidebar. 

There are two categories:

• Merge Libraries: Code component libraries from a repository
• Classic Libraries: Regular UXPin components

Step 2. Select your design system

Select the design system you want to work with, and UXPin will open the component library in the left sidebar. 

Above the library, you have a Components and Patterns tab (more on Patterns shortly…). Components contain your component library, and a dropdown displays the available categories–i.e., buttons, switches, cards, icons, etc.

Step 3. Using the component library

Click a component to add it to the canvas.

View the component’s properties and make adjustments via the right-hand Properties Panel.

Repeat this process to build user interfaces and prototypes.

Step 4. How to use UXPin’s Patterns

Patterns allow you to create new components and templates by combining multiple UI elements from a design system. You can use components from more than one component library to test new patterns before promoting them to the design system.

Patterns are also helpful in creating multiple states or variants of a component. For example, you may want a light and dark mode version for a user interface, but your design system only has the light variant. You can create this dark mode variant in UXPin, save it to Patterns, and even share it with team members.

Step 5. Prototyping and testing using interactive components

You have two options for testing prototypes in UXPin:

• Preview and Share: Launches the prototype in a browser
• UXPin Mirror: An app for testing on iOS and Android devices

Merge prototypes enable design teams to create complex prototypes using the same components engineers use for development. Stakeholders and users can interact with Merge prototypes like they would the final product, giving design teams meaningful feedback to iterate and improve. 

Using high-quality interactive prototypes means designers can solve more usability issues and identify better business opportunities during the design process.

Step 6. Design handoff

The transition from design to development is seamless with Merge because developers and engineers use the same UI library. UXPin generates production-ready JSX so developers can copy/paste the code to their IDE for development.

Bridge the gap between design and development with the world’s most advanced product design tool. Visit our Merge page for details on how to get started.

The post Figma Component Library vs UXPin Component Library – Which is Better? appeared first on Studio by UXPin.

Design systems streamline the product design process, ensuring consistency and scalability across teams. Figma and UXPin, offer robust solutions, each with unique features tailored to different needs. This article explores Figma’s Team Library, its benefits, and potential drawbacks. We also present an alternative to Team Library with UXPin’s Design Systems and Merge technology.

Key takeaways:

• Figma’s Team Library facilitates creating and sharing design systems, ensuring consistency.
• Figma’s Design Systems, while advanced, still present challenges in bridging the gap between designers and developers.
• UXPin’s Merge surpasses Figma’s Team Library in centralized management, ultimate consistency, and supporting multiple front-end technologies for a unified design-to-development process.

Create a single source of truth across your organization and simplify your product development process with UXPin’s Merge technology. Discover UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

Can you Create a Design System in Figma?

The Team Library feature allows designers to create design systems in Figma. They can publish and share UI components and styles across different files and projects. When design elements are updated, every design file using them remains consistent and up-to-date, keeping the entire organization in sync with the latest release.

What is Atomic Design–And How Does it Apply to a Figma Design System?

Figma has designed its Team Library around Brad Frost’s Atomic Design principles. Atomic Design breaks user interfaces down as follows:

• Atoms: These are the fundamental building blocks of a webpage, such as color styles, labels, text styles, and spacing.
• Molecules: When you combine several atoms, like colors, with a label and a shape, you get molecules. Examples include buttons, form inputs, and checkboxes.
• Organisms: Joining multiple molecules results in organisms. These can be more complex UI elements like sidebars or headers.
• Templates: When you combine various organisms, you create templates that form a page’s overall layout.

Figma’s atomic units: components and styles

Components and styles are the atomic units of Figma’s design system:

• Components: Reusable design elements, such as buttons or icons.
• Styles: Design specifications, such as colors or typography.

These elements reside in the original files where the design system team created them. To make them accessible across different files, the file owner can publish them to the Team Library.

How do you Access Figma’s Team Library?

Once you publish components and styles, you can find them in Figma’s Team Library:

1. Create or open a design file.
2. Open the Team Library from the Assets tab.
3. Search or browse for the desired team library.
4. Enable the library to make its components available in the assets panel.

With the Team Library enabled, designers can easily drag and drop instances of these components into their design files, ensuring design consistency.

Key features of Figma’s Design System

• Styles: Define component colors, text, effects, and layout grids.
• Variables (beta): Store reusable values like color values, numbers, and text to make components semi-interactive or switch between light and dark modes. 
• Variants: Create variants and states for components and patterns.
• Design tokens: Dynamic styles the design system team can share across multiple design files to centralize changes and updates.
• Storybook: Designers can embed Figma designs with Storybook components and import stories alongside relevant Figma components for reference.
• Library Analytics: Allows the Design System Team to monitor usage and adoption of patterns and components.
• Version History: View a Figma file’s version history and restore old versions.

What are the Disadvantages of Using Figma’s Team Library?

While Figma’s Design Systems have evolved to simplify designing, the tool still doesn’t bridge the gap between designers and engineers. The design system team must manage two libraries, one for Figma and another for code.

UXPin co-published with Whitespace in 2023, where we interviewed 19 globally recognized companies about design system challenges and how to overcome them in our insightful report. These companies used image-based tools like Figma and Sketch. 

We learned that a single source of truth is the primary goal for every organization. Companies rely on plugins or custom solutions to achieve this goal, increasing costs and creating workflow complications.

Here are some of the key challenges with using image-based tools for design systems:

• Organizations never achieve a single source of truth because designers and developers use separate libraries–a UI kit for Figma and code components for developers.
• Updates require changes in multiple places, including the design system repository, Figma, prototyping tool, and relevant documentation.
• Without centralized control over a single UI library, errors occur with teams using different versions.
• Design handoffs require lengthy documentation to explain interactions. Even with Figma’s 2023 releases, designers can’t achieve interactivity comparable to code.
• Designers must use additional tools and plugins for prototyping and testing, increasing costs, operational burdens, and the likelihood of mistakes.

How does UXPin’s Design Systems Compare to Figma’s Team Library?

UXPin offers two solutions for design systems, depending on your maturity:

• Design Systems feature: Create a design system, including components, assets, typography, and docs.
• Merge technology: Import a code component library from a repository into UXPin for prototyping and testing.

UXPin Design Systems

UXPin Design Systems works similarly to Figma’s Team Library. Organizations can create design systems and share these with team members. The design system team can set permissions to prevent unauthorized changes and ensure the system’s integrity.

Leveraging UXPin’s built-in design libraries

Organizations can use one of UXPin’s built-in design libraries as a foundation to build and scale a design system faster, including iOS, Material Design, Bootstrap, and Foundation.   

Better interactivity

Figma and Sketch are image-based design tools, meaning designers can only create static prototypes with minimal functionality. UXPin is powered by code. Instead of generating vector graphics, the canvas renders HTML, CSS, and Javascript behind the scenes.

Using a code-based platform like UXPin means designers can achieve interactivity that closely mimics components in the final product, including fully functional input elements, state management, and complex UI patterns.

Four features that separate UXPin from other design tools:

• States: allow designers to create multiple states for a single UI element and design complex interactive components like dropdown menus, tab menus, navigational drawers, and more.
• Variables (very different from Figma’s Variables): capture data from user inputs and create personalized, dynamic user experiences–like their name and profile image in the app bar.
• Expressions: Javascript-like functions to create complex components and advanced functionality–no code required!
• Conditional Interactions: create if-then and if-else conditions based on user interactions to create dynamic prototypes with multiple outcomes to accurately replicate the final product experience.

With UXPin’s advanced code-based features, organizations don’t need external tools or plugins for prototyping and testing, reducing costs, redundant workflows, and operational tasks.

UXPin’s Design Systems helps with the early and middle stages of design system maturity. With Merge technology, organizations can achieve the final stage, a fully integrated single source of truth.

How to Achieve a Single Source of Truth With Merge Technology

Merge technology allows organizations to reach ultimate maturity–where designers and developers work with the exact same component library. A single update syncs changes to Design and Engineering, including documentation.

A real single source of truth

With Merge, organizations can import a UI library from a repository into UXPin so designers can use the same design system components during the design process as engineers use to develop the final product. Any changes to the repository automatically sync to UXPin and notify teams of the latest version.

“With this new UXPin Merge approach, we see a more collaborative, integrative design process. Rather than separating design, prototyping, and development, UXPin allows us to create an integrated flow where we engage engineering and product teams throughout the process. As a result, the product’s final quality has improved dramatically.” Erica Rider, Product, UX, and DesignOps thought leader.

Version Control keeps teams in sync

Designers can use UXPin’s Version Control to choose when to switch to the latest release or revert to older versions when needed. With designers and engineers in sync with the same versioning, there’s never any confusion or miscommunication–one changelog for the entire design system.

What Makes Merge Better Than Figma’s Team Library?

Using Figma’s Team Library requires organizations to maintain two versions of a design system (sometimes more if they use different tools for prototyping and testing). With Merge, they only need to maintain one–the design system’s repository.

Centralized management

The design system team manages a centralized repository that serves design and engineering teams. This centralized management gives the team complete control over the component library, updates, governance, documentation, and promoting patterns.

Ultimate consistency

Managing a design system from one place prevents unauthorized changes to the component library. Properties, including interactivity and styling, are “baked-in” to components and patterns. 

Unlike Figma, where designers can detach and adjust components, Merge elements, and their properties are fixed. Designers can only work with the properties defined in the design system’s repository, which appear in UXPin’s Properties Panel.

The design system team can define component properties using React props or Storybook Args, which designers can view and adjust via the properties panel. 

These constraints mean designers and engineers always work within the same parameters and limitations, resulting in pixel-perfect consistency with every release. Merge eliminates drift while significantly reducing UX debt and technical debt.

Supports multiple front-end technologies

Organizations can sync most Javascript front-end technologies to UXPin using two integrations:

• Git Integration: Connect directly to a React repository
• Storybook Integration: Sync any Storybook library, including React, Vue, Ember, Angular, and more.

Figma’s Storybook plugin only lets designers visualize components and Stories, whereas UXPin’s Storybook Integration imports the component library to build fully interactive prototypes inside the design editor.

One tool for design, prototyping, and testing

Due to Figma’s interactive limitations, many companies must utilize different tools for design and prototyping–for example, Zeplin for prototyping. With Merge technology, design teams never have to leave UXPin, simplifying workflows and reducing costs.

Using code components in the design process means designers can build prototypes that look and feel like the final product, increasing prototyping scope and improving feedback from stakeholders and user testing.

Using open-source component libraries to prototype and evolve

UXPin has several built-in Merge libraries, including Fluent UI, Ant Design, MUI, and UXPin Boilerplate. Designers can use these Merge libraries to build fully functioning prototypes or MVPs for testing. 

Organizations using Merge’s Git Integration can combine components from these libraries to build and test new patterns, facilitating the design system’s evolution without engineering assistance.

Ready to take your product design to the next level with a code-based solution from UXPin? Sync design and development with a single source of truth using Merge technology. Visit our Merge page for more details and how to request access.

The post Figma Design System vs UXPin Design System – A Deep Comparison 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 eight 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. 

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.

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

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

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

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

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. 

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

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 8 Best Design System Examples appeared first on Studio by UXPin.

UXPin’s npm Integration empowers design teams to prototype at a higher fidelity and with code-like functionality. Component-driven prototyping in UXPin allows designers to create prototypes that previously required engineers to code.

With npm Integration, teams can bring component libraries to UXPin’s design tool and leverage full interactivity of shared components without complicated technical setup. Let’s see the tutorial to learn how fast it is to integrate components and use Merge.

Bring UI components to UXPin from Git repo, Storybook, or through our newest npm integration. Learn more about UXPin’s Merge technology.

Reach a new level of prototyping

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

Discover UXPin Merge

What is UXPin Merge?

UXPin Merge is a code-based technology that enables component-driven prototyping for design teams. Instead of designing from scratch, designers use production-ready UI elements from a repository to build high-fidelity, fully functioning prototypes.

Designers work with visual elements, and engineers the code behind them, creating a single source of truth for the entire product development team. Teams like PayPal or TeamPassword improved the quality, speed, and consistency of their design with UXPin.

What is UXPin’s npm Integration?

Using UXPin Merge for a private design system requires some engineering knowledge to set up the repository for syncing. But, to use an open-source component library, design teams can complete the npm Integration using an intuitive dashboard.

Designers can manage component imports and properties using Merge Component Manager. For example, you can import a button from Bootstrap’s component library and its nine variants:

• Primary
• Secondary
• Success
• Danger
• Warning
• Info
• Light
• Dark
• Link 

These variants appear in UXPin’s Properties Panel as a dropdown. Merge also includes basic hover states for most components, so designers don’t have to worry about these minor details and can begin prototyping immediately.

Design teams can find component properties to import via the React Bootstrap docs. They can import every property or only those relevant to the project.

The Benefits of Working With Bootstrap

Bootstrap is one of the oldest and most comprehensive mobile-first front-end frameworks available for React, Vue, and Angular. UXPin’s npm integration uses the React Bootstrap component library, but you can import the Vue or Angular versions using our Storybook Integration.

Bootstrap is best for building responsive websites and web applications, but you could use the React library for mobile app design projects. Bootstrap’s extensive collection of form elements, responsive tables, and other relevant components makes it an excellent option for web-based enterprise products.

We recommend checking Bootstrap’s Examples page to see what’s possible with this comprehensive front-end framework.

Bootstrap npm Integration With UXPin Merge

You can import Bootstrap components into UXPin’s design editor using the npm package (react-bootstrap). Merge Component Manager allows you to import each UI element and its available properties.

With component-driven prototyping in UXPin, design teams get the same fidelity and functionality as engineers because the elements come from the same repository. Designers can replicate whatever engineers can do with repository components in UXPin via the Properties Panel.

You can assign these properties using Bootstrap’s React props found in the framework’s documentation.

Assigning Properties in Merge Component Manager

Merge Component Manager is a central hub for importing and managing your npm components. You can import as many of these as you need to complete your project. 

You also have control over how many properties you import. For example, if you’re only going to use the Bootstrap button’s primary and secondary variants, you only need to import two instead of all nine.

Connecting UXPin to the React Bootstrap npm Package

Step 1

Navigate to your UXPin dashboard and click “New Project.”

Step 2

Name your project and click “Create New Project.”

Step 3

Click “Design with Merge components” and “+ Add new Library.”

Step 4

Select “Import React Components with npm integration” and click “Next.”

Step 5

Name your library. This name is purely for your reference and won’t impact the import.

Merge requires two Bootstrap packages for the npm Integration to work. You’ll need React Bootstrap (react-bootstrap) and Boostrap (bootstrap).

Lastly, you must include a path to Bootstrap’s CSS file for component properties to work in UXPin. You can find this path under CSS in React-Bootstrap’s documentation.

• bootstrap/dist/css/bootstrap.min.css

Importing React Bootstrap Components

Once you complete the steps above, UXPin will redirect you to Merge Component Manager. You can also get there from the canvas following Step 1.

Step 1

From the lefthand sidebar, click “Open Merge Component Manager.”

Merge Component Manager will open in a new tab.

Step 2

Click “Add new component.”

Step 3

Enter the name of the component you want to import.

You’ll find the correct naming convention in React Bootstrap’s documentation.

We’ll import a Bootstrap button for this tutorial and create a new category called “Components.” We recommend using the same categories as React Bootstrap’s docs so designers and engineers have the same reference point.

You can add multiple components to a single import, saving you time repeating steps two and three.

Click “Import Components.”

Step 4

Click “Publish Changes” in the top right to initialize the import process.

The first time you do this for a new component, it might take a minute.

Step 5

Once the import is complete, click “Refresh Library” to update the changes in your project library.

If you follow these instructions step-by-step, you’ll notice you have a category (Components) and your first component (Button) in the left sidebar.

Step 6

Click on the Button to begin adding properties. You can find these React props in React Bootstrap’s documentation under API in Components > Button.

Adding Component Properties with Merge Component Manager

We’ll add a couple of button properties using React Bootstrap’s documentation.

Button Label

Step 1

You set a React Bootstrap button label using the children property as follows:

• Property name: enter “children” (always use lowercase for props)
• Display name: This is for your reference, but something descriptive that both designers and engineers use–we’ve gone with “Label” to keep things uniform
• Description: Add a short description or instructions for designers
• Property type: “string”
• Property control: “textfield”
• Default value: Your preference–we’ve gone with “Button”

As you complete the component’s properties, you’ll notice a component preview will appear and change according to your preferences.

Step 2

Once you have completed all the fields, click “Add property.”

Then “Save Changes.”

Lastly, “Publish library changes.”

Try Component-Driven Prototyping in UXPin

Once you import the React Bootstrap components and properties you need, prototyping in UXPin is as simple as drag-and-drop to build layouts. We created this simple email sign-up form using three Bootstrap components in less than a minute.

When you select a Bootstrap component, the properties you created in Merge Component Manager appear in the righthand Properties Panel.

Try component-driven prototyping with UXPin’s npm Integration today. Bring Bootstrap’s npm components and discover how quickly your product gets from ideation to development. Release features much faster.

The post How to Bring Bootstrap Components to UXPin – npm Integration Walkthrough appeared first on Studio by UXPin.

With UXPin’s npm Integration, designers can import npm component libraries to build fully functioning prototypes. These high-fidelity prototypes enable designers to test features, interactions, and functionality impossible to achieve with traditional vector-based design tools.

Build fully interactive prototypes with real building blocks of your app. Try UXPin Merge and sync MUI with Merge and bridge the gap between designers and devs. 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 UXPin’s npm Integration?

Firstly, it’s important to understand UXPin Merge because our npm Integration is the latest iteration of this game-changing technology.

Merge allows you to sync a design system’s component library to UXPin’s design editor so designers can prototype using fully interactive components that come from their design system.

This component-driven prototyping creates a single source of truth where designers and engineers work with the same design system. Any changes to the repository automatically sync to UXPin, so teams always use the latest version.

Enter npm Integration

Previously, designers needed an engineer’s help to connect and sync Merge. You needed someone proficient at a Git repository or Storybook. But, with UXPin’s npm Integration, designers (or DesignOps) can complete the integration using an intuitive user interface without writing any code.

If the component library exists as an npm package, you can connect it to UXPin through Merge and import the UI elements needed to start prototyping. Open-source design libraries like MUI work best with the npm Integration because they have a consistent naming convention, file structure, and documentation.

The Benefits of Working With MUI

MUI is a React component library based on Google’s Material Design UI. The comprehensive design system is excellent for prototyping because it has everything you need to build UIs fast.

The MUI team has done fantastic work to ensure components solve foundational usability and accessibility issues, giving you a ready-to-go product development solution.

MUI is themeable, so you can use it as a foundation to build your design system or take advantage of the comprehensive library to test UI elements when trying to find new patterns for your product’s component library.

MUI npm Integration With UXPin Merge

MUI has design kits for a few image-based design tools, but with UXPin, you can import its fully functioning component library–the same foundational components engineers use for development.

MUI components in UXPin look exactly like any other static component but have the same fidelity and functionality as code–UXPin renders HTML, CSS, and Javascript in the backend rather than vector graphics.

When you import UI elements into UXPin, you also get MUI’s component states out of the box. If you’ve ever set these up in an image-based design tool, you’ll know how time-consuming and complicated it can be to add basic states and assign them to the properties panel. With UXPin’s npm Integration, you can import these states with a few clicks!

Assigning Properties in Merge Component Manager

The Merge Component Manager allows you to set up properties for each MUI component.

You can use MUI’s docs to choose which React props you want to import for each component. Once imported, these React props appear in UXPin’s righthand Properties Panel, allowing you to customize individual UI elements.

For example, an MUI button has several color properties:

• Primary
• Secondary
• Success
• Error
• Info
• Warning

When you import these props via the Merge Component Manager, a dropdown appears in the Properties Panel, allowing you to select the desired color. The same applies to variant (contained, outlined, text), size (small, medium, large), and other multi-option props.

There are several property types, including boolean, function, string, array, and enum, to name a few. You can import any MUI React props found in the documentation according to your prototyping needs.

Connecting UXPin to the MUI npm Package

Step 1

Navigate to your UXPin dashboard and click “New Project.”

Step 2

Name your project and click “Create New Project.”

Step 3

Click “New prototype” to open the project in UXPin’s design canvas.

Step 4

Click the dropdown at the bottom of the Design System Libraries tab in the lefthand sidebar, and click “New library.”

Your sidebar and available libraries may differ from the example.

Step 5

Select “Import React Components” and click “Next.”

Step 6

Name your library. This name is purely for your reference and won’t impact the import.

You also need to grab the npm package repository name, which you find under Install on MUI Material’s npm page. Copy and paste the Install contents from npm into the “Library package name” field.

Delete everything preceding the @ symbol (so you only have @mui/material), leave everything else as default, and click “Next.”

Importing MUI Components

UXPin will automatically redirect you to the canvas once you complete the npm integration. Now it’s time to select the MUI components you want to import.

Step 1

From the lefthand sidebar, click “Open Merge Component Manager.”

Merge Component Manager will open in a new tab.

Step 2

Click “Add new component.”

Step 3

Enter the name of the component you want to import.

You’ll find the correct naming convention in the MUI docs under Component API. MUI’s components use CamelCase with no spaces. Always capitalize the first letter. For example, bottom navigation would be BottomNavigation.

Let’s import an MUI Button as our first component and add it to a new category called Inputs. We recommend using the same categories as MUI’s docs, so designers and engineers have the same reference point.

You can add multiple components to a single import, saving you time repeating steps two and three.

Click “Import Components.”

Step 4

Click “Publish Changes” in the top right to initialize the import process.

The first time you do this for a new component, it might take a minute or two.

Step 5

Once the import is complete, click “Refresh Library” to update the changes in your project library.

If you follow these instructions step-by-step, you’ll notice you have a category (Inputs) and your first component (Button) in the left sidebar.

Step 6

Click on the Button to begin adding properties. You can find these React props in MUI’s documentation under Component API > Button.

Adding Component Properties with Merge Component Manager

Let’s add a few MUI button properties using the React props from the documentation.

Button Label

Step 1

A button label (or content) in MUI uses the “children” React prop.

• Property name: enter “children” (always use lowercase for props)
• Display name: This is for your reference, but something descriptive that both designers and engineers use–we’ve gone with “Label”
• Description: Add a short description or instructions for designers–we’ve used “Button’s label or CTA”
• Property type: “node” as per MUI’s docs
• Property control: “textfield” (note: this field will only appear once you select a property type and will differ depending on your selection)
• Default value: Your preference–we’ve gone with “Button” (note: MUI capitalizes button labels)

As you complete the component’s properties, you’ll notice a component preview will appear and change according to your preferences.

Step 2

Once you have completed all the fields, click “Add property.”

Then “Save changes.”

Lastly, “Publish library changes.”

Component-Driven Prototyping in UXPin

Once you import the MUI components you need, prototyping in UXPin is as simple as drag-and-drop to build layouts. We created this simple email sign-up form using three MUI components in less than a minute.

When you select an MUI component, the properties you created in Merge Component Manager appear in the righthand Properties Panel.

Ready to discover the possibilities of component-driven prototyping in UXPin? Try the MUI npm Integration (or other open-source component libraries available on npm).

The post Bring MUI Components to UXPin – npm Integration Walkthrough 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.

Key takeaways:

• React design system is a collection of reusable coded components, development guidelines, and assets built using ReactJS.
• React design system’s components include pre-built buttons, forms, navigation menus, cards, and other building blocks of user interface.
• To start React design system, you can use an open-source React components like MUI or Fluent UI or build one from scratch.
• One of the best tools for using React design system in prototyping is UXPin Merge, because it makes designers use real components that can be reused in development.

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.

Create beautiful layouts without designers

Take UI components directly from Git repo, Storybook, or through NPM and design production-ready prototypes.

Bring code to design

What is a React Design System?

A React design system is a set of reusable React components and design guidelines for building React apps. It helps create and maintain user interfaces that are consistent, scalable, and easy to maintain.

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.

Version control has been a software engineering best practice for decades. A version control system (VCS) allows engineers to collaborate efficiently while working independently.

With the rise of design systems, version control has become an essential part of cross-functional collaboration and maintaining a single source of truth across the organization.

UXPin Merge’s Version Control System gives you the flexibility to manage your library version for each design project and effortlessly switch between each version. Discover how UXPin Merge can revolutionize your product design process and enhance cross-functional collaboration. Read 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 Version Control?

Version control is a method of maintaining a historical record of each update and release for data sets, software, documentation, and other projects.

The practice dates back to 1962 with IBM’s OS/360 IEBUPDTE software update tool, which many people consider the precursor to version control systems.

Version control is most commonly associated with software development, but we see these systems in many other tools, including spreadsheets and word processors.

For example, Google Sheets’ Version History records changes, including who made them and the date. You can also switch between versions which are especially helpful if you’ve made a mistake and can’t remember what changes you or a collaborator made.

The most popular and widely used example of software version control is Git. Git is a version control system that keeps a historical record of software changes while enabling multiple engineers to simultaneously work on the same project.

Every Git version records code changes, who made them, and the date. An excellent example of this version history in action is viewing the releases on a GitHub repository like this one from UXPin Merge Tools.

What is the Difference Between Version Control and Backup?

Version control includes a master file with multiple versions. A backup is a copy of the master file stored elsewhere. Backups are essential because you don’t lose the entire project if something happens to the master file’s location.

For example, you might have a project stored in a repository like GitHub for everyone to access with backups on your local server and another cloud-based option. If for some reason, GitHub goes down, your team can switch to the backup and continue working.

What is Source Code Management?

Source code management (SCM) refers to version control tools like Git, Subversion, CVS, Perforce, and ClearCase. SCM tracks code changes and assists with conflicts when merging branches. If there is an error, you can easily switch to a previous version. You can also use SCM to manage permissions, preventing unauthorized changes.

When working with hundreds or even thousands of engineers tracking updates can be chaotic. Basic version control isn’t enough to facilitate this volume of work. For example, if developers make conflicting changes to a CSS file, SCM identifies these conflicts and prevents overwrites. 

Atlassian has an excellent article on SCM if you wish to dive deeper into the topic.

Git Tags vs. Branches

• Git Branch: Software has a master or develop branch and multiple “checkout” branches for feature updates and bug fixes. As developers complete checkout branches, they merge with the master to become part of the software.
• Git Tag: Tags are a snapshot or reference to a commit on a branch. You can have multiple tags on a single branch to reference each release. 

Dev Community breaks down tags vs. branches in this article.

What are the Three Types of Version Control?

These are the three types of version control and their differences.

• Local Version Control System: Every project version is stored locally on an individual’s computer. There is no central repository, so team members must share the entire repository directly rather than syncing to a master repo. Local version control is most effective for solo projects or where teams don’t have to work simultaneously.
• Centralized Version Control System (CVCS): Uses a centralized server to host the master repository. When engineers commit changes, they update a branch on the centralized repo.
• Distributed Version Control System (DVCS): Each engineer downloads the entire repository and version history. Whenever they commit changes, they only update their local repository. When engineers complete their work, they push (upload) the entire repository to the centralized master.

Centralized and distributed version control systems both have a master repo; they just make commits and updates differently. GeeksforGeeks breaks down this topic with pros and cons here.

What is Version Control for Designers?

Version control for designers is any record of changes to a design output like prototype or a design system. It helps designers stay on track, go back to old versions of their design artifact or update their current work.

Why Designers Need a Version Control?

Traditional local-based UX design tools made it difficult for designers to collaborate. There was no centralized version control for designers to commit changes.

Cloud-based design tools changed that. Designers can now collaborate on the same project and sync changes to centralized cloud storage, usually hosted or linked directly to the design tool.

UXPin’s Iterations feature is an excellent example of version control for designers. Designers can retrieve, delete, and create iterations of a prototype. While you can’t merge iterations, this feature helps maintain a version history and allows designers to collaborate on the same design file simultaneously.

Version control also helps designers with onboarding or handoffs to new teams. New team members can view a product’s version history to see how the product has evolved and what the previous team has already tried.

Version Control for Design Systems

Designers also use version control for design systems by creating different versions for each component library update. Depending on the design tool, these updates will occur either automatically or manually.

If designers use image-based design tools, the design system team will need to maintain two copies of the system, one as a UI kit and the other as a component library.

In a fully integrated design system, designers and engineers sync to the same component library hosted in a repository. Any changes to the repository automatically update for all teams. 

A Fully Integrated Design System With UXPin Merge

UXPin Merge is an excellent example of a fully integrated design system with version control. Merge allows you to sync a component library from a repository to UXPin’s design editor, so designers and engineers use the same design system.

Merge components have the same interactivity and functionality as those hosted in the repo–giving designers the ability to create high-fidelity mockups and prototypes that accurately replicate the final product.

You can sync React components to UXPin directly using Git or other front-end frameworks via our Storybook integration. When the design system team makes changes to the repository, UXPin automatically sends an update to the design editor, notifying design teams of the new version.

This single source of truth allows designers and engineers to collaborate better while facilitating smoother design handoffs with little or no drift.

Using Branches and Tags in UXPin Merge

UXPin Merge gives designers two version control options:

• Branch: Prototypes will only automatically update when there is a change to the branch you’re using. Using the Branch option means you’re always working with the latest design system version.
• Tag: Prototypes will always reference the tag version unless you switch to Branch or another tag. Using the Tag option gives designers a choice to upgrade versions when they’re ready.

Designers can also use the “Latest” checkbox to update prototypes with the newest components automatically. This feature can streamline design workflows because designers don’t have to update prototypes manually.

With UXPin Merge and version control, teams can work independently with less non-productive communication, like “what’s the latest design system?” or “can you send me your design files.” This independence allows companies to scale and iterate quicker–speed-to-market being a crucial competitive advantage.

Tips for Implementing and Improving Version Control for Design

Build a Design System

Scaling design is challenging. For most organizations scaling design means hiring more designers. A design system allows organizations to build products faster with fewer designers.

Design systems also allow teams to implement an effective version control system that benefits design teams and the entire organization. With version control, designers, engineers, and stakeholders can view design system updates, what’s changed, and why.

This version control is especially important for monitoring the progress of a design system roadmap and keeping teams informed of the latest releases.

Incorporating Governance

A version control system is only effective with proper design system governance. Governance ensures a design system maintains its integrity with scheduled and controlled version releases.

With proper governance, each version release goes through processes and protocols to ensure new components and patterns meet certain quality and usage requirements.

Scheduling Releases

Creating a release schedule is crucial for managing version control effectively. The design system team can ensure that quality assurance and documentation updates are followed correctly with a strict release schedule.

A regulated release schedule also keeps teams notified of the latest version. For example, designers and engineers know to expect design system updates every Friday. The release schedule will also appear on the design system roadmap, managing expectations for teams and stakeholders.

Improve Version Control With UXPin Merge

Many design systems claim to have a single source of truth. But, unless you have a fully integrated design system with designers and engineers using the same component library, your version control requires manual updates for UI kits and design files.

With UXPin Merge, you can scale design without increasing your payroll while enhancing collaboration between design and development. See how Merge can optimize and automate releases for designers and engineers. Find out more about UXPin Merge.

The post Version Control for Design – Why Is it Worth Having it? appeared first on Studio by UXPin.

I decided to share my impressions on UXPin Merge Storybook integration and write about how it influenced the designer-developer collaboration in our team. 

Merge is a part of UXPin – that’s technology providing two main integrations with developers’ tools (Git and Storybook). It allows you to quickly prototype using ready UI code components that are React-based for Git integration, or any framework-based for Storybook integration. I tested the Merge integration with Storybook. 

The review was written by Roy S. Kim, the CEO, and Jacobo Moreno Quiroga – Front end engineer & Digital Content Designer from Fixel Inc., the Japanese UX/UI design consulting company specializing in Design Systems.

Design with interactive Storybook components in UXPin. Build products 10x faster and bridge the gap between designers and developers. Discover UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

UXPin Merge and Storybook integration 

I have both an engineering and design background, and I work on a daily basis on finding solutions to processes inside an application and then writing them in code. The designer part comes in handy when I need to consider and improve the user’s perspective.

This involves more than defining visual aesthetics, it requires considering how the application interface can be subtle enough for someone to not notice it so that they can focus on what they are trying to achieve in the app. 

I usually struggle with the back and forths between iterations of coding that aim to improve user experience. 

Those kinds of improvements are not the same as fixing the product because something doesn’t work. It’s more of intuitive work when a user reports that something feels off. Even if you apply all the design and UX good practices, the user could still complain, and they would be 100% right. This is where a coded Design System or an organized UI component library can help. If you have tested and polished the components approved for your Design System, then you can treat them as ready building blocks for new applications without spending too much time thinking or adjusting them. 

UXPin with Merge technology allows you to import all your Design System components stored in Git or Storybook to the design editor so that you can prototype with them right away. Thanks to this designers can use actual coded elements to speed up the prototyping. UXPin Merge’s motto is “The single source of truth” because what you see in the prototype is combining design with actual working code that developers use as well. 

UXPin – designing to coding 

Let’s start with just UXPin. Essentially, UXPin is a UI/UX design tool similar to Sketch, AdobeXD, or Figma. It’s similar to other competitors so you can get used to it very quickly. You can start with wireframing and end with advanced prototyping in this single tool. 

In most of the similar tools, there is a big difference between what the designer creates in the design tool and what happens in the dev environment, where the real working product is coded. Features like the inspect tab in Figma enable you to see roughly what the CSS behind a certain object would look like. However, this is not always an accurate depiction between what is designed and what is coded. 

Designers and developers essentially come from two different worlds when it comes to the tools used in their daily work. Trying to find a common language between them can lead to way too many meetings and back-and-forths. This might be the very issue that UXPin Merge aims to solve, by having “The single source of truth” which the whole team can treat as the ultimate place of the right components and documentation. 

The UXPin Merge approach 

Merge is UXPin’s technology. Essentially, what Merge does is that it brings coded Design Systems stored in Git repositories or Storybooks to UXPin. Hence, a designer can use real components in their mock-ups and prototypes.

These components are already coded in the repository, and the designer can access its different versions inside UXPin as needed. This way, the integrity of each component is never compromised. It minimizes possibilities for a designer to make mistakes and use elements that aren’t in line with the company’s standards. 

Once you have a Design System and repositories ready to go, you won’t be really modifying them often as their purpose is to store and unify all the versions of the possible elements to speed up the product development process and create governance.

Using UXPin Merge and the imported components, controls the design process as elements are predefined. The changes can be made without a problem but it must be done by developers, so that the chances for casual mistakes are pretty low. 

These limitations actually simplify the work of a designer. They can use fully interactive and prepared elements to focus on the most crucial part – user experience. Sure; color, padding, fonts, and other visual elements are important parts of the experience, but choosing every single little detail can slow down the process.

If all of that is already sorted out in the Design System and repositories, building prototypes with real code components gets easier and faster. Also, it helps keep the consistency even if the components get updated in code as the imported UI is in sync with the components stored in devs’ libraries. No need to worry that elements will be outdated and designers will have to redesign the projects. 

Connecting Storybook 

One of the UXPin Merge integrations I got to see was Storybook. Storybook serves as a sort of developers’ Design Systems to store all the coded UI. It is used by many companies, and it’s very flexible framework-wise as it provides support for around 15 of them.

Now, for teams that are not supported by developers,  setting up a Storybook project and placing all the components there may be a struggle. However, once it’s ready, it neatly holds and displays all the components that are in the Design System. 

UXPin Merge aims to bring what is stored and defined in Storybook to UXPin so that components made in whichever framework can be used for prototyping. The integration part is very simple; grab the URL of a published Storybook project to import the components to the UXPin library for designing. I tested it and it seemed to work perfectly with React components – all the elements behaved in the design editor just as they should. 

Thoughts for the future 

The design process including UXPin Merge in it can be visualized like this: 

UXPin Merge plays a big part in Step B since it provides production-ready UI-coded components that you can use to iterate faster when creating prototypes. With a defined Design System or a component repository, you really shouldn’t worry about Step A because you most probably already have the organized components. Still, there is a possibility that you need to adjust something within the coded components, especially if you are in the middle of creating your own Design System. 

With Step C, which is the build-up step of the application, the developers look at the Merge prototype to see how code components are put together, as well as what code corresponds to which part of the design. However, they won’t just copy and paste the whole code to build the product instantly – they will still need to adjust it so that the prototype becomes a product.  

UXPin Merge seems to be a great solution for rapid prototyping and keeping the consistency thanks to making the most of Design Systems. However, it appears that certain steps are still to be covered. 

To some extent, the work of designers is limited as they mostly can use pre-prepared components, however, it saves time and prototyping with code components brings the world of design and development together. 

Want to try out the integration? Sign up for a 14-day trial!

The post Storybook-UXPin: Review of Merge Integration 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.

Key players:

• BBC
• The Guardian
• IBM

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

Create beautiful layouts without designers

Take UI components directly from Git repo, Storybook, or through NPM and design production-ready prototypes.

Bring code to design

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 8 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.

UXPin Merge and Storybook make product development easier than ever

Find more Storybook examples by visiting Storybook’s page. Companies like Audi, Lonely Planet, Wix, and Salesforce Lightning have public design systems you can explore.

Once you integrate these tools, you can use your Storybook components to build and test interactive prototypes. Since both tools take a code-based approach, your designers and developers can work together to create your products more efficiently than ever.

Storybook isn’t the only tool you need to build successful digital 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.

What is Atlassian Design System?

Atlassian Design System, ATL for short, is a design system which mission is to create simple, intuitive, and beautiful experiences for their end-users. Atlassian’s products include Jira, Trello, and Confluence, so their design system needs to work across those products plus serve for people who built internal product and more.

Scale your design system with UXPin Merge, unique technology that makes it easy to use a coded design system for prototyping. Bring React, Storybook or npm components to a design tool and keep designers and developers in sync. Discover UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

How Atlassian Design System Was Built

When Atlassian expanded their focus on design in 2012, Jürgen Spangl was hired as the new Head of Design. One of the first projects he initiated was creating the Atlassian Design Guidelines (ADG) – their new internal design system.

At the time, they faced several challenges common to scaling a design practice:

• Design inconsistency – For example, 45 different types of dropdowns.
• Insufficient tooling – The team needed more powerful design tools to scale their work across multiple products.
• Redundant questions – Atlassian designers wanted to spend more time on core problems and less time answering the same questions (e.g. which button to use).

Nathan Curtis once said that “a design system is a product serving other products”. Atlassian’s design system is certainly one of their most ambitious products, created from a need to solve complex problems.

To explore Atlassian’s journey from inconsistency to harmony, we spoke with Jürgen Spangl (Head of Design) and James Bryant (Lead Designer) about the creation, governance, and evolution of their design system.

Jürgen Spangl, Head of Design at Atlassian.

James Bryant, Lead Designer at Atlassian.

Creating and Adopting the First Version

Inspired by Apple’s Human Interface Guidelines , Atlassian decided their design system needed to be based in code while maintaining ease of use.

People from multiple teams contributed to the process – a dedicated team wasn’t formed at first so that the design system wouldn’t be created in isolation. The decision paid off since it resulted in design systems champions embedded across the company.  

“Instead of creating consistency for the sake of it, we wanted our design system to create a more harmonious user experience,” says Jürgen. “We wanted to equip everyone to make better design decisions – not just designers.”

The process, of course, was not without challenges.

“Early on, we weren’t sure how to document the design system at scale. We tried using Confluence, using embedded iFrames in Confluence, a Bitbucket repository,” says Jürgen. “It wasn’t until a ShipIt hackathon session that one of our designers turned our existing UI toolkit (known as AUI) into a Living Style Guide coupled to the code.”

Planning for the first version of ADG in JIRA.

With a technical framework in place, the design systems team also needed to create a unified design language for the overall brand and each product.

“It’s never easy to align multiple teams on a path forward on the design language,” says Jürgen. “Do you create one direction or several smaller directions for each product?”  

To define its design language and create all the patterns and components, the team followed a two-stage process:

• Every month, the team would meet to work on ADG. The fast decisionmaking and momentum helped the team create many new patterns with 70-80% completeness.
• During the following week, the team would then spend small chunks of time refining the patterns and codifying them into ADG.

The first iteration of ADG was released in June 2012 to govern its products. To allow for careful iteration, the team used a staged rollout and launched ADG first to Bitbucket, then Confluence and JIRA.

Atlassian Design Guidelines 3.0.

Supporting and Governing the Design System

Now 5 years later, Atlassian Design has grown to almost 200 people while the design system governs the brand and its 12 products across multiple devices, platforms, and marketing properties.

The company has since built a dedicated ADG team of 18 full-time employees: 5 designers, a writer, a project manager, and 11 developers. To maintain a high level of technical proficiency, an engineering team was embedded into the overall design organization.

Design space in Atlassian Sydney.

“A coding background is a huge benefit for designers who want to join our team,” James says. “They also need a strong understanding of prototyping tools and be able to work with developers to ship their work quickly. Finally, they must understand how their work multiplies across different contexts, products, and teams.”

When it comes to contributing to the design system, the workflow is a two-way open source model:

1. The ADG team is regularly exploring changes and consolidations to the design system. Once they’ve done the initial research, the team converges to discuss specs and requirements. Program managers then work with other product teams to align on the design system changes, roll out the changes, and monitor feedback.

2. Product teams can also suggest changes to the design system. The process is made much easier since each product has its own ADG representative to collaborate with a member of the design systems team.

Change requests are managed in JIRA and Confluence. Updates are pushed live to AtlasKit (based in React), which acts as the source of truth for design patterns and code components. The ADG team also maintains a library of UI assets in Sketch for all designers. Meanwhile, the ADG website describes the logic and guidelines around how to use all the patterns and components

Evolving the Design System

“Every 5-7 years, you probably need to revamp your design language completely because of new trends and technologies,” says Jürgen. “The world is constantly changing.”

The team works in 2-week sprints to ship iterations within days or weeks to customers. Larger changes (like revamping a color scheme or set of UI patterns) require more time.  

JIRA using ADG 3.0, the latest version of the design system.

Luckily, as James points out, embedding designers in product teams (and vice versa with developers in design teams) helps build consensus more quickly for changes to the design system.

“It’s very hard to scale when you need to talk to all designers for every single change,” James says. “We bring all the champions into large design critiques to understand whether our ideas and proposed changes affect their current projects or down the line. They may learn something from our way of thinking that they can then apply back to their own work.”

To measure the success of design systems updates, the team triangulates data from several sources:

• Opt-in and opt-out in products for changes to the design system
• Changes in NPS scores for products after design system updates
• Qualitative and quantitative feedback from testing iterations with UserTesting and in-person sessions

Now in its third version with strong adoption and instrumentation in place, one of the next goals of ADG is to make back-end services more consistent.

“A really good example of that is how we’re improving ‘@mentions’ for users in our products,” says James. “Design guidelines and front-end components make the experience feel more coherent, but you can also make back-end processes more consistent in a way that improves performance. Now we’re exploring how we can improve that level of platform services.”

Attlasian’s Design System Summary

When you consider the nature of Atlassian’s products, the stakes are almost too high to not have a design system in place.

“We’re changing the tools people use to get their work done,” says James. “I don’t think there’s anything more frustrating or frightening than having changes slow you down since that threatens your efficiency and livelihood.”  

A design system is more than just a style guide or pattern library — it’s the blueprint for product development. By rooting the design patterns and code components to a common language, ADG gives room to innovate without forcing users out of their comfort zone.  

“Some tension between the product and ADG team is perfectly healthy,” says Jürgen. “Product teams don’t just give in to ADG without good reason, and the ADG team doesn’t accommodate every change requested. That balance really helps drive us forward in the enterprise space.”

Interested in being a designer at Atlassian? To see available positions, check out Atlassian Design Careers.

Keep your design and development teams in sync with UXPin Merge, all-in-one design technology that helps you design, comment, and hand over your prototypes to development without risking painful back-and-forth. Discover UXPin Merge.

The post The Atlassian Design System – Creating Design Harmony at Scale appeared first on Studio by UXPin.