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

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

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

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

Reach a new level of prototyping

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

Discover UXPin Merge

What is a Design Token?

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

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

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

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

Design tokens within CSS

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

Example of Design Tokens as CSS Variables

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

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

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

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

Design Tokens within CSS

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

What are Design Tokens?

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

Using Design Tokens in CSS

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

Example of Design Tokens as CSS Variables

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

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

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

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

Types of Design Tokens

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

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

Where did Design Tokens Come from?

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

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

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

What is the Difference between Atomic Design and Tokens?

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

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

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

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

3 Design Tokens Examples

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

Design Token Example #1: Font Family

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

Design Token Example #2: Font Size

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

Design Token Example #3: Line Hight

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

Are Design Tokens Right for You?

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

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

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

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

Benefits of Using Design Tokens

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

1. Having a Single Source of Truth

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

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

2. Maintaining UI Consistency

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

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

3. Getting Flexibility to Scale

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

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

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

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

How to define a design token structure

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

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

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

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

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

Architecting Tokens with Options and Decisions

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

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

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

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

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

Tips on Design Token Naming Conventions

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

1. Be Descriptive and Concise

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

Example:

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

2. Use Consistent Patterns

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

Example:

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

3. Avoid Ambiguity

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

Example:

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

4. Reflect the Design Intent

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

Example:

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

5. Align with Your Brand and Language

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

Example:

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

6. Include Context When Necessary

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

Example:

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

7. Use Common Abbreviations Sparingly

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

Example:

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

8. Document Naming Conventions

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

Example Documentation Excerpt:

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

9. Plan for Scalability

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

Example:

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

How Design Tokens Work in Practice

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

The Traditional Workflow–Without Design Tokens

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

There are several problems with this workflow:

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

The Design Token Way

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

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

A Single Source of Truth With UXPin Merge

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

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

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

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

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

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

Interactions are vital for prototyping because they provide usability participants and stakeholders with a realistic user experience. The problem many designers have is building interactive components is time-consuming, and the results are underwhelming in most design tools.

Discover component-driven prototyping with UXPin Merge and how you can use interactive components to create fully functional prototypes to enhance cross-functional collaboration and user testing. Visit our Merge page for more details and how to request access to this revolutionary UX design technology.

Reach a new level of prototyping

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

Discover UXPin Merge

What are Interactive Components?

Interactive components (or interactive elements) are reusable UI elements from a design system and include interactivity by default. This interactivity is a game-changer for designers who usually work with UI kits and have to add interactions for every project.

Design teams can set interactions, states, and other animations to create immersive prototypes that accurately represent the final product.

Interactive Components Benefits

Here are several benefits of interactive components.

1. Fewer Artboards

Traditionally, creating interactions using a design tool required multiple artboards to achieve basic functionality. Designers can achieve the same results with a single artboard using interactive components.

2. Faster Time to Market

Creating fewer artboards means less design work for designers, and interactive components are reusable, so designers only have to set interactions once–saving significant time during the design process.

Once engineers are familiar with the approved components, the design handoff process is much easier, saving further time on project delivery.

The result of all these time savings?–faster time to market.

3. Increased Consistency

UI kits increase design consistency, but they still leave some ambiguity regarding interactions. Designers must set these interactions themselves, leading to errors and inconsistencies–especially if the project doesn’t specify interactivity guidelines!

Interactive components have interactivity “baked in,” so everyone has the same states, microinteractions, and animations. These baked-in interactions increase consistency while enhancing efficiency because designers have fewer setup tasks and errors to fix.

4. Better Testing and Feedback

User and stakeholder feedback is crucial for design projects. This feedback drives decision-making to deliver user-centered products that align with business goals.

Most design tools lack the fidelity and functionality to perform simple interactions engineers achieve with a few lines of code. Interactive components make it easier to replicate code functionality, resulting in immersive, realistic prototypes for usability testing and stakeholders.

5. Increase Design System Adoption

One of the DS team’s jobs is evangelizing the design system to increase adoption. Interactive components are a powerful tool in design system evangelism because they create efficient workflows for product development teams, thus increasing the likelihood of adoption.

6. Scaling Design

At UXPin, we’ve seen how component-driven prototyping and interactive components help scale design. Our favorite example is how PayPal used UXPin Merge to scale its design process without hiring new staff.

Connecting Merge to interactive components hosted in a repository allowed PayPal’s product teams (with little or no UX/design tool experience) to complete 90% of design projects 8X faster than skilled UX designers previously could.

Interactive components made the design process more accessible to non-designers because they reduced the learning curve significantly.

PayPal’s UX team built an interactive component library, including layouts and templates, and used React props to set design system constraints. Product teams simply drag and drop to build prototypes for usability testing and design handoffs.

Interactive components allow orgs to give more UX responsibilities to non-designers, like product teams (or engineers in the case of another UXPin Merge user, TeamPassword), thus scaling design with growing the UX team.

You can create interactions depending on the conditions like click, hover etc. on the ready components!

How to Incorporate Interactive Components in UXPin Prototypes?

To incorporate interactive components into your product prototypes, there are many steps you can take. Make sure that forms can actually be filled out; boxes can be checked; and links can be clicked on.

Make as many components of your design actually workable as you can; this allows users to have the experience of trying to use the product, and it can give you some insight into how your product works and how people will (or want to) use it.

Using Interactive Components in UXPin

Since the first release of UXPin more than a decade ago, interactive components have been core to our design tool, providing designers with a solution to build prototypes that accurately replicate the final product experience.

UXPin has four powerful features to create interactive components:

• States: Create multiple state variants, each with different properties and interactions for a single component.
• Variables: Capture user input data and use it to create personalized, dynamic user experiences.
• Expressions: Javascript-like functions to create complex components and advanced functionality–no code required!
• Conditional Interactions: Set if-then and if-else conditions based on user interactions to create dynamic prototypes with multiple outcomes to accurately replicate the final product experience.

One helpful strategy is including pre-built components (called “forms” at UXPin)  that you can easily drag and drop in our platform. (No need to design these from scratch!) 

Advanced Component Customization with UXPin

In UXPin, components are not just static design elements; they offer advanced customization capabilities that enable designers to create dynamic, interactive prototypes.

Unlike traditional static components, UXPin components can be enhanced with multiple states, conditional logic, and even real data integration. This flexibility allows designers to create high-fidelity prototypes that closely mimic the functionality of the final product.

• Multiple States: Each component in UXPin can have multiple states (e.g., default, hover, active), which can be easily switched within the prototype. This feature allows designers to showcase different interactions and user flows without needing to create separate screens for each variation.
• Conditional Logic: UXPin allows components to change dynamically based on user actions or predefined conditions. For example, a form component can display error messages or success notifications based on the user’s input, providing a realistic preview of the user experience.
• Data Integration: Components in UXPin can integrate with live data, making them highly functional for testing and development. By connecting components to real data sources, designers can create prototypes that behave like real applications, enhancing the accuracy and effectiveness of usability testing.

