To build a Tailwind Design System in UXPin, begin by leveraging the built-in Tailwind UI library, customizing foundational components for brand alignment. Use UXPin’s AI Component Creator for unique elements, set global and local themes for consistent styling, and add icons with Heroicons and patterns with Hero Patterns. Document each component to maintain accessibility and
(…)UXPin Blog — Design Studio
-
-
Design System Adoption – 3-Step Strategy
“The success of a design system hinges on its adoption. Until you have users using your product, it’s not successful.” – Amber Jabeen. A while back, UXPin hosted Amber Jabeen, DesignOps Director at Delivery Hero MENA (talabat), for a webinar titled: Enterprise Design System – How to Build and Scale. This article covers the second
(…) -
13 Best Design System Examples in 2024
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 thirteen most popular design systems that you can learn a lot from. Those and other design system examples can
(…) -
Design System Checklist for 2024
A well-structured design system checklist guides your team through each essential step of creating a design system, ensuring that nothing gets overlooked—from auditing current design patterns to standardizing elements like typography, color palettes, and spacing. It serves as a roadmap that helps you prioritize what’s most important, streamline collaboration between designers and developers, and ensure
(…) -
How to Get Non-Designers to Use and Support the Design System?
Getting stakeholder and organizational support is crucial for ongoing investment and the future success of your design system. The DS team must prove that employees use the design system and that it delivers a positive return on investment. In our January 2022 webinar, Defending Your Design System, Carola Cassaro talked about the challenges DS teams
(…) -
AI Design System – Are We There?
AI is set to revolutionize the way design systems are created, managed, and scaled. According to industry experts, AI’s efficiency in automating repetitive tasks like code generation, component resizing, and documentation can significantly reduce the time required to build and maintain design systems. Let’s see if we’re ready to implement Design Systems created and managed
(…) -
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 Naming Conventions – How to Set Them
Design system naming conventions are the standardized rules and guidelines used to name elements within a design system. This includes naming design tokens, components, patterns, styles, and any other elements that are part of the design system. A well-defined naming convention is crucial for maintaining clarity, consistency, and ease of use across both design and
(…) -
Design System Tips from Developer’s Point of View
Today we’re sharing a guest post by Nick Moore that originated from collaboration with StackBlitz. Build code-backed prototypes and open them in StackBlitz in one click. Request access to UXPin Merge. If you know how to ride a bike now and wait five years to ride one again, you’ll likely do just fine once you
(…) -
What is npm?
Many programming languages use packages to build and scale websites, software, and other digital products. These packages allow engineers to extend a project’s functionality without writing and maintaining additional code. This article will explain these terms from a designer’s perspective, so you get a basic understanding of how packages work and why engineers use them.
-
Design System Governance – Scale Your Design
Some team members despise design system governance. They see it as a roadblock to rapid growth, creativity, and flexibility. However, design system governance can foster scalability and creativity if properly implemented while maintaining design and usability consistency. Good design system governance prioritizes users before growth and profits. Company culture also plays a significant role in
(…) -
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. Announcement: UXPin’s design
(…) -
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
(…)
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