Code-to-design tech seems daunting to you? Don’t worry. We created a mini-series in which Rachel, a skilled teacher of frontend courses, shows you how to design an interface with our code-to-design technology – UXPin Merge. This blog post will provide you with an exhaustive review of this tutorial series, breaking down its strengths and key takeaways.

Follow along the tutorial. UXPin Merge is a technology for designing with code-backed components to ensure fast handoff, product development, and more accurate user testing results. Build your first prototype today. 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

Where Can I Find UXPin Merge Tutorial?

The full mini-course is available to you on YouTube. Here’s the full playlist that contains five videos.

The videos cover the following topics:

• Exploring the Power of UXPin Merge: Introduction (Video 1)
• Exploring the Power of UXPin: A Deep Dive into UI Design (Video 2)
• The Magic of UXPin Merge with MUI Components (Video 3)
• Designing an Employee Portal Using MUI Components (Video 4)
• How to Seamlessly Transition from Design to Development (Video 5)

What is UXPin Merge Tutorial about?

The UXPin Merge Tutorial mini-course on YouTube is specifically created for developers and designers eager to get a grasp on using UXPin Merge effectively. Over a series of short, concise videos, the course aims to cover the essential aspects of setting up your React component library, integrating it into UXPin, and leveraging its full potential for both design and development.

Course Overview

The UXPin Merge Tutorial Mini-Course on YouTube promises to be a concise yet informative guide tailored towards developers. The course is segmented into bite-sized videos, making it easier to digest each concept. Let’s break down what each segment covers.

The course begins with a comprehensive guide on setting up your environment. This is a crucial step, especially for those who are new to UXPin Merge. The tutorial walks you through installing the necessary software, setting up your UXPin account, and integrating it with your Git repository.

What stands out in this segment is the instructor’s detailed, step-by-step approach, ensuring that no one is left behind.

The instructor takes care to explain not just the “how” but also the “why,” setting a solid groundwork for the course.

Understanding the Basics of UXPin Merge

The course delves into the basics of UXPin Merge. This segment begins with a brief introduction of what Merge is and why it’s beneficial for React developers. It then transitions into a hands-on tutorial about using code-backed components, based on built-in MUI components that UXPin offers on trial.

Using Design Editor

Rachel goes through the ins-and-outs of UXPin’s editor to help you understand how to use the tool. She describes all the panels, tools, and features that are available to you at first glance. It’s a perfect introduction to those of you who are unfamiliar with design tools.

She explains how to change the canvas size, how to access documentation, and prep your workspace.

Using React Components

The tutorial shows you how to use built-in MUI components within UXPin. Unlike other prototyping tools, UXPin uploaded fully functional components from MUI library, so you can be sure that what you put on the canvas, you get in development.

Some functionalities that Rachel went through:

• Dragging and Dropping – placing components onto the design canvas.
• Nesting Components – creating more complex components out of those available.
• State Management – changing component states such as hover, active, and disabled.
• Accessing Documentation – the course help you move between MUI docs and UXPin.

What about Advanced Integration Techniques?

There are also more advanced integration techniques that the course didn’t touch upon. This is where many developers will find the real value, as it explores how to leverage UXPin Merge for complex projects. UXPin Merge also allows you to bring React components from Git repository or via npm, and even importing Storybook components if that’s what you use in development.

What about Collaboration Features?

One of UXPin Merge’s standout features is its collaboration capability. Thie course fails to discuss:

• Shared Workspaces: Setting up shared workspaces for team collaboration.
• Version Control: Tracking changes and reverting to previous versions if needed.
• Feedback Loop: Commenting and providing feedback directly within the UXPin interface.

This would be useful for teams, as it expounds on how UXPin Merge can streamline the collaborative aspect of design and development.

Practical Examples and Hands-On Segments

Theory is crucial, but nothing beats hands-on practice. The mini-course includes several practical examples and hands-on segments where you can apply what you’ve learned. You’ll be guided on how to:

• Visualize Components – Leverage UXPin’s interface to see MUI components in action.
• Interactive Prototyping – Create interactive prototypes using drag-and-drop functionality in UXPin.
• Handoff process – Taking design to code (or code to design to code in UXPin’s case.)

These examples are extremely beneficial, especially for those who learn best by doing.

Creating an Employee Portal UI Design

One of the mini-course sections walks you through creating an employee portal using your React components in UXPin. This is an excellent exercise, showcasing the power of combining functional components with UXPin’s prototyping capabilities.

5 Tips for Maximizing Your Learning

To get the most out of the UXPin Merge Tutorial Mini-Course, here are some tips and tricks compiled from the experiences of past learners.

Take Notes

As you go through each segment of the course, make it a habit to take notes. This will help you retain the information better and serve as a handy reference when you start implementing what you’ve learned.

Practice Alongside

While it might be tempting to binge-watch the entire series, it’s advisable to practice alongside the instructor. Set up your environment as you go, import your components, and try to build your prototypes. This hands-on approach will solidify your understanding. Try UXPin Merge for free.

Ask Questions

If you find yourself stuck at any point, don’t hesitate to ask questions. The YouTube comments section is a great place to engage with the instructor and other learners.

Revisit Difficult Sections

If you find certain sections particularly challenging, don’t hesitate to revisit them. The beauty of online tutorials is that you can go over difficult concepts as many times as you need until they click.

Experiment

Once you’re comfortable with the basics, don’t be afraid to experiment. Try building different types of prototypes, customize your components, and explore the advanced features of UXPin Merge. The more you experiment, the more confident you’ll become in using the tool.

Is the UXPin Merge Tutorial Mini-Course Worth It?

After going through the UXPin Merge Tutorial mini-course, it’s clear that UXPin Merge is a powerful tool for bridging the gap between design and development. The tutorial is well-structured, informative, and provides hands-on experience that can significantly benefit any React developer looking to streamline their workflows.

Key Takeaways

• Streamlined Workflow – The course shows how to integrate design and development effortlessly, reducing the friction typically involved in the handoff process.
• Hands-On Learning – Practical examples and hands-on exercises make the learning experience highly engaging and effective.
• Real-World Application – The skills you gain from this course are immediately applicable to real-world projects, enhancing both your productivity and collaboration capabilities.
• Troubleshooting Help – The course’s in-depth coverage of common issues and troubleshooting tips ensures that you’re well-prepared to tackle any challenges that come your way.

If you’re a developer looking to make your design and development processes more seamless, the UXPin Merge Tutorial mini-course on YouTube is not just an introduction to a new tool; it’s a comprehensive guide that will reshape how you think about design and development collaboration.

Dive into the mini-course, experience the integration of design and development for yourself, and elevate your workflow to new heights. Try UXPin Merge for free.

The post UXPin Merge Course Review – What People Think 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.

Are you ready to elevate your design workflow to the next level? In this comprehensive tutorial, we’ll delve into the world of UXPin Merge, empowering you to seamlessly integrate your React app components into the UXPin editor for high-fidelity prototypes.

Gone are the days of static designs. With UXPin Merge, you can dynamically link your React components, ensuring that your prototypes are always in sync with the latest developments in your codebase.

Get ready to unlock the full potential of UXPin Merge – let’s dive in!

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 UXPin Merge?

UXPin Merge is a technology for designing with coded UI components that are backed with production-ready code. It’s part of UXPin – a code-based design tool for highly realistic and accurate prototyping. With this tech, you can grab all the specs, JSX code, and any other asset and hand them over for developer to make the entire product development workflow 8.6x faster.

UXPin Merge tutorial – How to use this technology?

UXPin Merge technology works like a drag-and-drop UI builder. You take a component out of the design library in UXPin and put it on the canvas. Then, after you’ve done arranging the layout and setting up components props, you can copy a ready React code (or CSS code for Tailwind library) to your development environment or open it in StackBlitz.

You can build anything you like. From simple dashboards that automate your team operations to more complex, e-commerce stores which front-end is decoupled from the back-end. UXPin has a few templates and patterns to get you started.

We highly recommend you watch a video tutorial of how to use UXPin Merge presented by a real-life web developer, Rachel. She did a wonderful job of walking you through all the panels, functionalities, and features of Merge technology, and she also shows you how to do a design handoff with UXPin Merge.

Watch it on Youtube. Here’s the full playlist of UXPin Merge tutorial.

How to integrate your own components, step by step

UXPin Merge supports Storybook components and React components from open-source libraries, such as MUI, Ant design or Bootstrap.

We want to give more details and show you how easy it is to integrate a React-based library into Merge to design with code on a day-to-day basis. All that without learning how to code!

UXPin Merge allows users to import their existing custom React components in a seamless fashion to create interactive prototypes using real code, which is unlike anything else traditional design tools offer.

This eliminates the need for designers to manually maintain a “second” design system within their design tool and instead provides the entire team with a single source of truth. The result? The disconnect between designers and developers is gone when building digital products. 

We want to save you time so we’ve designed this tutorial to integrate Mozilla’s React Todo App example with Merge. After the integration, you’ll be able to use the app’s components to design an interactive Todo list prototype within UXPin!

Remember to start by requesting access to Merge – you can do it here. After the verification process and the setup, you’ll be ready to design with code! Also, don’t worry about integrating with GitHub – we don’t have any requirement of where the codebase should be located, so you can use whatever you want!

The components

The Todo app has three React components:

1. Form – create a todo item.

2. FilterButton – filter todos by their current state.

3. Todo – a todo list item.

These components are in the `src/components` directory and are outlined in the screenshot below:

When this tutorial is completed, a designer will be able to create a prototype with these components. Your real-world custom design system (DS) likely has many more than three components. However, the concepts we’ll illustrate in this tutorial should apply to your DS as well.

Set up UXPin Merge

To begin, fork then clones the following link https://github.com/mdn/todo-react. Then install our UXPin Merge NodeJS package, which includes our CLI.

1. Navigate into your project folder cd todo-react
2. Install UXPin Merge and It’s CLI NodeJS bundle with: yarn add @uxpin/merge-cli–dev
3. Ignore the UXPin Merge build directory with: echo ‘/.uxpin-merge’ >> .gitignore

A custom design system requires two additional config files:

1. uxpin.webpack.config.js
2. uxpin.config.js

UXPin typically doesn’t need to use your entire existing Webpack build process. We’ll use a more minimal and default build for UXPin. Create a uxpin.webpack.config.js file and paste the following code into it:

const path = require("path");
const webpack = require("webpack");
 
