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.

Are you creating a React app or website? If you are, you can use real React components in prototyping. How to that? You will find an answer in this article.

Key tools:

• UXPin Merge
• Framer
• Storybook
• React-Proto

Build React prototypes with your dev’s components coming from Git, Storybook, or npm. Try UXPin Merge and assemble stunning, production-ready layouts 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

UXPin Merge

UXPin’s Merge technology allows you to import code components from a repository into the design process. You can import your product’s design system or an open-source library to build high-fidelity, fully functioning React prototypes.

With Merge, you can prototype cross-platform applications from wearables to native apps, web applications, and even TVs. You can test prototypes in the browser or via UXPin Mirror for iOS and Android applications.

There are three ways to import code components into UXPin using Merge:

• The Git Integration enables you to import React components directly from a Git repository giving you full access to Merge’s features.
• Merge’s Storybook Integration allows you to connect any Storybook, providing access to more front-end technologies, including React, Vue, Angular, and more.
• The npm Integration uses the Merge Component Manager to import individual UI elements from open-source design systems on the npm registry.

Key features

• Version Control (Git Integration only): any changes to the design system’s repository automatically sync to UXPin and notify designers of the latest release.
• Patterns (Git Integration only): grow your library by creating new patterns using design system components or incorporating elements from other design systems.
• Drag-and-drop workflow: drag components from UXPin’s Design Libraries onto the canvas to create user interfaces. Adjust pre-defined properties via the Properties Panel to change styling, interactions, etc.
• Collaborative: product teams can collaborate with stakeholders via UXPin’s Comments–even if they don’t have a paid UXPin account.
• Spec Mode & Documentation: design handoffs are smoother with Merge because developers already have access to the same repository. They can use Spec Mode to inspect properties, measure distances, copy production-ready component CSS and JSX (Git Integration only), and view the product’s Style Guide and Documentation.

Pricing

Starts from $119 per month when paid annually.

Pros and cons

Pros:

• Single source of truth: With UXPin Merge, you can import and use the same React components in the design process as devs use for the final product, effectively bridging the gap between designers and developers.
• Real data: designers can incorporate actual product data using JSON, Google Sheets, or CSV. They can also capture user inputs using Variables and use that data to populate a profile account or provide a dynamic, personalized user experience.
• Interactive prototyping: using React components for prototypes means designers can create interactive replicas indistinguishable from the final product.

Cons:

• Limited to Javascript: UXPin Merge only works with Javascript libraries and frameworks. 
• Technical setup: product teams will need technical assistance to make their component library’s repository compatible with Merge; however, UXPin has a boilerplate and offers technical support to make this easier. Designers can use the built-in libraries, including MUI, Material UI, Ant Design, and Fluent UI, which don’t need any configuration.

Storybook

StorybookJS is a UI development environment allowing devs to build components in isolation. Developers, designers, and other stakeholders can visualize different states of every UI element, creating a component-driven development environment. It supports various frameworks, including React.

While Storybook is excellent for internal prototyping and component-driven development, it lacks tools and features for user testing. A great workaround is using Merge’s Storybook Integration to import your organization’s Storybook projects for prototyping in UXPin.

Storybook and UXPin Merge combined effectively bridge the gap between designers and developers while creating a single source of truth across the organization.

Key features

• Component Stories: Write Stories to display different states of your components.
• Addon ecosystem: Extend Storybook’s capabilities with a robust ecosystem of plugins.
• Component-driven development: Develop one UI element at a time, viewing all its properties, interactions, and variants.
• Documentation: Auto-generate documentation based on your stories and components.
• Automated testing: Run multiple tests before release to ensure components meet code syntax, design principles, accessibility, and other custom requirements.

Pricing

StorybookJS is open-source and free to use. However, some addons or integrations might have associated costs.

Pros and cons

Pros:

• Framework agnostic: While prominent in the React community, it supports various Javascript frameworks.
• Rich ecosystem: A wide variety of addons and integrations allow you to tailor Storybook to your needs.
• Collaborative: Designers, developers, and stakeholders can collaborate, ensuring consistent UI/UX.

Cons:

• Technical expertise: Storybook is a developer tool, meaning you must have programming and Javascript skills to use it.
• Configuration: Depending on your project’s complexity, it may take time to set everything up correctly.
• Learning curve: Requires understanding of component structure and the framework you’re working with.

Framer

Framer is a no-code design tool for React websites and web apps. The platform’s latest AI feature lets you create responsive starter templates with a few keywords.

Key features

• Code-backed design: Design with React components, streamlining the transition from prototype to development.
• Figma plugin: convert Figma designs to HTML for use in Framer–you must still convert this HTML to React.
• Code-like animations: add Javascript-like animations and effects without writing any code.
• Production-ready code: developers can export code from Framer to build React websites and web applications.

Pricing

Starts from $5 per month per site (project) when paid annually.

Pros and cons

Pros:

• Interactive design: Design with code components for realistic interactions.
• No-code development: Create production-ready websites without writing any code.
• Starter templates: Framer offers a vast library of website and landing page templates to get you started–some of these are third-party paid templates averaging $29-$99.

Cons: 

• Cost: Framer is cost-effective for small projects, but its per-site pricing model gets expensive when running multiple sites. If you purchase starter templates, your costs increase.
• Web-only: Framer is a no-code website design tool, limiting prototyping scope–i.e., unable to design cross-platform applications.
• Can’t import components: Unlike UXPin Merge, you can’t import design systems or UI libraries.

React-Proto

React-proto is a prototyping tool designed specifically for React developers. It provides a visual interface for creating React components and their relationships. Developers can drag and drop UI elements to establish parent-child relationships between components, designating state location and prop relationships without writing any code.

Key features

• Component tree visualization: Visualize your entire application’s structure and components’ relationships.
• Interactivity: Interact with your prototype and see changes reflected in the visual tree.
• State management: Designate locations for your state and understand the flow of data.
• Code Export: Translate your visual design into functional React code to begin front-end development.

Pricing

React-proto is open-source and free to use.

Pros and cons

Pros:

• Faster prototyping: React-proto’s drag-and-drop interface lets developers edit components and prototypes faster than writing code.
• Cost-Effective: Being open-source, it’s a cost-friendly option for all developers and designers.
• Code Generation: Translating design to code is straightforward, reducing the barrier between design and development.

Cons:

• Requires technical skills: React-proto is not a designer-friendly tool. It requires technical skills, including in-depth React experience, to operate effectively.
• Limited features: React-proto offers few features as an open-source tool and is unsuitable for user testing.
• No support: React-proto does not offer support or onboarding outside of its Github community.

Prototype React Websites and Applications in UXPin Merge

While there are several great React prototyping tools, UXPin is the only platform offering a designer-friendly, familiar work environment. UXPin looks and feels like any other design tool but increases prototyping scope by enabling designers to prototype using code components, including React, Vue, Angular, and more.

Build production-ready layout with React components from Git repo, Storybook, or imported npm package. Assemble UI and increase your productivity. Discover UXPin Merge.

The post Best Prototyping Tools that Use React 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.

MUI (Material-UI) is a widely-used React UI framework built on Google’s Material Design principles, empowering organizations with customizable components and styles to align with brand standards. 

This article delves deep into its MUI for Figma’s capabilities and limitations. We also explore the alternative approach of integrating MUI with UXPin’s Merge technology, including a real-world example of how a startup redesigned its product using MUI React components in the design process.

Key takeaways:

• MUI (Material-UI) is a React UI framework based on Google’s Material Design, allowing customization to match brand guidelines.
• While MUI for Figma provides a design kit, it lacks the interactive features of MUI’s React library, potentially leading to design inconsistencies.
• It also can lead to performance issues due to its size and dependency on plugins like Token Studio.
• UXPin’s Merge technology offers an alternative, allowing designers to prototype using actual React components, bridging the gap between design and development.
• TeamPassword successfully utilized UXPin Merge with MUI to enhance its product development workflow, demonstrating the efficiency of a code-to-design approach.

Prototype and testing using MUI’s React library within the familiarity of a design tool using 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 MUI?

MUI (Material-UI) is a popular React UI framework that provides a set of components and styles based on Google’s Material Design. Organizations can use MUI’s theming features to customize the UI library to meet product and brand specifications.

Why would you use MUI?

MUI gives organizations a comprehensive design system to build products without designing from scratch. The product team can create a custom design system by making a few tweaks and adjustments, potentially saving years of R&D.

MUI is also useful for developing new products. A product team or startup can use the Material UI library without making any theme changes to build an MVP for testing. Utilizing the design system enables the team to design products quickly, with a comprehensive library optimized for user experience and accessibility.

How Much Does MUI for Figma Cost?

There is a free community MUI for Figma library, but it offers limited components and no support. If you want the entire UI library, you must purchase an MUI for Figma license on MUI’s website. As of August 2023, a license for one editor is $79. If you have a large team, this can add up quickly, and you must update the license annually.

MUI’s official documentation states, “The number of licenses purchased must correspond to the maximum number of editors working concurrently in a 24-hour period. An editor is somebody contributing changes to the designed screens that use the UI kits. No licenses are required for viewing the designs.”

You can avoid these extra fees and prototype using fully functioning MUI React components in UXPin. MUI is one of UXPin’s built-in design libraries, which comes standard with all Merge plans. Read more about designing with MUI in UXPin using Merge technology.

How do You Integrate Material UI in Figma?

You can open the file from the community page to use the free Figma MUI library. Click the Open in Figma button to start using MUI in a new project.

If you are using the full library, you’ll need to follow these instructions.

How to Import MUI for Figma

• Navigate to your drafts or organization in Figma.
• Click on the “Import” button to import the MUI file.

How to use MUI in Figma

There are two methods for working with the MUI library in Figma:

Design directly in the MUI file: This method is fine for the free version, but MUI doesn’t recommend this for the full library due to the file’s size.

Use the MUI file as a library: This is the preferred method for using MUI in Figma. To do this:

• Go to the assets panel in Figma.
• Click on the library icon.
• Publish the MUI file as a library.

How to customize the MUI library in Figma

There are two ways to customize the colors in the MUI library:

1. Token Studio Plugin: This method is faster and allows for composition, meaning you can use one color to generate another.
2. Figma’s Native Tokens: If you prefer not to use third-party plugins, you can utilize Figma’s native tokens to make color changes.

How to change global settings with Token Studio

The Token Studio plugin lets you quickly change global settings across all components, such as border-radius or font family. For example:

• To change the global border radius, open the plugin, navigate to the “Border radius” group, and edit the value.
• To change the font family, navigate to the “Typography” group in the plugin and adjust the font settings.

How do you enable Figma MUI Dark Mode?

To enable dark mode for the entire MUI library using Token Studio:

• Open the Token Studio plugin.
• Check the box for the group you want to enable (e.g., “Dark Mode”).
• Optionally, change Figma’s color mode to dark mode to see the changes.

What are the Challenges and Limitations of Figma MUI?

MUI’s Figma library is excellent for UI design and static prototypes but lacks interactivity for accurate testing. Here are some key challenges designers experience when using Figma’s MUI library.

MUI for Figma is a UI design kit–not an interactive design system

While the Figma MUI library will save you many hours of designing from scratch, it doesn’t provide MUI’s interactions. Designers must still set these up in Figma for every project.

Creating interactivity for Figma components will never align with MUI’s React library devs use. The components will look similar, but designers must follow MUI’s documentation closely to ensure they implement the correct actions, states, and animations.

Editable components

The design system team can manage MUI components from the main library file to prevent unauthorized changes; however, designers can detach instances and adjust UI elements, resulting in design drift and inconsistencies.

Dependency on plugins

MUI for Figma requires plugins like Token Studio to function correctly. Plugins can introduce another layer of complexity and potential compatibility issues, and Token Studio is a premium feature, adding to monthly costs.

In a “Getting Started” tutorial, MUI notes there may be syncing issues between the Token Studio plugin and Figma’s native tokens, potentially leading to inconsistencies if not managed properly.

Performance issues

Due to MUI’s large Figma file size, design teams might experience performance issues, especially when working directly inside the library file.

What is the Alternative to Using MUI in Figma?

A better way of designing with the MUI library is to use UXPin’s Merge technology to build prototypes using React components inside the design editor. 

There are two ways you can use MUI in UXPin:

• Using the built-in MUI library
• Connecting your custom MUI library

How to use UXPin’s built-in MUI library

UXPin offers several built-in Merge libraries, including MUI, Fluent UI, Ant Design, MUI, Material UI, or UXPin Boilerplate. These are all React libraries featuring interactive components from a GitHub repository. 

The benefit of using UXPin’s MUI library is that styling and interactivity are “baked in” to each component, so designers never have to set these up. They also can’t detach components from a master instance and make changes, meaning they must use the design system as defined in the repository.

They simply drag UI elements from the Design Libraries sidebar onto the canvas and adjust redefined React props via the Properties Panel.

These built-in libraries are excellent for prototyping because designers only have to focus on building user interfaces and adjusting predefined MUI properties–i.e., styling, variants, states, navigation, etc.

If you want to use a custom MUI design system with your brand colors and styling, it’s better to use one of Merge’s other integrations.

How to sync a custom MUI library to UXPin

UXPin’s Merge technology allows you to import any design system, including a themed MUI library, via two integrations:

• Git Integration (React only): Connect any React library, giving you access to all Merge features, including Patterns, Version Control, and JSX presets.
• Storybook Integration: Works with any Storybook, including React, Vue, Angular, Ember, and other front-end technologies.

These two integrations require technical input to set up, but once complete, Merge will automatically sync updates to UXPin, so designers and engineers always use the same component library–creating a single source of truth across the organization.

How to use MUI components in UXPin

Whether you use UXPin’s built-in library or a custom MUI design system, the workflow is the same. You can find the library under Design System Libraries to the left of the canvas.

Select the Merge design system, and the library’s components, colors, typography, and assets appear in the left sidebar. Click or drag UI elements onto the canvas to build user interfaces.

“UXPin Merge enabled us to perform this “snap-together” type design. We provide product teams with components they can drag and drop to build user interfaces.” – Erica Rider, Product, UX, and DesignOps thought leader.

Merge makes design more accessible to non-designers

Design tools are challenging for non-designers. There’s a learning curve that many developers don’t have the time to master. They typically revert to what’s familiar, writing code.

While code prototypes are excellent for testing, they’re time-consuming and costly. Developers end up releasing products and features with usability issues and other inconsistencies.

How TeamPassword Used Merge and MUI to Redesign and Scale fast

Security startup TeamPassword experienced this challenge before switching to UXPin. The two-person developer team didn’t have any design skills, and to move fast pushed updates with minimal testing. They also used an outdated tech stack but, with limited resources, couldn’t simply rebuild the product from scratch.

TeamPassword doesn’t have a UX designer, so the engineers must design, prototype, test, program, QA, and ship everything themselves.

The startup decided to switch to MUI and React for the product’s redesign. They wanted a solution to prototype and test using React components without writing or editing code every time. Without any design skills, they needed a tool that provided a simple design workflow.

UXPin’s Merge technology stood out as the obvious choice. TeamPassword’s developers synced their custom React MUI library, including product-specific patterns, templates, and user interfaces, to UXPin using the Git Integration so they could test new products using interactive prototypes.

Using Merge and MUI revolutionized TeamPasswords product development workflow, making the two-person developer team highly effective and efficient from design to final product.

Why Code to Design is Better for Prototyping With MUI

Figma design systems are great for UI design and basic prototyping, but designers must rely on external tools and plugins to build interactive prototypes for accurate testing. This outdated design-to-code workflow is time-consuming, costly, and inefficient.

UXPin’s code-to-design workflow brings MUI’s React components into the design process, offering many benefits for product teams:

• Bridging the gap between design and development with a single source of truth defined by code.
• Seamless handoffs with less documentation and explanation.
• Defining properties in the design system repository eliminates drift and inconsistencies.
• No designing or programming from scratch results in faster time to market, making organizations more competitive.
• Centralized design system management requires fewer resources and removes many operational burdens, making Ops teams more effective.

Ready to build your first interactive prototype with Merge technology? Visit our Merge page for more details and how to request access.

The post Is MUI for Figma the Best Solution for Designers? [+ Alternative Inside] appeared first on Studio by UXPin.

Date pickers are some of the most familiar UI patterns in digital product design. UX designers use date pickers on websites, applications, games, enterprise software, operating systems, and more.

Designers must understand how these date pickers will work across screen sizes, operating systems, devices, etc., to test the impact on the product’s aesthetics, functionality, and overall user experience.

UX designers can’t build date pickers using traditional image-based design tools…but they can with UXPin Merge! This technology allows you to import a fully functional date picker from Git repository or npm package, as well as bring one from Storybook.

The date picker that you will sync to UXPin will behave like a date picker in the end product. No need to link static artboards to create interactions! Request access to Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

What is a Date Picker?

Date pickers are UI patterns that allow users to choose a specific date, time, or combination of both–for example, selecting a date of birth. The purpose of these date pickers is to streamline date capture while ensuring format consistency.

Why are Date Pickers Necessary?

People worldwide use different date formats. For example, the United States places the month before the day (mm/dd/yyyy), whereas the UK uses the day, month, year format. 

Although these differences seem subtle, a database cannot distinguish whether the user uses the US or UK format. It can only decipher a date correctly in one or the other format. Let’s look at October 1, 2022, numerically:

• US: 10/01/2022 (10 January 2022 in the UK)
• UK: 01/10/2022 (January 10, 2022, in the US)

In this example, the database would interpret each entry as January rather than October.

Users can also enter this same date multiple ways and use different separators. Here are a few examples:

• Oct 1, 2022 
• Oct 1, 22
• 1 Oct 2022
• 1 Oct 22
• 10-01-22 / 01.01.2022 / 10/01/22 
• 22/10/01 / 2022/10/01

Date pickers eliminate ambiguity and ensure systems receive a consistent, accurate format by users selecting the day, month, and year individually.

Date Picker UI Design for Mobile vs. Desktop

Mobile Date Picker

It’s important for designers to recognize how mobile operating systems like iOS and Android display date pickers to users. The native iOS picker uses an infinite scroll UI, while Android applications use a calendar view displaying the entire month.

A mobile date picker aims to make it accessible to a user’s thumb reach. iOS allows users to scroll using their thumb, while Android’s UI is optimized for thumb taps.

While you can use a custom date picker from your design system, using the native options creates familiarity and reduces the product’s learning curve. If you decide to use native date pickers for mobile apps, make sure you’re not creating usability issues, as we pointed out with iOS.

Desktop Date Picker

Most desktop websites and applications use calendar date pickers. The extra space and mouse make it easy for users to choose a date with just a few clicks. Many products also provide an input field for users to enter a date manually.

Numerical date input fields work well on desktops too. UX designers must include a placeholder and helpful error messages to guide users toward the correct format.

5 Types of Date Picker UI Design

Numerical Input Field

The most basic date picker is a numerical input or text input field. These fields might include a modal popup with a date picker, or users must type out the date with separators.

Some products offer users the option to type the date or use a modal, like this example from US Web Design Systems.

Placeholders must show users how to format the date, i.e., MM/DD/YYYY. UX designers can take this further by applying an auto-format for the date where separators appear as users complete the month and day. Designers can also add helper text below, so users know how to complete the form. See the example.

Dropdown Date Selector

Designers commonly use dropdown date-selectors for websites and desktop applications. These date pickers work well with a mouse, but with little space between options, they might be challenging for mobile device users, especially those with large fingers and thumbs.

Dropdown selectors take up more space than a single input field with a calendar modal. And they’re more time-consuming to complete because users have to select the day, month, and year individually.

Dropdown selectors are best for desktop applications and websites but might create bottlenecks for onboarding forms.

Scrolling Date Pickers

Scrolling date pickers work similarly to dropdowns as users choose a day, month, and year separately. These scrollers are most useful on mobile devices where users can use their thumbs to scroll to a day, month, and year.

Many users complain that scrolling date pickers are not suitable for dates far in the future or past. Scrolling through decades takes time and can be challenging for users, especially those with hand or finger disabilities.

The iOS default date picker is the most common example of a scrolling date picker; however, Apple often uses a calendar picker for dates far in the past or future.

Calendar Date Picker

Calendar UIs are the most commonly used date pickers. These calendar date pickers work well across operating systems, devices, and screen sizes.

As people are used to seeing calendars in physical and digital formats, these date pickers create familiarity for users, reducing cognitive load and the product’s learning curve.

Calendar UIs are especially helpful for date range pickers, allowing users to visualize their choice and make quick adjustments.

Timeline Pickers

Timeline pickers work well for selecting a short date range (up to a week) or timeframe (a few hours). Timeline UIs are especially useful on mobile devices because users can drag indicators to choose a start and end date. 

While you can use timeline pickers for dates, they’re best suited for selecting a time window.

Date Picker UI and UX Best Practices

Date Picker Accessibility

Poorly designed date pickers can be frustrating for users with disabilities and screen readers. Keeping things simple is crucial to ensure date selection is accessible to all users.

Here are some recommendations for making date pickers accessible:

• Use explicit labels for your date fields. For example, if someone is booking an appointment, label the field Appointment Date or Choose an Appointment Date so screen readers and users with cognitive disabilities know what date you need.
• Include format hints in the placeholder and above or below the input field. This validation makes date pickets more accessible while benefiting all users with clear instructions.
• Users must be able to use a date picker using touch, a mouse, screen readers, and a keyboard. UX designers must test date pickers to ensure all users and devices can interact with the UI and choose a date effortlessly.
• Separating day, month, and year fields make it easy for screen readers and keyboard users to enter dates. UX designers can also include a button or calendar icon for users to complete their selection using a calendar, a win-win for all users. (See this date picker example from USWDS).

Date picker accessibility resources:

• Collecting dates in an accessible way by Hassell Inclusion
• Date picker by US Web Design System
• General accessibility guidance for forms by US Web Design System

Show Current Date

It is important to show users the current date and their selection on calendar pickers. Highlighting the current date gives users a reference for their choice, which is especially important for booking travel and appointments.

Differentiating between the current date and the user’s selection is crucial to avoid confusion. Material UI clarifies this distinction with an outline for the current date and a shaded background for the selected date.

Block Unavailable Dates

Choosing a date only to find it’s unavailable is one of the most frustrating user experiences. Users have to start their selection over and try until they find availability. Blocking out unavailable dates allows users to choose without returning to the calendar.

Provide Additional Critical Decision-Making Data

Many travel booking apps, including Booking.com and Airbnb, show the price per night below each date so users can find the best rates. This information creates a positive user experience because the product helps users save money.

Reduce Unnecessary Data

Calendar user interfaces can be busy and overwhelming. Designers must reduce as many UI elements, lines, and other content to make the calendar easier to read and complete tasks. For example, users don’t need to see the days of the week when choosing their date of birth.

UX designers must also use solid backgrounds for modal overlays to block out content behind the calendar, which may confuse users.

How to design a date picker in UXPin

UXPin is an advanced prototyping tool used to create interactive, dynamic, high-fidelity prototypes. Where most prototyping tools require designers to create multiple artboards to prototype just one interaction, UXPin enables designers to use States, Variables, and Conditions to create fully-functioning pages.

To insert a date picker in UXPin, start by clicking on the “Search All Assets” search icon (command + F / Ctrl + F) in the vertical toolbar.

Next, search for “date” or “calendar” using the input field.

Several options will be available under the “Components” heading, some of which are best for touch users and others for keyboard users. “Input calendar”, however, provides a calendar for touch users and an input field for keyboard users, offering the best of both worlds and is perhaps the simplest solution overall.

Styling the date picker Component

UXPin Components are already designed to offer great user experiences, but you’ll probably want to style them to match your brand’s visual identity and app/website’s aesthetic. To do this, use the Properties panel on the right.

If you’re using UXPin Design System Libraries (especially Text Styles and Color Styles), you can utilize the Styles that you’ve already established to help maintain some degree of visual consistency between the date picker Component and the rest of your design.

To customize your component, select the Layer that you’d like to style, navigate to your UXPin Design System Library after clicking on the “Design System Libraries” icon (⌥ + 2 / alt + 2), and then select the Style that you’d like to apply to the Layer.

Using real Components instead

Rather than reinventing the wheel by inserting and styling the same Component over and over again, designers can use production-ready Components that’ve already been built by developers. You can pull them from Git, Storybook, or NPM (no coding required) and they’ll look and work just like the real thing (because they are). Learn about UXPin’s technology that makes this happen. Request access today.