4 Examples of Interactive Components in UXPin

Here are some interactive component examples from our examples page to see how you can start. For now, let’s see what you can do with states, variables, expressions, and conditional logic.

Example 1: Button

Example 2: Input and text area 

Example 3: Radio button 

Example 4: An interactive sign-up form

→ Download a ready .uxp file to import into your UXPin account. 

Want to create one by yourself? Here’s a tutorial. 

Interactive Components in UXPin Merge

Merge takes component-driven prototyping and interactive components to another level. Instead of designers building components in UXPin, Merge imports a design system library from a repository.

These Merge UI elements are truly interactive components because behind them is code from a front-end framework like React, Vue, Angular, etc. You can import your organization’s design system or use an open-source library.

Designers don’t ever have to see or write code to use Merge components; they only work with the visual elements to build fully functioning prototypes. They also have access to component properties via UXPin’s Properties Panel to make changes within the design system’s constraints.

Learn more about Merge and how to request access.

Designing with Merge Interactive Components

Step 1: Grab Components From the Design System

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

• Git Integration: Connect a React component library directly to UXPin
• Storybook: Sync front-end frameworks like Vue, Angular, HTML, Ember, Web Components, and more (see the complete list here)
• npm Integration: Import open-source libraries from the Node Package Manager (npm)–a fantastic DIY option for designers. Read more about the npm Integration and how it works.

Imported Merge components appear in UXPin’s Design System Libraries in the left sidebar. Designers click or drag the UI elements they need from the sidebar to appear on the canvas. They can also use multiple design systems and UXPin elements and even combine them to create new components which they can save as Patterns.

Step 2: Make Changes

When designers click on a Merge component, its properties appear in the righthand Properties Panel. Those with technical skills can switch to JSX and adjust the code directly–a flexible workspace to match your preferred workflow.

Step 3: Share and Test

Designers can use Preview and Share for usability testing or when sharing prototypes with stakeholders. UXPin’s Comments feature allows teams and stakeholders to collaborate on prototypes and assign comments for team members to action.

Step 4: Design Handoff

Preview and Share also features Spec Mode, where engineers can inspect elements and click on Merge components to view and copy JSX changes. Designers can also include prototype documentation with annotations explaining each element and user interface.

Check out Design Handoff: What it Looks Like with UXPin Merge for a short tutorial.

Interactive Components UXPin Merge vs. Figma

Here’s a quick overview of how Figma’s interactive components feature compares to UXPin Merge components.

Single Source of Truth

Figma’s interactive components allow designers to replicate some fundamental interactions. However, organizations must still manage two design systems–one UI kit for designers in Figma and a separate component library hosted in a repository.

The problem with this workflow is it requires additional resources to manage and update two systems while increasing the likelihood of errors.

With Merge, design teams and engineers pull components from the same repository. Designers see visual elements, and engineers use the code behind them. Any changes to the repository automatically sync to UXPin and notify all teams of the update. Designers can also use Version Control to switch between different design system versions.

Fully Interactive

Figma’s interactive components aim to mimic code, whereas code powers Merge, giving design teams fully interactive UI elements.

With Figma’s interactive components, you’re essentially creating states. With Merge, you get complex functionality like real date pickers, data tables, graphs, inputs, responsive design, and much more!

Smoother Design Handoffs and Cross-Functional Collaboration

Design handoffs are seamless, almost non-existent when using Merge because designers and engineers use the same component library. Design teams can’t make changes outside of properties set by the design system, so there are no surprises for engineers.

Merge significantly reduces development time because engineers can copy/paste production-ready code from the repository and grab component props from UXPin to begin front-end development.

Figma’s components are vector-based artboards. Although many plugins convert Figma design files to code, it’s rarely usable, and engineers must still re-program it to meet their product’s format and structure.

In summary, Merge is a code-based technology that syncs design and development to form a single source of truth. Figma’s interactive components offer basic functionality (mostly state variants) that reduces the number of artboards designers use to create interactions.

Use our Figma plugin to copy Figma designs into UXPin. Reach higher interactivity of prototyping.

Bridging Design and Development with UXPin Merge

One of the standout features of UXPin is its Merge technology, which bridges the gap between design and development by allowing designers to use actual code components within their prototypes. This feature ensures that the components in UXPin are the same as those in production, maintaining consistency and reducing the risk of discrepancies between the design and the final product.

• Code-Based Components: With UXPin Merge, designers can import coded components from a repository (like GitHub) and use them directly in their design projects. These components are not just visual representations; they are the actual components that will be used in the final product, complete with all the functionality and interactivity defined by the development team.
• Single Source of Truth: By using code-based components, UXPin ensures that there is a single source of truth for both designers and developers. This approach eliminates the need for redundant handoffs and rework, as any changes made in the design are immediately reflected in the code, and vice versa. This seamless integration fosters better collaboration and streamlines the product development process.

How to Get Started Prototyping With UXPin Merge

Ready to get started with component-driven prototyping in UXPin using Merge? You have two options:

• Open-source libraries: Open-source libraries are best for teams who lack an active dev support or they just want to get some basic understanding of how they can work with components before comitting to them.
• Private design systems: If you’d like to sync your product’s private design system to UXPin, visit our Merge page to request access, and one of UXPin’s technical staff will contact you to help with onboarding.

The post What are Interactive Components? Bring your Prototypes to Life in UXPin appeared first on Studio by UXPin.

If you’re developing a web application that requires both robust backend functionalities and a flexible, stylish frontend, Laravel and Tailwind CSS make a perfect combination.

There are several other popular CSS frameworks and libraries you can use with Laravel. Tailwind CSS stands out from other CSS frameworks due to several distinctive features that cater to modern web development practices, such as utility-first approach, high customizability, and more.

Let’s see how to make Laravel and Tailwind CSS work together.

Generate code-backed Tailwind UI components with UXPin Merge. Its Merge AI plan allows you to generate complex Tailwind components with a prompt. Do you need a table, navigational menu or user profile card? Our AI component generator have your back! Use this feature and our built-in library to design UI that you can copy the code off. Try UXPin Merge for free.

Design UI with code-backed components.

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

Try UXPin Merge

Why Tailwind CSS works great with new Laravel projects

Tailwind CSS stands out from other CSS frameworks due to several distinctive features that cater to modern web development practices. Here are some reasons why Tailwind CSS might be a better choice than other frameworks depending on your specific project requirements:

1. Utility-First Approach: Tailwind CSS is built around the concept of utility-first, meaning it provides low-level utility classes that you apply directly in your HTML. This approach encourages you to think about styling in terms of constraints and systems rather than traditional semantic CSS, which can lead to more consistent and maintainable codebases.
2. High Customizability: Unlike frameworks like Bootstrap or Foundation, which come with predefined component styles, Tailwind allows developers to create custom designs without fighting against the default styles that need to be overridden. You can design unique UIs that don’t look like they come from the same template.
3. Responsive Design Made Simple: Tailwind makes it extremely easy to build responsive designs with its mobile-first philosophy. You can control every style of your application on different screen sizes using simple modifiers appended to your utility classes, such as md:, lg:, and so on.
4. No JavaScript Dependency: Tailwind doesn’t include any JavaScript by default, which makes it purely focused on styling. This can be a significant advantage if you want to control exactly what JavaScript runs on your site or if you prefer to use other libraries for interactivity.
5. PurgeCSS Integration: Tailwind integrates seamlessly with tools like PurgeCSS, which strips out unused CSS when building for production. This means that despite having thousands of utility classes, the final CSS bundle that goes to the client can be extremely small and fast-loading.
6. Rapid Prototyping: The utility-first approach lets you quickly see changes and iterate on design directly in the markup. This can speed up the process of experimenting with different designs and layouts without the overhead of going back and forth between CSS files and HTML.
7. Developer Experience: Tailwind provides a consistent and easy-to-remember set of utility classes that can reduce the cognitive load when styling elements. This can lead to faster development times and less context switching between HTML and CSS.
8. Growing Community and Ecosystem: Tailwind CSS has a rapidly growing community and an increasing number of plugins and integrations that extend its functionality, such as Tailwind UI for complete design patterns and components.

While Tailwind CSS offers numerous benefits, it’s important to consider that it does have a learning curve, especially for those accustomed to traditional CSS or more semantic frameworks. The choice between Tailwind and other frameworks should depend on your project needs, team familiarity, and specific preferences in web development workflows.

What are typical Laravel and Tailwind CSS use cases?

Tailwind CSS can be a fantastic choice for a wide range of Laravel projects due to its flexibility, customizability, and utility-first approach. Here are some types of Laravel projects where Tailwind CSS particularly shines:

Single Page Applications (SPAs)

For projects where Laravel serves as a backend API and the frontend may be handled by Vue.js, React, or another JavaScript framework, Tailwind CSS provides a quick and efficient way to style responsive layouts and components. Its utility-first approach allows developers to rapidly prototype and iterate on the UI design.

Dashboards and Admin Panels

Tailwind’s utility classes make it easy to create custom and responsive dashboards or admin panels. The framework’s responsiveness and component-driven structure are ideal for building complex UIs that require a high level of customization.

E-commerce Platforms

Tailwind can help create visually appealing and highly customized interfaces for e-commerce platforms built with Laravel. It supports diverse product displays, complex form inputs, and varied layouts that are common in e-commerce sites.

Blogs and Content Management Systems

Tailwind can be used to style blogs and CMS platforms, providing the flexibility to customize themes and layouts easily. Its utility classes help in quickly adjusting typography, spacing, and other elements crucial for content-driven sites.

Educational Websites

For websites that feature online learning or courses, Tailwind CSS can help design clear, readable, and engaging interfaces. It’s particularly useful for creating layout grids, text utilities, and responsive designs that enhance the user experience on educational platforms.

SaaS Products

Startups and businesses building SaaS products with Laravel as the backend can benefit from Tailwind’s scalable and maintainable styling approach. Tailwind facilitates the creation of a cohesive look and feel across the entire application, which is vital for brand consistency.

Marketing Websites

When using Laravel to build a marketing or portfolio website, Tailwind CSS’s design flexibility enables developers to implement creative, modern designs that stand out, without heavy reliance on custom CSS.

Social Networks

For social networking platforms with complex user interfaces, Tailwind CSS helps manage various UI components such as modals, dropdowns, timelines, and feed layouts effectively and responsively.

How to integrate Tailwind CSS with Laravel

You could go traditional route of setting up a Laravel project and instaling Tailwind CSS. Yet, we have a tool that will help you streamline front-end development — UXPin Merge. This is a UI builder for creating interfaces with Tailwind UI components. Thus, the first step of integrating Tailwind with Laravel is to do UI exploration in UXPin.

Step 1: Create UI design in UXPin

Go to UXPin and start a new project. Open a Tailwind UI library (an official Tailwind CSS library of reusable components) that’s available on Merge AI plan (or on free trial.) Choose components that your project requires and set up their properties. Can’t see a relevant component? Use AI Component Creator to generate a component you need.

Let’s say we’re building a marketing website. What’s cool about UXPin Merge is that you can copy the code from Tailwind UI library and paste it to UXPin’s editor, using an extra component in Tailwind UI library called Custom Component.

Here’s how:

1. Go to Tailwind UI > Hero Section
2. Copy the code by clicking the Copy icon in the top right corner.
3. Open UXPin’s prototype.
4. Copy the code in the Custom Component.
5. Pick another section and repeat the steps above.

This is the fastest way of building a code-based UI. If you need a custom section that you can’t find in the Tailwind UI resources, use AI Component Creator to generate one based on your prompt. We cover how to use it in this article: ChatGPT in UI Design.

Then, you can use Global Theming for Tailwind UI library in UXPin to make your design consistent.

Step 2: Set up a Laravel project

The next step is to set up a new Laravel project or open your existing one.

1. Install prerequisites such as PHP, Composer (dependency manager), and Node.js with npm.
2. Install Laravel using Composer if you’re starting a new project.
3. Open your Laravel project in Visual Studio Code or StackBlitz.
4. Install recommended VS Code extensions for Laravel development, such as PHP Intelephense and the Laravel Extension Pack.
5. Configure your environment by adjusting settings in the .env file.

Step 3: Install Tailwind CSS

Install Tailwind CSS via npm, setting up your tailwind.config.js, and configuring your CSS files to include Tailwind’s directives. You’ll also need to adjust your Webpack configuration through Laravel Mix to ensure that Tailwind’s build process is integrated into your asset compilation pipeline.

What you want to do is incorporate the UI design that you’ve created in UXPin into your project. You can copy the code off the component and incorporate it into the thing you’re building. You just need to use a code editor like Visual Studio Code or StackBlitz.

Just open the Preview mode in UXPin and switch to an Inspect tab. Click on the component and you will see that you get the code behind it. Copy it and paste it to your Laravel project.

We covered this step in this webinar:

Step 4: Serve your application

“Serving your application” refers to the process of running your web application on a local development server so that it can be accessed through a web browser. This is a crucial step during development because it allows you to view and interact with your application as it would appear and function on a live web server, albeit in a local and controlled environment.

When you serve a Laravel application, you typically use Laravel’s built-in development server, which can be started with the Artisan command-line tool.

Use Tailwind CSS with Laravel

For developers working on web applications that demand both strong backend capabilities and a stylish, adaptable frontend, Laravel paired with Tailwind CSS is an excellent choice. Unlike other CSS frameworks, Tailwind CSS offers unique advantages for modern web development, including a utility-first approach and extensive customizability. This article also explores how to integrate Laravel with Tailwind CSS effectively.