module.exports = {
    output: {
      path: path.resolve(__dirname, "build"),
      filename: "bundle.js",
      publicPath: "/"
    },
    resolve: {
      modules: [__dirname, "node_modules"],
      extensions: ["*", ".js", ".jsx"]
    },
    devtool: "source-map",
    module: {
      rules: [
        {
          test: /\.(s*)css$/,
          use: [
            {
              loader: 'style-loader'
            },
            {
              loader: 'css-loader',
              options: {
                importLoaders: 2
              }
            },
          ]
        },
        {
          loader: "babel-loader",
          test: /\.js?$/,
          exclude: /node_modules/,
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          }
        },
      ]
    }
}

For components you want to use in UXPin Merge, you must specify their file directory in the uxpin.config.js file at the top of the directory of the repo. As you can see in the code snippet below, we’ve only added the ‘Form’ component src/components/Form.js  for now and will add the other components later in the tutorial. 

Create a uxpin.config.js and paste the following content into the file:

module.exports = {
  components: {
    categories: [
      {
        name: 'General',
        include: [
          'src/components/Form.js',
        ]
      }
    ],
    webpackConfig: 'uxpin.webpack.config.js',
  },
  name: 'Learn UXPin Merge - React Todo list tutorial'
};


Lastly, Babel-loader will be used by Webpack to create the app bundle. To install babel use the following commands: yarn add babel-loader –dev then yarn install .

CONGRATULATIONS👏 You’re all good to go and have the minimum configuration required to view the Form component.

Experimental Mode

Using the settings provided in `uxpin.webpack.config.js`, Experimental mode bundles your components and opens a browser window. You can lay out components in a similar fashion as the UXPin Editor. After Experimental Mode loads, drag and drop the Form component from the sidebar onto the project canvas:

We have the Form component but it lacks styling. For that, we’ll create a Global Wrapper Component.

Using a Global Wrapper Component to apply CSS styles

Just like your custom design system, this Todo app contains global styles. These are specified in the `src/index.css` file. All of our components need the styles specified in this file. We can load this file via a Global Wrapper Component. This component will wrap around every component we drag onto the UXPin canvas.

Create a wrapper file:

Copy and paste the following into `UXPinWrapper.js`:

import React from "react";
import '../index.css';

export default function UXPinWrapper({ children }) {
  return children;
}

The `import ‘../index.css’;` line ensures our CSS styles are loaded prior to rendering each component.

We need to tell UXPin to use this wrapper file. Add the following to uxpin.config.js:

wrapper: 'src/wrapper/UXPinWrapper.js',

Experimental mode should open a new browser window with a styled Form component:

Adding the FilterButton with a customizable name

Now we’ll work on adding the FilterButton to UXPin Merge. These buttons are displayed below the Form component:

Adding this component will be similar to the Form component. However, I’d also like to give designers the ability to specify the text that is displayed within the button. We’ll do that via the `prop-types` package.

Component propTypes are mapped to the UXPin properties panel when editing a component. The existing FilterButton component doesn’t use prop-types so let’s add this to `FilterButton.js`:

import React from "react";
+ import PropTypes from 'prop-types';