The post How to Design a Date Picker that Makes Your UI Shine 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.

Here’s a designer-friendly way of bringing UI code components into UXPin’s editor. It’s our npm integration that makes Merge accessible to teams who lack active engineer’s support.

Try npm integration to speed up interactive prototyping and stay 100% consistent with the final product. The npm components will behave like a lego bricks that you can drag and drop to build advanced prototypes. Discover UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

Revolutionize Your Design Process with UXPin Merge

UXPin with Merge technology allows you to create a new level of fidelity and interactivity in  prototypes, smoothen design handoff, and unify designers and devs’ work with a single source of truth. It truly streamlines product development process.

Move Away from Static, Change to Fully-interactive Design

Gone are the days of static prototypes. Companies, especially the ones that reached a higher design maturity level, look for more efficient ways of prototyping. Linking lifeless artboards, translating design to code with imperfect tools, and documenting nuanced interactions time and time again adds more work and stalls growth.

This is where Merge comes in. With this technology, you can create prototypes with the elements that have true functionality built into them. It scales design like it did for Erica’s team at PayPal.

Streamline Collaboration Between Design and Development

With Merge, the design and development teams work with the same interactive components throughout the entire production process. Designers use the UI components, whereas developers copy the ready code from the very same design.

The translation of design into code is already there. Getting the most of a single source of truth unites design and engineering and simplifies the design handoff stage. In short: designers are happy, same as developers, and they don’t waste time on back-and-forths. 

Use Accurate UI Components that Guarantee Design Consistency

Coded UI components used in the design process make the prototypes consistent from start to finish. The product is being built according to the designer’s intention. The best part – designers don’t even need to deal with code.

The outcome is that there is no drift between design and the end product’s look and feel which is extremely time and energy consuming without Merge technology.

The Third way of Importing UI components to UXPin Merge

Before you can design with true components, you need to import a component library. There are three ways of bringing coded components to UXPin Merge.

• Git integration – developers use Git to host source code and its history; it requires technical help to import code components into UXPin.
• Storybook integration – Storybook stores public and private component libraries that you can bring to UXPin.
• npm integration – that gives designers a lot of autonomy.

Merge npm integration – What Do You Get?

Many design teams might struggle with the Merge Git integration if they lack developer’s active support. To make it easy for them to benefit from Merge, we’re releasing a designer-friendly way of importing a component library to UXPin.

How to use npm integration? 

Time to see how you can use npm integration. Let’s start with a written description of how to do it.

Import npm Components to UXPin

An npm is an online registry of packages with ready-made development elements that you can download to use in your project. Some of the most popular open-source design systems are being distributed in this way.

You can use Adele (UXPin’s design system repository) to find which design system is in an npm package. Just scroll to the final column to see the way of distribution.

Alternatively, you can upload your own React-based component library to npm and use it in UXPin.

Here’s how to do the steps of bringing the npm design system into UXPin.

1. Add a New Library to UXPin Merge

Once you know which React-based design system to use, it’s time to sync it with UXPin Merge. Go to the Merge Tab in your UXPin dashboard and add a library via npm package. You need to provide an npm package name and the version you want to use. If your documentation requires it, add styles to the “assets location” field. 

2. Configure UI Components

Open Merge Component Manager and specify components you want to import. You can categorize the components the way you want to. After publishing components, manage their properties and define which you want to import. Go to the library documentation to find the names and types of properties.

3. Start Creating Fully Interactive Prototypes

Time to create your first design. Go to the design editor and drop components on the canvas. See how easy it is to change the properties of the components you use! To check the components’ interactivity, go to “Preview” mode. 

Finished your prototype? Now, you can just pass the project link to your fellow developer so that they can copy the code from your design and check the specs. 

Follow our instructions and import interactive components

1. Watch a step-by-step video that tells you how to use the integration

We prepared a video walk-through of the integration. Watch it to learn how you can import an npm design system to UXPin.

2. Import npm components from MUI to UXPin

Would you like to bring MUI to UXPin? Our step-by-step article will guide you through the process.

How to import MUI components to UXPin?

3. Import npm components from Ant Design to UXPin

Ant Design is one of the most popular libraries. When you log in to UXPin, you will see some of the Ant Design components that we’ve imported through npm. They are ready for you to use. Check how we imported them to UXPin in this article.

How to import Ant Design components to UXPin?

Use npm integration + Patterns

Once you import everything you need and save changes, you can build more complex components out of basic ones or save components with properties to avoid repeating the same steps over and over. In other words, create Patterns.

Read all about it: Patterns documentation.

Try Merge npm integration

With npm integration, you don’t need developers’ help to bring coded UI elements to UXPin. The designers can import and manage the UI components by themselves in UXPin. Just the way they want.

Bring UI components through npm integration. Connect the design and development team with a single source of truth and break organizational silos. Sign up for a 14-day trial to test the integration.

The post Merge npm Integration – Another Way of Importing Components 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.

Component-driven prototyping with UXPin Merge allows designers to build accurate replicas of the final product. Unlike other design tools that render static graphics, UXPin is powered by code so that designers can create high-fidelity, fully functioning prototypes.

UXPin’s npm integration gives designers the freedom to import components and patterns from open-source design systems. They may need a single UI element to create a new pattern for an existing design system or use the npm integration to build a fully functioning MVP during a design sprint.

Discover how UXPin Merge can help you build interfaces with React components from npm. 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

About Prototyping with npm Components

Before we dive into UXPin’s npm integration and the packages you can import for prototyping, it’s important to understand Merge–the technology that makes component-driven prototyping with npm libraries possible.

Merge enables companies to sync a design system hosted in a repository to UXPin’s design editor so designers can build prototypes using the same component library as engineers.

These “ready-made” UI elements include properties and interactivity defined by the design system’s code. A component in Merge looks and functions the same as the final product because it’s an exact replica.

Designers use Merge components like building blocks, dragging and dropping to build new UIs, and fully functioning prototypes. They can also use Patterns to combine UI elements and build new components.

Merge’s strongest feature is its ability to sync design and development, creating a genuine single source of truth across the organization via the design system’s repository. Any changes to the repo automatically sync to UXPin, notifying product teams of the change.

1. Ant Design

Ant Design is an open-source design system developed and maintained by the Chinese tech giant Ant Group. The component library is available for React, Angular, and Vue and includes Ant Design Mobile for building cross-platform and mobile applications.

Ant Design is a fantastic “all-rounder” with components for B2C products, enterprise applications, websites, and cross-platform apps. The design system also features an icon set, dark mode, animations, and interactivity.

Importing the Ant Design npm Package

Ant Design npm integration Library settings:

• Library name: Ant Design NPM – The Library name has no impact on the import
• Package details: antd – must correspond to the Ant Design npm registry
• Assets location: antd/dist/antd.css – required for styling Ant Design React props

Leave everything else as default and click Save Changes.

Further reading: Check out this step-by-step guide for importing Ant Design components via the UXPin npm integration.

2. Bootstrap

Bootstrap is one of the oldest and largest responsive front-end frameworks. Engineers often use Bootstrap for basic CSS styling and Javascript functionality when building website and web application prototypes.

UXPin’s npm integration uses the React Boostrap, which includes the same out-of-the-box features and functionality as the original Bootstrap. We recommend React Bootstrap for prototyping responsive websites and web applications.

Importing the React Bootstrap npm Package

React Bootstrap npm integration Library settings:

• Library name: Bootstrap NPM Integration – The Library name has no impact on the import
• Package details: react-bootstrap – must correspond to the React Bootstrap npm registry
• Dependency package name: bootstrap – React Boostrap requires the Bootstrap dependency to work in UXPin
• Assets location: bootstrap/dist/css/bootstrap.min.css – required for styling React Boostrap props

Leave everything else as default and click Save Changes.

Further reading: Check out this step-by-step guide for importing React Bootstrap components via the UXPin npm integration.

3. MUI

MUI is a React library built based on Google’s Material Design UI. The comprehensive design system features everything you need to develop an array of digital products, plus more than 2,000 Material Design Icons.

Due to its comprehensive component library, MUI is a popular choice for enterprise products, cross-platform applications, and MVPs.

Importing the MUI npm Package

MUI npm integration Library settings:

• Library name: MUI NPM – The Library name has no impact on the import
• Package details: @mui/material – must correspond to the MUI npm registry

Unlike React Boostrap and Ant Design, MUI doesn’t require dependencies or assets to work in UXPin. Leave everything else as default and click Save Changes.

Further reading: Check out this step-by-step guide for importing MUI components via the UXPin npm integration.

4. Semantic UI

Semantic UI is an excellent alternative to Bootstrap. The Semantic UI React framework has a more modern aesthetic, simple features, and highly customizable components. Semantic UI includes FontAwesome built-in–the most extensive icon library in the world.

Like Bootstrap, Semantic UI is best for prototyping websites and web applications.

Importing the Semantic UI React npm Package

Semantic UI React npm integration Library settings:

• Library name: Semantic UI – The Library name has no impact on the import
• Package details: semantic-ui-react – must correspond to the Semantic UI React npm registry
• Dependency package name: semantic-ui-css – Semantic UI React requires the Semantic UI CSS dependency to work in UXPin
• Assets location: https://cdn.jsdelivr.net/npm/semantic-ui@2/dist/semantic.min.css – required for styling Semantic UI React props

Leave everything else as default and click Save Changes.

Further reading: The Library settings are similar to React Bootstrap. Follow the Bootstrap tutorial for a step-by-step guide, and use the Semantic UI React docs to replace library and component settings accordingly.

5. Carbon Design System

Carbon is a design system developed and maintained by IBM with React, Angular, and Vue versions. The simple yet comprehensive design system includes a large component and pattern library, an icon set, pictograms, motion, and instructions for theming.

Carbon is an excellent design system for B2B and enterprise product design. Carbon’s data visualization documentation makes it the perfect choice for product teams developing dashboard and report user interfaces.

Importing the Carbon Design System npm Package

Carbon Design System React npm integration Library settings:

• Library name: Carbon NPM – The Library name has no impact on the import
• Package details: @carbon/react – must correspond to the Carbon Design System npm registry
• Assets location: https://unpkg.com/carbon-components/css/carbon-components.css – required for styling Carbon Design System’s React props

Leave everything else as default and click Save Changes.

6. Grommet

Grommet is a React-based framework that is great for building mobile-first prototypes that are accessible and responsive. Used by Netflix, Uber, Hewlett Packard, this design system is easily themable and you should definitely give it a shot.

Importing the Grommet npm Package

Grommet npm integration Library settings:

• Library name: Grommet NPM
• Package details: grommet – must correspond to the Grommet npm registry
• Assets location: https://v2.grommet.io/components

Leave everything else as default and click Save Changes.

When we add that Semantic UI button to the canvas and select it, those same properties appear in UXPin’s Properties Panel. We can adjust these properties to change the button’s styling instantly.

How to Import npm Components to UXPin

Merge npm integration gives design teams the control and flexibility they needed to import and manage React components in UXPin without engineering support.

Using the Merge Component Manager (MCM), designers can import individual components and their properties via the library’s npm package. There’s no code required, and setup takes a few minutes.

Designers can use these open-source components to build new patterns for an existing design system or create a minimum viable product (MVP) using fully functioning UI elements.

Using Merge Component Manager (MCM)

Merge Component Manager (MCM) is where designers manage npm imported component libraries.

You must follow the library’s documentation and naming conventions when importing components, or the import won’t work. UXPin’s npm integration must find a component and its properties using the repository’s naming convention, so if you reference the React props incorrectly, MCM can’t locate it.

We’ll use a Semantic UI button to illustrate how to reference React props when importing components. You’ll find these React props in the design system’s documentation.

When importing a component’s property, the Property name in MCM must match the React prop name from the documentation.

In this case, we’re importing the children prop, which gives a Semantic UI button its label.

The Display name is what designers will see in UXPin’s Properties Panel.

We’ve imported children, circular, color inverted, secondary, size, and type, which you can see in this screenshot.

Those MCM Property names correspond to Semantic UI’s documentation which you see in the two following screenshots.

Rules for Choosing an npm Components