Quickly build code-backed UIs with UXPin Merge – a powerful UI builder that integrates the power of design and code, so you can create UI designs of your app with pre-built components, AI generation and quick code copy features. Try UXPin Merge for free.

The post Laravel and Tailwind CSS — A Quick Integration Guide appeared first on Studio by UXPin.

When it comes to building responsive, aesthetically pleasing web applications, two frameworks often come into the spotlight: Material UI and Bootstrap. Both are powerful tools in a developer’s arsenal, each with unique strengths and philosophies. Let’s dive into a comparative analysis of these two front-end giants to help you decide which one aligns best with your project needs.

Build your React app’s interface with code-backed MUI or React-Bootstrap components. Drag and drop coded components on the canvas and design an interface that’s interactive and production-ready by default. Save your time on translating design to code. Try UXPin Merge.

Design UI with code-backed components.

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

Try UXPin Merge

Material UI

Material UI (known as MUI) is a React component library that implements Google’s Material Design rules. It is renowned for its clean, modern aesthetics and comprehensive component set, making it a favorite among developers who value design consistency and user experience.

Key Features of MUI

• Design Philosophy: Material UI adheres strictly to Material Design principles, offering a cohesive and visually appealing design language that promotes user familiarity and intuitiveness.
• Component Library: MUI boasts a rich library of pre-built, customizable components designed to work seamlessly out of the box, reducing the need for extensive custom styling.
• Customization: MUI provides robust theming capabilities, allowing developers to tweak and personalize the appearance to align with their brand’s identity.
• React Integration: As a React-specific library, MUI leverages the power of React’s component-based architecture, making it ideal for developers working within the React ecosystem.
• Accessibility: Material UI components are built with accessibility in mind, ensuring that web applications are usable by everyone, including those with disabilities.

Ideal Projects for Material UI

1. React-Based Applications: Material UI is specifically designed for React, providing seamless integration and development experience.
2. Projects Requiring Consistent Design Language: Ensures a consistent and cohesive user interface across different parts of the application.
3. Applications with Complex UI Components: Offers a comprehensive set of pre-built components such as tables, forms, buttons, modals, and navigation elements.
4. Projects Prioritizing Accessibility: Follows best practices to ensure usability by people with disabilities.
5. Applications Needing Custom Theming: Provides robust theming capabilities for easily modifying and extending default themes.
6. Projects with Agile Development Processes: Suitable for agile development, where requirements may change frequently, and iterative improvements are common.

Bootstrap

Bootstrap is one of the most popular CSS frameworks, widely adopted for its simplicity and flexibility. It provides a solid foundation for building responsive web designs and is known for its extensive grid system and pre-designed components.

Key Features of Bootstrap

• Design Philosophy: Focuses on utility and ease of use, providing a straightforward, grid-based approach that simplifies responsive web design.
• Component Library: Offers a comprehensive set of components ranging from navigation bars and forms to modals and carousels.
• Customization: Highly customizable with CSS overrides or built-in SASS variables to tailor the design.
• Flexibility: Utility classes make it easy to apply consistent styling and responsive behaviors across different elements.
• Community and Documentation: Extensive documentation and a large community provide abundant resources for troubleshooting, learning, and enhancing development processes.

Ideal Projects for Bootstrap

1. Responsive Web Design: Bootstrap’s grid system and responsive utilities make it easy to create layouts that adapt to different screen sizes and devices.
2. MVP or PoC Projects: Enables developers to quickly build and iterate on designs with a wide range of pre-designed components and utility classes.
3. Admin UI Panels: Ideal for building feature-rich admin interfaces with its comprehensive set of components.
4. Landing Pages: Popular choice for creating attractive and responsive landing pages with easy-to-use components and extensive customization options.
5. Educational and Non-Profit Websites: Allows educational institutions and non-profits to create functional and appealing websites without extensive development resources.
6. Documentation and Resource Sites: Components such as alerts, badges, and panels make it easy to create well-structured and readable documentation sites.

Comparative Analysis: Material UI vs Bootstrap

Responsive Design

Bootstrap:

• Renowned for its 12-column grid system, which is highly flexible and easy to use.
• Offers numerous utility classes to control visibility and layout on different devices.

Material UI:

• Supports responsive design through its Grid component, based on CSS Flexbox, for dynamic and flexible layouts.
• Provides customizable breakpoints for different screen sizes.

Verdict: Both frameworks excel in responsive design, but Bootstrap’s grid system is often considered more straightforward for beginners due to its extensive documentation.

Performance

Bootstrap:

• Can be heavier due to extensive use of CSS and JavaScript, but optimization (like using PurgeCSS) can significantly improve performance.
• Load times can be affected by unused components if not optimized properly.

Material UI:

• Designed with performance in mind, leveraging React’s efficient rendering.
• Supports tree shaking to remove unused code, improving load times and performance.

Verdict: Material UI tends to have an edge in performance due to its React-based architecture and tree shaking capabilities, although Bootstrap can perform well with proper optimization.

Rapid Development

Bootstrap:

• Comes with a vast library of pre-designed components, speeding up the development process.
• Simple to integrate with any web project, ideal for quick prototyping and development.

Material UI:

• Provides a rich set of pre-built components following Material Design guidelines for rapid development of modern interfaces.
• Seamlessly integrates with React, leveraging React’s powerful features for faster development.

Verdict: Both frameworks support rapid development, but Material UI’s React integration can make it faster for React-based projects, while Bootstrap’s simplicity and wide usage make it great for quick setups.

Flexibility

Bootstrap:

• Highly customizable with SASS variables, allowing extensive tweaking of styles and components.
• Offers numerous utility classes for flexible styling and layout adjustments.

Material UI:

• Offers robust theming capabilities for creating custom themes across the application.
• Provides flexibility in customizing components through props, themes, and custom styling.

Verdict: Material UI offers more advanced theming and customization options, especially beneficial for React projects, while Bootstrap provides straightforward customization through utility classes and SASS variables.

Ease of Use

Bootstrap:

• Known for its gentle learning curve and extensive documentation, making it accessible for beginners and experienced developers alike.
• Wide adoption means numerous resources, tutorials, and community support are available.

Material UI:

• Requires knowledge of React, which can be a barrier for developers not familiar with React.
• Offers detailed documentation and a strong community, but the initial learning curve can be steeper for those new to React or Material Design.

Verdict: Bootstrap is generally easier to pick up for beginners due to its simplicity and extensive documentation, while Material UI might have a steeper learning curve but offers greater rewards for those familiar with React.

Conclusion: Which One to Choose?

Bootstrap is an excellent choice for projects that need quick, responsive design solutions with a low learning curve. It’s particularly useful for rapid prototyping and projects that need to be framework-agnostic.