function FilterButton(props) {
  return (
@@ -15,4 +16,9 @@ function FilterButton(props) {
  );
}

+ FilterButton.propTypes = {
+   name: PropTypes.string
+ }

+FilterButton.defaultProps = {
+  name: 'Button Name'
+};

export default FilterButton;

Two of our three components are now working with UXPin Merge. We have one component remaining: the Todo component.

Adding the Todo component with a wrapper

We’re moving on to our final component: the Todo. These are displayed within the list of todo items in the UI:

When adding the FilterButton, we edited the FilterButton.js file to add propTypes. What if you want to isolate your Merge-specific changes and don’t want to modify the source code of your components? We can create a wrapper that is specific to the Todo component for this. It’s similar in concept to the Global wrapper component we used to apply CSS styles but will be specific to the Todo component.

Type the following:

mkdir -p src/components/merge/todo 

touch src/components/merge/todo/Todo.js

Copy and paste the following code into Todo.js. 

import React from 'react';
import PropTypes from 'prop-types';

// Import the original component
import TodoM from '../../Todo';

function Todo(props) {
  return <TodoM {...props}/>
}

Todo.propTypes = {
  /**
   * If `true`, the todo will be marked as completed.
   */
  completed: PropTypes.bool,

  /**
   * The name of the todo.
   */
   name: PropTypes.string,

  toggleTaskCompleted: PropTypes.func,
}

Todo.defaultProps = {
  name: 'Do Laundry'
};

export default Todo;

We’re importing the original Todo component as `TodoM` and returning this component in our newly defined `Todo` function. We specify propTypes just like we did with the FilterButton component on our newly defined `Todo` wrapper function.

Add ‘src/components/merge/todo/Todo.js’ to uxpin.config.js and restart using ./node_modules/@uxpin/merge-cli/bin/uxpin-merge –disable-tunneling. After Experimental launches a new window, click-and-drag the Todo component onto the canvas:

You’ll see the Todo component along with the default “Do Laundry” todo name. This default name is only applied when using Merge.

Pushing to UXPin

Until you push your design system to UXPin the components are only visible to you. To let your design team use these components we need to push the component bundle to UXPin. Creating and pushing a Merge design library requires two steps:

1. Create the library within the UXPin UI

1. Go to your UXPin account

2. Enter the UXPin Editor

3. Create a new library

4. Select the option import React components

5. Copy the Auth token (don’t share it with anyone and do not place it in any files checked into git repository. This token provides direct access to the library on your account.) The process looks like this:

2. Push the library via the uxpin-merge CLI

Using the token created from the previous stop, run the following from within the project repo:

./node_modules/@uxpin/merge-cli/bin/uxpin-merge push –token YOUR TOKEN 

Your design team can now access the Merge library.

Using the Merge library within UXPin

Now that the Merge design library has been pushed its time to test it out within the UXPin editor:

• Reload the UXPin Editor in your browser.
• Select the “Learn UXPin Merge” design system in the bottom left corner of the editor.
• Click and drag the components from the sidebar to the canvas.

You should have a solid looking prototype:

How does a designer hand off a prototype back to a developer?

Previewing and Exporting

Now that we’ve built a quick prototype in UXPin we’re ready to export it back to our app. We can preview the output and then use Spec mode to copy and paste the JSX code for our components.

Click the play button in the upper right corner of the editor. Once the preview loads click the “Spec” link at the top. You can now click on the components and view the JSX code to generate them in the right panel:

It’s great to push an initial version of our design system. However, you’ll likely need to push out quite a few updates over time.

Pushing an Update

The FilterButton has a “pressed” state to indicate the currently active filter. Looking at the live React app, here’s the difference between the pressed and not-pressed state:

Let’s add support for this state. Make the following change to `src/components/FilterButton.js`:

FilterButton.propTypes = {
-   name: PropTypes.string
+   name: PropTypes.string,
+   isPressed: PropTypes.bool
}

Commit the change to git and push to UXPin:

Merge components are automatically synced to the most recently pushed code. To show the latest, reload the tab showing the UXPin editor. Select a FilterButton. In the right panel of the editor you should see a new “isPressed” property.

Select it to activate this state:

Follow this same flow (git commit + uxpin-push) when you make future changes. Prototypes will automatically use the latest pushed version of components.

Speed up building your product by 8.6x

You’ve taken a React app and pushed its components to UXPin Merge. You’ve also learned how to push updates when you modify components or add new ones. Now your design team can use these components to create high-fidelity prototypes within the UXPin editor.

You can browse the source code for this project on GitHub. To learn more advanced Merge techniques see our Merge docs or reach out to us at hello@uxpin.com.

Don’t have UXPin Merge yet? First, remember to go through the process of requesting access to make the most of designing with code! Try UXPin Merge for free.

The post Design with Code – UXPin Merge Tutorial appeared first on Studio by UXPin.

Our new plan is a game-changer for many teams. One of the reviewers during our ProductHunt Launch called UXPin an “Apple” of product design, and we couldn’t be more proud. Apple stands for innovation, creativity, and future – the values which are important to us, too.

Merge AI aims at democratizing design for many teams. Finally, they can create interfaces fast and without compromising quality and consistency. In this article, we’ll look closer at what we’re offering in this new plan and invite you to try it out.

Ready to give Merge AI a go? All the features we will talk about are available on trial. 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

Four built-in Merge libraries, backed with production-ready code

Remember the time you needed to redraw a button, just to make it look consistent? Not anymore! With Merge AI, you can access four fully-coded components that come from top open-source libraries for building interface layouts like MUIv5, React Bootstrap, Ant design (those are React-based libraries) or Tailwind UI (this one is HTML only.)

Choose a library, place its components on the canvas and build layouts 8.6x faster than with vector-based tools. Yes, we tested it! The most important thing here, nonetheless, is that all UI components are backed with code, so you don’t need to worry about recreating your design to fit the developer’s environment. Pixels are burning with jealousy, aren’t they?

What we added: MUIv5, React Bootstrap, Ant design, and Tailwind UI.

Quick instruction:

1. Open UXPin.
2. Create a new prototype.
3. Head on to Design System Libraries.
4. Pick a Merge library.

Use pre-built layouts and patterns

With the new plan, Merge AI, you have access to the most popular layouts, including eCommerce product pages, checkouts, internal apps, and more. Those templates belong to you. You can edit them, add elements in, or switch themes.

The layouts are backed with ready-to-use code and they were built with open-source library components, so you can stay consistent with a component library you want to use from this point onwards, as well as, adjust.

What we added: Fully coded and interactive layouts and patterns.

Instruction:

1. Open UXPin
2. Scroll down until you see Projects.
3. Pick a layout and copy its code.

AI Component Creator for ChatGPT wizardry

One of the biggest productivity boosts these days is ChatGPT. With our integration via OpenAI API, you’re able to generate a Tailwind CSS component with a prompt. It generates complex components, such as data reports, sign-up forms, and shopping cards that are backed with HTML and can be fully customizable.

What we added: AI Component Creator

Instruction:

1. Create a new prototype (sign up for UXPin.)
2. Navigate to “Quick Tools’ bar.
3. Open AI Component Creator.
4. Paste OpenAI API key.
5. Write your prompt.

UXPin and StackBlitz integration

StackBlitz is a development environment that simplifies creating, sharing, and collaborating on web applications directly from their web browsers. We’ve built an integration that allows users to open their design as code in StackBlitz.

What we added: Stackblitz integration for easy code export.

Instruction:

1. Open a prototype in your browser.
2. Click “Preview Prototype.”
3. Go to Spec mode.
4. Click “Copy to Stackblitz.”

Export clean and working code off UI

A while back a ProductHunter called us “Google Translator” for design to code, and it stuck with us. In UXPin Merge, you are using coded components, not vector ones, so it’s a given that you’ll be able to copy the code behind them. Now, you are able to copy the code of your entire prototype with one click.

We support any React-based component library, so if you have your own, reach out to us, and we will integrate it, so you can try it by yourself. See how you can reach out to us.

What we built: Code export.

Instruction:

1. Open a prototype in your browser.
2. Click “Preview Prototype.”
3. Go to Spec mode.
4. Click “Copy code.”

Try Merge AI for free

Thank you for being with us for so long and seeing all the transformations. UXPin started as a paper prototyping tool, then online wireframing solution, and code-to-design facilitator. This release is even more special because it helps build MVPs in lightning speed. Want to try it? Try UXPin Merge AI for free.

The post Merge AI – What You Get in a New Plan? appeared first on Studio by UXPin.

Sign-up pages serve as the welcoming gateway for users eager to explore apps, websites, and other digital products. Whether it’s a social media network, e-commerce site, or a productivity tool, these pages grant access to whatever it is that you’re offering. They are the digital reception area where users take their first steps into getting to know your product more.

In this article, we will guide you through the process of building a sign-up page with MUIv5 components and create a prototype like this under 15 minutes. Material UI is one of the best open-source component libraries for code-based prototyping. We’ll build a sign-up page with it.

Design beautiful and consistent user interfaces even if you don’t have a designer on the team. Drag fully coded components from the library and arrange them on the canvas. Customize them as you like and ship stunning layouts 8.6x times faster. 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

What is a sign-up page?

A sign-up page is a web page or form where users provide the necessary information to create an account or access online services. It typically includes fields for entering details like name, email, and password. This page serves as the starting point for users to join a digital community, start using an app, or buy a product.

A well-designed sign-up page makes the registration process easy, builds trust, ensures security, and collects data.

What are the sign-up page elements?

After looking at a dozen sign-up pages, anyone can spot that most of them use the same UI elements: input fields, buttons, sign-up text, visuals, and so on. Those UI elements are a staple, but to make a sign-up process even more user-friendly, designers also put in error handling, password strength indicators, confirmation messages, and more.

Let’s break down the essential elements of a sign-up page.

Input field

Input fields are the primary means of collecting essential user information, such as name, email address, and password. They serve as the entry points for users to provide the necessary data for completing the sign-up process.

Well-designed input fields enhance the user experience by providing clear and easily navigable areas for entering information. Users should be able to understand what is expected in each field without confusion.

They should also realize that this is the place for entering data. To make that clear, designers apply a subtle background color or shading. This technique helps create a visual contrast, making it easier for users to recognize where they need to interact.

Input fields on a sign-up page are not just blank spaces; they are integral components that facilitate data entry, enhance user experience, and contribute to the overall success of the sign-up process.

Button

Buttons in a sign-up form play a critical role in guiding users through the registration process. Their importance lies in providing a clear call to action and facilitating user interactions. 

Well-designed buttons meet user expectations in terms of placement, size, and styling. Users anticipate a button to be the actionable element that moves them forward or finalizes an action.

Buttons also contribute to the visual hierarchy of the page. The design, color, and placement of the primary sign-up button should make it stand out, guiding users’ attention effectively.

Sign-up text (header)

Most sign-up pages feature a header or a sign-up text as one of the top UI elements. It’s important to make it stand out. The header provides a clear and concise message about the purpose of the page — getting users to sign up. Thanks to the text, users instantly understand that they are on a sign-up page, reducing confusion and giving them reassurance that they are in the right place.

The header can also have a persuasive function and increase conversion rates. It can reinforce the call-to-action, providing additional motivation for users to complete the registration process.

Visuals

Visuals on a sign-up page refer to the graphical elements that complement the overall design and contribute to the visual appeal of the page. These elements play a crucial role in enhancing user engagement, conveying information, and establishing a desired brand impression.

Visuals contribute to the overall aesthetics of the sign-up page, making it visually appealing. An aesthetically pleasing design can positively impact the user’s perception of the platform and encourage them to proceed with the sign-up process.

Well-designed visuals can help break up text and reduce cognitive load. They guide users’ attention, making it easier for them to understand the information presented and navigate through the sign-up process.

Checkbox

Checkboxes are commonly used for obtaining user consent for terms and conditions, newsletter subscriptions, or additional features. They empower users to express their preferences and make informed choices during the sign-up process.

Considering checkbox design, these UI elements need sufficient size and contrast to ensure legibility. Users should easily recognize the state of the checkbox (whether it is checked or unchecked), minimizing confusion and enhancing the overall clarity of the sign-up form.

To enhance the comprehension of those UI elements, you may consider learning about different layouts, visual hierarchy, and contrast.

What do you need for this tutorial?

We’ll go over building a sign-up page. It’s possible to do that super quick if you get the same tools. You will need two things:

• UXPin trial account – sign up for free here, so you can follow our walkthrough.
• Access to MUIv5 kit – all trial accounts at UXPin have access to our built-in MUIv5 kit. It includes pre-built UI coded elements that you will use to build the layout of your sign-up page.

This walkthrough is also available as a built-in tutorial for the users who open the MUIv5 trial kit. Where to find it? Just jump into the dashboard, go to project “Start here”, and enter a prototype with the walkthrough as well as the sign-up prototype, ready to be copied and customized.

How to build a sign-up page, step by step

In about 15 minutes, we’re going to create a simple layout of a sign-up page. We’ll use some of the available MUIv5 components, lay them out on the canvas, and do a simple design magic to make the sign-up page look professional. Here we go!

Step 1: Place UI components on the canvas

Prepare your working area. Navigate to design system libraries in the bottom-left corner, and double-check if you have MUIv5 chosen as your UXPin library. You will see that you have various components to choose from. For this tutorial drag and drop onto the canvas the following components:

• Image x1
• Breadcrumbs x1
• Typography x2
• TextField x1
• Checkbox x1
• Button x1
• Grid x1
• Paper x1
• Box x2

Below is a simple visualization of the components.

You can scroll through the MUIv5 library and drag the components onto the canvas. Can’t find them? Just type their names inside of the search field. Click the magnifying glass icon and you’ll see this field. Once you have all the components on the canvas, go to the next step.

Step 2: Adjust UI components

Let’s take components and set up the right properties, so it fits our purpose – a sign-up form. Click on the UI element you want to adjust, and you will see that the Properties panel appears on the right-hand menu.

Let’s start with editing following components properties:

• Adjust colors and copy of breadcrumbs links – The breadcrumbs tell users where they are located inside of the app or site. Change the color of the link to primary and secondary. Plus, edit the copy. It should say “Account / Security / Settings”.
• Edit the TextField – This component is our input field and our sign-up form collects email addresses. Edit the copy, so it says “Email” and change its variant.
• Change the size and copy of Typography – Adjust the size of two typography components. Set up the variant of the first one as H3 and the second one as Caption and edit the copy, so it says “Create your account” and “Check this box to receive our weekly newsletter” respectively.
• Change the size and copy of the button – Set up the button size to large, edit the copy, so it says “Next,” and switch its width.

We introduced changes to five components: Breadcrumbs, Typography, Typography, TextField, Button.

Step 3: Organize components inside the boxes

Take the components we’ve just adjusted, and place them into the boxes. One box should contain Checkbox and Typography, and together they will form our checkbox field. The other box has breadcrumbs, typography, input field and button. This arrangement helps us organize our design, providing a necessary structure.

Notice that we are not including Grid, Image and Paper in any of those boxes.

If done correctly, you should be able to see the following structure in Layers Panel, located next to Design System Libraries.

Step 4: Add padding

Add the padding to boxes, so the UI elements have room to breathe. Padding is a common UI term that refers to the space between an element and the border.

Start with Box 1. Add Top and Bottom padding to components in Box 1. Use 12px for the Top padding and 32px for the Bottom. Remember to type in “px” next to the number, so the measurements are crystal clear.

Let’s move on to Box 2. For this one, add a 64px padding on each side for the whole box.

If you struggle to select the right box, use Layers Panel and click on the box you want to add padding to.

Your boxes should look like the image below.

Step 5: Set up grids

The sign-up form has a two-column layout. To make that happen, use the Grid component. It looks like this:

We want to have an Image in one column and the rest of the design in the other column. So, drag an Image component to one of the Grid’s columns (it’s this rectangle that says XS:12, SM:6) and the rest of the components into the other Grid’s column (the other rectangle.) Then, stretch the Grid component into a desired width.

Your Image component will not fit the column appropriately at first. It will be too small. To stretch it, get rid of Width and Height by clicking ‘X’. By selecting ‘cover’, the Image component will look like the one below.

Step 6: Drag everything into Paper component

There’s one component that is left. It is Paper. It adds dimension to the sign-up page. We want our design to fit inside Paper, so we can improve our form visually.

Notice that Paper has a Typography component inside, but we don‘t need it. Replace it with Grid. Stretch the Paper components, so all elements of our sign-up form fit nicely.

Step 7: Final UI design touches

There are a couple of tricks that designers use to make their design more harmonious and easy for the eye. Right now the design looks a bit stiff. 

First of all, there’s too much padding. Get rid of it by deleting ‘SX’ PADDING from Paper and SPACING from Grid.

Secondly, Image can take less space in order to make the more important sign-up form shine. Adjust the width of both columns of the grid. Right now both columns take up 6 units. Change Image width to 4 units and the other column will take up 8 units.

Small changes, but the effect is huge, isn’t it?

Step 8: Preview your design

Head on to the preview mode to see your design in flesh. A preview mode is a powerful place where you can simulate your design’s interactions, leave comments, get specs, and copy clean JSX code out of your design. If you’re ready, you can add interactions to the form to make it sensitive to users’ input. Read our help documentation to learn how to add interactions.

What will you build next?

You did it! Congrats! Together we’ve built your first form but that’s just a tip of an iceberg. You can build interactive interfaces of pages, apps, no matter how complex they are. To do that, you can use one of the built-in libraries like the MUI one we used in this tutorial or import your own React library. 

Need more practice? Take a look at our ready layouts that you can copy and customize to your needs. Or just watch our mini-course where Rachel walks you through building an employee portal in UXPin Merge. Sign up for a trial and follow her along: from creating a prototype to pushing it to code. Try UXPin Merge for free.

The post How to Build a Sign-Up Page in Under 15 Minutes appeared first on Studio by UXPin.

We are excited to share what we’ve been working on in the past few months. We’ve been doing extensive research and development concerning the technology behind UXPin Merge, and today’s the day when we announce it all.

Evolution of UXPin

Our tool was grounded in a passion for innovation and a strong desire to make design accessible to anyone. It started as a paper prototyping notepad, aimed at democratizing prototyping and making it a universal concept that can be used to conceptualize design ideas fast.

Around 2011 we developed a digital wireframing solution. At that time, this type of design work had its limitations. UXPin emerged as a solution to overcome existing flaws and introduce new advantages – from better collaboration with teammates outside of design to the challenges of quick iterations.

UXPin was dedicated to reinventing the design process from the very beginning. Instead of operating on pixels, the tool was backed with code. Instead of focusing on flat mockups, it gave users the power to build highly interactive prototypes. Instead of following a well-threaded path of making a design handoff an afterthought, it married it into the design process from the very beginning.

All of that is backed up with many interesting feature releases, such as Spec Mode, an advanced version of Figma’s “Dev Mode” which UXPin has had for about 8 years. With Spec Mode, developers could inspect properties, measure distance, and get a generated style guide from the design.

We’ve never stopped innovating – the next step was developing a unique design technology – UXPin Merge – meant to bridge the gap between design and development by making teams share a single source of truth (coded UI components.)

And now, we clarified our mission even further – we want to foster an even more inclusive design environment for everyone.

The Journey to Change

Our journey began with a critical realization – developers often struggle to find a designer and need to build a UI by themselves. This sparked the inspiration to refocus UXPin Merge to cater specifically to design-less or developer-driven teams, seeking a more straightforward way to create highly interactive and beautifully-looking user interfaces.

After talking to the users, we understood that UXPin Merge can play a key role in making design accessible and heralding the new era of design – one in which you can blend both design and development into one cohesive process.

Starting with the most popular coded component libraries, MUI, Ant Design, Bootstrap, and Tailwind UI, we transformed UXPin Merge into a drag-and-drop UI builder that serves as a powerful tool for anyone who wants to design fast without compromising on quality, interactivity, and documentation.

UXPin Merge Update – Drag-and-Drop UI Builder with Code Export

To achieve our mission, we introduced key functionalities that make the product development process easier. Let’s explore them one by one.

AI Component Creator

AI proved itself to increase productivity, speed of work, and when it comes to the world of UI and code – product development. That’s why we decided to include it in our design tool.

Our built-in ChatGPT integration can help you get AI-generated fully customizable components based on the prompts you use. Just describe the component you need, and in seconds, it will appear on the canvas. If you need to reuse it or share it – save it as UXPin Pattern.

The AI Component Creator is located on the left (see the screenshot below.) For now, it works with the Tailwind component library (you will read more about that in a separate article.)

It’s a great tool for getting custom components to complement your Tailwind UI library. A form field, menu, modal – the AI Component Creator can generate fully coded components. Once you finish up your AI-generated design, you can copy the working code off the prototype, and kick off the product development phase.

The plugin requires an OpenAI API key, but we’re ready to help with that. Anyone interested in the plugin is welcome to write to our support team or read our help documentation.

Open-source UI component libraries

We’re adding new UI libraries, so that you can enjoy 100% code parity between design and development. This release includes MUIv5, Ant Design, React Bootstrap, and Tailwind UI – four powerful UI libraries that are fully themeable, customizable and their elements can be copied to the development environment without translation.

What’s worth highlighting is that since code comes from open-source libraries, you are the owner of it! You can copy the entire code and use it outside UXPin Merge. We’re giving you a safe design environment to do UI and code exploration. Without making you dependent on our tool.

1. Tailwind UI

We’re adding a full library of Tailwind UI components that is available in UXPin. Tailwind is one of the best choices for reusable CSS code and it’s a great fit for anyone who wants to rapidly build a polished front-end without the need to start from scratch.

It works like this: open Tailwind library in UXPin, pick components that you need, adjust their props, go to Spec Mode and copy the code off your design with one click. We’re including 18 components (button, alerts, input, avatar group, dropdown, and more,) plus we’re giving users the option to add custom Tailwind components, be it with AI Component Creator or just the “Custom component” option in the library.

With Custom component, you can take any code from Tailwind UI and paste it into UXPin. Let’s say you want a Hero Section. Go to Tailwind UI > Components > Marketing > Hero Sections (quick link here.) Then, copy the code by clicking the icon on the right. Go to UXPin’s Tailwind library and click the first component named “Custom component.” Paste the code and watch how your hero section gets dropped on the canvas.

Additionally, with this integration, users can set up themes:

• Global theme property to have the theme propagated across the entire prototype. 
• Local theme property to change a theme only on a specific page.

To read more about Tailwind, head to our help documentation.

2. MUIv5

Another new built-in library in UXPin is MUIv5. You’re free to use it on a trial and we have a tutorial plus fully-functional layouts waiting for you. As with Tailwind, just take the component that you like out of a built-in library, place it on the canvas, adjust properties, and copy code.

MUIv5 is a React library that many teams use as a design system. With UXPin, you can easily do that too, and get consistent UI without constantly updating two environments.

• Access documentation with one click – place a component onto the canvas, click on it, and preview its official documentation, linked in the Properties panel.
• Switch themes to make your design unique – MUIv5 is fully themeable and you can update it to match the theme you want to use.
• Forget about redesigning the same element over and over again – most design tools keep the look of your components consistent, we’re going a step further. With our tool, components’ states are also baked in the library..

What’s amazing about this and the rest of libraries in this update is that you get clean code behind every component that you use. Unlike in other design tools, you don’t need to translate components to be usable in the dev’s environment.

Here’s a guide on how to use MUIv5 library components: How to build a simple and responsive dashboard.

Want to get skilled at using MUIv5 in design? Follow our mini-course with Rachel. Here’s the first episode.

3. Antd (Ant Design)

This release also includes Ant Design. Ant Design is a React component library and like any library in UXPin, it works in a drag-and-drop mode. Search for a component you want to use, use it in your design, and copy the clean code that’s fully consistent with official documentation.

If your team is looking for a design system, Antd can be your React component library to base it on. The components that are inside UXPin include avatar, breadcrumbs, cards, inputs, but we also have elements for building layout, adding feedback, such as alerts, and navigation.

You’re free to check it out on trial. Sign up for UXPin Merge.

4. React Bootstrap

We’re also integrating React Bootstrap to UXPin Merge. Next to MUI, Bootstrap is one of the most popular open-source React component libraries that forms a foundation for design systems.

Just navigate to Design Systems Libraries in the Editor, pick React Bootstrap and explore dozens of built-in components that are fully consistent with official Bootstrap documentation.

Drag and drop React Bootstrap components on the canvas, manage their props, arrange the layout, and go to Spec Mode to copy the code.

Do you want to learn how to use it? Great! React Bootstrap is available on trial and comes with its own trial kit. Dive into this React library. Try UXPin Merge for free.

Templates

A blank canvas can be quite scary. For that reason, our release comes with a host of customizable templates. Pick a layout that fits your use case, edit it as you like, and ship it as your own UI.

The templates are not exclusive to UXPin. As with coded components, you can copy the code behind the elements and use it to build your own product.

We’ve built the templates with the MUIv5 component library mentioned above. They are based on the official documentation, contain clean React code, and are a great representation of what UXPin Merge is capable of.

The templates include:

• Dashboard – get a template of a fully-fledged UI dashboard with an activity chart, order history, sales report, and search bar; perfect for internal tools.
• Blog – use a layout for a blog with an article structure, images, author avatar, tags, and breadcrumbs. 
• Store – copy the store template and populate the images with your own content, adjust tags names, edit prices, and add your own ranking.
• Product details – edit the product card that contains UI elements like image, star rating, price changes, and more.
• Checkout – play around with a checkout page, personalize it to your product needs, and copy the code behind it.

Spec Mode Improvements (Beta)

Our Spec Mode also got revamped. Right now it’s available with MUIv5 library, but we plan to do a full release later on. UXPin’s Spec Mode is a feature that allows developers to copy specifications, assets, and HTML, CSS, and JSX code.

When building a prototype with MUIv5 components, Spec mode has additional features. What are they?

• Stackblitz integration – with a click of a button, users can copy the code to Stackblitz, a popular front development environment.
• Clean React code that’s fully consistent with official documentation – get clean working code that you can copy to your developer’s environment or use one of our available integrations.
• Resizable Spec Panel – users can change the size of Spec Panel instead of using a fixed size.
• Collapsible code sections – a small but mighty usability improvement in which you can collapse sections that you don’t want to see.

JSON Tree Viewer

We’re releasing a user-friendly version of a JSON code editor – JSON Tree Viewer. Users can expand and collapse nodes, easily navigate through the data, and make modifications visually.

We also support JSON5 format, so there’s no need to use double quotes for keys. Read how to use JSON Tree Viewer in our help documentation.

Start Using UXPin Merge

With this strategic shift, we look forward to a future where developers can create stunning user interfaces, marking a new era for UXPin Merge and the design community as a whole. Join us in this exciting chapter as we redefine the way teams approach design and product development. The capabilities you’ve seen are available on trial – try them out, post your feedback, and spread the word about UXPin Merge new directions.

Another great news is that we have a new pricing plan that includes all those features: Merge AI, an option tailored for those of you who want to use UXPin Merge technology, AI Component Creator, and code export to their full extent. So, go ahead and try UXPin Merge for free.

If you happen to have a React-based component library of your own, we can integrate it so that you can keep designing with your own code components. Talk to us to get it synced.

The post Product Announcement – Helping You Bring Design Vision to Life 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.

Learning React for designers–is it necessary? Can you build code prototypes without learning to code? These are common questions among product development teams and designers.

Most designers don’t want to learn to code. Learning React or even the basics of HTML, CSS, and Javascript takes a lot of time. A designer’s time is better spent investing in user experience and solving design challenges.

It’s a bit of a catch-22 because to improve usability testing and user experiences, you need high-quality prototypes that look and feel like the final product–something image-based tools don’t facilitate. For most designers, better prototyping capabilities drive the motivation to learn React.

What if you could get all the benefits of React for prototyping and testing without relying on engineers or writing code yourself? A solution already exists with UXPin Merge!

Key takeaways:

• React is a library that helps devs build interfaces with reusable components which makes apps scalable and easy to maintain.
• Designers can learn React to better understand development; there’s even a movement “React for designers” that advocate for this.
• Designers don’t need to learn React if they use UXPin Merge–a powerful design technology that lets them create prototypes with coded React components just as if they would use pixel-based UI components.

UXPin Merge allows you to sync UI coded components from a Git repository, npm or Storybook into UXPin’s design editor so designers can use the same UI elements (React, Vue, Angular, etc.) that engineers use for development. Learn how to request access to this revolutionary technology. Visit our Merge page.

Reach a new level of prototyping

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

Discover UXPin Merge

What is React?

React is an open-source front-end Javascript library developed by Facebook. According to an August 2022 survey, React is still the most widely-used front-end framework–a position React has held for several years.

React’s component-based workflow enables engineers to create reusable components they can call anywhere in a user interface by writing a single line of code. This component-based approach makes React an excellent framework for component libraries and design systems.

What is React for Designers?

React for designers is a movement to educate designers about React and other front-end frameworks. The idea is that learning React will empower designers to build interactive prototypes or, at the very least, better understand technical constraints and the development process.

Should Designers Learn React?

Designers don’t need to learn React, but if they take an introductory course, they can gain many attractive benefits.

Here are four common reasons why designers learn React:

#1: Career development: programming expertise is advantageous if you plan to climb the corporate ladder–even within Design. The higher you climb, the more important it is to learn the technical aspects of product development for communication, collaboration, and decision-making.

#2: Higher paying jobs: a natural transition for a UX designer who codes is to a front-end developer or UX engineer. According to Glassdoor, the average UX designer makes under $100k in the United States, while the average UX engineer earns over $120k. On average, engineers earn more than designers. Design and development expertise increases your value to an organization and earning potential.

#3: Skills development: understanding the engineering aspects of digital product development can improve cross-functional collaboration. Learning React can also help designers understand technical impacts on user experience and how to solve these problems during the design process.

#4: Better prototyping: unfortunately, image-based design tools limit what designers can test during the design process. To improve prototyping capabilities, designers must rely on engineers to build code-based prototypes–a time-consuming and expensive process. Designers who code can make these prototypes themselves to enhance usability testing.

UXPin Merge – The Fastest Way to Design with React

UXPin Merge allows designers to import React (and other frameworks) component libraries into UXPin to build fully functioning React prototypes–without writing a single line of code!

Designers use these React components in UXPin like any other design tool, dragging and dropping UI components to build user interfaces. The only difference is that Merge components are fully interactive and include colors, spacing, typography, sizing, and other properties defined by the component library or design system.

What do React components look like in UXPin?

This text field from MUI’s component library demonstrates how designers see and edit React components in UXPin. The text field is fully functional and ready to prototype out of the box.

The properties displayed in UXPin’s Properties Panel relate to React props from the component library’s repository. Designers can switch modes and view the component’s React props in JSX. 

This JSX also makes design handoffs much easier because engineers simply copy/paste the code for front-end development.

Code-based vs. image-based design tools

Image-based design tools use plugins and extensions to bring React to design, but the generated code is rarely usable for engineers. Why? Because these plugins scan UIs and “guess” what the code should be. There are many ways to develop React components, so this code is usually redundant, meaning it’s faster for the engineers to code from scratch than restructure plugin-generated code.

Read more: Design to Code or Code to Design?

UXPin is a code-based technology, meaning it renders code as it’s written in the repository instead of vector graphics. Engineers already have exact versions of the components in their repo, so it’s a matter of adding the component library as a project dependency and copying the JSX from UXPin to develop the final product.

UXPin Merge technology gives designers all the benefits of prototyping a React app or website without learning React!

Examples of Companies Prototyping with React Components

From startups to agencies, and enterprise design teams, here are examples of companies prototyping with React components during the design process.

PayPal

PayPal’s internal product development team switched to UXPin Merge in 2019. Erica Rider, UX Lead EPX at PayPal, discovered Merge while looking for tools and systems to scale her 5-person UX team, which serviced 60+ products and supported 1,000+ engineers!

PayPal uses a React Fluent UI design system with custom components, patterns, and templates. Erica and her team have built the library to minimize design decisions, so product teams only focus on creating products to solve user problems.

The system works so well that PayPal’s product teams build one-page prototypes 8X faster than experienced UX designers using image-based tools could previously.

“Before, with our limited resources and designers, a one-page product would take two or three months just to design mockups. Now product teams can design and deliver a product within the same time frame.” – Erica Rider – UX Lead EPX at PayPal.

TeamPassword

TeamPassword uses UXPin Merge slightly differently. With no UX team, TeamPassword’s engineers must do all the prototyping and testing. The two-person team used to do this with code, but it took a lot of time to test, edit, and iterate.

TeamPassword’s engineering team now uses UXPin Merge for developing and testing new products using a custom MUI component library. With production-ready React code, TeamPassword’s engineering team saves significant resources by not writing front-end code to deliver new products and UI updates.

dotSource

German-based digital product consulting and development agency dotSource uses UXPin’s Storybook Integration to import libraries for multiple frameworks, including React, Vue, Angular, Ember, etc. This flexibility means dotSource’s design team can use UXPin Merge with almost every client and product the company collaborates on.

One of the most significant benefits of using UXPin Merge is that design system properties are “baked in” to every component. As an agency collaborating with various organizations and their internal teams, these baked-in React properties create constraints that guarantee ultimate UI consistency.

Using code components in the design process also makes cross-functional collaboration easier for dotSource’s teams while facilitating smooth, effortless design handoffs–which are usually more challenging when working with external contractors.

Iress

Financial services software developer Iress uses UXPin Merge to create a single source of truth for the organization’s design system. With designers and engineers using the same component library, there’s better cross-functional alignment and understanding of technical constraints.

“UXPin Merge will help us create more interactive and realistic prototypes. People can tab around or see the same interactions – hover styles, animations, etc. – as they would expect in a real app. We can do more insightful user testing and discover usability issues much earlier in the process.” Nick Elliott – Design System Product Owner and Regional Head of Product Design at Iress.

Like PayPal, Nick sees the benefit of UXPin Merge for non-designers “It will give non-designers access to a tool, whereby they can also experiment and have exposure to the same design considerations.”

Try React Prototyping Tool

There are three ways designers can get started designing with React components using UXPin Merge:

• npm Integration: import open-source React component libraries available as npm packages into UXPin using the Merge Component Manager (the quickest and easiest way to get started as a designer).
• Git Integration: sync a React repository directly to UXPin. Requires engineering collaboration to set up.
• Storybook Integration: supports more front-end frameworks via Storybook, including Vue, Angular, React, Ember, and more.

Designers can also take advantage of UXPin’s MUI integration which comes standard with all Merge plans.

Ready to get started? Visit our Merge page for more details and how to request access.

The post React for Designers – A Designer’s Guide to React appeared first on Studio by UXPin.

Storybook Connect for Figma aims to link Storybook stories to Figma designs to streamline UI review and design handoff. Storybook Connect has its limitations. As you’ll learn in this article, UXPin Merge’s Storybook integration is a better alternative to Figma Storybook plugins.

Key takeaways:

• Storybook Connect for Figma allows you to link Storybook stories to their corresponding Figma designs but doesn’t import the components directly into Figma for manipulation.
• The plugin depends on manual URL linking, making it vulnerable to broken links and requiring additional effort for setup.
• UXPin Merge offers a more comprehensive solution by importing an entire Storybook library for prototyping, creating a single source of truth between design and development.

Bring Storybook components into the design process with UXPin’s Merge technology. Visit our Merge page for more details and how to request access.

Reach a new level of prototyping

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

Discover UXPin Merge

Does Storybook Work With Figma?

Storybook Connect is the official Storybook Figma plugin made by Chromatic–a cloud service for Storybook that automates workflows for UI feedback, visual regression testing, and documentation.

What is Storybook Connect for Figma?

Storybook Connect links Storybook stories to their corresponding Figma designs. This plugin enables teams to compare the live implementation with design specs, accelerating the design handoff and UI review processes.

Key Storybook Connect’s features include:

• Connecting Storybook stories and Figma design components or variants to keep design and implementation in sync.
• Designers can interact with the Storybook component in Figma, giving them a real-time understanding of how a component functions.
• Identifying reusable components, helping to maintain consistency across projects.
• Evaluating how closely the implemented UI matches the design specifications.
• Setting up private projects and control who can access them.

Alternative beta plugin: story.to.design

At the time of writing this article, story.to.design is a beta plugin that claims to generate a Figma UI kit of Storybook stories. It’s also important to note that story.to.design does not support private GitHub repositories. 

While story.to.design looks promising, developers must use a specific syntax and layout to import and update the stories in Figma–which might not align with your development workflow.

The story.to.design plugin will require technical expertise to set up, and you might have to set up a separate repository to ensure the library aligns with story.to.design’s code requirements.

How do you use Figma With Storybook?

Once you have installed Storybook Connect, there are three steps to connecting your stories to Figma components:

1. Select a Figma component or variant.
2. Run the Storybook Connect plugin.
3. A window opens, allowing you to paste a link to a specific story.
4. A Storybook logo appears below the components properties on the right.
5. Click View Story to open a new window within Figma displaying a live implementation of the Storybook component.

And that’s it! Designers can interact with the Storybook component to understand how it works and copy the interactions into Figma.

What are the Limitations of Figma Storybook Integration?

Here are some of the limitations and challenges with using Storybook Connect.

Does not import Storybook components into Figma

One of the most notable limitations is that the plugin does not import Storybook components directly into Figma. Instead, it links Storybook stories to their corresponding Figma designs. While you can interact with the live implementation within Figma, you can’t manipulate the Storybook components as native Figma elements or use them for prototyping.

Dependent on URL linking

Storybook Connect relies heavily on URL linking between Storybook and Figma. After running the plugin, you must find the correct story and copy/paste the link in Figma–a lot of manual work for each component!

If the URL structure changes or there are connectivity disruptions, the links may break, requiring manual intervention to restore them.

Limited to specific addons for UI review

While the plugin does offer some Storybook addons for UI review, such as the Measure and Outline addons, it may not support all the addons your devs use in Storybook.

Storybook Connect does not bridge the gap

Storybook Connect fails to bridge the gap between design and development. Designers still work with image-based tools and components, while devs build with code. 

The plugin marginally streamlines the design and design handoff by removing the need to switch between Figma and Storybook to reference design and code component libraries.

How to Solve Figma Storybook Limitations With UXPin

With UXPin’s Merge technology, you can import an entire Storybook library into UXPin and use the components to build and test prototypes. Unlike Storybook Connect, designers and engineers don’t use separate libraries.

Instead, the integration creates a single source of truth between design and development where designers use the same UI elements for prototyping as engineers use to develop the final product.

What is UXPin Merge, and how does it work?

Merge syncs code components from a repository to UXPin’s design editor. Designers can use these components in the design process to build interactive prototypes indistinguishable from the final product. There are three ways to import code components using Merge:

1. Git Integration (React only): Direct connection to any GitHub repository, giving full access to Merge features, including Patterns, Version Control, and JSX authoring.
2. Storybook Integration: Connect any Storybook library, including React, Vue, Ember, Angular, and more.
3. npm Integration: Import components from open-source libraries on the npm registry using the Merge Component Manager.

How Merge solves Figma’s Storybook limitations

Does import Storybook components into Figma

Storybook Connect doesn’t import code components into Figma, and designers can’t use these for prototyping. Merge’s Storybook Integration does import Storybook components into UXPin, and design teams can use them for prototyping.

Is not dependent on URL linking

Merge does not use URLs or other manual methods to import components. Instead, Merge imports the actual UI elements, templates, and patterns from your Storybook repository into UXPin. Once the initial setup and connection are complete, Merge automatically syncs repo updates to UXPin and notifies design teams of the change.

Is not limited to specific addons for UI review

Merge does not require addons or plugins to function. It connects directly to the repository, meaning any plugins or addons won’t impact syncing. This connection won’t interfere with engineering workflows or best practices, making it easy for product development teams to adopt.

Successfully bridges the gap between design and development

Merge bridges the gap between design and development by syncing teams through a single component repository. Designers and developers use the exact same components from the exact same repository.

“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 – a German-based digital product consulting and development agency.

More reasons to use Merge’s Storybook Integration

• Enhanced user testing: Designers can build prototypes that accurately represent the final product, allowing them to test complex interactions and even API integrations without engineering assistance.
• Meaningful feedback: Stakeholders can interact with Merge prototypes like they would the final product, giving designers meaningful, actionable insights to iterate and improve.
• Streamlined handoffs: Merge handoffs are smoother than a typical design-to-code workflow because there is no way to modify Merge components in UXPin other than the Storybook Args available in the Properties Panel. 
• Zero drift: Storybook Connect gives designers a reference for designing components, which they can interpret in many ways or completely ignore. Merge components give design teams the same limitations and constraints as developers, eliminating design drift and inconsistencies.

How do you use UXPin With Storybook?

Merge’s Storybook Integration lets you connect any public or private Storybook, enabling you to keep your components secure with token-based verification and manage library access in your team.

Setting up

Merge’s Storybook Integration connects directly to a repository, so you will need technical assistance from your engineers to set this up properly. Check out UXPin’s docs for more details, including contacts for UXPin’s technical support team, who will assist you in getting started.

How to find Storybook components in UXPin

Once the setup is complete, your new Storybook library will appear in the left sidebar under UXPin’s Design System Libraries tab. 

Storybook libraries will display the Storybook logo to the left of the library name, like in the Material UI example below.

How to use the Storybook components in UXPin

Click or drag Storybook components from UXPin’s Design System Libraries onto the canvas.

The component’s properties, defined by Storybook Args, will appear in the Properties Panel. You can adjust these to get the desired variant, state, interactivity, etc.

Add UI elements to create user interfaces and build prototypes. You can add page transitions and other interactivity using the Interactions feature at the top of the Properties Panel.

Design handoff

Share designs and prototypes with developers using Preview and Share. Developers can analyze UIs and inspect individual components using Spec Mode. UXPin automatically links to the component’s story, so there is no confusion about which pattern or UI element devs are viewing.

And that’s it! You’ve learned how to set up a Storybook library in UXPin and build prototypes using code components. 

How a Code to Design Workflow Streamlines Product Development

Storybook Connect embeds components into Figma for designers to reference. This plugin solves a minor problem for design teams–switching between Figma and Storybook. The manual process of linking each component is time-consuming and prone to error. Connecting the wrong story in Figma can cause confusion and create friction between designers and engineers.

A code-to-design workflow eliminates manual processes and updates. DesignOps can focus on creating impact rather than spending time and resources manually updating and maintaining UI kits to meet repo releases.

UXPin’s Merge technology automates redundant tasks and successfully bridges the gap between designers and engineers. The transition from design to development is seamless, and developers require less documentation to build the final product.

“With this UXPin Merge workflow, we have overcome redundant processes and eliminated UX debt from design system updates. UX consistency is no longer an issue, and we have no design drift.” dotSource – a German-based digital product consulting and development agency.

Sync design and development with one tool and powerful Merge automation. Visit our Merge page for more details and how to get started.

The post Does Storybook Work With Figma? [+ What to Use Instead] 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.

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

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

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

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

Reach a new level of prototyping

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

Discover UXPin Merge

UXPin Merge and Storybook integration 

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

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

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

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

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

UXPin – designing to coding 

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

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

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

The UXPin Merge approach 

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

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

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

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

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

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

Connecting Storybook 

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

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

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

Thoughts for the future 

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

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

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

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

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

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

The post Storybook-UXPin: Review of Merge Integration appeared first on Studio by UXPin.

MUI is one of the most popular and robust React component libraries. Developers use MUI to put together user interfaces for React apps. MUI is also useful for prototyping. Using this library, a designer can create high-fidelity prototypes that are fully interactive and ready for usability testing or even the handoff in practically no time.

If you want to try prototyping with MUI, sign up for a free trial. You’ll be able to use the MUI kit for 14 days.

See how close to the real product your prototypes can get when you use a design tool that renders code instead of vector graphics. Explore the full potential of designing with MUI with UXPin Merge. Request access to UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

Why Material UI?

A ton of teams use MUI as a ready-made component library for their design systems. It’s an open-source library, documented and maintained by a large community, so it makes a lot of sense to take advantage of it, instead of wasting resources on building a React library from the ground up.

MUI components are customizable. In this article, we will go through a simple overview of different ways to style MUI v5 components, and why you should consider those styling methods. 

6 Methods of Customizing MUI Components

When discussing the customisation of MUI components, it mostly comes down to how they are styled, with so many in-depth articles on this topic already, we’ll quickly go over the best styling methods.

1. ThemeProvider

The first styling method of MUI would be the ThemeProvider which is a HoC wrapping other components. It injects custom styling, allowing the user to override styles and props.

You’d want to use this to create an easily usable style across most of all of your components, for example, to build a branded library. Since it isn’t a tutorial but a really simple and quick showcase, see a Button component and pay attention to the way you can override styles and start developing a branded component.

2. createStyled

The second way of MUI customization is the styled method. It is a function extended from the styled utility. I found that method very useful when needing to apply styles that aren’t used very often, but they were important enough to spend time on making them reusable.

For instance, if you have a highly used component, but only 25% of the time you need to give it a certain style such as no padding or margin then add a corresponding prop to enable styles in these use cases. Shown in the image below, is a case where you need to remove the padding on a MenuItem component on occasion.

const stylesFromProps = {
 shouldForwardProp: (prop) => prop !== 'disablePadding',
};
const MenuItemM = styled(
 MenuItem,
 stylesFromProps,
)(({ theme, disablePadding = false }) => ({
 ...(disablePadding && {
   padding: 0,
 }),
}));

3. sx={…} Prop

With the newly released MUI 5, the prop sx has been introduced, which is a quick way to define custom styling that has access to theming and it’s variables or any valid CSS you can think of.

This is very useful when you have a component that is being used in multiple places, but you need to have very specific styles or fix a niche issue for a single case, for example, the previously described issue of having to remove the padding on a MenuItem component.

<MenuItem sx={{ p: 0 }}></MenuItem>

4. Component Wrapping

Next, you could try wrapping the component and passing in props to change styles. It’s a possibility, but I found it quite prone to having duplicate props and just generally problematic.

5. Unstyled Components

Another way of customizing MUI components is using the very new and not fully implemented Unstyled Components. It is said to support more components in the coming months.

This seems to be a great solution, as Unstyled Components can be used to create a component library that is not based on Material Design, which is a reason for some not to use MUI. It seems great for avoiding CSS conflicts.

6. MUI Box Component

One option that I’ve only just found out about is using the Box component to override styles. The documentation is continuously being updated, so I’m eager to find out more information about how it works..

In conclusion, these are the recommended methods to customize the MUI v5 components. Those methods provide a lot of possibilities and even allow you to create a unique branded library when using Unstyled Components.

Sync MUI with UXPin Merge

With so many styling methods, you need to give MUI a go. Once you’re ready to create interface design with it, see how UXPin Merge can help you.

It’s a revolutionary solution that allows you to design with full interactivity and functionality of MUI components, and then use those components in the production phase, without the need to translate your design into code with third-party tools. Finally, your design and development teams can share a single source of truth.

The post MUI 5 Customisation – What is the Best Styling Method? appeared first on Studio by UXPin.

Our friend from PayPal, Anthony Hand, decided to share how to make designers’ lives easier using parsing props with UXPin Merge. 

Merge is UXPin’s revolutionary technology that helps you import and sync your dev’s UI components from the component library in the design tool.

You can bring the components via Storybook integration or Git repository. You can also use NPM integration for importing and components without engineer’s help. Either way, you don’t need to worry about trading off between time and robust prototypes – you can have both.

It’s possible to design fully interactive prototypes extremely fast because the UI elements you use during the design process are live code. Discover more about UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

Prop Parsers for UXPin Merge Controls

As any UI developer knows, parsing and validating user inputs is as much of an art as a science. While most of the users most of the time may enter the expected values, we must always be prepared to do a little graceful massaging and tweaking, as well as error handling. 

In my days as a Sr. UX Designer on a DevOps team at PayPal and all of my projects are internal web-based tools, we used UXPin Merge. After we settled on the Microsoft Fluent UI library for our next generation of web apps, we embarked on the process of importing the UI library into UXPin using their Merge technology. The process was straightforward enough, though it did have a little learning curve. 

One of our first learnings with UXPin Merge was that standard parsing and validation needs applied. The Properties Panel in UXPin is, after all, just a fancy user input form. We developed a few standard parsing utilities for basic user inputs like colors and dates, for example.

As we got deeper into the UXPin Merge preparation, we soon realized that more complex UI controls would need complex JSON in the underlying control. However, surfacing raw JSON to non-technical people in UXPin would quickly kill user adoption.

JSON is a complex data model expressed as a string, created for computers, not humans. As a result, one of our most important innovations was to create an advanced multi-use parser that allowed us to gather plain text user inputs to configure complex UI controls like dropdowns, navigation lists, and data tables. 

Basic Parsing

We created a few basic parser functions in JavaScript to handle the validation for common user inputs around colors, dates, and numbers, for example. Although these were primarily created to make it easier to configure UI controls in UXPin, some of these utilities have found wider use internally. 

Parsers converted the string “50” to an integer and validated the hex color, adding back in the required # mark. Our Merge wrapper also trimmed leading and trailing whitespace from the icon name. (UXPin Editor and Props Panel view)

Color Parsing & Formatting

The Microsoft Fluent UI controls want hex values, such as “#0078d4” (a lovely shade of blue), but we wanted to allow users to use both hex values and easier to remember theme tokens (such as “themePrimary”). Plus, we wanted to support semantic tokens (e.g., “success”) and a handful of basic colors (e.g., “white”, “transparent”).

As for gracefully handling errors, we trimmed input text of whitespace and accepted valid hex values, even if they didn’t start with a # mark.

Our custom color parser gives a huge range of freedom to users and accepts all of those types of values, returning either a validated hex value for use by the UI control, or “undefined” as an error flag.

The color parser checked to see whether “themePrimary” was a color token in the theme, then retrieved its hex value for use by the icon object.

Similarly, the color parser looked up the special semantic color token, “success,” and converted it to a hex, as well. “Success” is easier to remember than an arbitrary hex value. 

Complex Parsing

As mentioned previously, many of the underlying UI controls use complex JSON for configurations, like menus, navs, and dropdowns. However, JSON is hard to read for humans, and easy to break. So instead of JSON, we invented an innovative syntax that’s much easier for regular humans to use. In addition to plain text, the syntax tokens we developed include: 

• icon(Icon_Name | color): Any icon in Microsoft’s icon library
• link(Display Text | URL)
• Divider or —-: To display a divider in a list
• * : To mark a child in a section, like in a nav or menu
• CSV Parsing: For table rows or when commas are needed in plain text in certain controls

Note: In most cases, this special syntax is only for use within UXPin to help designers and (typically) non-technical people easily build prototypes. To build the actual web apps, developers would set up these UI controls in the standard way with JSON, event handling, etc. 

Icons & Text in Menus

Let’s look at how a user would add popup menu items to a CommandButton control in UXPin. In this example, the user clicks on the button with the text “New” to display a popup list of the types of objects the user could add, such as various file types, a folder, a user, etc. 

In the UXPin Editor, the user clicks on the Menu Items prop to view a large text editor. Our improved parser now looks ahead to determine whether a string like “File” is a regular menu item or a section heading. The star ( * ) indicates that “Document” is a child, so “File” must be a section heading. Note the usage of the icon() token, and two intuitive ways to indicate a divider. 

This is the view of the same CommandButton as rendered in the UXPin Prototype Preview mode. 

This powerful, innovative syntax was reused across nearly a dozen other UI controls that supported a list-style view: Dropdown, Combobox, Pivot (tab strip), Nav, ChoiceGroup (radio buttons), GroupButton, SplitButton, Breadcrumb, and more. 

Although support for icons, dividers and groups varied between controls, once UXPin users became familiar with this basic approach, they are able to easily apply the same approach across a ton of controls to create rich, interactive prototypes without knowing a lick of JSON. 

Data Tables

As you might imagine, internal web apps are data intensive and data tables are extremely common. So, one of the main drivers for developing this advanced parsing engine was to help us easily create realistic — and modestly functional — data tables in our prototypes. 

To create rich prototypes with reasonably advanced functionality, our workflow starts off with Excel. We first develop a model of the view in Excel, using the link() and icon() syntax mentioned above within each cell. Then we export that worksheet as a CSV file.

Using any text editor, we can open the CSV file and copy just the headers, or the row data, into the Headers and Rows props in UXPin, respectively. Compare this streamlined workflow to what we used to do to create tables in other prototyping tools!

The UXPin Editor view for the DetailsList’s Rows prop showing the comma-delimited cells (CSV format) with our innovative link() and icon() syntax. 

Designer’s Perspective on Parsing 

As you look through the source code for our parsers, you may have some opinions on some of the design decisions in the code, and how (relatively) inefficient or verbose the code is. You may even notice some errors. I accept responsibility for these decisions.

Keep in mind that I’m a UX designer, not a professional programmer. More importantly, I explicitly decided to optimize for readability, modularity and ease of maintenance over efficiency, per se, given my limited knowledge of JavaScript. This is open source code, so you’re welcome to borrow some or all of the code, make modifications, or offer updates and bug fixes. 

On Optimizing UXPin Merge

UXPin’s Merge technology lets any company import the exact same UI component library that they use for development into UXPin so that anyone on the team can create rich, interactive prototypes. It’s a powerful technology that can dramatically increase the velocity of design for user feedback and stakeholder reviews, and can improve developer handoff.

However, as our team learned, there needs to be a modest investment in setting up the end user experience for success in UXPin. We made an explicit decision to optimize the UXPin user experience with smart parsing that brings maximum power while minimizing errors.

We recently ported our proprietary Microsoft Fluent UI library to an open source library which your team are welcome to experiment with and gain inspiration from. And feel free to liberally modify and/or borrow any of our parsers for your own UXPin Merge projects!

The post Parsing Props for UXPin Merge Controls – A How-to Guide appeared first on Studio by UXPin.

Storybook is a huge productivity boost for development teams, helping them scale their work and stay on the same page. The tool is launching its new version that you can also leverage in UXPin. The new update introduces some major improvements and extends Storybook’s capabilities.

Bring Storybook’s components to UXPin and design prototypes that look and behave like the end-product. Keep consistency between design and development and unite teams with a single source of truth. Try UXPin’s Storybook integration.

Reach a new level of prototyping

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

Discover UXPin Merge

What Storybook 7.0 has to offer?

The official launch of Storybook 7.0 is planned on March 14th. You can try it on beta and experience its benefits before the official release. Learn more about it in Storybook’s article about plans for 2023.

Better performance

Storybook’s team upgraded the tool’s performance significantly. They managed to make it 2x faster compared to its previous version.

More compatible integrations

The new version of Storybook makes integrations easier. By launching Frameworks API, Storybook now supports Vite, NextJS, and works on supporting SvelteKit. This also enabled them to think of integrations with new frameworks like Remix, Qwik, SolidJS, and more.

More extensive testing

They added code coverage reporting. Now it’s transparent which lines of code in the components and libraries are tested by the user’s stories.

Improved documentation

Storybook has a few updates for documentation. One of them is that Storybook’s team upgraded documentation to version 2 of MDX. They also simplified the way of importing stories (component examples) in docs.

Integrate Storybook 7.0 with UXPin

UXPin supports Storybook 7.0. Go ahead, sync your Storybook components with UXPin. It’s super easy and gives you a host of benefits that will improve your product design and development process.

Create prototypes with Storybook components

The components that you bring to UXPin are more than just a visual representation of what you have in Storybook. They are fully functioning, allowing you to test real user interactions. That’s what high-fidelity prototyping should be about.

Foster cross-functional collaboration

The integration will help you break the silos between product design and engineering. The teams will share the same components which will prevent them from inconsistencies between design and development.

Streamline design handoff

By building prototypes with fully functional components, designers are able to smooth out the design handoff process. Storybook components can become a single source of truth that both teams share, so there’s no need for extensive documentation or misalignment.

Here’s how to integrate with Storybook

The integration can take less than a minute. You need a link to a Storybook library you want to use (public or private), log in to UXPin and add a new library by pasting the link in the box: “Import Storybook components.”

Get a guided tour of UXPin’s Storybook integration.

Try UXPin and Storybook 7.0

Storybook is a great tool for UI component quality control, but it will help you maintain and scale the design system once combined with UXPin. Start designing interactive prototypes with Storybook components. Try UXPin’s Storybook integration for free.

The post Storybook 7.0 – Why You Should Be Excited appeared first on Studio by UXPin.

A design system serves as a single source of truth, grouping all elements that allow teams to design, prototype, test, and develop a product. This system includes pattern libraries, coded component libraries, code samples, APIs, and documentation. 

Organizations use the four-level design system maturity scale to gauge the evolution of design systems. 

The ultimate goal for many organizations is to attain Level 4 maturity in a design system, a stage characterized by fully integrating coded components into the design process.

However, most linger indefinitely at level three because they lack the tools, systems, knowledge, and resources to achieve level-four maturity.

UXPin Merge aims to simplify design system maturity by translating coded UI components into visual elements designers can use in the design process, thus bridging the gap between design and development.

Transform your design workflow with UXPin Merge and embrace the future of component-driven prototyping. Achieve level four design system maturity faster and with fewer resources. Visit our Merge page.

Reach a new level of prototyping

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

Discover UXPin Merge

The Design System Maturity Scale

Design System Product Owner and Regional Head of Product Design at Iress, Nick Elliot, got the inspiration for this design system maturity scale from TJ Harrop, Design System Product Manager at the NSW Government.

UXPin offers tools and features to support organizations at every level of maturity. The comprehensive toolset also enables organizations to accelerate progress toward level four.

UXPin for levels 1 and 2

• Level 1: The organization doesn’t have a design system but might have common assets defined and some documentation.
• Level 2: The organization has design components and can provide HTML and CSS guidelines. These are not yet coded components but patterns that require development.

UXPin Merge for levels 3 and 4

• Level 3: The organization has two libraries with design and development still operating in separate silos:
  • A code component library for developers
  • Design pattern libraries for designers
• Level 4: The organization has a fully integrated system with a single source of truth where designers and engineers use the same design system components and documentation. There is no design drift and no coding or interpretation required to build interfaces.

Scaling a Design System from Levels 1 to 3 in UXPin

Navigating the platform

UXPin is a code-based, full-stack UX/UI design platform that removes constraints in collaboration between designers and developers. UXPin covers the entire UX process from ideation to handoff, including high-fidelity prototyping.

Designers can access UXPin’s Design Libraries without leaving the canvas, which includes colors (tokens), text styles, assets (icons and logos), and design elements (components).

Documentation is a crucial aspect of design systems, but it’s challenging to create and maintain. UXPin automatically generates documentation for each library, including colors, typography elements, assets, and pattern libraries. Designers can edit these pages and add information, such as use cases and tips for each component’s usage.

UXPin also includes a component spec tool, allowing devs to explore its properties and grab CSS. This tool is essential for developers who need guidance on recreating patterns in code.

This inspection tool is essential for maturity levels one and two or when teams release new elements and patterns, as it enables developers to convert design mockups into functioning components for the UI library.

Building the design system’s foundation in UXPin – levels one and two

Designers can create components from scratch using UXPin’s Forms, Shapes, Text, and Box tools as a foundation. They can also edit master components in isolation, including adding interactions.

Unlike image-based tools, designers don’t need to create multiple frames or duplicate elements to add component interactivity in UXPin. For example, they can design several button states, like default, hover, active, disabled, etc., simply by editing the master component’s interactions and properties to change based on user or system actions.

UXPin’s Documentation provides space for the design system team to add code examples beside visual components, including CSS, Handlebars, HTML, Javascript, JSX, Ruby, and PHP, to name a few.

These features allow design teams to navigate levels one and two, giving them a complete pattern library with documentation in UXPin.

Level three maturity

Once the pattern library is complete and devs have successfully converted the components to code, the organization is at level three maturity.

Many organizations refer to this level as a single source of truth, but there are, in fact, two libraries and two sets of documentation to update and maintain.

While level three is significantly better than level two, there are many DesignOps challenges when maintaining and updating separate libraries:

• Double the time and resources
• The necessity for many tools in the design process–i.e., a design tool, prototyping tool, documentation, etc.
• Slow updates due to managing releases for multiple platforms
• Errors and inconsistencies
• Teams working with out-of-date design system versions
• Design and engineers speak different languages
• Lack of fidelity and interactivity for prototyping in the design process

Another challenge with level three is that the code is often not production ready. Some organizations have design system repositories, but many at this level rely on guidance code from documentation. The development process is open to errors and inconsistencies without a coded component library hosted in a single repository.

Fully Integrated – Level Four Maturity

At level four, designers use code components in the design process, pulled from the same repository developers use to build the final product. In UXPin, this component-driven prototyping methodology is made possible by Merge technology.

Merge fetches UI components from a repository and renders them in UXPin for design teams to build prototypes. The benefits of this workflow include:

• High fidelity and pixel-perfect parity
• Consistent user experience
• Faster design and development
• Code reuse
• Simplified governance
• Harmony between designers and developers
• A real single source of truth

Merge Integrations

Organizations have three primary methods for importing components:

• Git Integration: access to Merge’s complete feature set, including Patterns, Version Control, and JSX presets–only available for React libraries.
• Storybook Integration: connect any Storybook to UXPin, including Vue, React, Angular, Web Components, and more.
• npm integration: import components from open-source libraries through the Merge Component Manager.

Bridging the gap

Traditional design software provides prototypes, assets, documentation, and redlining, but this doesn’t fully bridge the gap. The prototypes are mid-fidelity at best and require translation and assumptions, which can lead to product drift and increased costs.

Level 4 bridges the design development gap with coded components from a repository, serving as a single source of truth. Developers leverage these components in code, while UXPin Merge translates the code and integrates the components with its toolset.

Using Merge results in high-fidelity prototypes that are fully functional and testable without assumptions. It ensures pixel-perfect parity between design and development, faster design processes, code reuse, and ultimately higher profits. It also leads to better collaboration and understanding between designers and developers.

Understanding Merge’s Capabilities

Component properties

Components imported into UXPin through Merge are driven by properties defined in the design system’s repository. These properties are the same as those used by developers. For example, a button component can have label, color, and variant properties, which designers can adjust in UXPin’s Properties Panel.

Real code components

The components in UXPin Merge are real code components. Component behavior, such as hover effects, is inherent in the code and doesn’t need to be configured by the designer. Using code in the design process ensures high fidelity between the design and the final product.

Atomic Design methodology

In the Atomic Design methodology, designers build components from the smallest building blocks, called atoms, up to more complex patterns (molecules, organisms, templates, and pages). In UXPin Merge, designers can compose components using other components, each with its own configurable properties.

Component composition

UXPin doesn’t restrict designers to the initial composition of components. They can modify components by adding or removing elements. For example, removing the header from a card component, adding a video player, and adjusting the typography are all possible in UXPin.

Spec Mode with JSX code

Spec Mode in UXPin provides clean JSX code as configured by the designer with properties. This JSX ensures that developers can access the exact code needed to recreate the component as designed.

Fully testable prototypes

Because the components are coded and have inherent behavior, the prototypes built with UXPin Merge are fully functional and testable without assumptions. This enhanced testing is particularly useful for components with states, such as dropdowns and tabs.

Collaboration and documentation

UXPin Merge facilitates collaboration between designers, stakeholders, and developers by providing access to documentation, properties, behavior, and rule sets for components.

Accessibility and configuration

Designers can configure components for accessibility by exporting ARIA tags as properties, allowing for screen reader testing. This configuration can also help achieve more complexity, such as enabling or disabling checkboxes or filtering a data table.

Data components

Dashboards and tables are near impossible to prototype in traditional design tools due to their complex interactivity. With Merge, designers can import a data grid component for sorting, selecting, and filtering. They can populate the data by copy-pasting from a spreadsheet or through an API connection within the component.

Inter-component communication

Components can communicate with each other in UXPin. For example, a button can trigger a dialog component, much like it would in the final product. The dialog has an ‘open’ property that controls its visibility, which designers can activate using a button (or any other element).

Version Control

UXPin Merge includes Version Control, essential for scaling and future-proofing a design system. Each prototype links to a version of the design system, and designers can switch between different versions or branches. This versioning is helpful in testing new versions, working with different themes, or managing multiple products that use the same design system.

Responsive design

If a component has responsive properties, its media queries will reflect in UXPin. This responsiveness allows designers to create a single prototype that is adaptive to different breakpoints.

Adaptability and scalability

UXPin Merge is adaptable and scalable, allowing for various use cases such as testing prototypes with new versions of the design system, managing different themes for different products or clients, and rolling out new design systems with new components.

Unlock the full potential of your design system by bridging the gap between design and development with UXPin Merge. Experience the power of component-driven prototyping and ensure consistency in your projects. Visit our Merge page.

The post How to Scale Design Systems with UXPin – A Practical Guide appeared first on Studio by UXPin.

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

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

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

Key takeaways:

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

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

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

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

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

React rapid prototyping

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

The Challenges of Prototyping in Code

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

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

How TeamPassword Overcame React Rapid Prototyping Challenges

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

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

Prototyping and testing using UXPin Merge.

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

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

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

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

Using UXPin Merge for React Rapid Prototyping

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

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

Choose a design system

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

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

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

Customize your design system

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

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

Choose an Integration

Bring components to UXPin with one of three integrations:

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

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

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

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

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

Configuring the Properties Panel

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

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

Get to work

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

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

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

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

Create-react-app

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

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

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

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

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

The following article is written by UXPin’s developer, Robert Kirkman, who shares how UXPin Merge makes the design handoff easier from both (a developer and designer) perspectives.

Once the prototypes are ready for production, the designer hands them off to developers. Such a process can be troublesome – the right tool stack being a part of that. There are quite a few design tools that help with design handoff, but what’s the difference between them when handing off prototypes to the developer?

One of the major differences between popular design tools is their approach to the final product of the designer’s work – the prototype of the product. Some of them render prototypes to vector graphics, while others to code. Let’s explore it.

With UXPin Merge, designers can build fully-functioning interactive prototypes with the exact components used in the final product. It syncs fully coded components from a GitHub repository or Storybook to UXPin’s editor. See how UXPin Merge can make you release coherent products. Request access to Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

The Handoff Limitations of Vector-Based Design Tools

Here is a prototype that is going to be handed off from the designers to the developers. Let’s say that it is created in a vector-based design tool. It means that all the components are vector based while the interactions only mimic code.

Recreating UI components

Let’s focus on components first. Some of them might be new, which means that the developer has to build them from scratch. Others are existing components that this engineer may need to modify.

Developing interactions

When getting a prototype built in a vector-based design tool, the interactions might not even exist in the code, so the developer has to create them, or else, call for more designer-developer meetings to understand exactly what is needed and manage expectations.

Preparing design system

This is a system where designers and developers are creating the source of truth for a design system. They are the ones creating the documentation of the reusable master components, and how interactions should work.

Is such design handoff efficient?

This approach works but it might be a bit frustrating, time consuming and tedious. Not everyone will notice that it’s broken or feel an urge to fix it. They don’t have to do that. But, is this the best way to run things?

If you look at it from the perspective of what more can we do to make this better for both designers and developers, I think there is a lot we can discuss. This approach has issues based on where the source of truth is coming from, which is the vector-based documentation and what is handed off to the developers.

What Does Design Handoff Look Like with UXPin Merge?

We’ve taken this perspective of what we can do better during the developer handoff when we were creating UXPin Merge.

No longer are you designing with vector-based components and mimicked code interactions. You’re actually designing with live React components. You can copy and paste the components’ code into your application.

Imagine if the documentation was created by the designer and developer in tandem but the single source of truth for component design and interaction was the actual component code itself. Meaning when the designer is creating prototypes, they are using components that have already been coded, in a live production-like environment with real components.

The components have all the design tokens, interactions and editable properties already defined. Finally, when the prototype is made you can handoff the component code iself.

How Does Handoff with Merge Help Developers?

Imagine how much time is saved when you don’t have to imagine or have meetings with the designer to understand what components they’ve used or what interactions they’ve designed.

The developer handoff is simple, they give you a prototype, you copy and paste the JSX code, which includes the components, component properties and their coded interactions that already exist in the source code.

This is possible because the source of truth is the code itself, the source code.

The only component properties the designer can edit and how they can edit are specified in the source code by the developer, so no unexpected designs are handed your way.

If the designer wants a new interaction added, new properties or changes in the styling of something, they can explain to the developer, then change the source code. There’s no more guessing or wasted time in unnecessary meetings.

How Does It Help Designers?

This sounds great for developers but designers often feel that when they are given components with limited properties to design with, it’s limiting their creativity, right? I don’t believe so, so let me explain.

Imagine playing and designing cool spaceships or castles with your lego back in the day with your friends, or maybe now and alone. No judgement here – lego is cool at any age. You’re all given the same pre-built building blocks, how they connect to each other and how you can use them are already defined and yet each person can create an amazing spaceship, completely different from all the others.

Instead of focusing your creativity on making building blocks and then figuring out how to use them, you’re purely focusing on the latter. Imagine having to create the lego blocks first and figure out how they are meant to work, then build a spaceship.

That’s insane and yet that’s the current accepted state of designing prototypes.

Yeah, I understand designers have to create the components initially with both vector components but developers have a harder time with them. Whereas if you’re using code-based components, both parties only have to create it once, so we’re all happy.

It leaves designers more time to spend on other super cool tasks instead of continuously making adjustment meetings with developers.

Prototype Developer Handoff Using Merge

For the prototype shown earlier, let’s start with copying the JSX code from the MergeHeader component, created by the designers into our React application, exactly how the developer handoff will work.

As the source of truth is from the source code itself then you can just copy and paste, with a few adjustments such as adding data to objects and the component imports, then you’re ready to view your app in the browser.

Now, all that’s left to do is the same with the rest of the prototype… and VOILÀ! You have a fully working production React app, within minutes, exactly the same as the designer made.

So, in the end, which design process do you think is better?

Improve Design Handoff With UXPin Merge

UXPin Merge can help you improve a lot more than just the handoff process. Visit our Merge page to discover more benefits of designing in code and request access to start the integration process. Go to our documentation to read more about integrating Merge with your organization’s design system components.

The post Design Handoff: What it Looks Like with UXPin Merge appeared first on Studio by UXPin.