1. It’s important to note that designers can only use the npm integration to import design systems with React component libraries, and it must have an npm package.
2. The design system must serve your product’s needs. Are you designing a B2B product? Are you prototyping a web, mobile, or cross-platform application? Do you want to complement an existing design system or build something from scratch? For example, if you’re building a website or web application, Bootstrap or Semantic UI are excellent choices, whereas Ant Design is probably better for mobile and cross-platform digital products.
3. It’s worthwhile researching open-source design systems to ensure the library has the UI elements you need. The library must also have documentation with setup instructions and a list of the available React props. These props will allow you to change a component’s properties like color, shape, interactivity, size, icon, etc.

Design with npm Components in UXPin

Here we outlined 6 npm component libraries that you can try with UXPin Merge. Ready to start prototyping with one of these design systems? Try npm integration to test those packages and experience what component-driven prototyping can give you. Discover UXPin Merge.

The post Top 6 npm Packages for Component-Driven Prototyping 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.

Review card is a design element that appears on websites and applications to highlight feedback about a product, service or experience.

Solve more usability issues during the design process and deliver incredible user experiences for your customers with UXPin’s interactive prototypes. Sign up for a free trial to explore UXPin’s advanced features.

Build advanced prototypes

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

Try UXPin

What is a Review Card?

A review card displays user feedback in a compact, visual format on digital platforms. It’s a familiar UI pattern that presents a user’s evaluation—often accompanied by a rating, comments, and sometimes user-related information. 

Review cards display social proof and insights from previous customers, enhancing brand trust, transparency, and credibility to facilitate a conversion–signup, purchase, download, etc.

Core Components of a Review Card

Profile information

Allowing reviewers to customize their identity enhances the authenticity of feedback, including:

• Making the reviewer to post their name offers a personalized touch to the review.
• Allowing reviewers to upload their profile picture makes them more relatable.
• Adding the option to share a reviewer’s location upon consent can also help users understand someone’s view–for example, someone from the UK might find a dish “too spicy,” while someone from India thinks it has “excellent flavor!”

User-generated content

A review card displays the reviewer’s feedback, including:

• The review text provides context and meaning behind the rating, emphasizing a specific experience or narrative.

• The review date helps users understand the relevance and timeliness of the feedback. For example, a product received unfavorable reviews two years ago, but more recent feedback is positive about the same experience–showing the brand’s willingness to improve.

• The reviewer’s images and videos help create more credibility and transparency. For example, Google My Business allows users to upload photo and video content which helps prove the reviewer was at the location and that real people are leaving feedback.

Interactivity features

Making review patterns interactive helps with community-driven moderation while increasing shares and engagement. Some interactivity designers might consider includes:

• Including rating system (stars, points, etc.) to quickly determine the reviewer’s experience.
• Adding helpful/unhelpful voting buttons lets others validate the review’s accuracy.
• Allowing brands to reply to customer reviews enables them to address concerns and thank reviewers.
• Adding social share buttons, as people like to share online reviews with friends or across different platforms, amplifying the brand’s reach.

Examples of Review Card UI Patterns

Adidas reviews

Adidas is a great review card UI example for eCommerce. It encourages reviewers to rate its shoes on overall star rating, size, width, comfort, and quality. This five-point rating system gives shoppers a snapshot of the product’s performance while providing Adidas with valuable data to pinpoint issues and improvements.

Amazon reviews

Like Adidas, Amazon is another good example of an eCommerce review card design. It customizes reviews to meet the product’s features and user needs. For example, this Kindle review interface lets customers rate its built-in light, touch screen, and “easy-to-hold” characteristics.

Yelp reviews

Yelp is a review site and it makes a great job of focusing on text feedback. The review pattern prioritizes the star rating, text, and media content. 

The review form also prioritizes long-form text with prompts like food, service, and ambiance to prompt reviewers on what to mention.

Trustpilot reviews

Like Yelp, Trustpilot’s review card prioritizes text content and its signature green-star review component. The footer allows users to like, share, or report the review and also displays the brand’s reply.

Apple App Store

The app stores for Apple and Android prioritize a mobile-friendly experience, meaning their review cards must be minimal, only displaying the most crucial information.

This example from the Apple App Store displays the review’s headline, star rating, date, and reviewer’s username. Above, users can see the product’s rating out of five, rating distribution across the five stars, and total ratings. There are also CTAs above and below the review card for users to submit feedback.

Shopify App Store

Many platforms have app stores for third-party applications and integrations. Shopify’s review card appears below each app description so store owners can read peer feedback. 

The minimalist design uses a 2-column layout for desktop so users can see the app’s review breakdown and text reviews. They can also filter reviews by star rating.

Review Card Design Tips & Best Practices

Simplicity and clarity

Avoid clutter. Make it scannable.

The examples above from top platforms and brands demonstrate that a review card should allow users to grasp the main points at a glance by eliminating unnecessary elements and focusing on the essentials like ratings, reviewer names, and the review text.

Consistency in design

Ensure all review cards follow a uniform pattern.

UI and brand consistency are essential for building trust. Review cards must be consistent with the product’s design principles and integrate seamlessly with the surrounding user interface and patterns. This uniformity lets users predict where to find specific information, making their browsing experience smoother and more intuitive.

Use whitespace and hierarchy

Make content easier to read.

Whitespace creates separation between components and patterns to enhance readability and scalability while reducing visual fatigue. Designers must apply whitespace and visual hierarchy techniques to review cards so users can read and absorb content with minimal mental effort.

Design interactive elements

Clearly distinguishable buttons or links.

Designers must make buttons and text links obvious using different colors, underlining, icons, etc. These immediately identifiable interactive elements enable users to complete relevant actions, like sorting, filtering, liking, etc., creating immersive, enjoyable review card experiences.

Minimize friction

Minimizing friction through an intuitive and fast review process ensures more users provide feedback. People are more motivated to leave negative reviews, so if you want to encourage more positive ones, you must make every step effortless.

For example, Amazon sends customers a follow-up email or app notification post-purchase to prompt immediate, spontaneous feedback. Amazon’s review UI is simple and intuitive, and they can share images and videos about their product experience effortlessly.

Add filtering and sorting options

Filtering and sorting enable users to choose how to consume reviews to find the people or content that resonate with their experience or expectations. 

For example, Yelp allows users to filter reviews based on rating, time, or relevance and even look for specific keywords for efficient, tailored brand research.

Adapt review cards for different platforms

Designing consistent cross-platform experiences.

The cross-platform experience is crucial for modern digital products and review card design. For example, users can access Netflix on TVs, mobile devices, PCs, and tablets. Designers must design review cards for each platform while maintaining the highest standard of consistency.

• Responsive design: Designers must maintain the same user experience when they stack or scale review card elements for different screen sizes. Read more about responsive design.
• Native components vs. web components: Designers can leverage platform-specific UI elements familiar to users, ensuring a cohesive native experience (iOS, Windows, Android, etc.). Conversely, web components offer broader compatibility, ensuring review cards look and function consistently across browsers and devices.

High-Quality Interactive Prototyping With UXPin

Testing interactive elements is challenging with traditional image-based design tools. For example, creating a dynamic, fully interactive user flow for writing a review isn’t possible using Figma or Sketch.

UXPin is powered by code, giving designers the same fidelity and functionality capabilities as devs for building interactive prototypes. Design teams can create a review user flow prototype, including:

• Interactions and States for interactive elements like links and buttons.
• Capture a participant’s text review, name, date, and star rating using Variables from a form and display it on a review card.
• Use UXPin’s IFTTT integration to send users a thank you email for sharing their feedback.

Better feedback

With UXPin, designers can increase prototyping scope to solve more problems and identify business opportunities during the design process. Designers get better feedback from stakeholders and usability participants to iterate and improve designs using accurate, meaningful data.

Smoother handoffs

UXPin’s prototypes also facilitate a smoother design handoff process with less friction between designers and engineers. Designers don’t need supporting documentation or videos recreating interactivity because they have the tools to build these experiences, interactions, and animations with UXPin.

Streamline your design process, increase prototyping scope, and get better feedback from stakeholders and users with UXPin. Sign up for a free trial to create your first interactive prototype with UXPin.

The post Review Card — How to Design it appeared first on Studio by UXPin.

UI elements or user interface elements are the most integral part of product design, regardless of whether it’s a web design or mobile, desktop, or Augmented Reality or Virtual Reality app. UI elements are the core building blocks for all products.

As a UI designer or web developer, it’s crucial to have a deep understanding of UI elements and how users interact with them. It will help you create a better application/website structure.

Designers don’t usually draw UI elements anew when they’re building web pages or mobile apps. They usually start with a ready repository of UI elements, and if they’re backed with code, interactive UI components.

UXPin Merge allows you to bring those components to UXPin’s design editor and build fully functional UIs in minutes instead of hours, thus optimizing the workflow of the whole product team. 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 are UI Elements?

To put it simply, user interface elements are the building blocks of apps and web sites. They are what users interact with when they are using the product. They click on a button to sign up, they use navigational components to switch between pages, etc.

UI elements are what allows for good user experience and well-designed functionalities.

UX design rests on design patterns that your users are familiar with. If you break a design pattern, users may get lost or confused at least. Designers use well-known UI elements to prevent that.

Learning what are UI elements is not enough. You also need to know the context of use.

3 Types of UI Elements

Ideally, we can group UI elements into 3 major categories. 

1. Input elements – users interact with them to put in their information or move to the next step.
2. Output elements – those elements show the result of a previous user action.
3. Helper elements – further divided into navigational, informational, and containers, they help to move through the digital product, get information, and point user’s attention to some element.

Input elements

Input elements are responsible for handling different user inputs. Sometimes they’re also part of the input validation process. Some of the most used input elements include:

• Dropdowns
• Combo boxes
• Buttons
• Toggles
• Text/password fields
• Date pickers
• Checkboxes
• Radio buttons
• Confirmation dialogues

Output elements

Output elements are responsible for showing results against various user inputs. They also show alerts, warnings, success, and error messages to the users. Output elements aren’t neutral by nature. They rely on inputs and various operations.  

Helper elements

All other elements fall into this category. The most widely-used helper elements include:

• Notifications
• Breadcrumbs
• Icons
• Sliders
• Notifications
• Progress bars
• Tooltips

We can also group helper elements into 3 categories.

Navigational UI elements

Navigational components simplify moving through the site, desktop or mobile app or any other digital product. Navigational helper UI elements include things like navigation menus, list of links, breadcrumbs, to name but a few. 

Informational UI elements

Responsible for representing information. These include, for example, tooltips, icons, and progress bars. 

Groups or containers UI elements

Responsible for holding various components together. Widgets, containers, and sidebars for part of this category. The Newsletter subscription widget of UXPin blog is also a good example of a container.

9 Common Input UI Elements

Here are nine of the most common input elements that every designer should know about. This list includes buttons, checkboxes, text fields, and you’re certain to find them in the most popular design systems, listed under UI components.

Checkboxes

Checkboxes allow the user to select one or more options from an option set. It is best practice to display checkboxes vertically. Multi-columns are also acceptable considering the available space and other factors.

Dropdowns

Dropdowns allow users to select one item at a time from a long list of options. They are more compact than radio buttons. They also allow you to save space. For better UX, it’s necessary to add a label and a helper text as a placeholder. I.e. “Select One, Choose, etc.”

Combo boxes

Combo boxes allow users to either type a custom value directly or select a value from the list. It is a combination of a drop-down list or list box and a single-line input field.

Buttons

Buttons allow the users to perform an action with touch or click. It is typically labelled with text, icon, or both. Buttons are one of the most important parts of a UI. So it’s important to design a button that the user will actually click. 

Toggles

Toggles allow the user to change a view/value/setting between two states. They are useful for toggle between on and off state or switching between list view and grid view. 

Text and password fields

Text fields and password fields allow users to enter text and password respectively. Text fields allow both single-line and multi-line inputs. Multi-line input fields are also known as “textarea”. Password fields generally allow single lines for a password.

Date pickers

A date picker allows users to pick a date and/or time. By using a native date picker from the platform, a consistent date value is submitted to the system. 

Radio buttons

Radio buttons allow users to select only one of a predefined set of mutually exclusive options. A general use case of radio buttons is selecting the gender option in sign-up forms. 

Confirmation dialogues

Confirmation dialogues are responsible for collecting user consent for a particular action. For example, collecting user consent for a delete action.

4 Common output elements