Material UI, on the other hand, shines in React-based projects where a consistent design language and performance optimization are crucial. Its advanced theming and component customization capabilities make it ideal for projects requiring a modern, cohesive UI.

Choosing between Material UI and Bootstrap depends on your project’s specific needs, your familiarity with React, and your preference for customization versus simplicity. Both frameworks offer robust solutions for building responsive, high-quality web applications.

Build your app with code-backed MUI or React-Bootstrap components using UXPin Merge. Drag and drop these coded components directly onto the canvas to design an interface that’s interactive and production-ready from the start. No more time wasted translating design into code—UXPin Merge ensures your designs are ready for development right away. Try UXPin Merge for free.

The post Material UI vs Bootstrap – What to Use? appeared first on Studio by UXPin.

ChatGPT is a language model developed by OpenAI. It is part of the generative AI tools which utilize deep learning techniques to understand and generate text.

The model works like a chatbot for asking questions or giving prompts, and it generates contextually relevant responses. Designed to handle a variety of natural language understanding and generation tasks, this OpenAI tool is versatile for different applications, including generating UI components from open-source libraries based on prompts.

Try UXPin’s AI Component Creator and generate custom UI components with ChatGPT. Quickly save the components as patterns for future reuse. Explore this and other features that make design 8.6x faster than with other tools. Try UXPin Merge for free.

Design UI with code-backed components.

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

Try UXPin Merge

What is ChatGPT?

ChatGPT is a language model developed by OpenAI. It is designed to understand and generate text based on the input it receives. The model has been trained on a diverse range of Internet text, and it can perform various natural language processing tasks. This includes answering questions, engaging in conversations, summarizing text, translating languages, and more.

ChatGPT was created to provide a powerful, versatile, and user-friendly language model that’s capable of addressing various natural language processing challenges. Its broad applicability, combined with the scale of data it was trained on, makes it a significant advancement in the field of conversational AI and language understanding.

It’s one of the most powerful language models, but not the only one. There are also Google’s Bert, T5, Baidu’s ERNIE, Facebook’s Blender Bot or a model named XLNet. ChatGPT 3.5 was the one of the largest language models ever created at the time of its release, with a staggering 175 billion parameters. The training data gave it the power to generate more contextually relevant, coherent and versatile responses compared to smaller models.

Many users implemented ChatGPT into their workflow, built AI tools using its API key, and contributed to its success. An API provided by OpenAI allows developers to integrate the model into their applications, products or services. That’s what we did when we built our AI Component Creator.

How does ChatGPT work?

ChatGPT works by generating a human-like text in response to a prompt it receives from a user. It can generate all types of responses – from a block of text to real conversations and even visuals. Users come into interactions with ChatGPT by typing in what is known as “prompt” into ChatGPT UI.

Prompts are input queries or statements provided to the model to generate responses. The prompt is the command or question that the user gives to the model to elicit the desired output. How users phrase the prompt has an influence on the quality and relevance of what they get in return.

Here are examples of prompts for language models like ChatGPT:

• Conversation: “Tell me about your favorite programming language and why you like it.”
• Instruction: “Provide tips for improving website performance and speed.”
• Creative writing: “Write a short story about an unexpected adventure in a futuristic city.”
• Problem-solving: “I’m having trouble debugging my code. Can you help me identify the issue in this JavaScript function?”
• Education: “Explain the concept of machine learning in simple terms.”
• Opinion: “What’s your opinion on the latest advancements in AI?”
• Scenario for role-playing: “Imagine you are a travel assistant. Plan a weekend getaway itinerary for someone who loves outdoor activities.”
• Comparison: “Compare and contrast the pros and cons of using Python and JavaScript for web development.”
• Task: “Write a Python function to find the factorial of a given number.”
• Explanation: “Explain the functioning of blockchain technology and its applications.”

You can see that those prompts start with an action verb. They provide a cue of what the user wants from ChatGPT, be it an explanation, plan, comparison, answer or mistake spotting. ChatGPT comes up with the best answers to those. You can ask one prompt per conversation or continue a discussion until you are satisfied.

Learn how to write a good prompts for UI design here: Prompt Engineering for UX/UI Designers.

When using prompts, it’s helpful to be specific about the challenges you’re facing or the aspects you want to improve. Providing context and asking for practical advice will get you more tailored and actionable responses from ChatGPT.

The benefits of using ChatGPT in UI design

ChatGPT can increase your productivity, help you refine your skills, and provide answers to your questions. Of course, it’s just a language model, so take its recommendations with a grain of salt and if you’re not sure if the answer is correct, fine-tune it, and try again.

The benefits of using ChatGPT in UI design are as follows:

• No training required — unlike traditional machine learning models that require extensive training on specific datasets, ChatGPT comes pre-trained about various topics, including UI design. This eliminates the need for users to train the model themselves.
• Instant design assistance — ChatGPT provides rapid responses to a query, offering instant guidance, eliminating the need of looking for the answer on the Internet or asking peers.
• Efficient problem-solving — with ChatGPT’s quick and informative responses, designers can maintain a high level of productivity. This model’s efficiency enhances the overall productivity of the design process.

While UX designers use ChatGPT to help them with preliminary user research, building personas, perfecting user flows, UI designers ask ChatGPT to come up with layout, color schemes or typography combinations. When it comes to AI Component Creator, it helps you generate simple or complex UI components, so you can build MVPs or advanced apps faster. Let’s see what you can expect.

How to generate UI components with ChatGPT

Using ChatGPT to generate UI components involves providing clear and detailed prompts to receive the component that you need.

With UXPin Merge, you don’t need to go to OpenAI’s website to get help with UI design. The tool is built in UXPin’s editor. It’s available in the “Quick Tools” bar and it can be quickly launched whenever you need it. And what it does is it generates you UI components based on your prompt that appear directly on your design.

The UI component that’s generated with the ChatGPT integration is the Tailwind UI component. It’s one of a few built-in open-source component libraries available in UXPin Merge. Tailwind is a great resource for building content-first web designs, such as landing pages, documentation hubs, task management apps, employee portals, and more.

You can use the component that has been generated as any other UXPin Merge component in your project. You can resize it, change its position, and more.

How to use ChatGPT integration in UXPin

Do you have a UXPin Merge account? Now, it’s the right time to log in. And if you don’t have an account yet, try UXPin for free, so you can follow along with our tutorial.

The integration requires you to have an OpenAI API. Don’t have it? Write to our support and they will be happy to assist you. Read our help documentation, so you know how to contact our support.

#1: Write the prompt for components

You are in the midst of creating your user interface design and you can’t find a component to go with your design? Let’s generate it. Navigate to the ChatGPT plugin that’s in Quick Tools bar and click the icon labeled “AI” (look at the first screenshot above.)

Now, you will see a modal popping out that looks like this:

Here you can type in your prompt. What will it be? Going back to the section about “How does ChatGPT work?” we’ve seen examples of prompts. They had an action verb (write, provide, identify), some context for the chatbot to grasp what you want, and specific details, such as “responsive,” “gradient,” “customizable,” and more.

