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
(…)UXPin Blog — Design Studio
-
-
What Actually Constitutes Design Language?
Visual communication is exceptionally complicated. It’s diverse, boundless, and relentless. A design language establishes principles and constraints that induce the clarity, consistency, and cohesion necessary for designers to communicate with end users. Developing this design language is a time-consuming undertaking requiring feedback and collaboration from multiple departments and stakeholders. The final result will allow an
(…) -
Design System Documentation in 9 Easy Steps
Design systems provide you with a complete set of standards to enhance and manage your design efforts – from beginning to end. But in order to build and maintain a functional design system, first, you’ll have to commit time and effort before enjoying the benefits of a well-oiled design machine. Looking for a design system
(…) -
These Storybook Examples Will Inspire Your Component Library
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
(…) -
7 Great Design System Management Tools
Design system tools help drive adoption while making it easier to scale and maintain. With so many options on the market, how do you know which one is right for your product? Having worked with design tools for over a decade, we’ve put together seven of the best design system tools–including solutions for both: designers
(…) -
Design System Engineer – Job Description, Responsibilities, and Skills
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
(…) -
What is a Component Library, and Why Should You Use One for UI Development?
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: Share a single source of truth between designers and engineers. Use UXPin
(…) -
What Is MUI and What Do You Need to Know About It?
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
(…) -
Ant Design 101 – Introduction to a Design System for Enterprises
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: 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,
(…) -
Breaking Down Silos to Improve Digital Product Development
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
(…) -
How Storybook Helps Developers With Design Systems?
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.
-
Design System Contribution Model – How to Set it Up
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
(…) -
Code or Design – Which is a Better Source of Truth?
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
(…) -
Multi-Brand Design System – How to Get Started
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
(…) -
What Are Design Tokens?
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
(…)
UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.
Start your free trial