Alert UI Element

An alert presents a short, important message that attracts the user’s attention. It notifies users about these statuses and outputs.

Toast UI element

This refers to a UI feature where an event (user input, server response, calculation etc.) triggers a small text box to appear on the screen. Ideally, it appears at the bottom on mobile and bottom left or right side on the desktop.

The difference between “Alert” & “Toast” is that the former doesn’t dismiss itself and the latter does after a certain time. 

Badge

This feature generates a small badge to the top-right of its child(ren). In general, it represents a small counter or indicator. This can be something like the number of items over the cart icon or online indicator over a  user avatar. 

Charts

Charts are a common way of expressing complex data sets because they depict different data varieties & data comparisons.

The type of chart used in UI depends primarily on two things: the data we want to communicate, and what we want to convey about that data

Common Helper UI Elements

Navigational UI elements

Those elements aid navigation. They are

• Navigation menus
• List of links
• Breadcrumbs
• Search fields
• Pagination

Navigation menus

This is a navigational UI element with several values that the user can select. They are taken to another area of the website/app from there. 

List of links

As the name suggests, a list of links consists of links. Sidebar with a category list is a good example of this. Links can be both internal and external. 

Breadcrumbs

Breadcrumbs allow users to see their current location within the system. It provides a clickable trail of proceeding pages to navigate with.

Search fields

A search bar is usually made up of two UI elements: an input field and a button. It allows users to enter a keyword and submit it to the system expecting the most relevant results.

Paginations

This feature divides the content between pages and allows users to navigate between them.

Informational UI elements

That category of UI elements transfers information. It comprises:

• Tooltips
• Icons
• Progress bars
• Notifications
• Message boxes
• Modal windows

Tooltips

A tooltip shows users hints when they hover over an element indicating the name or purpose of the item.

Icons

It’s a simplified symbol that is used to help users to navigate the system, presenting the information and indicating statutes.

Progress bars

A progress bar indicates the progress of a process. Typically, progress bars are not clickable.

Notifications

It is an update indicator that announces something new for the user to check. Typically shows completion of a task, new items to check etc.

Message boxes

It’s a small window that provides information to users but typically doesn’t prevent users from continuing tasks. Message boxes perform tasks like showing warnings, suggestions, etc.

Modal windows

It’s used to show content on top of an overlay. It blocks any interaction with the page — until the overlay is clicked, or a close action is triggered.

Group and Containers

How would you separate certain elements from the rest? That is what groups and containers are for.

Widgets

It’s an element of interaction, like a chat window, components of a dashboard, or embeds of other services.

UI Containers

Containers hold different components together. This includes text, images, rich media etc. Cards in modern UI design are one of the best examples of containers. 

Sidebars

Sidebars also contain other groups of elements and components. But that can be switched between collapse and visible state.

Search bar

The search bar holds the search field and search options. Typically, the search bar features a search field and filtering option. Twitter’s advanced search is a great example.

Design with Interactive UI Elements in UXPin

Now that you understand what common UI elements are and how they work, it’s time to put your knowledge to practice. UXPin offers all the features you need to design and organize your UI elements, simplifying the process of designing.

What if you have ready-made UI elements that come from a component library of your developers? Use UXPin Merge technology to bring them to UXPin editor and design fully interactive and consistent prototypes using those UI components that you share with your product team. Learn more about UXPin Merge.

The post User Interface Elements Every Designer Should Know appeared first on Studio by UXPin.

Launching a successful digital product takes a lot of effort. Working hard, however, does not ensure that users will adopt your product. 

The truth is users may resign from your product, because you haven’t tested the product before release.  If you skipped creating an advanced, fully functional prototype and decided to go with a low-fidelity one and then went into the development stage, there was no room for any reliable usability tests.

Only now do you realize that you spent countless hours building a product that is not as successful as you anticipated. 

Let’s learn from this hypothetical mistake by taking a closer look at the importance of usability testing and why you need functional prototypes to get accurate results from your trials.

Build functional prototypes without missing deadlines. Use UXPin Merge and use functional components that can be assembled into ready-to-test prototypes in minutes instead of hours. Discover UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

Most Digital Products Fail

The odds of success are not in your favor. That’s not a pessimistic outlook. That’s just what the numbers say. 

Only about 0.5% of apps succeed. Let that sink in. If you build 200 apps, the statistics say that only one of them will succeed. What happens to the rest of them?

• 67.8% never reach 1,000 downloads.
• 17.9% never reach 1,000 active users.
• 5.8% don’t retain users, meaning they probably get deleted and forgotten.
• 5.8% don’t earn any revenue. Nothing in return for all of that work!
• 1.4% make some money but never turn a profit. 

You can’t deny the math, but you can test your products before committing to launch.

After this heavy dose of reality, you might wonder why user testing even matters. What’s the point?! One out of 200 apps turns out to be successful! 

Fully Functional Prototypes Give You Perspective

Let’s put this into perspective so you can see the true benefits of working prototypes and user testing. 

First, a lot of those apps are worthless. They don’t perform functions that anyone wants. If you have seen the second season of Silicon Valley, you probably remember the “Bro app.” All it does is send the word “bro” to other people who have the app. Silicon Valley did an excellent job skewering some of the insane trends in technology. With the Bro app, the show lampooned all of the meaningless products out there.

The internet has thousands upon thousands of Bro apps.

Second, a lot of companies don’t spend enough time developing and testing their apps. According to appinventiv, 24% of developers spend three months or less working on their products before launch. Some of those companies launched their apps within one month. Is it feasible to research the market, design your product, develop your product, test it for quality assurance, and launch within a month? That seems unlikely.

Third — and this brings us to the heart of the matter — very few designers have the benefit of user testing with fully functional prototypes with interactive features and real data.

If you casually say to someone, “I’m going to make an app that sends the word ‘Bro’ to people,” you’ll probably get some encouragement from well-meaning friends. You’ll get a much different response when you put the app in their hands and tell them how much it will cost to develop, launch, and market.

With functional prototypes, you gain a perspective that you rarely get from mockups that don’t do anything except sit on the page (or screen).

Early Usability Testing Saves You Time and Money

You’re a project manager with two designers and three developers on your team. Over one year, you can expect to pay your designers about $53,400 each and your developers about $114,300 each. Your small team costs $449,700 per year, plus benefits. (These are the median salaries in the United States. Professionals might get paid different amounts in your area.)

Obviously, you want to get as much productivity as possible from your staff. You cannot make that happen when you wait until the end of the development process to test your products. When you enter the usability testing phase, you might discover that your developers spent a week adding a feature that no one even wants to use. What a waste!

Early usability testing that happens during the design phase speeds up your process (and shifts more of the responsibility to employees who earn lower salaries). With fully functional prototypes, you might discover that an interaction doesn’t perform as expected. You might learn that most users prefer one layout over another. You might find out that people despise the core concept of your product!

It’s always better to learn these things early in the process. If usability testing shows that you have a terrible concept, throw it out now before you dedicate more money toward it. You can always come up with a better idea.

By creating interactive components in your prototypes with states, conditions, and interactions, you do not need to rely on your developers to create a feature before you test it.

Also, you can send your prototype to anyone. They don’t need UXPin accounts. As long as someone has the right link to your project, they can interact with the prototype and leave comments.

Not sure how to improve product usability? Start with these 5 User Experience Principles to Help Guide Your Work. Nothing’s more effective than doing the job right the first time.

Working Prototypes Break Down Barriers Between Designers and Developers

You might worry that your prototype — as functional as it seems — might not perform as precisely as your end product does.

Merge eliminates your concerns as each component is fully coded. No, you don’t need to know how to write a single line of code! It’s easy because as a designer you look at the interactive UI and developer looks at the production-ready code of the same component. One element, yet two perspectives.

Merge’s code-based approach to design also means that your developers can create new products from existing components. You already know how the features behave, so you can fit them together in inventive ways and offer your users new tools. Once you have a library of React components or a Storybook, it’s easy to put them together and know how they will interact.

Get started with Merge to test fully functional prototypes

Merge isn’t one of those prototyping tools that only give you an imitation of the final product. You get fully functional prototypes that you can start testing immediately. What’s most important, it takes you 10x faster to build a hi-fi prototype to test out.

Get started with Merge today so you can see how much easier, faster, and less expensive digital products become when you can improve usability testing with prototypes that work just like the final product.

The post How Functional Prototypes Improve Usability Testing? appeared first on Studio by UXPin.

Fidelity refers to the level of detail and realism in a prototype or design. It represents how closely the prototype resembles the final product in terms of visual design, interactions, and functionality. High-fidelity prototypes are highly realistic and aim to simulate the final user experience as closely as possible.

High-fidelity prototypes (hi-fi prototypes) include visual and interactive elements that align with an actual product’s user interface, such as accurate colors, typography, interactions, animations, and imagery. These prototypes offer users and stakeholders a more immersive and realistic experience, enabling them to better understand the end product’s look and feel.

Designers create high-fidelity prototypes in the later stages of the design process to test and validate concepts, gather user feedback, and refine the user experience. These prototypes allow designers to assess the usability and effectiveness of the interface, identify potential issues or improvements, and make informed product design decisions.

Make better design decisions with fully interactive prototypes 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

High-Fidelity vs. Low-Fidelity Prototypes

Designers use high-fidelity and low-fidelity prototypes at separate stages of the design process for different purposes and goals.

Low-fidelity prototypes (lo-fi prototypes) are simplified design concepts typically created using rough sketches, wireframes, or basic digital mockups. Designers create these lo-fi prototypes early in the design process to iterate on many ideas collaboratively and as quickly as possible.

Low-fidelity prototypes focus on the design’s core structure, information architecture, and functionality. They are quick and easy to create, allowing designers to explore and iterate on multiple design ideas without investing excessive time and resources.

High-fidelity prototypes are more detailed and realistic representations of the final design that closely resemble the finished product’s intended look, feel, and functionality, incorporating visual design elements, interactive features, and realistic content. Design teams create high-fidelity prototypes later in the design process to finalize concepts before the design handoff.

Planning Your High-Fidelity Prototype

Designers complete most research and planning during the early stages of the design process. So this step is about synthesizing and reviewing the findings to guide high-fidelity prototyping.

Defining the purpose and objectives of your prototype

Define the specific goals you want to achieve with your high-fidelity by determining what aspects of the design you want to test, evaluate, or showcase to stakeholders.

For example, if you’re designing an eCommerce website:

• Objective: test the user flow of adding items to the cart and completing the checkout process.
• Purpose: identify any usability issues and optimize the conversion rate.

Applying user goals from UX research

Thorough UX research must precede prototyping, so designers know what to build and who they’re building it for before jumping into a prototyping tool. Understanding user goals helps tailor a high-fidelity prototype to meet the target audience’s needs and preferences.

For example, if you’re designing a mobile app for fitness enthusiasts, your target audience might be individuals interested in tracking their workouts and progress. This user group’s goals include setting fitness objectives, tracking calories burned, and analyzing workout statistics. Using this research, designers can plan features and interactions accordingly.

Outlining the key functionalities and interactions

Determine the core elements your prototype needs to achieve the desired user experience while meeting the above goals and objectives. Identifying these key functionalities helps you prioritize your design efforts and ensure your prototype captures the essential interactions and user flows.

For example, if you’re designing a flight booking mobile app, key functionalities might include:

• Searching for flights
• Filtering search results
• Viewing flight details
• Selecting seats
• Booking payment and confirmation
• Viewing “my bookings”

Designing the Visual Elements

Designers use research, sketches, and wireframes as a foundation to design the visual elements of a high-fidelity prototype. When designing the visual elements, designers consider various aspects such as typography, colors, iconography, and imagery.

The product’s typography and colors must align with the brand identity and enhance readability. A product’s iconography communicates actions and features using familiar and intuitive symbols. Imagery, including illustrations and photos, enhances the user experience and conveys the desired message.

Designers must also consider how these design elements impact accessibility, including color contrast, legibility, and assistive technologies.

Leveraging open-source component libraries

Designers can accelerate the visual design process by using open-source component libraries–i.e., MUI, Ant Design, or Fluent UI. Designers can leverage ready-made visual elements, such as buttons, forms, and navigation bars, to reduce the time and effort required to design and maintain consistent visual language throughout the high-fidelity prototype.