Additionally, make sure you specify any requirements and limitations that you have. The requirements may be about the color scheme, such as a specific HEX code for a background color, or accessibility limitations.

Tailwind UI is a great component resource AND component inspiration. So, head to their website to discover what kind of components you can generate. Some suggestions:

• Pricing table — “Generate a pricing table with 3 columns. Column 1: freelancer priced at $19, Column 2: startup and be priced at $39. Column 3: company and be priced $59. Company column should be highlighted and labeled as most popular.”
• Testimonial card — “Create a testimonial card with 5-star rating. The testimonial should be in quotes. Its copy should be “The best tool I’ve ever used” and 5 out of 5 stars should be active. Use #FFD700 for stars and #636363 for text. Add a label long-time customer.”
• CTA section — “Create a CTA section that’s split with an image. An image is on the column on the left and it has a person in front of a whiteboard. The other column is a CTA “Let’s work together” and it has a button “Contact us” that is orange.”

Look at the Tailwind UI site to learn what is possible.

#2: Generate UI components

The component prompt that we will use for the purpose of this tutorial is this:

Please create a contact form with a header “Leave your message”, an email field, a checkbox with text “I accept privacy policy” and a field where a user can type their message. Use color #0000FF for background.

We generated the following component (screenshot below).

It has a blue background, interactive input fields for email address and user input, submit button, and clickable checkbox. The result is pretty nice. There are some things that could be improved, so if you feel like it, write another, more specific prompt.

Check the component place in Pages & Layers Panel. Make sure it is a standalone component and not a part of any other Layer.

#3: Save your components for reuse

Now that you have a component you like, save it to your library in case you want to use it elsewhere or keep it as part of your design documentation. The component is backed with code, and you can export it to your dev’s environment with one click.

Read more about it in our documentation about AI Component Creator.

Resources for writing better prompts

Here are some resources that will help you write better prompts:

• Prompt Engineering Course by OpenAI — Prompting Guidelines by Andrea Valenzuela
• How To Write ChatGPT Prompts (150+ Awesome Prompts Inside) by Emily Gertenbach
• Writing Effective Prompts in ChatGPT by Uxcel

Design with ease with UXPin Merge

Ai Component Creator is a new addition to UXPin and it’s great for getting you a component that is backed with code and fully consistent with the Tailwind UI library. Think of it as an AI-design assistant that generates a UI element based on an instruction.

Get custom nav bars, persona cards, gallery of images, or sidebars that can be easily reused throughout your design. And if you can’t imagine what you can create with Tailwind UI components, go through their website for some inspiration.

UXPin Merge makes it extremely easy for non-designers to build interactive and beautiful UI without having design skills. It works in a drag-and-drop like fashion, so you can take a component from a library and build an interface with it. Aside from Tailwind UI, it has other open-source libraries, such as MUIv5, React Bootstrap, Ant Design which are based in React.

Give it a try. Pick one of the available templates and customize it or start a completely new design. Then, copy the code off your design and bring it straight to a development tool. Try UXPin Merge for free.

The post ChatGPT in UI Design – How UXPin Can Generate UI Components 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.

Design UI with code-backed components.

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

Try UXPin Merge

What is Code to Design?

Code to design is a UX workflow developed by UXPin using Merge technology. With UXPin Merge, you can use coded UI components to build fully interactive interfaces, and once you’re done with your design, export production code. The components aren’t translated from design to code. They are code.

The code-to-design workflow offers several benefits for designers, stakeholders, and engineers:

1. Designers build fully interactive prototypes, increasing testing scope during the design process.
2. Designers don’t design from scratch, thus reducing time to market.
3. Stakeholders can grasp design’s vision because prototypes behave like an end-product.
4. Design handoffs are smoother because designers and engineers use the same source of truth.
5. Teams share a design system which adoption is no longer an issue.
6. The drag-and-drop workflow makes product design more accessible to non-designers, and developers, stakeholders, researchers, and more can create a prototype on their own.

Design to Code vs. Code to Design

Design to code results in misalignment

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.

Code to design boosts collaboration

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.

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
3. Use built-in libraries available on trial

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.

Ready to get started with code to design? Set up a trial and see how it speeds up your product development process and keeps your team on the same page. Try UXPin Merge for free.

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

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

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

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

Design UI with code-backed components.

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

Try UXPin Merge

What is a React Design System?

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

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

Key components of a React Design System typically include:

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

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

The Benefits of a React Design System

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

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

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

Which companies use React design systems?

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

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

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

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

React Design System Fundamentals

Understanding Atomic Design Principles

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

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

Why is Atomic Design important for React design systems? 

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

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

The role of components in a React design system

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

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

The importance of using design tokens

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

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

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

We can encapsulate all four values under one design token:

• cta-background-primary

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

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

Getting Started with a React Design System

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

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

Mono-repo vs. poly-repo repositories

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

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

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

Component organization

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

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

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

Design token management

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

Theming and customization

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

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

Documentation

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

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

Testing

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

Versioning and release management

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

Design tools

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

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

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

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

Tailwind provides a set of pre-designed and pre-built styles that you can apply directly to your HTML markup. Unlike traditional CSS frameworks, which often come with pre-defined components and styles, Tailwind focuses on providing low-level utility classes that you can combine to create custom UI designs.

To start a project, front-end developers typically install it via npm or yarn and then include the generated CSS file in your HTML. Once installed, they start applying utility classes to HTML elements to style them according to UI design requirements.

Tailwind CSS is often used to build a wide range of web applications and websites, such as landing pages, dashboards, admin panels, eCommerce sites, and of course, rapid prototyping.

Want to create interactive prototypes with Tailwind UI components? UXPin Merge gives you a library full of official Tailwind UI components that you just drag and drop on the canvas. Then, you just copy the code and paste it into your project for product development. Try UXPin Merge for free.

Design UI with code-backed components.

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

Try UXPin Merge

What is Tailwind CSS?

Tailwind CSS is a different way to style your website from traditional CSS framework. Think of it as a set of predefined building blocks (or Lego pieces,) but for your website’s style. Instead of writing a bunch of CSS rules, you could use pre-made classes directly in your HTML code.

Imagine you want to style a website, and you’re faced with the task of writing a lot of CSS code to make things look good. Now, traditional CSS involves creating rules for each element, defining margins, paddings, colors, and more. It can be time-consuming and sometimes a bit repetitive.

Tailwind simplifies styling by providing a set of pre-made classes that you can apply directly to your HTML elements, making the styling process more efficient and flexible.

For example, instead of writing:

cssCopy code