UXPin offers tools and features to simplify the UI design process. They can also use one of UXPin’s built-in Merge libraries to build screens and layouts simply by dragging and dropping UI elements. These components are interactive by default and contain properties defined by the design system, facilitating faster, streamlined, and consistent UI design.

Once this stage is complete, designers will have a set of high-fidelity mockups ready to build interactive prototypes.

Adding Component Interactions and Animations

Designers define different states, such as hover, active, or disabled, to reflect the user’s interactions with the elements. They also create transitions between components to simulate the dynamic behavior of the final product and provide a more realistic user experience. For example, a button remains disabled until users complete a form’s required fields.

Additionally, designers incorporate microinteractions and animations. Microinteractions are small, subtle, and purposeful animations that provide feedback and guide users through their interactions with the prototype. These microinteractions make prototypes feel more engaging and interactive but also communicate important information to the users and guide them through the interface more intuitively.

Leveraging Merge’s interactive components

UXPin’s Merge technology allows designers to bring code components from a repository into the design process. These UI elements contain properties, including interactions, defined by the design system.

This code-to-design methodology means designers never have to worry about setting up component properties, including styling and interactions. Each component’s variants appear in UXPin’s Properties Panel for designers to select. For example, choosing a component’s state.

Designers can also add microinteractions using UXPin’s Interactions feature, which includes triggers and actions for keyboard and mobile.

Simulating User Flows

Mapping user flows and navigation paths

Designers define the logical sequence of screens and the user’s journey through a digital product, including identifying entry points, exit points, and the various paths users can take to accomplish their tasks. This user journey map ensures a seamless and intuitive navigation experience for users.

Defining interactions

Designers use interactive elements such as buttons or links to establish connections between screens according to the user journey map. These connections allow users to navigate different screens and simulate the transitions and interactions they will encounter in the product.

Taking care of transitions

Designers use animations, transitions, and interactive elements to simulate how users interact with the prototype. For example, a button click might trigger a modal to appear, or scrolling might reveal additional content.

By the end of this process, designers are ready for testing your hi-fi prototype with end-users.

Testing and Iterating

Testing is an iterative process where designers continuously improve the high-fidelity prototype by incorporating user feedback and refining the design to create a more effective and user-friendly solution.

Here is a high-level overview of the high-fidelity prototyping process:

1. Conduct usability testing sessions with representative users to evaluate the high-fidelity prototype and gather valuable feedback on its usability.
2. Present the prototypes to stakeholders for business value feedback.
3. Collect and analyze user and stakeholder feedback and insights regarding their interactions, comprehension, and overall experience with the prototype.
4. Identify areas for improvement and make changes to the prototype based on the feedback received.
5. Refine the design to address usability issues and enhance the overall user experience.
6. Repeat the iterative testing and refining process to ensure the prototype meets user needs and aligns with design objectives.

Sharing and Collaborating on Prototypes in UXPin

Sharing UXPin prototypes for feedback and review

UXPin’s Preview and Share lets designers share designs and prototypes with team members and stakeholders. UXPin allows designers to choose what they want to share, including the Sitemap, Comments, Spec Mode, and Documentation.

UXPin share links are available on the open web, meaning anyone with the link can access the project. Designers can password-protect projects so only team members and stakeholders can access them.

Collaborating with team members and stakeholders

UXPin’s Comments feature makes collaborating with team members and stakeholders easy. They can comment directly on the interface, tag one another, assign comments, and resolve them after the appropriate action. With Team and Public Comments, even those without a UXPin account can participant in the feedback process.

Smoother developer collaboration and design handoffs

Building high-fidelity prototypes with code components bridges the gap between the design and development process because designers and engineers speak the same language interpreted through UXPin’s Merge technology.

Designers and engineers see the exact same component, just through a different lens. Designers see the visual elements in UXPin, and engineers work with code in their IDE. This single source of truth reduces friction because designers and engineers work within the same constraints. These constraints also prevent design drift, technical debt, and inconsistencies, creating a more harmonious product development process.

Build better high-fidelity prototypes faster and with more interactivity to enhance user testing and streamline stakeholder collaboration. Learn more about hi-fi prototyping with UXPin Merge.

The post High-Fidelity Prototype – How to Create One in UXPin? appeared first on Studio by UXPin.

UXPin Merge provides developers, UX designers, and product teams with an intuitive user interface to prototype and test using ReactJS components. The drag-and-drop workflow is the perfect environment for rapid React prototyping–even for non-designers or those without design tool skills.

Payment giant PayPal and startup TeamPassword both have non-designers building and testing prototypes in UXPin. PayPal’s product teams complete 90% of design projects, while TeamPassword’s two-person development team does all the company’s prototyping and user testing.

This article demonstrates how engineers can use UXPin Merge to design, prototype, and test products before development, allowing them to iterate faster and reduce UI inconsistencies.

Key takeaways:

• React rapid prototyping is a prototyping process for creating prototypes fast.
• Just like in rapid prototyping, product teams build UIs, test them, and release as fast as they can.
• Instead of starting with writing code, React rapid prototyping tool like UXPin Merge gives you building blocks to assemble your prototype – React components from your repo.

Streamline your React rapid prototyping workflow with UXPin Merge. Visit our Merge page for more details and how to request access.

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 Rapid Prototyping?

Rapid prototyping is a prototyping process where product teams conduct lots of experiments fast to find the best solution. Team members ignore “nice-to-have” features and focus solely on optimizing UIs for user experience.

The team uses a design system or open-source component library to prototype new products. Using an existing library means product teams don’t have to design from scratch. Instead, they go from paper sketches to rapid high-fidelity prototyping and testing.

React rapid prototyping

React rapid prototyping uses a similar methodology where engineers use component libraries to build a minimum viable product (MVP). Using a React library enables engineers to develop user interfaces with minimal front-end programming from scratch, allowing for faster testing and iteration.

The Challenges of Prototyping in Code

The biggest challenge with prototyping in code is that it’s slow compared to the drag-and-drop design tool workflow (in which you create prototypes with pre-made component.) Even small changes require some code and styling adjustments to achieve the desired result.

Prototyping in code also means engineers must focus on multiple tasks, including writing code, referencing documentation, and UI design. As the prototype grows in complexity, so does the focus and time required to make changes and iterate–the opposite of rapid prototyping.

How TeamPassword Overcame React Rapid Prototyping Challenges

Password manager startup, TeamPassword, struggled with speed-to-market and UI inconsistencies. The small team had no designers, leaving engineers to design, prototype, and test releases using code.

TeamPassword switched to MUI’s open-source React library, which they customized to meet brand and product requirements and hosted in a private repository.

Prototyping and testing using UXPin Merge.

TeamPassword also needed a better method to prototype and test new products. The small startup didn’t have the resources to hire a UX designer, so they looked for a “developer-friendly” design tool. After exploring several options, TeamPassword’s devs discovered UXPin Merge.

Merge allowed TeamPassword to sync their MUI design system repository to UXPin’s design editor, giving engineers a drag-and-drop prototyping environment. 

When TeamPassword has completed the prototyping phase, they simply import their design system into the project, add the components, and copy JSX component props from UXPin to develop the final product.

This Merge product development workflow eliminated TeamPassword’s UI consistencies while allowing developers to prototype, test, and iterate significantly faster. Merge’s Version Control enables the team to ship design system changes which automatically sync to UXPin–creating a single source of truth between design and development.

Using UXPin Merge for React Rapid Prototyping

Unlike image-based design tools that generate vector graphics, UXPin renders HTML, CSS, and Javascript, making it possible to import fully interactive React components.

The TeamPassword case study demonstrates how developers can prototype faster using React components without learning the complexities of a design tool. Here’s how you can too.

Choose a design system

If you don’t have a design system, use an open-source library. Some of our favorites include MUI, React-Bootstrap, Ant Design, and Semantic UI. These design systems are themeable and offer vast component libraries, including desktop and mobile UI elements.

Follow UXPin’s documentation for setting up your repository correctly. You can also request access to Merge; our technical support team will help you through the process.

“We had a training session with Jack which was really valuable. We learned how to set up the tool and use the editor. The team also showed us how to adjust components.” – Matthew Chigira, Fullstack Developer at TeamPassword.

Customize your design system

Follow the component library’s documentation to theme your design system, or leave it as is to start prototyping immediately. Save your design system to a private repository so you can sync it to UXPin.

When you make changes to the repo, like adding custom components and templates, Merge will automatically sync these back to UXPin. Version Control allows you to choose when to update projects, and you can always switch to earlier versions of your design system.

Choose an Integration

Bring components to UXPin with one of three integrations:

• Git Integration: connects directly to a Git repository–only available for React libraries,
• Storybook Integration: connects to a public or private Storybook–available for React, Vue, Angular, Ember, and other front-end frameworks,
• npm integration: paste npm link to UXPin and import components that you want to use.

Once the initial setup is complete for both integrations, Merge will automatically update any repository changes in UXPin and notify all team members of the new version.

The Git Integration requires some setup to sync correctly with UXPin. UXPin provides a Merge boilerplate that you can download. Running npm install in the root directory will install the dependencies required to run the code from the boilerplate repository (things like React, Webpack, Babel, etc.)

With the Git Integration, you get all the Merge features, including Version Control, Patterns, and Merge component Manager. 

Storybook offers an intuitive dashboard for developing design system components in isolation. Devs can document and test components before distributing them to a GitHub repository. Storybook also has collaboration, QA, and approval features, so teams can manage every aspect of the design system and follow governance procedures.

Configuring the Properties Panel

Each component’s React props will appear in UXPin’s Properties Panel, allowing you to make changes defined by the design system, including color, size, state, typography, etc.

Note: only the Git Integration will display React props. If you’re using Storybook, you’ll have to use Args to configure the UXPin Properties Panel.

Get to work

With your components imported to UXPin, it’s time to start prototyping. Drag UI elements from your design system library onto the canvas to build UIs.

With UXPin Patterns, you can create new patterns and templates and save these to your personal Patterns library. Because these UI components already exist in your repository, it’s a matter of combining them during development to replicate the prototype.

You can test prototypes in the browser for websites and web apps or use UXPin Mirror for mobile app testing (available for Android & iOS).

Test and iterate on your prototype in UXPin until you’re satisfied it’s ready for development.

Create-react-app

The final step is converting your UXPin Merge prototype to a React application. YouTuber CoderOne has an excellent tutorial about going from UXPin prototype to development.

The best way to copy your prototype is in UXPin’s Preview and Share mode. Here you can view the product’s site map, adaptive versions, specifications, and each component’s props. UXPin will even provide a link to the component’s documentation.

Under Spec Mode, UXPin will display each component and its relative props in JSX. Devs can copy/paste this production-ready code to replicate the prototype in their React project.

Switch to UXPin Merge and enjoy the convenience of a design tool with the power of code. Build stunning layouts without drawing any components. For more details, visit our Merge page.

The post React Rapid Prototyping — How to Design a React App Fast? appeared first on Studio by UXPin.

Atomic Design: once an obscure concept, it’s gained popularity in recent years. And it’s a hot interface design trend for good reason. When done correctly, Atomic Design allows design teams to deploy truly unique design systems. What’s more, these design systems offer unparalleled high-quality, consistent interfaces, which benefits end-users and developers alike.

In this post, we’ll discuss the ins and outs of Atomic Design, and what you need to know about the UI components within it.

Make it easier for your design team to adopt atomic design methodology. Design component-based prototypes. Bring React components to UXPin with its revolutionary Merge technology. 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

The 5 UI Components of Atomic Design

Atomic Design is a web design theory pioneered by Brad Frost. A student of chemistry, Frost used the basis of the periodic table to develop this mental model of component-based design and development. In chemistry, a group of atoms combine to form a single molecule, which can then be combined into a series of progressively larger molecules and organisms.

Frost adapts this process as the foundation of his Atomic Design approach.

In essence, Atomic Design consists of five elements that build on one another. They are as follows:

• Atoms. In Atomic Design, as in chemistry, atoms are the basic elements that help inform everything. In the world of web applications, atoms are the foundational elements, such as HTML tags, fonts, animations, and color palettes. Web design “atoms” can also be less concrete. Examples include buttons or forms.
• Molecules. Molecules are the next-largest building block. Created by the joining of different atomic elements, molecules are complex by nature. Because they’re the product of various atoms, though, it’s possible to break them down, conceptually, into UI elements that are easier to digest. Examples of web design molecules include the things that become the backbone of the larger design system, such as form labels or input field.
• Organisms. Atoms combine to form molecules, and groups of molecules form organisms. In the world of Atomic Design, organisms are the UI elements that shape both the appearance and functionality of a website. They’re also the elements that start to impact user interface. The way a developer arranges molecules informs the site experience and the complexity of the finished product. Examples of organisms include logos, search fields, and main navigation which together may form a header organism.
• Templates. At this phase of the Atomic Design process, we start to break with the chemistry analogy and shift back into the lexicon of front-end development, as a whole. Templates, then, are “organisms” strung together at the page-level or beyond. Templates, online atoms, organisms, and molecules, are highly concrete. They provide a fixed context for the more abstract pieces to fit and are responsible for pulling the site together into something resembling its final form. An HTML wireframe is an excellent example of a template.
• Pages. Pages, finally, are the final element of Atomic Design. According to Frost himself, pages are the specific instances of templates. Pages are the most tangible element of all and are the places users spend most of their time. They’re also one of the most essential phases of the Atomic Design process since the final iteration of pages is where developers get to see whether the entire design system is effective or not. In short, the final appearance of the pages dictates whether the product design is ready to launch, or whether the developer needs to loop back and make changes to earlier UI design elements.

The Benefits of Atomic Design

Now that we’ve discussed the basic UI components of Atomic Design, let’s take a deeper dive into why these components are beneficial, and why it’s emerged as such a popular approach to structuring a design system.

Atomic Design allows for a “mix and match” approach

With Atomic Design methodology, developers can take UI elements independently, rather than as a single brick that needs to move as one. This allows developers to reuse, repurpose, or pair atomic components with other elements to form new, more complex components.

Atomic Design generates straightforward layouts

This is true for both developers and final users. For developers, the code of sites created with Atomic Design is easier to read and understand. For users, atomically designed sites are easier to navigate and more intuitive. When and if developers need to go back into the site to make changes in its content structure, Atomic Design makes it easy to identify each element and what it represents and alter things accordingly.

Atomic Design creates a simpler UX design, overall

While the basics of Atomic Design may sound complex, the fact is that sites created from a place of Atomic Design contain fewer UI components, overall.

Here’s why:

When developers have a list of basic building blocks (including atoms, molecules, and organisms) available before they begin to build a user interface, they’re more likely to employ existing infrastructure than they are to create new UI elements needlessly.

The end result is fewer components, which makes for leaner, easier-to-use sites.

Atomic Design Enhances UI Components

The world of web design is intensely UI-focused right now, and for good reason. As customers become more advanced and discerning, web development needs to keep up. Fortunately, Atomic Design makes it easy to do just that. By simplifying otherwise-complex web development outlooks, Atomic Design streamlines workflows for developers and promotes better UIs for end users.

Design with reusable components in UXPin. Bring React components to product design and follow atomic design principles in prototyping. Learn more about UXPin Merge.

The post 5 UI Components in Atomic Design appeared first on Studio by UXPin.

There are so many Storybook tutorials that it’s difficult to know which is best for your needs. We’ve summarized the five best Storybook tutorials to help get you started with this component-driven development technology.

Take UI components directly from Storybook, Git or through npm and drag n’ drop the coded components to create your layout 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 Storybook?

Storybook is a Javascript-based, open-source collaborative development environment for front-end engineers to build UI components in isolation. The platform works with several front-end frameworks, including React, React Native, Angular, Vue, Ember, and HTML, to name a few.

The intuitive user interface makes collaboration more accessible for UX designers, product teams, and stakeholders to interact with UI elements, share feedback, and approve for release.

One of Storybook’s primary use cases is developing and maintaining design systems. Cross-functional teams use the platform to build components, create documentation, run multiple tests (visual, interaction, accessibility, code, etc.), and publish directly to GitHub for distribution.

How does Storybook work?

Front-end devs create components as they would with any project but include a “story” (in the form of a .stories.js file) for each one to appear in the Storybook UI. Within the stories file, devs create controls using arguments, or args for short (the equivalent of React props). These controls appear in the Storybook UI so teams can change a component’s properties, states, interactions, etc.

Read more: What are Storybook args?

The benefit of this file structure and workflow means Storybook runs outside yet parallel to your primary application. So, there’s no need to add any Storybook code to your component library’s files.

Why would you use Storybook?

Sharing, testing, and collaborating on UI components is challenging if you don’t have technical skills. You must set up a local environment and connect your IDE to a shared repository. This workflow is simply too complicated for UX designers, product teams, and non-technical stakeholders.

With Storybook, devs can host their component library on a server for everyone to access as they would any website. Everyone has a user account, allowing them to collaborate and share feedback without writing code or installing extra software.

Read more about Storybook’s benefits: How Storybook helps developers with design systems?

6 Storybook Tutorials

Storybook’s Official Tutorial

• Link: Storybook for React tutorial
• Created by: Storybook team

One of the reasons devs and product teams love Storybook is its comprehensive documentation and community. The Storybook team has created an excellent 10-part tutorial on how to get started setting up the environment and making your first story.

The official Storybook tutorial will give you a foundational understanding of the platform and its features but maybe a little technical and concise for inexperienced front-end engineers.

That said, there are two reasons why you should start with this Storybook tutorial before looking at alternatives:

1. Like any technology, Storybook is constantly releasing updates. The official documentation is updated regularly to reflect these changes. Some Storybook tutorials are outdated, particularly if they use addons that have been updated or no longer exist.
2. Most Storybook tutorials focus on one framework, usually React. Storybook’s docs cover six front-end frameworks: React, React Native, Vue, Angular, Ember, and Svelte. Additionally, these tutorials are available in 11 languages, so it’s an excellent resource for multinational teams.

Atomic Design and Storybook

• Link: Atomic Design and Storybook
• Created by: Brad Frost and Michael Chan

Brad Frost created the Atomic Design principles many organizations use to develop their UI libraries. Atomic Design and Storybook describes how to apply these principles when building components and stories. There’s also an interesting one-hour discussion between Brad Frost and Michael Chan about the history of component libraries.

The Atomic Design and Storybook tutorial is a fantastic resource for anyone who wants a systematic, scalable approach to building UI libraries in Storybook. Brad breaks down an Instagram post to demonstrate how atomic principles apply to a real-world user interface.

React Storybook Tutorial

• Link: React Storybook Tutorial (YouTube)
• Created by: Codevolution

Codevolution’s step-by-step Storybook tutorial will take you from novice to expert within a few hours. If you like video code-along style tutorials, then Codevolution’s course is an excellent option.

The tutorial covers every facet of Storybook, including:

• Setting up a Storybook environment
• Writing stories and story hierarchy
• How to use Args
• Storybook addons
• Accessibility and testing
• Environment variables

Judging by the comments, by the end of this 20-video tutorial series, you’ll have enough knowledge to build a Storybook from scratch or start collaborating on an existing project.

Codevolution offers many free React courses on the same YouTube channel, including Node.js, npm, and Typescript, which you’ll need for setting up your Storybook local environment.

React Storybook Crash Course

• Link: React Storybook Crash Course (YouTube)
• Created by: Web Dev Simplified

Web Dev Simplified is one of the most popular developer channels on YouTube, with over a million subscribers. Kyle aims to explain technical concepts, tools, frameworks, etc., with simple examples and tutorials.

Kyle’s React Storybook Crash Course is one of the best tutorials to understand the fundamentals of creating and managing stories. He doesn’t take you through the setup process but focuses on the code and file structure.

The 17-minute tutorial covers the following:

• Creating a basic story
• Adding interactivity to Storybook stories
• Creating multiple stories for a single React component
• Advanced tips

Storybook in Vue 3

• Link: Getting started with Storybook in Vue 3
• Created by: LogRocket

Storybook supports several front-end frameworks, including Vue. The quick tutorial will show you how to set up a Storybook project using Vue 3 and create two stories for a button and card.

LogRocket also explains several Storybook features and how you might apply them to your project, including:

• The template section
• Named exports
• Addons
• Testing
• FAQs

Prototyping with Storybook components

• Link: Import Components into Storybook and Use Them in Product Design
• Created by: UXPin

So far, we’ve focused on Storybook for development. While designers and product teams can collaborate in Storybook, the platform doesn’t provide the features for prototyping and testing like they would using a design tool.

UXPin Merge integrates directly with Storybook, so that designers can use the component library for prototyping. These fully interactive components look and feel in UXPin, like in Storybook or the final product, allowing designers to build fully functioning prototypes.

Learn How to Import Your Components into Storybook and Use Them in UXPin in this step-by-step tutorial. Sync once, and Merge will automatically update the component library in UXPin and notify design teams of the change.

Sync Storybook to Design with UXPin Merge

Integrate Storybook with UXPin Merge and create a product development workflow that supports a cross-functional collaborative environment where everyone uses the same UI library, eliminating inconsistencies and drift while reducing time-to-market. Discover what UXPin Merge is about.

The post 6 Storybook Tutorials for Product Development Teams appeared first on Studio by UXPin.

Design-to-code is a familiar workflow. Designers create a prototype using a design tool, and developers convert it to code–a simplified version of the standard product development process.

UXPin Merge turns this process upside down with a revolutionary code-to-design workflow. This article explains code to design and how it enhances the product development process with four case studies, including FinTech giant PayPal. 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 Code to Design?

Code to design is a UX workflow developed by UXPin using Merge technology. With Merge, Designers can import UI components from a repository into UXPin’s design editor and use them to build fully interactive prototypes–a process called component-driven prototyping.

Component-driven prototyping gives designers all the benefits of code without needing to write or learn a programming language.

This code to design workflow offers several benefits for UX designers, stakeholders, and product teams:

1. Designers build production-ready prototypes, increasing testing scope during the design process.
2. Using “ready-made” code components means designers don’t design from scratch, reducing time to market while increasing prototype quality, fidelity, and functionality.
3. Stakeholders can better visualize a design’s vision because Merge prototypes look and behave like an end-product.
4. Design handoffs are smoother with less friction because designers and engineers speak the same language and use the same source of truth.
5. Increases design system adoption because Merge integrates the component library into the product development workflow.
6. The drag-and-drop workflow makes product design more accessible to non-designers.

Design to Code vs. Code to Design

The challenges of design to code

Design to code is the traditional UX workflow. Design teams create mockups and prototypes using standard image-based design tools, which developers convert to code.

The biggest challenge with a design-to-code workflow is that it creates a gap between designers and engineers. To bridge that gap, designers must use external tools, write detailed documentation, and meet with devs to explain how prototypes and interactions must function.

Even with all this extra work and explanation, the final product often doesn’t meet the designer’s specifications and expectations. Designers and engineers argue over who is to blame, but the real issue is a language barrier. Designers work with vector graphics tools, while engineers work with code.

The code to design solution

A code-to-design workflow bridges the gap between designers and engineers. They still speak different languages, but a technology like Merge facilitates the translation between design and development.

Design teams work with visual UI elements, while engineers work with the code powering them–the same component from two perspectives.

Teams working with a design system benefit most from this code-to-design workflow.

With design-to-code workflow, teams work with two versions of the design system:

• Image-based UI kit for design tools
• UI component library for programming

Code to design eliminates this separation because design teams and engineers use the same component library from the same repository–creating a true single source of truth.

Read more about code to design vs. design to code.

Code to Design Use Cases

You’re probably thinking, “this code-to-design thing sounds great, but how does it translate to real-world product development?” Glad you asked. Here are four use cases where companies use code-to-design for product development.

PayPal

In 2019, PayPal completely redesigned its internal product development process using UXPin Merge. PayPal’s internal UX team had a unique challenge–they had five designers to over one thousand engineers managing 60+ products. No two products looked the same, and each had usability and design inconsistency issues.

Erica Rider, UX Lead EPX at PayPal, was tasked with solving this problem. To add a layer of complexity, Erica had to create a workflow that enabled PayPal’s product team to design, test, and deliver products. They lacked design skills and had little design tool experience.

After trying several solutions using traditional image-based tools, Erica discovered Merge. PayPal’s UX team used Merge to sync a customized Fluent UI design system to UXPin.