.button { background-color: #3490dc; color: #ffffff; padding: 10px 20px; border-radius: 5px; }

You can just apply these styles directly in your HTML using Tailwind classes:

htmlCopy code

<button class="bg-blue-500 text-white p-2 rounded-md">Click me</button>

Here, each class (bg-blue-500, text-white, p-2, rounded-md) represents a specific style. So, bg-blue-500 gives the button a blue background, text-white makes the text white, p-2 adds padding, and rounded-md gives it rounded corners.

Tailwind is highly customizable. If you decide you don’t need a particular style or you want to add your own, you can easily tweak this framework to fit your needs. Tailwind has also a plugin system that allows you to extend its functionality. You can add third-party plugins or create your own to tailor the framework to your specific needs.

You can hear that web developers call Tailwind a utility-first CSS framework. In the context of Tailwind CSS, “utilities” refer to small, single-purpose classes that directly apply styling to an element. These utility classes are named based on their purpose, making it easy to understand what each class does. They are the building blocks of the framework and can be combined to create complex styles.

What can you build with Tailwind CSS?

Here are some examples of what you can build with Tailwind CSS:

1. Responsive Websites: Tailwind’s responsive utility classes make it easy to create websites that adapt to different screen sizes, providing a seamless experience across devices.
2. Web Applications: Tailwind can be used to build the user interface of web applications. Its modular utility classes allow for quick and efficient styling of application components.
3. Landing Pages: Tailwind is well-suited for designing and styling landing pages. Its simplicity and ease of use make it a popular choice for quickly prototyping and building marketing pages.
4. Blogs and Content Websites: Whether you’re building a personal blog or a content-heavy website, Tailwind’s utility classes make it easy to style text, images, and other content elements.
5. E-commerce Sites: Tailwind can be applied to the design of product listings, shopping carts, and checkout pages in e-commerce websites. Its flexibility allows for customization to match specific brand requirements.
6. Dashboards and Admin Panels: Web applications with dashboards and admin panels often benefit from the modular and customizable nature of Tailwind CSS. It provides the tools to create a clean and functional user interface.
7. Prototypes and Rapid Development: Tailwind is popular for quickly prototyping ideas and for projects that require fast development. Its utility-first approach allows developers to iterate rapidly without needing to write custom CSS for every style.
8. Portfolio Websites: Tailwind can be used to build stylish and responsive portfolios for showcasing personal or professional projects. Its utility classes enable the creation of visually appealing layouts.
9. Documentation Sites: Tailwind can be employed to style documentation and help center websites. Its simplicity makes it easy to create clean and readable documentation layouts.
10. Custom UI Components: Tailwind can be used to style custom UI components, allowing developers to create unique and visually appealing interfaces and responsive design.

Where to take Tailwind components from?

There are a few different sources where you can find Tailwind CSS components and resources. One notable resource is Tailwind UI, a premium set of professionally designed components and templates.

Tailwind UI was created by the founders of Tailwind CSS, Adam Wathan and Steve Schoger. The primary motivation behind creating Tailwind UI was to provide a set of professionally designed, ready-to-use UI components and templates that seamlessly integrate with Tailwind CSS. The goal was to offer front-end developers a premium resource for building beautiful and consistent user interfaces with ease.

One of the main selling points of Tailwind UI is the quality of its designs. The components and templates are professionally crafted by Steve Schoger, known for his expertise in design. This ensures a polished and visually appealing look for your web applications.

Here are some examples of the types of components and templates you can expect from Tailwind UI:

1. Navigation Components — you can find navbars, dropdowns or mega menus.
2. Form Components — components for building forms, such as Input fields, checkboxes and radio buttons, select dropdowns, buttons, and for gorups.
3. Content Display Components — those include cards, modals and popovers, alerts, badges, and tooltips.
4. Typography and Text Components — for adding headings, blockquotes, lists, and text styles.
5. Grid and Layout Components — you’ll find container, grid system, and flexbox utilities.
6. Media Components — they include image cards, galleries, and responsive video components.
7. Utility Components — spacing, margin, flexbox, alignment and visibility utilities.
8. Templates — the library has templates for landing pages, dashboards, eCommerce products, pricing, and blog layouts.

These are just a couple of examples, and Tailwind UI provides a comprehensive set of components and templates that cater to different use cases in web development. Each component is designed to be flexible and customizable, allowing you to easily adapt them to fit the specific needs and branding of your project.

The components in Tailwind UI are often built with the principles of good design and usability in mind, thanks to the expertise of Steve Schoger, who is known for his work in design and user interface aesthetics. Overall, Tailwind UI aims to save developers time by providing high-quality, ready-to-use components that align with the Tailwind CSS framework.

What makes Tailwind different from Material UI and Bootstrap?

Tailwind CSS, Material UI, and Bootstrap are all popular libraries in web development, but they differ significantly in their approach to styling and the user interface.

As we covered already, Tailwind follows a utility-first approach. It provides a set of low-level utility classes that you can apply directly in your HTML markup to build your styles. This approach is highly flexible and allows for more granular control over styling. It’s often favored for rapid prototyping and customization.

Bootstrap and Material UI are widely used for quickly building responsive websites. Bootstrap comes with a set of pre-designed components and styles. It follows a more component-centric approach, providing developers with a set of ready-made UI components that can be easily customized through a theming system. Developers can modify variables like colors and fonts to match their brand.

MUI, on the other hand, is a React component library that implements Google’s Material Design guidelines. MUI like Bootstrap is component-centric, providing a set of pre-designed React components. It’s easy to customize and it has a large and active community with good support and documentation.

How to create a responsive UI design with Tailwind

You don’t need to spend time reading documentation to create a Tailwind UI design. Here’s how you can do it quickly with UXPin Merge.

UXPin Merge is a prototyping tool that allows designers and developers to create and collaborate on interactive UI design seamlessly. It’s part of UXPin, which is known for its focus on collaborative design. UXPin Merge specifically emphasizes the integration of design and development workflows, enabling faster design and development processes.

In this article, we will show you how to create a UI design with Tailwind UI and UXPin.

Then, we will give you quick tips on installing Tailwind CSS. To follow along the article, sign up for UXPin and start your trial.

Step 1: Pull Tailwind UI components out of the library.

UXPin Merge comes with a built-in library of Tailwind UI components. This library includes a collection of pre-designed UI elements, such as buttons, cards, forms, and more, adhering to the Tailwind CSS styling principles.

To start designing, Design System Libraries in UXPin. Access them by clicking the Design System Libraries icon in the bottom bar or with the Option + 2 keyboard shortcut.

Then, scroll to Merge libraries and you’ll see Tailwind UI among React libraries like MUIv5 (see how to design with it,) Ant design or React Bootstrap. The Tailwind library isn’t React-based for now. You can copy HTML only off your design while using it.

Place components that you like on the canvas. It can be button, card, whatever you need to build an interface.

Step 2: Generate complex components with ChatGPT.

Up until this point, we were using children. Based on the atomic design principles, children are the smallest building blocks that together make up molecules and organisms. Atomic design, coined by Brad Frost, is a methodology that breaks down web design into its fundamental building blocks, facilitating the creation of consistent and scalable user interfaces.

To learn more about atomic design, follow our article Atomic UI Components or read Brad Frosts’s article.

For bringing the so-called “molecules,” use UXPin Merge’s AI Component Creator that assists in generating components. This can be particularly useful for creating dynamic or custom components that you may need for your project. The AI Component Creator leverages machine learning to understand design patterns and generate code snippets or components based on your design.

Read ou guide on speeding up design with AI Component Creator and ChatGPT.

Step 3: Use Custom Component to bring whole layouts in.

We’re not leaving atomic design methodology yet, because there is a way of importing organisms, that is combinations of molecules that form distinct sections or components of an interface, into UXPin.

The built-in Tailwind UI library has a New Custom Component option for directly copying UI components, patterns, and full layouts from the Tailwind UI website into your UXPin project. The components can be customized and themed in UXPin.

At the top of Tailwind library inside the editor, you will see a see-through component with a plus sign. It’s our Custom Component. Go to Tailwind UI website, copy a code from examples or components pages and paste it into UXPin’s Custom Component. Then, save the component to Patterns for future reuse.

See how Sage uses this feature in our Product Tour.

Step 4: Edit properties of components

Now that you have building blocks of your interface, adjust properties of your UI components, so your design feels consistent and professional. A properties panel appears on the right once you click on the component you want to adjust. You can change colors, text, add state, and any special styling that you have in mind.

This is also the place of switching themes. For that, you have two options.

• Global themes — pick a light or dark theme for the full page.
• Local themes — pick a light ot dark theme for each component.

Here you can also add interactions. Decide what should happen if a user clicks a button, such as take them to the next page, make a modal appear or disappear, etc. You’ll also be able to set a property for coded components.

Step 5: Copy the code to your dev’s environment

The layout is done, time to build the thing. Go to “Preview mode” > “Spec mode.” and click on the component you want to copy the code of, or export the full prototype in one click by using one of the export functions. That’s a good start for building the app.

If you haven’t yet, set up a new project that will use the Tailwind UI library. Create a new HTML file and link to the Tailwind CSS and Tailwind UI stylesheets in the <head> section. Alternatively, use our Stackblitz integration and have a project preconfigured there.

Build layouts 8.6x faster with Tailwind UI

Tailwind CSS stands out for its unique approach to styling. Unlike conventional CSS frameworks, Tailwind offers a collection of pre-designed styles through low-level utility classes, allowing front-end developers to craft custom UI designs effortlessly. Installation involves a simple npm or yarn setup, followed by the application of utility classes directly to HTML elements to meet specific UI design requirements.

Tailwind CSS finds its application in diverse web projects, ranging from landing pages and dashboards to admin panels, eCommerce sites, and rapid prototyping.

For those seeking interactive prototypes with Tailwind UI components, UXPin Merge presents an ideal solution. This tool provides a library brimming with official Tailwind UI components, facilitating a seamless drag-and-drop experience on the canvas. Copy the generated code and integrate it into your project for efficient product development. Try UXPin Merge for free.

The post How to Use Tailwind to Build Responsive UI Design appeared first on Studio by UXPin.

UI elements are the most integral part of product design. They are the core building blocks for all products.

As a UI designer or UI 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 by themselves 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, 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?

UI 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 – control elements that allow users to select one option from a list that appears when they click or hover over a specific area. The list “drops down” when activated, providing a set of choices for the user to pick from.
• Combo boxes – they combine the features of a text box and a dropdown. Users can either type a response or select from a predefined list by clicking a dropdown arrow. This provides flexibility for both manual input and selection from a set of options.
• Buttons – interactive elements that users can click to trigger an action or submit a form. They often have labels indicating the action they will perform, such as “Submit,” “Cancel,” or “OK.”
• Toggle switches – UI elements that allow users to switch between two states, typically on and off. They provide a visual indication of the current state and can be toggled by clicking or sliding.
• Text fields – areas where users can input alphanumeric characters, whereas password fields are specifically designed for entering confidential information like passwords. Password fields often hide the entered characters for security reasons.
• Date pickers – UI elements that facilitate the selection of dates from a calendar. Users can typically choose a date by clicking on a specific day, month, and year within the provided interface.
• Checkboxes – small, interactive elements that allow users to select or deselect options independently. They are often used in lists or forms where users can choose multiple items from a set.
• Radio buttons – they present a set of options to users, but unlike checkboxes, only one option can be selected at a time. When one radio button is selected, any others in the group are automatically deselected.
• Confirmation dialogues – pop-up messages that appear to confirm an action or decision before it is executed. They typically ask the user to confirm or cancel an operation to prevent accidental or unwanted actions.

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 – messages or alerts that appear on a user’s device or screen to inform them about important or relevant information. They can include updates, reminders, or warnings and are often designed to grab the user’s attention.
• Breadcrumbs – small navigational elements that show the user’s current location within a website or application. They typically appear as a trail of links at the top of a page, indicating the hierarchical path back to the main or home page.
• Icons – graphical symbols or small images used to represent actions, objects, or concepts. They serve as visual cues to help users quickly understand and navigate interfaces. Icons are commonly used in menus, toolbars, and buttons.
• Sliders – UI elements that allow users to select a value from a continuous range by dragging a handle along a track. They are often used for settings like volume control or adjusting numerical values within a specified range.
• Progress bars – visually represent the completion status of a task or process. They typically consist of a filled-in portion that grows as the task progresses, providing users with a visual indication of how much work has been completed and how much is left.
• Tooltips – small, contextual messages that appear when a user hovers over or clicks on a specific UI element. They provide additional information or explanations about the purpose or functionality of the element, aiding user understanding and interaction.

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. 

Containers

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.

• Navigation menus – graphical interfaces that present a list of links or options, allowing users to move between different sections or pages of a website or application. They are commonly found at the top, side, or bottom of a page and serve as a primary means of guiding users through the content.
• List of links – a collection of hyperlinked text items that typically direct users to different pages or resources. Lists are often used in navigation menus, sidebars, or content sections to organize and present a set of related links in a structured format.
• Breadcrumbs: Breadcrumbs are a navigational aid that displays the user’s current location within a website or application. They appear as a series of links, usually at the top of a page, indicating the hierarchical path back to the main or home page. Breadcrumbs help users understand their position in the site’s structure.
• Search fields – input elements that allow users to enter search queries. They are commonly accompanied by a button or icon to initiate the search. Search fields enable users to quickly find specific content within a website or application.
• Pagination – divide the content into separate pages to improve navigation and loading times. It involves organizing large sets of data or results into numbered pages, with links or buttons to move between them. Pagination is often used in search results, lists, or other content-heavy sections.

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.

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.

Design UI with code-backed components.

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

Try UXPin Merge

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.

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.

Design UI with code-backed components.

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

Try UXPin Merge

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.

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.

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.