PayPal’s stakeholders wanted to test the effectiveness of this new code-to-design investment. Erica’s experiment involved creating two versions of a one-page prototype: one using an image-based tool and the other using the UXPin Merge. The results were better than expected:

• Image-based tool: over one hour
• UXPin Merge: 8 minutes

The Merge prototype had far superior fidelity and functionality. And, with some coaching, PayPal’s product teams achieved the same results.

Read PayPal’s full case study.

Iress

Software developer Iress was on a four-stage process to design system maturity.

• Stage one: PDF style guides
• Stage two: HTML pattern library with CSS
• Stage three: UI kit and component library
• Stage four: a fully integrated single source of truth with no design or code required for releases

Iress was stuck on stage three, unsure how they would bridge the gap between design and development to reach the final goal–until the team discovered code-to-design approach.

This workflow ticked all the boxes for Iress at that moment:

• A single repository serving designers and engineers the components they need to build and release products.
• Better alignment between designers and engineers, with seamless design handoffs.
• No designing or front-end programming from scratch.
• No design drift or inconsistencies across the organization.
• Realistic, interactive prototypes give testing participants and stakeholders an accurate representation of the final product.
• The opportunity to experiment with theme switching for dark mode or multi-brand design systems.

Read Iress’ full story.

TeamPassword

The first two use cases were enterprise products. But what can code-to-design do for startups and small teams? TeamPassword operates in the highly competitive password management market. The startup’s biggest challenge is that they don’t have any UX designers.

For a startup entrusted with people’s passwords and sensitive data, usability issues and design inconsistencies erode trust, ruining TeamPassword’s reputation and resulting in churn.

TeamPassword’s engineers did all the design and user testing using code prototypes. While these prototypes accurately represented the product’s functionality and user experience, building and iterating on ideas was time-consuming.

In 2022, TeamPassword switched to the MUI design system, which they synced to UXPin using Merge. Instead of developing prototypes, engineers used their custom MUI React library in UXPin. This code-to-design workflow significantly reduced time-to-market while eliminating usability issues and design drift.

When TeamPassword’s developers update the design system repository, the change automatically sync to UXPin, so they always have the latest version. Merge’s Version Control allows the team to track changes and switch between versions during testing.

Read TeamPassword’s full case study.

Reach a new level of prototyping

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

Discover UXPin Merge

dotSource

dotSource is a German-based digital product consulting and development agency. The company uses multiple design systems to deliver products and solutions to clients.

dotSource’s biggest problem in delivering these products was redundant processes and duplicate work with two design systems–a UI kit for design and a component library for development. The design system’s documentation created a third piece the team had to maintain.

dotSource’s “single source of truth” was actually three sources, not one–a problem many organizations encounter with design systems.

dotSource knew they had to make their single source of truth code-based but didn’t know how to achieve this workflow using traditional image-based design tools–until they discovered UXPin Merge.

dotSource uses Merge’s Storybook Integration to sync its design system to UXPin. Storybook allows dotSource to update the design system’s repository, documentation, and UXPin’s components with every release.

“Switching to a code-based design workflow is the only way around these image-based limitations. A code-based prototyping tool like UXPin with Merge technology enables this workflow by rendering code (instead of vector graphics), just like a browser. In UXPin, UI components look and behave exactly as they do for developers, effectively bridging the gap between design and development–a real single source of truth.” – dotSource

Read dotSource’s full article.

How Does Code to Design Work in UXPin?

Product teams have two options when importing code components into UXPin:

1. Import a product design system
2. Import an open-source UI library (MUI, Bootstrap, Ant Design, etc.)

There are three ways to bring these libraries into UXPin:

• Git Integration: syncs React component libraries from a repository to UXPin.
• Storybook Integration: allows teams to sync many front-end frameworks, including React, Vue, Angular, Web Components, and Ember, to name a few (find the complete list in Storybook’s docs).
• npm Integration: designers can import UI components from open-source libraries from the npm registry using the Merge Component Manager (MCM).

We have three tutorials for using the npm Integration and Component Manager:

• React-Bootstrap
• Ant Design
• MUI

The Git and Storybook integrations are a little more complex, requiring technical skills to complete the Merge setup with UXPin’s Technical Support Team.

Combining components with UXPin Patterns

With UXPin Patterns, designers can combine UI components to create new UI patterns and templates. This feature is particularly helpful when a design system doesn’t have a specific element.

For example, suppose you need to add an analytics dashboard to your product, but the design system doesn’t have charts. You can find an open-source UI library on the npm registry, import the package using the MCM, and add the chart components to create new patterns while maintaining the same fidelity and functionality. The team can promote this pattern to the design system or use it as a once-off. 

Learn more about UXPin Patterns in this tutorial.

Ready to get started with code to design? Visit our Merge page to request access to this revolutionary code-based technology.

The post Code to Design Complete Guide for 2023 appeared first on Studio by UXPin.

Just completed the final iteration of your prototype? Great! Let’s send the design to the development team, so they can translate it to code. Here the question pops up: is design to code really the best direction you can hope for? Actually, there’s a second model of working: pushing code to design and working with coded UI components.

In this article, we will discuss design-to-code model and why design teams cannot eliminate inconsistencies and lack of collaboration without changing their tools. Luckily, with UXPin Merge, designers still enjoy an intuitive design tool’s user interface; all that changes is what’s behind the components that they use for prototyping.

Ready to experience code-to-design technology? Request access to UXPin Merge and obtain a single source of truth between design and development. 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

Design to Code 

Design to code describes a typical product development process. Designers use design and prototyping tools to design user interfaces and hand these off to developers to code.

Over the years, the design-to-code process has evolved, but there is still a big gap between design and development. Designers still create static vector user interfaces, which engineers must translate into code.

Due to the lack of fidelity and functionality, design teams must include documentation, annotations, and explanation about what designs and prototypes are supposed to do.

Many designers use GIFs and videos to demonstrate animations and transitions because their tools lack interactivity, which requires significant time and resources. It also fragments design files and documentation, confusing developers and stakeholders.

Read more about it in our article about image-based vs. code-based tools.

Benefits of design to code

The design-to-code process is comfortable for designers and engineers because it allows each party to work with familiar tools, workflows and using familiar vocabulary that’s comprehesive to them.

Design tools are built for ease of use and speed. Experienced designers can create a screen mockup really fast using an image-based design tool.

Limitations of design to code

Unfortunately, the limitations outweigh the benefits–which is why so many companies seek ways to improve and update their design processes.

Misalignment between design and development

Fidelity and functionality are massive limitations with current design-to-code workflows. Image-based prototypes don’t look or function like the end product. Even with documentation, annotations, and handover meetings explaining prototypes, designers still complain that engineers haven’t met their expectations. Conversely, engineers struggle to articulate technical limitations to designers, creating friction.

Design system challenges

Even with high-quality design systems, design to code creates challenges for handoffs, scalability, and maturity. The design system team must manage two design systems:

• UI kit for designers
• Component library for developers

Additionally, they must maintain documentation for both systems.

Describing this workflow as a single source of truth is a fallacy. As the German-based software development agency dotSource points out in this article, 

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

Duplicated work

When engineers get the final version of design, they need to translate it to code. Thus, their work takes much longer than it could if the team didn’t need to push design to code.

Code to Design

Code-to-design is a workflow pioneered by UXPin using Merge technology.

Designers still use a design tool with the same familiar UI and features, but the designs render production-ready code instead of vector graphics.

Many design tools try replicating this system with plugins and extensions, but the code is rarely usable for engineers. Merge is different because it syncs components from a design system’s repository to UXPin–engineers can use the code because they wrote it.

Designers use the same component library during the design process as engineers use for development.

Benefits of code to design

Single source of truth

Code to design solves many product development problems, but the most significant benefit is a true single source of truth–everyone uses the same component library from the same repository. Any changes to the repo automatically sync to UXPin, notifying design teams of the update.

Merge’s Version Control allows design teams to change to earlier releases and only update an existing project when they choose.

If devs are using UXPin’s Storybook Integration, they update documentation simultaneously with every release. This single source of truth solves many DesignOps challenges, allowing team members to focus on high-level tasks.

Another significant benefit of a code-to-design workflow is smoother design handoffs. Engineers import the component library’s package, add the components, and copy JSX code from UXPin to complete frontend development.

Component-driven prototyping

Merge components appear in UXPin with the same properties and interactivity as the repository. Each component’s Props (Args in Storybook) appear in UXPin’s Properties Panel, allowing designers to make changes according to the design system–i.e., colors, states, sizes, etc.

These ready-made UI elements facilitate rapid component-driven prototyping, where designers simply drag and drop components and patterns to build fully functioning prototypes.

Ultimate consistency with zero design drift

These ready-made components eliminate inconsistencies because everyone uses the same UI library with the same limitations and constraints.

Designers can only change elements via the properties available in UXPin’s Properties Panel. There are no overrides, thus eliminating the possibility for changes, resulting in no drift.

Better governance

These limitations improve governance and design system integrity. The design system team has absolute control over the repo; therefore, everyone must follow the correct procedures to promote new patterns and components.

Scalability and maturity

Merge facilitates the highest design system maturity stage with every team member using the same component library–no designing or developing from scratch to release products. Using this technology, organizations can achieve this level of maturity significantly quicker than following a design-to-code workflow.

With everyone using a single codebase, it’s easier to scale a design system following technological and market changes. Whenever the design system team adds new components, patterns, or templates to the repository, they’re immediately available for the entire product development team.

Enhanced testing

Better prototypes mean better testing. Designers can solve more issues and find better opportunities during the design process with prototypes that accurately represent the final product experience.

Usability participants and stakeholders can interact with these prototypes like they would the final product, resulting in meaningful feedback and actionable data-driven insights.

Limitations

Code to design requires a component library

Code to design can only work with a component library. You can use an open-source UI library if your organization doesn’t have a design system. For example, PayPal’s internal product development team uses a customized Microsoft Fluent UI design system.

Designers can also use Merge’s npm integration to import components from open-source libraries available on the npm registry. This method requires no technical skills. Instead, designers use the Merge Component Manager to import and manage UI elements.

Designers rely on engineers

Code-to-design requires designers and engineers to work closer together. Most organizations have a dedicated design system team, so this won’t be too different from standard governance procedures.

Less flexibility

A code-based design system is less flexible than a UI kit that designers can quickly assemble. Designers have limited or no possibility of changing or manipulating components once uploaded into the design tool. This inflexibility is necessary for design system governance and integrity, but some might argue that it restricts innovation and creativity.

UXPin functions like any other design tool, so designers can develop new ideas and patterns to present to team members. With UXPin Patterns, designers can combine existing design system elements or import open-source libraries to create new components, patterns, and templates.

With this in mind, code-to-design creates more opportunities for creativity and innovation because designers can leverage the best parts of open-source libraries to develop new patterns.

Companies Using Code to Design

Our diverse client base proves that code to design works for multinational enterprises, agencies delivering white-label software, and startups. Here are three great examples of code-to-design in practice.

PayPal

PayPal’s internal UX team revolutionized its product development process by switching to a code-to-design model. Since the switch in 2019, PayPal’s product teams deliver releases 8X faster with no design drift or inconsistencies. PayPal’s new product development process has improved cross-functional collaboration, with everyone taking responsibility for user experience.

Merge also improved PayPal’s prototyping and testing, with better feedback from test participants and stakeholders. 

“One of the significant impacts of UXPin Merge is our ability to create higher-fidelity prototypes. There’s a lot more confidence from everyone (including designers, C-suite, directors, and developers) about what the final product will look like, the user experience, and interactivity–giving us higher quality feedback from stakeholders.” – Erica Rider, UX Lead EPX at PayPal.

TeamPassword

TeamPassword is a 5-person startup (as of Feb 2023) operating in the highly competitive password management market. The startup doesn’t have a UX team, requiring engineers to prototype and test new releases.

Before switching to Merge, TeamPassword’s engineers would develop each prototype–a time-consuming process for a company with limited resources. In 2022, TeamPassword changed to Merge and synced a custom MUI design system.

Since changing to a code-to-design workflow, TeamPassword’s speed-to-market has drastically improved, and the product has no usability issues or inconsistencies, making the company more competitive.

Ready to overhaul your design-to-code workflow with a revolutionary code-to-design solution? Visit our Merge page.

The post Code to Design vs. Design to Code – Which is Better? appeared first on Studio by UXPin.