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.

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

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

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

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

Design UI with code-backed components.

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

Try UXPin Merge

Why Tailwind CSS works great with new Laravel projects

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

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

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

What are typical Laravel and Tailwind CSS use cases?

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

Single Page Applications (SPAs)

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

Dashboards and Admin Panels

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

E-commerce Platforms

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

Blogs and Content Management Systems

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

Educational Websites

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

SaaS Products

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

Marketing Websites

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

Social Networks

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

How to integrate Tailwind CSS with Laravel

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

Step 1: Create UI design in UXPin

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

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

Here’s how:

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

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

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

Step 2: Set up a Laravel project

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

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

Step 3: Install Tailwind CSS

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

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

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

We covered this step in this webinar:

Step 4: Serve your application

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

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

Use Tailwind CSS with Laravel

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

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

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

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.

Designers are always looking for ways to improve their prototypes–for stakeholder feedback, accurate user testing, and design handoffs. Figma is a fantastic design tool but lacks prototyping features, meaning designers must use external tools.

UXPin has a plugin for Figma called UXPin – Copy. Paste. Prototype. Designers can literally copy Figma designs to UXPin and add interactivity to static Figma mockups. Let’s see how it works.

Key takeaways:

• UXPin’s plugin for Figma helps you turn static Figma designs into interactive prototypes. that behave like an end-product.
• The plugin is free to use, but it needs to be installed in Figma.
• After clicking Command+V in UXPin (or Control+V), you can paste your Figma design to UXPin.
• Once you have a design copied to UXPin, you can add interactions (variables, expressions, and states).

Turn static Figma mockups into designs that have interactivity baked into them. Improve collaboration between designers and developers and simplify design handoff. Sign up for a free trial.

Build advanced prototypes

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

Try UXPin

What is Figma?

Figma is a web-based design tool used primarily for interface design. It allows multiple designers to work on the same project simultaneously, enabling real-time collaboration and feedback.

Figma is popular among designers and design teams for its ease of use, powerful features, and ability to streamline the design process.

Figma allows designers to ass interactivity to the UI design by linking different screens together. This isn’t the best solution for usability testing or design handoff. You want to be precise in those scenarios to avoid rework and miscommunication. This is where UXPin fills in for Figma’s blind spots.

What is the difference between Figma and UXPin?

Both Figma and UXPin are design tools that boost collaboration. Figma focuses on designer end of the spectrum, while UXPin tries to fill the gap between design and development.

Figma allows designers to design beautiful static mockups but lacks advanced prototyping features. Designers must use additional tools or rely on engineers to build interactive prototypes–adding time and resources to design projects.

UXPin is powered by code, significantly enhancing its capability for creating high-fidelity, fully functioning prototypes that accurately replicate the end product’s experience. Design teams can create prototypes and hand them off to developers for production without any extra tools that need to translate design to code.

What’s great about UXPin is that it has a technology for handling MUI, Ant design, Bootstrap, and other open-source UI components that look and behave exactly like they do in the end product. Using it, you can reach ultimate consistency between design and code. Read more about UXPin Merge.

Integrate Figma with UXPin to make UI interactive

Even though UXPin is an end-to-end design tool, we recognize that many designers love designing their wireframes and mockups in Figma. So, we created the UXPin – Copy. Paste. Prototype. plugin to allow design teams to export their Figma designs into UXPin for prototyping–the best of both worlds.

This step-by-step guide will demonstrate how to install the UXPin plugin for Figma, copy designs into UXPin, and what they can expect from UXPin’s advanced, interactive prototyping capabilities.

Note: UXPin – Copy. Paste. Prototype. works best with the Chrome browser or when copying from the Figma to UXPin desktop applications.

We’re using the Moood Music App UI Kits, which you can download from the creator, Fabrx’s website.

Step 1: Install the plugin

You’ll find the UXPin – Copy. Paste. Prototype. plugin in Figma’s Community. Click “Try it out” to install.

Step 2: Copy a Figma design

Open a Figma project and select the screen you want to copy. We recommend copying one screen at a time. Select the frame or drag your cursor around the components you want to copy.

Step 3: Activate the plugin

Right-click on the design, navigate to Plugins > Saved Plugins > UXPin – Copy. Paste. Prototype.

In Figma’s desktop app, the plugin will copy automatically. In Chrome, you must click “Copy to Clipboard” to trigger the copy process.

A message will appear at the bottom of the screen saying “Copied to clipboard” once complete.

Step 4: Paste into UXPin

Create a project in UXPin, and open it. Use the paste shortcut COMMAND+V or right-click Paste > Paste Here.

Drag the design to position it if necessary.

If you have more than one screen, add a new page and repeat steps 2 & 3.

Note: In Figma, you have multiple screens on a single artboard or view, whereas UXPin uses a single screen per page. You’ll notice this workflow is more intuitive when you create prototypes with interactions and page transitions.

Step 5: Add interactivity

Once you have imported your Figma designs, it’s time to create interactive prototypes in UXPin. We have several example apps and patterns demonstrating UXPin’s prototyping features. You can also follow our example YouTube video for this application.

Here are some examples of UXPin’s prototyping features.

A desktop Carousel example demonstrates three methods for creating animated carousels. One is automatic, while the other two rely on a click/tap trigger.

UXPin’s sign-up form example demonstrates how designers can create fully functioning forms that capture user data (using UXPin’s Variables) and use it elsewhere in the prototype–like a personalized confirmation screen.

The sign-up form uses a combination of Interactions and Expressions for dynamic error messages that respond to user inputs.

This stepper example shows how you can combine an interactive button with an input field–a standard eCommerce UI pattern. Users can use the + or – buttons to step up or down or use the input field to enter a custom amount.

The bottom line is that design teams can recreate in UXPin most of what engineers can do with HTML, CSS, and Javascript. Designers can connect to APIs using IFTTT (If This, Then That) to go beyond any image-based design tool’s capabilities.

Step 6: Share prototype with stakeholders

Stakeholder feedback is an essential part of the design process. The problem with image-based prototyping is that stakeholders battle to interpret designs, adversely impacting the design team’s ideas and buy-in.

UXPin prototypes look and feel like the final product, so there’s no confusion about what the designs should do. Stakeholders can interact with UXPin prototypes, including completing forms, making purchases, upgrading/downgrading plans, and more. 

Designers use Preview and Share to share prototypes in the browser or UXPin Mirror for mobile applications. They can also password-protect designs so that only those authorized can view them. 

UXPin Comments allow stakeholders to share feedback on prototypes. They can assign comments to team members who can action and mark them as resolved once complete. You can add these extra team members and stakeholders for free, allowing everyone to collaborate in UXPin without purchasing additional users for non-designers.

Step 7: Run usability tests

As with stakeholder feedback, designers can use Preview and Share to test in the browser or UXPin Mirror for native app testing.

With UXPin’s advanced prototypes, design teams receive meaningful, actionable feedback from usability participants, allowing them to identify more problems and opportunities.

UXPin uses a component-based approach to designs, meaning designers create fully interactive components rather than multiple frames as they would in image-based design tools. The result is fewer screens, making it easier and faster to test and iterate.

Step 8: Design handoff

Design handoffs are much smoother with less confusion in UXPin. Prototypes look and feel like the final product, giving engineers an immersive understanding of triggers, interactions, animations, and user flows.

Designers can include prototypes, design files, documentation, assets, and technical specs for engineers to examine. With final product-like functionality and fidelity, prototypes need less explanation and documentation.

Team members can use UXPin Comments to collaborate throughout the design handoff, keeping everything in one location, minimizing errors and “missed” files.

Create prototypes that are fully interactive

UXPin’s code-based features enable designers to go beyond what’s capable in image-based design tools like Figma, Adobe XD, InVision, and others.

Here are five UXPin features to take your prototyping to the next level.

States

Many design tools offer features to change component states, but these are limited to basic interactivity, like active, hover, disabled, etc. UXPin’s States enable designers to create complex components, including fully functioning accordions, multilevel dropdown navigation, and carousels.

Interactions

Interactions are the heart of any prototype or digital product. Without interactivity, the prototyping scope is severely limited. UXPin’s Interactions include multiple Triggers, Actions, and Animations to create immersive experiences that respond to user engagement and system changes.

Designers can use Conditional Interactions to design “if-then” and “if-else” conditions (similar to Javascript functions) to recreate dynamic “code-like” outcomes–as the user would experience using the final product.

Variables

UXPin comes with several form elements that respond to user engagement like they would in code. Designers can use UXPin’s Variables to capture user inputs and use that data elsewhere in the prototype.

In the sign-up form example above, the prototype captures data from the email input to tell that an email was sent to the address they entered and to check their inbox–accurately replicating a typical sign-up confirmation screen with dynamic user information.

Expressions

Expressions allow designers to increase prototype complexity with code-like functionality. Returning to our sign-up form, we used Expressions to ensure the email and password inputs met specific criteria and triggered error messages when they weren’t met.

Some of the data designers can use in Expressions include: 

• Numbers – matching numerical values
• Strings – text specified in double quotation marks, e.g., “Text”
• Content of elements – content of an element specified in single quotation marks, e.g., ‘Box’
• Function – any of the supported functions, e.g., length(string)
• Boolean values – true or false value

When designers combine these features, the possibilities are endless. They’re only constrained by code, thus enhancing prototype capability and developer collaboration.

Component import

Code import is a way to sync development components with UXPin. If you want to increase productivity, reach consistency, and collaborate better with engineers, here’s something for you. With this import, you can bring components from Git, Storybook, or npm, and speed up every part of product design process, from prototyping to design handoff.

Don’t let image-based design tools limit prototyping scope. Improve prototypes with UXPin for better stakeholder feedback and user testing. Design the user experiences your customers deserve with the world’s most advanced design tool. Sign up for a free trial.

The post Figma Plugin Tutorial – Copy and Paste Design from Figma to UXPin 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.

Many people underestimate the importance of a signup page and use a generic template to onboard new users. Signup pages are your organization’s first point of contact with a new customer, so designers should focus on the user experience just as carefully as they do with any other user interface.

We’re going to explore some of the internet’s best signup forms and why they matter. We’ll also show you how to build and test your signup forms using our code-based design tool.

Can your image-based design tool capture user inputs and validate that data? The problem with image-based design tools is they lack fidelity and functionality. With UXPin’s code-based prototypes, designers can capture user inputs, validate emails and passwords, create conditional formatting, and more! Sign up for a 14-day free trial and discover the endless possibilities with code-based design from UXPin.

Build advanced prototypes

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

Try UXPin

What is a Sign Up Page?

Sign up page is a page designed to collect information from users who wish to create an account or register for a service, website, or application. It is a crucial component of online platforms that require user authentication and personalized access.

Why Your Signup Page Matters?

Signup pages are a way for organizations to attract new leads or sales. It’s usually the first time a potential customer will interact with your brand, so it’s critical that you impress and delight new signups.

Signup forms are probably the least complicated UI element to design but the most challenging to entice people to take action. Designers must understand their target audience and UX psychology to overcome hesitancy and increase conversions.

There are no rules to creating the perfect landing page. A/B testing is crucial for registration form optimization.

Top 10 Signup Page Examples

Here are 10 excellent signup form examples to inspire your next landing page.

1. GetResponse

GetResponse is an industry-leading email marketing and lead generation software with landing pages, forms, and other tools. You would expect such a company to have an excellent registration page, and they do! 

GetResponse ticks all the boxes when it comes to UX design principles; it is consistent, accessible, easy to digest, uses simple language, and provides feedback, to name a few. The page only has three form fields:

• Full Name
• Email
• Password

Think of each form field as another reason why someone won’t sign up for your product or service. By reducing form fields, you increase conversion rates.

GetResponse also highlights its benefits on the signup page, reminding customers why they need this product and the problems it’ll solve. 

One feature you won’t often find on a signup page is an accessibility button to change the form’s background color marketing it more accessible for visually impaired users to read. GetResponse must know that their brand’s blue didn’t contrast well for people with visual impairments, so they added an accessibility button to fix it.

2. Flux

Flux uses a full-screen signup form to onboard new customers. This strategy allows the user to focus on completing a single task without distractions. Even though Flux only requires users to complete three form fields, they break these up into steps, with a separate page for name, email, and password.

Flux also includes a list of requirements below the password field, so users know what length and characters they must use. As they complete each condition, it turns from red to green with a checkmark, so the user knows they have fulfilled it correctly.

3. Leadinfo

The quickest way to get signups is to make it easy, which is precisely what Leadinfo does on its home page signup form. All Leadinfo require to onboard a new customer is an email address. While there is a risk that they might not complete the signup process right away, you have an email address to nurture the lead into a customer.

Leadinfo’s UI design uses typography and color to highlight a problem and how the product can solve it. The clever use of color draws a visitor’s attention to the effortless signup form or the live chat to engage with a sales representative–giving users options and making them feel in control.

4. Cleo

Cleo is an app-based product, so users can only signup via the iOS or Android apps. If a potential customer finds Cleo’s website using a desktop, they need to funnel that customer to download the app.

Cleo makes this easy with a dropdown animation revealing a QR code redirecting users to their preferred app store. They also provide links to Apple’s App Store or Google Play.

While Cleo’s example isn’t a signup page, it’s a great example of creating an immersive, on-brand experience for users to find your product and sign up.

5. Designmodo

Managing users’ expectations and providing context are crucial for good UX design. Designmodo does this well with a three-step signup sequence that displays a progress bar above the form.

Users know what each step requires and approximately how long it will take them to complete the process. Another intelligent strategy about Designmodo’s signup page is to first ask for the user’s email. If the user abandons the signup sequence, they can try to win them back through an email sequence.

6. Salesforce

Salesforce is the world’s leading CRM platform with an extensive suite of tools and products. The company requires a lot of information during signup, including company name, email, phone number, to name a few. Still, they offer a 30-day trial in return–with no credit card or obligation.

Salesforce uses compelling copy to highlight the product’s primary benefits and remind customers that they’re getting 30 days free. The CTA button even says START MY FREE TRIAL, so users know there is a reward for completing Salesforce’s lengthy form.

If you’re asking customers for a lot of information during signup, use value to incentivize the process. Most free trials last 7 to 14 days, so by offering 30 days, Salesforce creates a lot of value. They’re also an established brand with a lot of prestige, so customers are more willing to spend time completing Salesforce’s signup form.

7. Typeform

It’s impossible to have an article about signup pages without mentioning the master of the form, Typeform. Typeform’s immersive and intuitive forms make completing signups, or any form, an enjoyable experience.

Typeform only requires two fields to complete its signup sequence; email and password. The company also offers two social media options, Google and Microsoft. As Typeform is a business product, offering corporate-type social signup options makes more sense than Facebook or Twitter.

Typeform also offers users the opportunity to customize their data privacy with three options to opt in or out of specific communications below the newsletter signup. As this would create a busy signup interface, Typeform uses a dropdown menu to hide these until the user clicks “See options.”

8. Transmetrics

Providing social proof and testimonials on your sign up page is a fantastic way to tell people how the product or service benefits customers. Transmetrics uses a quote from a prominent European customer explaining the company’s excellent customer service and understanding of the logistics industry.

Transmetrics also uses simple language and bullet points to highlight the product’s key benefits. Lastly, the call to action button says “REQUEST A DEMO,” telling the customer exactly why they are filling out this form.

9. Glide

Glide’s email signup form is minimal and effortless. Users can signup using their Google account or email address. The product integrates with Google Sheets, so it makes sense to only offer one social network signup option.

The simple UI design uses a bright blue signup button, immediately drawing users’ attention to the center of the screen. Glide’s signup form can onboard a new customer smoothly and efficiently with two clicks.

10. PayPal

As a financial service, PayPal must collect a lot of personal information during signup. If PayPal had to create a single signup form for its onboarding, it might overwhelm customers, resulting in high dropoffs.

To overcome this problem, PayPal uses a step-by-step process of capturing personal data. The company asks for users’ mobile and email first to follow up if the person drops off.

If you have to collect a lot of information, consider doing it in a step-by-step process and use a progress bar to show customers how many steps they must complete. You should also consider offering the option to save their progress to return later.

Prototyping Signup Pages With UXPin

Prototyping forms in traditional vector-based design tools is impossible. These tools don’t offer the functionality to create working inputs users can interact with.

UXPin is a code-based design tool, which means designers can build prototypes that capture and process data like a website or digital product. Designers can create actual signup forms with inputs that check for conditions and provide error messages.

For example, UXPin lets you create email and password validation. If the user forgets the @ or .com in an email input, designers can program an error message for the user to fix the problem. You can also include password conditions, like character count, letters, numbers, and symbols.

Once a user completes signup, you can welcome them with their name on the next page and include their personal information on a profile page. No image-based design tool offers the fidelity or functionality to prototype signup forms like UXPin!

Ready to give signup form prototyping a try? Here’s how in three easy steps:

1. Sign up for a free UXPin trial.
2. Download our working example of a signup form prototype.
3. Drag and drop the .uxp file into your free UXPin account, and you’re ready to go.

Here is a preview of the signup form prototype you can edit and customize in UXPin.

The post Top 10 Signup Page Examples That Will Make You Want to Redesign Your Own appeared first on Studio by UXPin.

Dashboard is an essential part of most apps. It summarizes key events within the application or shows stats that can be used for further analysis. That’s why it’s so common in business tools for teamwork, sales, marketing, and other apps. 

At first, dashboard design seems complicated – it integrates loads of information and datasets. When you actually get to create one, it can be quite easy to put together. The key thing is to have out-of-the-box components that will help you guide design decisions.

In this article, we will walk you through designing a responsive dashboard with a coded component library – Material UI, one of the best, thoroughly documented libraries of ready-made elements.

Create responsive layouts blazing fast. Drag and drop fully interactive elements to assemble professionally-looking UI in minutes– as easy as pie. 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

Why use MUI components to build a dashboard

MUI created its design library following Google’s Material Design standards. Back in the day, it was a revolutionary component library, helping React developers build responsive layouts faster. It is still relevant to this day, as the MUI team continues to evolve its library, releasing new versions every now and then. To read more about it, check out our article about MUI.

MUI is full of data display components

MUI offers many user interface elements that are perfect for dashboards. They’re customizable to a great extent. Let’s highlight some of them:

• Cards – You can create cards representing a specific data point or a group of related data that you want to highlight.
• Data table – MUI published to a clean-looking React component that has built-in sorting and filtering features.
• Date and time pickers – If you need to be super specific and sort by date or time, Material-UI components have you covered.
• Input components – You’ll find every type of button and input field you’d like to have in a data table, be it a checkbox, rating, select, and more.

It’s a well-documented library

Material UI is one of the most documented UI component libraries. It has comprehensive official documentation, stemming from its commitment to keeping the documentation aligned with the evolving nature of the library.

Aside from the effort of MUI’s team to keep its library up to date, the library enjoys strong community support. Developers often share tutorials on building apps with Material UI and they’re ready to help out others. 

It is accessible and responsive

There are two major characteristics of MUI: accessibility and responsiveness which are key when it comes to modern interface design.
MUI places a strong emphasis on accessibility. Its documentation contains tips on accessibility best practices, including using ARIA attributes. When it comes to responsive design, MUI is one of the best component libraries to use. You can easily create responsive layouts that will work across devices and screen sizes.

How to Build a Simple Dashboard with MUI components

We’ll show you how to use UXPin Merge to build a simple – yet fully functional and responsive – dashboard with MUI components. If you want to follow along, create a UXPin account or log into it if you already have one.

Here’s what we’re going to create. To see it up close, inspect its code, and see how interactive and responsive it is, open this UXPin preview.

Step 1: Create a new prototype

When in UXPin’s dashboard, start by creating a hover on “Design with coded components” and pick MUI library.

An editor will pop up. In the center of it, you have a canvas. It’s your work field. Adjust the canvas size to match the device you want to design your layout for. You can do that in the right-side menu. In this menu, you can also change the background colors and add grids to help you align elements.

On the left side of the canvas, you have a menu where you can find all the pages and layers or ready-made components. To find the MUI library, go to Design System Libraries in the bottom left corner and pick MUI V5 (you’ll find it under Merge libraries.)

Now, you can click on any component you like and drag it onto the canvas or just click on it to have it appear in the center. See how easy it is.

Step 2: Access ThemeCustomizer

Open the MUI library and search for ThemeCustomizer – you can use the search bar. It will come in handy when you want to adjust the look of your MUI components. Place ThemeCustomizer above and outside the canvas, so you’re able to navigate to it easily.

Step 3: Place MUI components on the canvas

Pick the components that you want to design with. Start with navigation, such as an app bar and breadcrumbs UI elements. The app bar will help users access other pages and move around the app. When it comes to breadcrumbs, they allow users to orient themselves within the app. Watch this part of the tutorial: 

You can easily adjust the size of the components by clicking on their corners and expanding or contracting them. 

We’re also pulling out:

• Cards – We will duplicate this component to highlight different insights.
• Paper – It will be our textbox.
• Typography – We drag it out of the library and put it into the Paper components. It helps us manipulate fonts.
• Table – It will be our data table that we can sort through.

Now that we have the components ready. We can switch their theme with ThemeCustomizer which we placed above the canvas.

Step 4: Customize components

Now the fun part! Move the components around, fill them with your own content and data, and edit their padding and size. Arrange them in any way you want. This is also a step in which you can create complex components from the basic ones.

Just look at how we took our textbox components and copied a few children inside. Then, we filled them with real content, adjusted text size, and added padding. Same goes with the table. We added more rows by simply copying the Table cells and pasting them in the Pages and Layers panel. 

Step 5: Set up grids and layout

Make sure that our layout can be responsive. Push your components out of the canvas for a moment and place the layout elements in. Here’s how you can do it.

Start with a container for a menu. Place the container on top of the canvas, resize it to fit the width, and place the app bar back in. Make sure that your container is set to “responsive.”

After that, drag a box for our breadcrumbs and put grids for our data table, cards, and text boxes.

It’s super easy to do that because you are just moving the components in the menu, copying the grids, and placing different components inside of them.

Step 6: Preview and share your design

You are ready to see your dashboard and share it with others. Go to “Share,” copy a URL to preview the prototype, and paste it in the browser or click the preview button ▶️. 

Do you have it? Great! Now, you can change the size of the window to see if your prototype adjusts its size as a truly responsive design would. Share your link with others, so they can preview it too.

Step 7: Develop the dashboard

The design is done, so the last step is to copy the code into your React application.

We have provided a starter React App boilerplate, containing all the dependencies and configuration needed – or begin editing right-away in CodeSandbox or StackBlitz (click to go to the preferred one.)

Installing and running the React App Boilerplate:

1. Download or clone the Starter React App boilerplate repo
2. Install the project by running: npm install
3. Run the project by running: npm start

Importing the theme:

1. From UXPin’s spec mode, copy the JSX of the ThemeCustomizer component.
2. Paste JSX into the theme.js file of the project

Here is a video example of using the starter React App repository.

Importing the components:

1. From UXPin’s spec mode, copy the JSX of the desired component composition. 
2. Paste JSX into to the App.js file
3. Make sure you have added import statements for each component that you are importing from MUI. Example: import Button from ‘@mui/material/Button’

For the more in-depth instructions, see the last part of CoderOne’s video tutorial.

Build layouts 10x faster with UXPin Merge

That’s it! You’ve now set up a new dashboard for your app that is fully responsive and consistent with the MUI component library. Check if your dashboard looks exactly, as the dashboard in our Preview.

With UXPin Merge, you can build way more than just dashboards. Create full user interface designs of apps, websites, and other digital products that can be easily translated into code – without advanced design skills. Get started with UXPin Merge.

The post How to Design with Coded Components – Simple & Responsive Dashboard Tutorial appeared first on Studio by UXPin.

Creating wireframes is a critical step in the UX design process, serving as the blueprint for the final product. This guide offers an in-depth look at how to build effective wireframes using UXPin, an end-to-end design tool that stands out for its code-based technology and built-in features. 

The article provides a detailed, step-by-step approach, from assembling basic UI elements to incorporating user feedback. Learn how UXPin’s unique features, like interactive form elements and code-to-design capabilities, can streamline your design process, improve collaboration, and contribute to a more intuitive user experience.

Key takeaways:

• UXPin offers code-based wireframing capabilities that enable designers to create fully interactive and functional wireframes.
• UXPin stands apart from other design tools by offering built-in features like design libraries and advanced prototyping capabilities.
• UXPin facilitates a seamless transition from wireframing to high-fidelity prototyping, allowing for complex interactions and even API integrations, making it a comprehensive full-stack design solution.

Streamline your design process and build wireframes faster with UXPin. Sign up for a free trial to explore UXPin’s full-stack design solution.

Build advanced prototypes

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

Try UXPin

What is a UX Wireframe?

A UX wireframe is a low-fidelity visual blueprint representing a user interface’s underlying framework. Typically devoid of color, graphics, and intricate details, it primarily focuses on space allocation, content prioritization, and intended functionalities. 

Designers craft wireframes in the early stages of the design process to communicate the structure of a webpage, app, or system. Their primary purpose is to establish the basic layout and interaction patterns before diving into detailed mockups and hi-fi prototypes.

What are the Benefits of Wireframing?

Wireframing offers a range of benefits that streamline the design process and foster effective communication among team members. Here’s a rundown of its advantages:

• Clarity: Wireframes remove ambiguity by visually representing the layout, providing a clear roadmap for everyone involved.
• Efficiency: By resolving issues early, wireframes save time and resources in the later stages of development.
• Alignment: Wireframes help align stakeholders and team members on the project’s goals and functionalities.
• Usability: They provide an opportunity to assess the user experience, ensuring intuitive navigation and layout.
• Collaboration: Wireframes serve as a tool for discussion, allowing designers, developers, and stakeholders to offer early design feedback.
• Prioritization: They help identify the most crucial elements of a design, allowing for effective content hierarchy.
• Flexibility: Wireframes make it easier to iterate and make changes, serving as a lo-fi model for experimentation.
• Architecture: Wireframes provide the foundation for a digital product’s information architecture.

Is UXPin the Right Tool for Wireframing?

UXPin is an end-to-end design tool with excellent wireframing capabilities. Designers have several features to create interactive wireframes effortlessly:

• Box: a flexible UI element that allows you to add text
• Shapes: rectangle, oval, circle, rounded, line, arrow, polygon, and star
• Text: basic text block
• Forms: a set of foundational unstyled form elements, including a button, textarea, select/multi-select, checkbox, and radio button
• Hotspot: make any element or a specific location on a UI interactive
• Icons: choose from several icon sets, including Material Design, Fonts Awesome, Retina Icons, and more.

Unlike other design tools, UXPin’s UI elements are interactive by default. For example, all UXPin’s Form elements are fully functional. You can drag a checkbox or radio onto the canvas, and it already has clickable on/off interactivity.

These interactive elements allow design teams to gather more data and feedback during the wireframing process before moving to the design process’s more costly, high-fidelity phase.

What is the Difference Between UXPin and Other Wireframing Tools?

UXPin’s most significant differentiating factor is that the platform uses code-based technology. Rather than generating vector graphics like Sketch or Figma, UXPin renders HTML, CSS, and Javascript behind the scenes. 

This code-based approach gives design teams enhanced functionality to build fully interactive wireframes and prototypes. For example, in image-based tools, an input field is a graphical representation, whereas, in UXPin, it’s a functional input capable of capturing, storing, and sharing user data.

Built-in features vs. plugins

Another differentiator is that UXPin offers more features as standard than other wireframing tools, eliminating the need for plugins and extensions. UXPin plans come with Design Systems, built-in design libraries, Content and Data, Fonts (Google and custom), Accessibility Features, and much more–many of which would need plugins with other design tools.

Code-to-design

UXPin’s Merge technology allows design teams to import code components into the design process for prototyping. Designers can create fully functioning interactive prototypes using the same UI library devs use for the final product.

If your engineering team uses a specific wireframe component library, you can import this into UXPin using Merge. There are also several built-in Merge libraries, including Material UI, MUI, Ant Design, Fluent UI, and UXPin Boilerplate, which you can use to build interactive prototypes–allowing you to go from wireframing to high-fidelity prototyping to test concepts and ideas fast.

How to Build a Wireframe in UXPin

Here are ten steps for building a wireframe in UXPin, including gathering feedback and collaborating with stakeholders.

You will need a UXPin account to follow this step-by-step tutorial. Sign up for a free 14-day trial if you don’t have one.

Step 1: Open UXPin and create a new project

• Open UXPin and click the blue + New project button.
• Enter a project name and click Create New Project.
• The next screen asks, “What do you want to start with today?” Click New prototype.

Step 2: Choose the wireframe’s canvas size

Choose your wireframe’s canvas size in the Properties Panel on the right. UXPin provides a wide selection of standard viewports, including TVs, desktops, tablets, mobile, and wearables, to name a few. Use Grids and Guides to help maintain horizontal and vertical consistency.

Step 3: Create pages for each screen

Unlike Figma or Sketch, which use artboards and frames, UXPin uses a separate page for each screen.

• Select Pages & Layers at the bottom of the left sidebar,
• Click the + icon at the top of the sidebar to create a new page. You can also use the OPTION+N keyboard shortcut.
• Double-click on the page name to change it–we’ve created two pages: Login and Welcome.

Pro tip: Use the built-in User Flows library to design your user journeys and information architecture to determine the number of screens and navigational layouts for your project.

Step 4: Create wireframe UI elements

You can assemble wireframe patterns and layouts using UXPin’s Shapes, Forms, Boxes, etc. Auto-Layout lets you manage group elements effectively, including size, gap, alignment, distribution, and more. Use UXPin’s Components feature to create reusable wireframe elements for faster iterating and maximum consistency.

Step 5: Define interactions

We will add a basic navigation interaction from the Login to the Welcome screen for this demonstration.

• Click on an element to select it and click Interactions in the Properties Panel.
• Create a navigation interaction as follows:
  • Trigger: Click (Tap)
  • Action: Go to Page
  • Page: Select Welcome from the dropdown
  • Click Add to complete the interaction

Learn how to set up Interactions, including Triggers, Actions, Animations, and Conditions.

Step 6: Collaborate and gather feedback

How to go From Wireframe to Prototype in UXPin

Going from wireframing to prototyping is easy in UXPin. You can design your components from scratch to build mockups or use a design system to generate high-fidelity interactive prototypes quickly.

UXPin provides four key features to enhance your prototyping capability:

• States: allow you to create multiple states for a single UI element and design complex interactive components like menus, drawers, and more.
• Variables: capture data from user inputs and create personalized, dynamic user experiences–like a custom welcome message after signing up.
• Expressions: Javascript-like functions to create complex components and advanced functionality–no code required!
• Conditional Interactions: create if-then and if-else conditions based on user interactions to create dynamic prototypes with multiple outcomes to replicate the final product experience accurately.

Increase prototyping complexity with APIs

UXPin’s IFTTT integration allows you to connect external products and services through an API connection. For example, adding an appointment to a user’s calendar or sending an email, like a welcome message.

With UXPin’s Design Systems, advanced prototyping features, and API capabilities, you can create complex product replicas without technical expertise or input from engineers. These sophisticated prototypes enable you to get meaningful feedback from users and stakeholders to improve product user experiences.

Build wireframes and prototypes faster using the world’s most advanced product design tool. Sign up for a free trial to create your first interactive wireframe with UXPin.

The post UXPin Wireframe 101 – A Short Guide for Product Teams appeared first on Studio by UXPin.

UXPin is your all-in-one prototyping tool that helps designers collaborate seamlessly with devs, build production-ready prototypes, and streamline design systems’ scale and maintenance. Let’s see how you can use the tool to build a prototype. Let’s get you started.

Key takeaways:

• UXPin offers advanced interactive prototyping features like States, Interactions, Variables, and Expressions, allowing designers to create prototypes that are almost indistinguishable from the final product.
• UXPin’s design technology, Merge, merges design and development by bringing code components into the design process, increasing prototyping quality and scope.
• UXPin allows you to test advanced prototyping features and Merge technology while still on trial.

Follow this tutorial step by step. Get a trial of UXPin and tests its every feature, from prototyping to design handoff. Sign up for free.

Build advanced prototypes

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

Try UXPin

Downloading UXPin for Desktop

Firstly, we recommend downloading UXPin’s desktop app. UXPin works in the browser, or you can download the desktop application for Mac or Windows.

While the experience is indistinguishable between the web and desktop environments, the desktop application allows you to work offline. It also mitigates any internet issues–your browser requires a stable internet connection, whereas the desktop app does not.

Navigating UXPin’s Dashboard

When you first open UXPin, you’ll see an empty dashboard with four tabs at the top of the screen:

Projects: This screen displays all your UXPin projects and files.

Design Systems: Displays any design systems you have created or people have shared with you.

Merge Component Manager: Shows your open-source npm imports.

Manage your team: View and manage team members you share projects with.

For this tutorial, we’ll focus on Projects and touch on Design Systems.

Learn about Merge Component Manager and the npm integration here.

Getting Started in UXPin

From your Project’s dashboard, click the + New project in the top left to create a project. Name your project and click Create New Project.

What do you want to start with today?

The next screen will ask you, “What do you want to start with today?” with three options:

• New prototype: opens UXPin’s design editor to start working from scratch.
• Import Sketch, images, or documents: opens a window on your computer to upload Sketch files, JPGs, PDFs, PNGs, or UXPin’s file format, UXP.
• Design with Merge components: opens UXPin’s design canvas with the selected Merge library, or you can +Add a new library–learn more about this later in the article when we cover UXPin’s Merge technology :)

Click New prototype to open the design editor.

Exploring UXPin’s Design Editor

We’ll give a quick overview of the design editor for this tutorial. Our documentation provides a deeper dive into the design editor and its features.

There are three primary workspaces in UXPin’s design editor:

• Pages & Layers and Design System Libraries on the left
• Design canvas center
• Properties Panel on the right

Pages & Layers

Once you add elements to the canvas, they’ll appear in the Layers sidebar, allowing you to select, group, and rearrange them here. You can view Pages at the top of this sidebar or click the + icon to add more.

The Pages workflow is different from other design tools. In Sketch and Figma, you have all your screens for user flows on a single canvas; in UXPin, you have a separate Page per screen. You can click the Overview icon (OPTION+O) to view all your screens in one interface.

Design System Libraries

Design System Libraries displays the components and assets for each design system. You can drag these onto the canvas to start prototyping or switch between libraries at the bottom of the sidebar.

Design canvas

The design canvas displays your screen’s width and height set in the properties panel. This is where you build your prototypes.

Properties Panel

The Properties Panel is where you control properties and interactions for components on the canvas. You can also set the grids, change the background color, and other global canvas settings.

UXPin’s Interactive Prototyping Features

Interactive prototyping sets UXPin apart from its competitors, allowing you to accurately replicate a final product experience. UXPin has four unique features for prototyping that you won’t find in other design tools:

• States
• Interactions
• Variables
• Expressions

States

UXPin’s States allow you to create component states comparable to code. For example, you can program a button to have a default, active, disabled, and hover state, each one triggered by a separate user or system action.

You can also use States to create complex UI components, like Carousels, Accordion Menus, and Multilevel Dropdown Navigation.

Interactions

UXPin’s Interactions allow you to define what happens when users engage with your prototype. Triggers, including desktop and mobile, enable you to create realistic, intuitive prototypes.

Actions determine what happens after the trigger. UXPin provides 20+ actions, including API requests, changing states, navigation, component property adjustments, playing video/audio content, and more. 

Conditional Interactions

Conditional Interactions let you set if-then and if-else conditions, similar to Javascript. These conditions set the rules to trigger different scenarios based on user and system actions. 

For example, you can set up multiple form conditions to trigger error messages for incomplete required fields or incorrect data, like an invalid email address. If all this data is correct, only then will the prototype allow the user to submit the form successfully.

Variables

Unlike image-based tools, UXPin’s forms are fully functional out of the box. You can use Variables to capture data from these forms and use them elsewhere in the prototype. For example, capturing a user’s information during a checkout process and displaying it on a confirmation screen for them to verify.

Expressions

UXPin’s Expressions are the closest you’ll get to Javascript without writing any code. With Expressions, you can add another layer of complexity, including validating forms, checking password criteria, or building computational components for shopping carts. 

When combined, these four advanced prototyping features allow you to create realistic, dynamic prototyping experiences indistinguishable from the final product.

Check out UXPin’s example apps and patterns to see what’s possible using States, Interactions, Variables, and Expressions. You can download these and import them to a UXPin project to look under the hood and see how these features work.

Component-Driven Prototyping With Merge Technology

Now we move on to UXPin’s Merge technology. Aptly named because it merges design and development by bringing code components into the design process.

If you’re using UXPin’s free trial, you can access three built-in Merge design systems in your Design System Libraries:

• MUI
• Ant Design
• Fluent UI

While these look like regular design elements from a UI kit, they’re actually React components pulled from a repository. We’ll use two seemingly identical buttons to illustrate the difference between Merge and a UI kit.

Both are Material Design buttons. The purple one is from Google’s Material Design UI kit, and the bottom one is from the MUI Design System–which uses Material Design as a foundation.

When we click the purple Material Design button, it displays UXPin’s standard Properties Panel, where you can create the component’s styling and interactions.

When we click the blue MUI button, the Properties Panel changes to the Merge variation. Instead of creating properties, you select them based on the React component’s available props–or Args if you’re working with the Storybook Integration.

For example, opening the color dropdown displays the MUI button’s color properties which match MUI’s documentation.

These properties give product teams the necessary constraints to build prototypes with minimal drift or inconsistencies.

Who is Merge for?

Merge is ideal for anyone–from startups to enterprises–who builds digital products using a design system. You can use one of UXPin’s built-in UI libraries or import your product’s design system for prototyping and testing.

If you have a design system, it must have code components for Merge to import from a repository. Learn more about design system maturity here.

Why use Merge?

Using code components in the design process enables designers to build prototypes that accurately replicate the final product. These code-based prototypes give stakeholders and users a realistic user experience, resulting in meaningful feedback for designers to iterate and improve.

Prototyping with Merge is also much faster than using traditional design tools. In one experiment, a client was able to build a one-page prototype in under 10 minutes vs. over an hour using an image-based design tool–and the Merge prototype had significantly more functionality and interactivity.

Bridging the gap between design and development

With traditional product development workflows, there’s a definitive handoff process from design to engineering. Engineers must convert prototypes and mockups into code.

With Merge, design handoffs are more seamless because devs already have the exact same components pulled from the exact same repository. Merge produces production-ready JSX so engineers can simply copy/paste to replicate the prototypes.

Get Started with UXPin

We hope you’ve enjoyed this UXPin beginner tutorial. If you haven’t got an account, sign up for a free trial. Build prototypes that can be easily translated to code. Enjoy a better design workflow. Get started here.

The post UXPin Tutorial for Beginners appeared first on Studio by UXPin.

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

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

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

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

Reach a new level of prototyping

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

Discover UXPin Merge

What is a Date Picker?

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

Why are Date Pickers Necessary?

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

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

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

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

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

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

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

Date Picker UI Design for Mobile vs. Desktop

Mobile Date Picker

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

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

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

Desktop Date Picker

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

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

5 Types of Date Picker UI Design

Numerical Input Field

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

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

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

Dropdown Date Selector

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

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

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

Scrolling Date Pickers

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

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

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

Calendar Date Picker

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

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

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

Timeline Pickers

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

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

Date Picker UI and UX Best Practices

Date Picker Accessibility

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

Here are some recommendations for making date pickers accessible:

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

Date picker accessibility resources:

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

Show Current Date

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

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

Block Unavailable Dates

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

Provide Additional Critical Decision-Making Data

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

Reduce Unnecessary Data

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

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

How to design a date picker in UXPin

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

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

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

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

Styling the date picker Component

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

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

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

Using real Components instead

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

The post How to Design a Date Picker that Makes Your UI Shine appeared first on Studio by UXPin.

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.

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.

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.

A design brief is crucial in guiding the design process toward a successful outcome where designers meet client/stakeholder expectations. A good design brief can avoid costly scope creep, missed deadlines, poor communication, and inferior results.

Enhance your design projects with the world’s most advanced collaborative design tool. Create high-fidelity prototypes that look and feel like the end product for meaningful feedback from stakeholders and user testing. Sign up for a free trial to explore UXPin’s features and build your first fully interactive prototype.

Build advanced prototypes

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

Try UXPin

What is a Design Brief?

A design brief describes a project’s scope, expectations, responsibilities, deadlines, and deliverables specific to designers. It tells designers what to design, who it’s for, and when to deliver it.

Projects that don’t have a comprehensive design brief risk wasting resources, for example:

• Unnecessary back-and-forth communication between designers and stakeholders
• Exceeding budgets
• Misunderstood deliverables and expectations
• Missed deadlines
• Scope creep
• No accountability

What is the purpose of the design brief?

A design brief serves multiple purposes:

• Most importantly, it informs designers of the problem they must solve–i.e., what they must design.
• Defines the design project’s goals and features.
• Tells designers about the target audience, including pain points and needs
• It defines expectations so designers know how to approach a project and what they must deliver.
• Ensures UX design teams allocate and prioritize resources to meet time and budget constraints.
• Defines timelines and deadlines.
• Informs designers of key stakeholders, i.e., project manager, client, product owner, technical lead, etc.

What is the difference between a design brief and a design specification?

A design brief outlines what designers must create, while the specifications define specific details, including visual design elements, user flows, assets, file formats, accessibility requirements, brand guidelines, technical limitations, etc. Many design briefs include design specs to provide context and guidance for design teams.

How to Create a Design Brief Template

Creating a design brief template can save time while prompting the right questions before writing one at the start of a project.

Project summary

The project summary provides a high-level overview of the project, whether it’s an existing product or something designers are building from scratch. If the brief is for a design agency, the summary might include client details and contact information.

The project overview might also include high-level details like:

• Industry/market segment
• Competitors
• Current challenges
• Relevant product and user metrics

Summaries are essential for stakeholders who typically don’t need too much detail but want to understand the purpose of the design project.

Project overview

The project overview defines the scope and deliverables. Most importantly, it’ll outline the problem designers must solve or the purpose of the design project.

Some points to include in the overview include:

• Define the problem
• What must the team design?
• Is this a new product or a redesign?
• Who are the key stakeholders, and what is their involvement?
• Potential challenges
• What is not within the project’s scope?

UX research & artifacts

If there is any existing research, the brief will list these UX artifacts with links to a shared project folder. Some examples include:

• User personas
• Product analytics
• Mood boards, empathy maps, user journeys, etc.
• Interviews
• Competitor and market research
• Videos or screenshots showing the problem(s)
• Existing design files (wireframes, mockups, prototypes, etc.)
• Brand assets (logos, colors, fonts, etc.)

Project goals

The project’s goals describe what the design must achieve. These are typically business or marketing-related metrics like increasing conversions or reducing a website’s bounce rate.

Most importantly, project goals must be measurable using a baseline and KPIs and have a deadline. For example, “we want to increase the current conversion rate from 1.4% to the industry average of 3% by April 10, 2022.” Designers can analyze the current design, research competitors, conduct tests, see why users might be hesitant to convert, and design an appropriate solution.

Target audience

Most redesigns have an existing target audience and user groups with personas and other user research data. The person compiling the design brief will include a high-level overview of this information, with links to any research.

If there is little or no user data, the UX team will have to research the market and competitors to identify the product’s target audience and create personas, empathy maps, user journeys, etc., for the design project. Conducting this research from scratch will take considerable time, which stakeholders must consider when setting deadlines.

Design requirements

The design requirements (design specifications) describe the visual assets, formats, guidelines, and tools designers must use.

Some examples include:

• Brand assets (logos, fonts, etc.)
• Brand guidelines (usually an external link or supporting documentation)
• Color palette
• Technical information (front-end framework, CMS, APIs, etc.)
• Existing design files
• The project’s design system or UI kit

The design requirements will also include the project’s deliverables, but you can have this as a separate section. Some examples include:

• What format(s) must designers deliver the project for development–i.e., wireframes, mockups, prototypes, etc.?
• How and where to save assets
• Naming conventions

Timelines and budget

The project’s timeline and budget are essential for any design brief. This section lets designers plan, prioritize, and allocate the appropriate resources.

Some considerations for the project’s timeline include:

• Project roadmap and key milestones
• Stakeholder feedback sessions
• Prototyping and testing schedule
• User interview dates
• Design handoff date
• Task dependencies
• Final release
• Quality assurance

It’s essential to allocate the project budget to specific tasks or disciplines within the project so that team members can take ownership and manage resources accordingly. For example, defining budgets for the following areas:

• Research
• Ideation
• Design
• Copywriting
• Testing
• Tools
• Human resources

Additional notes and information

You can create an extra session for additional notes and information. Some examples of what to include here:

• A link to the project in your project management tool (Trello, Notion, Asana, etc.)
• Information about the project’s tools
• Where designers have creative freedom

Design Brief Example Templates

Here are some design brief templates from popular project management tools. 

• Free Google Docs and Word design brief templates
• Notion creative brief template
• Milanote website design brief template
• Milanote app design brief template
• Miro UX brief template
• Free PDF design brief template from Elementor
• ClickUp design brief template
• Free Google Doc design brief template from Superside

5 Tips for Writing a Design Brief

Interviewing clients and stakeholders

Most of a design brief’s details will come from a client or stakeholders. A project manager or design lead’s job is to interview these people and gather the information required to compile the design brief.

Encourage creativity

Designers are experts at finding creative and innovative solutions. A good design brief must guide rather than dictate the creative process. While it’s important to outline your design requirements, it’s just as important to inform designers where they have creative freedom.

Define tasks and decision-makers

An effective design brief delegates tasks and identifies key stakeholders and decision-makers. Assigning these roles at the beginning of a design project creates accountability while eliminating the “too many cooks in the kitchen” scenario. Designers must know who has the final say to avoid adding features or taking instructions from the wrong people.

A succinct way to include these key people in your design brief is by using the RACI project management model:

• Responsible: who must do the work
• Accountable: the team leader who ensures the work gets done
• Consulted: stakeholders who provide input and feedback
• Informed: stakeholders designers must keep in the loop with high-level progress updates–they do not have any decision-making authority

Effective timelines and deadlines

Many design briefs only include a final deadline, but there are many milestones for a design project. Setting deadlines for each milestone ensures designers prioritize their time effectively and don’t spend too much time in one discipline.

Some critical time milestones include:

• Project start date
• Key milestones and timelines–i.e., research, design, prototyping, testing, etc.
• Stakeholder feedback sessions
• Design handoff
• Release date
• Quality assurance

Plan beyond the scope

Thinking about the future is crucial. There might be a marketing campaign to promote the release or a possible future redesign. Make sure you include these requirements in the design brief.

For example, a marketing campaign will require social media assets. The design brief can instruct designers to provide images and videos in the necessary formats for Instagram, LinkedIn, Facebook, Pinterest, etc.

Getting all the design files, prototypes, and research for future design projects is also crucial because they could save valuable time and resources. Create a shared folder where designers can dump these assets for future reference.

Clear brand expectations

Clear guidelines save time with back-and-forth communication or redesigns because designers used the wrong elements. Create a shared folder or zip file that designers can download and use for the project.

Some key brand assets include:

• Fonts
• Logos (dark and light versions in vector format)
• Brand guidelines
• Color palette
• Brand graphics and video
• Copy

Improve Product Design Projects With UXPin

User testing and client/stakeholder feedback are crucial for delivering design projects. Designers use this feedback to iterate and improve design ideas to deliver great user experiences.

The biggest challenge for designers and stakeholders is poor prototype quality. These inferior prototypes are difficult to interpret, making it difficult to get client/stakeholder buy-in.

With UXPin, designers can build fully interactive prototypes indistinguishable from the final product. They can even connect APIs and use live data to demonstrate the end result accurately. These high-fidelity prototypes get meaningful, actionable feedback from testing and stakeholders, so designers can iterate faster with higher quality outcomes.

Enhance your projects with a sophisticated design tool built for modern UX demands. Sign up for a free trial to explore UXPin’s advanced design and prototyping features.

The post How to Write a Good Design Brief? [+ Templates] appeared first on Studio by UXPin.

As digital product complexity increases, so does the need for interactive prototyping. To minimize UX debt and reduce usability issues, designers must test and iterate with the highest accuracy during the design process.

Get the world’s most advanced end-to-end design tool. Create fully functioning interactive prototypes that look and feel like the final product. Sign up for a free trial to explore UXPin’s advanced prototyping features.

Build advanced prototypes

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

Try UXPin

What are Interactive Prototypes?

Interactive prototypes respond to user engagement like clicks/taps, swipes, scrolls, etc., accurately replicating the final product experience. These prototypes include navigation, transitions, animations, popups, and other interaction design characteristics.

What is the difference between an interactive and a non-interactive prototype?

The short answer is interactive prototypes have interactivity triggered by user engagement or system changes, while non-interactive prototypes don’t. 

Product teams often call prototypes built using image-based design tools non-interactive, even though they have some basic functionality. Image-based design tools are excellent for designing wireframes and mockups, but they lack features to add interactivity–most don’t even offer functioning input fields.

Designers can only build truly interactive prototypes using a design tool like UXPin or collaborating with UX engineers to develop a code prototype (HTML, CSS, & Javascript)–the latter being the more expensive and time-consuming option. 

High vs. low fidelity interactive prototypes

Designers can create both high and low-fidelity interactive prototypes. Low-fidelity interactive prototypes are usually wireframes with basic interactivity, while the high-fidelity version looks and feels like the final product. Check out an extensive comparison of low-fidelity and high-fidelity here.

Designers use low-fidelity prototypes early in the user experience design process because they’re easy to build and allow faster iterations. This speed enables designers to test many ideas quickly without wasting too many resources. Because these wireframes are interactive, designers can increase the prototyping scope during the early stages.

High-fidelity interactive prototypes are fully functional, offering a comparable, immersive user experience indistinguishable from the final product. These high-fidelity prototypes allow designers to identify usability issues and business opportunities. Insights they wouldn’t get using traditional image-based design tools (non-interactive prototypes).

Benefits of Interactive Prototyping

Accurate usability testing

The closer designers get prototypes to the final product, the more accurate their testing results. One of the challenges with image-based design tools is that designers can’t test UI elements like forms, date pickers, filters, dropdown navigation, accordions, and other “complex” components, without using multiple frames, plugins, and other workarounds.

The problem with these workarounds is that they’re time-consuming to create and don’t provide an authentic user experience. Designers may think they have solved an issue within the design tool’s constraints which doesn’t translate to the final product.

Interactive prototypes increase prototyping scope, so designers get accurate results from usability testing. They can pinpoint usability issues and iterate on solutions.

Meaningful stakeholder feedback

To get feedback and approval, UX designers must present stakeholders with wireframes, mockups, and prototypes throughout the design process. Poor quality prototypes result in stakeholders fixating on what the UI design doesn’t do rather than visualizing the bigger picture.

Designers can present ideas that accurately replicate the final product with interactive prototypes. Instead of “imagining” what a prototype does, stakeholders can engage with user interfaces, components, etc., to get a true sense of what the final product will do.

“There’s a lot more confidence from everyone (including designers, C-suite, directors, and developers) about what the final product will look like, the user experience, and interactivity—giving us higher quality feedback from stakeholders.” Erica Rider, UX Lead EPX @ PayPal, discusses interactive prototyping with UXPin Merge.

Visualizing information architecture and navigation paths

Understanding how users navigate digital products and the different paths is crucial for designing information architecture that meets user needs. Image-based prototyping tools allow basic navigational functionality but lack features for dynamic outcomes, testing search fields, and filters.

Designers must create multiple frames to achieve comparable final product functionality in image-based design tools or rely on UX engineers to build coded prototypes, requiring significant time and resources!

With interactive prototypes, designers can test search fields, filters, and other navigational elements to organize and optimize information architecture to align with user behavior.

Smoother design handoffs with less documentation

Design handoffs are challenging for product development teams. The friction between designers and engineers is usually down to prototype quality or not meeting technical constraints.

Interactive prototypes eliminate ambiguity while conforming to technical constraints with code-like interactivity, providing engineers with an accurate reference for programming.

With a clearer picture of the final product, engineers need less explanation, documentation, or back-and-forth communication for development. 

Design handoffs are seamless if the product design team uses a tool like UXPin Merge for bringing interactive components to UXPin. Engineers install the design system’s package and pull the components they need to replicate the prototype. Merge renders any component changes as JSX for developers to copy and paste.

Learn more about Merge and how to request access.

How to Build Interactive Prototypes in UXPin

Our sign-up form example provides an excellent demonstration of what’s possible with interactive prototyping in UXPin. You can download the sign-up form example and import it to a new project to follow along.

This article provides the steps for creating a new project and importing .uxp (UXPin) files.

Build a mockup

We’re using a template for this example, but you can build mockups from scratch in UXPin.

UXPin works like any other design tool when it comes to designing mockups. Designers can choose from a selection of shapes, freehand tools, text, and boxes. UXPin also provides several function form fields and icons, enabling designers to create high-fidelity mockups much faster.

Check out our documentation for more details about the UXPin Interface and how to design UIs.

Add interactions

You’ll notice some of the elements in the sign-up form example, have a little yellow and black lightning icon, like the one pictured below.

This icon tells us the component has interactions set up, which you can view by clicking Interactions in the Properties Panel.

Compared to elements with no interactions like this one.

Select the element you want to make interactive and click Interactions at the top of the Properties Panel and New interaction (in this example, we’re adding interactions to the SIGN UP button).

UXPin Interactions have four properties:

• Trigger: a user action that starts the interaction–click/tap, swipe, scroll, etc. UXPin offers 20+ triggers for mobile and desktop.
• Conditions: allow designers to make rules before the prototype performs an action or design dynamic user flows.
• Action: what happens after the trigger (assuming this meets any conditions). Actions can be as simple as a page transition or more complex, like an API call or playing a video.
• Select: below actions is a select property that changes depending on the action. For example, the selector will include a dropdown with available pages if you choose Go to Page.
• Animation: lastly, you can add animation. UXPin provides many CSS animations with easing, duration, and delay to breathe life into your prototypes.

Our sign-up form button has four interactions:

• Show confirmation screen: if the user completes the email and password fields correctly, the prototype will open the confirmation page. We’ve used a regex expression to ensure the email field includes an @ and domain extension, and the password must be longer than eight characters. The following error messages appear if the user doesn’t meet these conditions.
• Email error: if the user doesn’t complete the required email field, an error message appears below the input “Can’t be blank.”
• Password error: performs the same error message as email above.
• Set content of Email: creates a Variable for designers to use elsewhere in the prototype. In this example, we use the email variable to tell the user we have sent a verification link to their email address (see below).

UXPin’s Interactions allow designers to create dynamic prototypes that respond to user engagement comparable to code. To achieve similar results in an image-based tool, designers must create multiple frames, predicting potential user actions and outcomes, thus biasing the test’s results. Image-based tools don’t have functioning inputs, limiting the testing scope.

Interactive Prototype Examples

Here are some more interactive prototype examples created in UXPin.

Share Text Between Screens

UXPin’s Variables enable designers to personalize a user experience and pass data between screens, as we saw with the sign-up form’s confirmation screen above. Designers can share a single input, like the user’s name, or populate an entire profile with the user’s full name, address, contact number, and billing information used for eCommerce checkouts.

Follow the Share Text Between Screens to learn more about UXPin Variables.

Scrollable Content

Vertical and horizontal scrolling is a significant facet of the mobile user experience. UXPin lets designers set up scrolling in a few clicks, creating a smooth, intuitive mobile app interface.

Follow the Scrollable Content tutorial to learn more.

Stepper

Steppers are essential eCommerce patterns. They allow users to add multiple pieces of the same item to their cart. Designers can use stepper functionality for volume control, light dimmers, and other incrementally controlled features.

Follow the Stepper tutorial to learn more.

Get started with interactive prototyping in UXPin

Design user experiences your customers love with the world’s most advanced design tool. Sign up for a free trial to discover UXPin’s interactive prototyping features.

The post A Quick Guide to Interactive Prototyping appeared first on Studio by UXPin.

Open-source design systems offer an opportunity to develop high-quality products at a rapid pace. By solving foundational usability and accessibility challenges, organizations can focus on product development and solving problems.

Fluent UI is an open-source design system favored by companies developing enterprise products. The comprehensive component library allows organizations to build apps for the Microsoft ecosystem while enabling full customization and flexibility through theming for any product.

Import your Fluent UI design system into UXPin using our revolutionary Merge technology to create a single source of truth between design and development. Visit our Merge page for more details and how to request access.

Reach a new level of prototyping

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

Discover UXPin Merge

What is the Fluent UI Design System?

Fluent UI is a design system built and maintained by Microsoft. The open-source design system has two functions:

1. A design language and component library for developing Microsoft 365 products–much like Lightning does for Salesforce
2. A themeable component library for building enterprise applications outside of the Microsoft ecosystem

The comprehensive design system includes components and patterns for building cross-platform applications, including platform-specific UI elements for web, Windows, iOS, Android, and macOS.

Every component and pattern includes basic states and interactivity to enhance cohesion and consistency for cross-platform product development. These features allow organizations to focus on the product and user experience rather than designing, prototyping, testing, and iterating from scratch.

The Benefits of Using Fluent UI Design System

Aside from cohesion and consistency–which you get from most open-source component libraries–Fluent UI has many benefits for B2B and enterprise product developers.

Seamless Microsoft 365 Product Experiences

If your company uses Microsoft 365 for email, Excel, Word, Teams, etc., Fluent UI is a fantastic design system for internal products–even if they don’t sync with Microsoft 365.

Creating a seamless UI design from inbox and spreadsheets to warehouse inventory systems and data visualization gives employees a familiar user experience in every workspace, reducing learning curves which ultimately improves collaboration and productivity.

Enterprise Product Development

Enterprise UIs often have more complex architecture, layers, and data than B2C applications. Designing from scratch requires significant resources adding to the burden and complexities of developing and maintaining the final product.

An open-source library like Fluent UI eliminates hundreds (possibly thousands) of hours of building and testing components from scratch. Instead, product teams can effectively drag and drop Fluent UI components to develop new products.

Fluent UI includes a comprehensive library from Basic Inputs to more complex patterns like date pickers, list UIs, navigational components, notifications, modals, and more. The design system is also themeable, making it easy to adapt the library to integrate with other products or meet brand requirements.

Organizations also benefit from free maintenance as the Fluent UI team matures the design system, ensuring products meet foundational usability and accessibility requirements.

Component-Driven Prototyping With Fluent UI

Component-driven prototyping uses ready-made UI elements to build prototypes during the design process rather than designing from scratch.

The benefit of this prototyping methodology is that design teams can go from sketching and paper prototyping straight into high-fidelity prototyping, bypassing the time-consuming process of designing new UI elements.

For example, designing tables from scratch is particularly tricky and time-consuming. Fluent UI comes with many list UIs with implementation instructions and best practices.

Designers can choose an appropriate list for their project, add relevant content, and begin testing immediately. This document library UI, for example, would require many hours of designing, testing, and iterating. Fluent UI eliminates that work, so designers can focus on solving the core user need rather than drawing lines, circles, squares, etc.

While Fluent UI offers many benefits, building prototypes using traditional design tools have constraints that limit testing–like non-functioning inputs, date pickers, and other user controls.

With UXPin Merge, designers achieve code-like fidelity and functionality!

As a code-based design tool, UXPin Merge enables component-driven prototyping, where designers can build exact replicas of the final product without writing a single line of code!

Advanced Component-Driven Prototyping With UXPin Merge

UXPin Merge allows organizations to sync a component library from a repository, so designers use the same UI elements as engineers. Instead of using one of Fluent UI’s UI kits, designers use the design system’s React components in UXPin’s design editor.

These Merge components include Fluent UI’s React props defined by the design system, like color, size, interactivity, states, functionality, etc. These props appear in UXPin’s Properties Panel so designers can adjust components to meet product requirements.

How PayPal Uses Fluent UI and UXPin Merge

Before PayPal switched to UXPin Merge, the company’s internal products were inconsistent and fraught with usability issues.

As Erica Rider, Senior Manager for UX – Developer tools and platform experience at PayPal, notes in an interview with UXPin, “None of PayPal’s product teams had experienced UX people or UI developers. The result was a range of usability and design consistency issues—no two products looked the same!”

Erica decided on Fluent UI: “We settled on Microsoft’s Fluent design system with UI controls for our internal tools development because they’re more enterprise-focused and better suited to internal user interfaces.”

Fluent UI gave PayPal the UI controls and consistency to focus on product development rather than building and managing components. The company uses a private GitHub repo to host its themed Fluent UI library, including custom components and user interface templates that minimize any need to design from scratch.

With constraints set by code in the repository, PayPal’s product team completes 90% of design projects. UX designers act as “user experience mentors,” helping with complex usability issues and continuous coaching.

Since the switch to Fluent UI and UXPin Merge, PayPal’s product teams deliver products 8X faster than experienced UX designers could previously using image-based tools.

A Single Source of Truth

The most significant benefit of using a design system like Fluent UI and Merge is that it creates a single source of truth across all product development teams.

With every Fluent UI component coming from a single repository, designers and engineers work within the same limitations and constraints. Any changes to the repo automatically sync to UXPin, notifying design teams of the update. Designers can use UXPin’s Version Control to switch to any version of the design system in any project at any time!

Fast-Track Product Maturity

Achieving product and design system maturity takes considerable time and resources. With Fluent UI, a startup can fast-track years of research and development to compete with Fortune500 software companies with their first release!

Instead of worrying about developing components, Fluent UI users can focus on product innovation and solving problems. The design system has all the UI elements to scale a product with little or no design (or programming) from scratch.

How to Import Fluent UI Components Into UXPin

Designers have two options when importing Fluent UI’s React component library. Both options require engineering collaboration to correctly set up the file structure and repository.

Git Integration

UXPin’s Git Integration only works with React components and connects directly to a repository. Engineers can use UXPin’s boilerplate repo as a template to set everything up. UXPin’s technical support is on hand to guide companies through this process and ensure the design system syncs correctly.

Once the initial connection is complete, UXPin will automatically sync any changes and notify designers of the update.

Storybook Integration

UXPin’s Storybook Integration also works with React but also enables organizations to sync Fluent UI’s Vue, Angular, and Ember libraries.

Storybook is a fantastic tool for developing and managing UI components in isolation. UXPin’s Storybook best practices ensure organizations get the most out of Storybook and Merge.

Using Storybook Components in UXPin

Once the Storybook setup is complete, the component library will appear in the left sidebar under Design System Libraries. The Storybook icon will appear next to the library’s name, like this Material UI example below (note the MUI library has a different icon for the Git Integration).

Designers drag and drop components from the library to build user interfaces. They can also combine these Storybook components or elements from other libraries using UXPin Patterns.

UXPin Patterns offer two significant benefits:

• Creating new UI components and templates to scale the design system (designers can share and use these to continue prototyping while waiting for engineers to add them to the repository)
• Saving multiple states or versions of a component for faster changes during prototyping and testing

Using Args and Props

Organizations can use React props or Storybook Args to set component properties that appear in UXPin’s Properties Panel. These props and Args ensure designers stick to the design system’s guidelines for styling, like colors, typography, states, shadows, and other crucial values.

Designers can apply different properties using dropdowns, checkboxes, text fields, etc., to achieve an on-brand result with minimal effort every time.

These properties also help engineers develop the final product faster because they already have the components and styling in the repository–ensuring absolute cohesion and consistency with every release!

Start Designing With Merge and Fluent UI Today!

Leverage the power of UXPin Merge and Fluent UI to develop enterprise products that exceed customer expectations with high-quality user experiences. Visit our Merge page for more information and how to request access to sync your design system or open-source component library.

The post Bring Fluent Design System for React into UXPin with Storybook appeared first on Studio by UXPin.

Website footers are essential UI patterns. They guide visitors to important content while providing an excellent opportunity to add business value and connect with new customers.

This article explores website footer design, do’s and dont’s, expert examples, and best practices to inspire your next web project.

Prototype UI designs at higher fidelity and advanced functionality with UXPin. Sign up for a free trial to discover the endless possibilities of code-based design.

Build advanced prototypes

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

Try UXPin

What is a Website Footer?

A website footer is a UI pattern at the bottom (or footer) of a website or application. Footers are important website components because they display helpful information, including navigational links, contact details, policies, copyright info, and social media links, so users can learn more about your business.

Link the primary header navigation; a website footer appears on every page so users can always access the links and content. Even though it sits at the bottom of a web page, footers are vital components for users and business goals.

What is the Purpose of a Footer?

How designers use a website footer depends on the business and content. Most websites use the footer for secondary navigation–important links that can’t fit in the website header like about, product docs, resources, etc.

With GDPR, CCPA, and other legal information, websites must include certain policies, like privacy, terms of use, etc. Designers usually have these links in the footer, so users always know where to find them.

Sales Benefits

Many UI/UX designers also use website footers for business purposes like a product CTA or capturing leads via contact page or a newsletter signup form. Footers help users to navigate to feature pages, best-selling product categories or more information about services.

Marketing Benefits

Many marketers also use website footers for SEO (search engine optimization) purposes. There are a couple of SEO benefits of footers:

• Help with boosting pages you want to rank
• Homepage links carry weight, meaning search engines see these internal links as important and prioritize accordingly
• Increases the likelihood of clicks, thus reducing bounce rates which improve domain authority and rankings

What Should a Footer Include?

Again, it depends on the website. An eCommerce website will have different priorities for the footer to a blog. Here is a list of items you might include in a footer:

• Navigation links
• Brand engagement and messaging
• Testimonials
• Copyright

Navigation Links

There are several types of navigation links businesses include in the footer. These include:

• Utility links: contact information, phone number, email address, physical address, customer service contacts, privacy policy, terms of use
• Doormat navigation: A copy of the main navigation for convenience (might be unnecessary for sticky headers)
• Secondary task links: job application, investor information, documentation/specifications, press information, affiliate signups, FAQs
• Sitemap: Links to multiple topic/product categories

Brand Engagement & Messaging

Another common use for a website footer is brand engagement and messaging–links and footer content that encourage people to connect with the company, including:

• Social media icons
• Social feeds with several latest posts (usually Instagram or Twitter)
• Brand logo
• Brand slogan or vision (1-3 sentences)
• Email signup

Testimonials

Some brands use the footer for testimonials and reviews. They might even include a Google Business or TrustPilot widget displaying their star rating. These UI patterns are excellent for social proof and creating interest in your product or service.

Copyright

The copyright symbol and notice at the bottom of a footer tell visitors that you own the website’s content. It’s not a legal obligation, but it is common practice to inform people that you plan to protect your rights to the content.

6 Footer Design Examples

We’ve chosen six footer design examples from different industries to show how designers create layouts that align with business goals and user needs.

The key takeaway from these examples is how different industries prioritize links and content. Each example also uses a clean, minimalist layout to help visitors find information quickly.

UXPin – Saas Footer Design

We decided to use our UXPin website as a SaaS footer example. You’ll notice we use a sticky header, so our primary navigation is always visible to desktop users.

UXPin’s footer includes key company, product, and marketing information. Customers often want to know how UXPin, an advanced tool, compares to popular image-based competitors, so we’ve included several product comparison links.

Other essential footer links for SaaS products are documentation, tutorials, educational content, and other helpful resources. UXPin also includes a language selector, social links, and policy information.

The BBC – News Footer Design

The BBC (British Broadcasting Corporation) is one of the largest news and media organizations worldwide. 

The media giant primarily uses its footer to display different 30+ language versions of the website with a separate section for popular news topics. The very bottom of the page features links to legal information, policies, contacts, and advertising with the BBC.

The clean layout is easy to read, allowing users to find content and links fast.

Asos – eCommerce Footer Design

Global eCommerce brand Asos uses a simple footer design with social media buttons, payment methods, and helpful links. Most important for eCommerce are links for delivery/returns policy, order tracking, and special promotions–in Asos’ case, they promote student discounts, gift cards, and Black Friday.

As a listed company (ASOMY), Asos must provide investor information and corporate responsibility. 

Lastly, as a global eCommerce brand, Asos shows customers which store they are viewing and a link to change to another region and currency.

Zorro Design – Agency Footer Design

Agencies generally use their websites for two purposes:

• Showcase their work
• Generate new leads

US-based Zorro Design uses a black and white footer design with a bright yellow CTA taking users to a contact form. Zorro’s designers have designed the footer perfectly, so the CTA sits in the center of the screen, with lots of surrounding whitespace screaming “CLICK ME!”

Lastly, Zorro places its logo and slogan to the left with several key links, including recent work, contact, about, and social media buttons.

Zorro’s footer design is clean and uncluttered, allowing users to absorb and find content quickly.

Alex Lakas – Freelancer Footer Design

Like agencies, freelancers need a portfolio website to showcase their work and get clients. Product Designer Alex Lakas uses his website footer primarily to connect with potential clients/employers and designers through his social channels.

As a remote worker, Alex also uses flashing text to tell visitors where he’s currently working–in this case, it’s Los Angeles.

Alex’s dark/light mode switcher is a nice touch for a UX design portfolio, showing he’s mindful of web accessibility. He also has links to past work and a contact page.

Booking.com – Travel Footer Design

Booking.com is one of the world’s biggest online travel agencies, with over 28 million accommodation listings in more than 70 countries. Booking.com’s goal is to sell accommodation, but they also want to onboard new properties, so their primary footer CTA is to “list a property.”

The website’s footer also features its five most important links using a large bold typography to stand out. Customers also have several search categories, including regions and accommodation options, for customers to find their ideal destination faster. 

As a listed company (NASDAQ: BKNG), Booking.com includes links to all necessary investor and corporate information.

At the bottom of the page, Booking.com features several logos of the company’s holding group, Booking Holdings Inc.

How to Design a Footer?

Prioritize Links

The first step to designing a great footer is prioritizing your links. Designers must consider user needs and business goals to create something meaningful and helpful to visitors.

Less is More

Cluttered UIs always perform poorly. They’re difficult to digest and can confuse users. Reducing UI elements, links, and text can help drive traffic to your most important content–which takes us back to point one, prioritize your links properly!

Use a Single CTA

A single CTA helps guide visitors to your most important task or business goal. Footer designs are usually two-tone, often black and white, providing the perfect background for a bright-colored CTA to pop and grab people’s attention.

Make Footers Mobile-Friendly

Mobile-first design is crucial for website footers. On a desktop, you may have 3-4 columns, while on a smartphone, you have one. The more columns and links, the more users have to scroll to find content. Place your most important links and content in the first column, so users see this first.

Use Hierarchy to Display Importance

The examples from Booking.com, Zorro Design, The BBC, and Alex Lakas used visual hierarchy to show users their most important links. Different sizes, colors, and weights are effective techniques for displaying importance.

Stay Compliant

Legal information like policies and disclaimers are crucial for modern web design. Designers must research their company’s obligations regarding where and how to display these links.

For example, financial and investment products in some countries must display their disclaimer information in the footer, so it’s always visible to customers. See this footer example from Chase Bank.

Branding Opportunities

Your website’s footer is a fantastic opportunity to connect users with your brand’s touchpoints, like social media, newsletter signup, and company links.

Be Helpful

Users often scroll to a website footer looking for help like documentation, tutorials, blog, and other resources. The UXPin footer design is a perfect example of providing multiple resources to educate customers about our products.

Designing Footers With UXPin

Create beautiful, interactive, responsive website footers in UXPin. With UXPin, designers can build prototypes with code-like functionality to improve user testing and get better feedback from stakeholders.

UXPin also includes built-in accessibility tools, including a contrast checker and color blindness simulator to test designs on the flying without leaving the canvas.

Deliver better products faster with UXPin–the world’s most advanced code-based design tool. Sign up for a free trial and deliver better user experiences to your customers with UXPin.

The post Footer Design – Best Practices Together with 6 Examples appeared first on Studio by UXPin.

A product and its design system are ever-evolving projects. As the product scales, designers must create new UI patterns and components to meet business goals and user needs while solving usability challenges.

UXPin’s Patterns allow design teams to combine existing Merge components with standard UI elements to create new UI patterns and save them to a UXPin library.

Create a fully-integrated design system and deliver a single source of truth to your product development teams with UXPin Merge. Head over to our Merge page for more details and how to request access to this revolutionary code-based design 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, and how can it help you?

Merge allows you to import a component library‘s elements hosted in a Git repository, Storybook or npm package to UXPin’s design editor, so the entire team uses the same design system. Then, designers can use those elements and build prototypes that are fully consistent with end product.

Traditionally, most design systems feature two UI libraries:

1. Design teams use a static UI kit
2. Engineers use a coded component library

Although many organizations claim this dual system is a single source of truth, achieving it takes a lot of time and resources.

UXPin Merge is genuinely a single source of truth because there is only one component library. Designers and engineers use the same UI elements and patterns from the same repository.

You can sync React components using Merge for Git or UXPin’s Storybook Integration for other popular front-end technologies like Vue, Ember, Web Components, Angular, and more.

Designers can also import the npm packages of open-source component libraries like MUI, Bootstrap, Ant Design, Lightning, etc., through Merge’s npmIntegration to build fully-functioning prototypes or a minimum viable product (MVP).

What is the UXPin Patterns?

Patterns is a Merge-exclusive feature enabling design teams to combine Merge components and standard UXPin UI elements to build more complex UI patterns.

In the context of Brad Frost’s Atomic Design, Patterns allows designers to take atoms and molecules (foundational UI elements and components) to build larger, more complex designs like organisms and templates (cards, forms, navigation, headers, footers, etc.)

Some of the most common use cases for UXPin Patterns include:

• Creating advanced components not available in your current library
• Save properties for your most commonly used component variants
• Grouping and saving Merge elements into bigger UI patterns
• Sharing new UI patterns with design teams to enhance consistency
• Promoting new patterns for engineers to add to the component library

Designers can combine UI elements from multiple component libraries or UXPin Classic components to create new patterns. This flexibility is beneficial if your design system doesn’t have the parts required for a new UI pattern.

For example, let’s say you want to build a header navigation with dropdown menus, but your current design system doesn’t have them. You can use UXPin’s npm Integration to import a dropdown menu from MUI (or another open-source library) and use it to build the new navigational pattern. Engineers can read MUI’s docs and view the JSX code to understand how to code your new pattern and add it to the design system.

3 Benefits of UXPin Patterns

Patterns offer three primary benefits to product development and design system teams. The common thread among these three benefits is that Patterns provides a comparable alternative when your Merge repository doesn’t have what you need. 

1. Nesting UI Elements to Build Complex Components

Even with a comprehensive design system, designers often have to create new components and patterns as the product evolves. Often, these patterns don’t exist in the design system, so designers must build them from scratch every time.

Designing from scratch can add valuable time to your project, especially if you’re building something like a graph or data table. Instead, you can create these complex patterns once and save them to your UXPin Pattern library. You can also share these with other designers so teams aren’t doing duplicate work or creating inconsistencies.

While many design tools offer this functionality, none allow you to manipulate and combine code components. With Patterns, designers take on a hybrid designer/engineer role capable of building fully functioning, complex UIs without writing a single line of code.

2. Reusing Properties for the Same Component

Even though Merge allows designers to build prototypes significantly faster than image-based design tools, there’s always room to create greater efficiency.

For example, you might want to save patterns for various Merge form input or button states, like default, error, warning, and success. With Patterns, you can set these up once and save them to your pattern library, ready to drag and drop for the next user interface.

These pre-built patterns are especially useful for design sprints or making quick changes during stakeholder meetings and user testing. Instead of fiddling with properties in UXPin’s Properties Panel, you simply drag the desired pattern onto the canvas, ready to go!

3. Promoting & Testing new Design System UI Elements

New UI elements don’t magically appear in your design system. The DS team must build and test these patterns before release. With UXPin Patterns, the DS team can combine existing components with UXPin Classic or open-source libraries to test and iterate at higher fidelity and functionality.

Component-driven prototyping with UXPin Merge and Patterns allows designers to test and iterate with less input from engineers, who are free to focus on developing the final component and working through any design system technical backlogs.

With Patterns, design teams don’t have to wait for engineers to develop the new component. They can use the prototype pattern created by the DS team to continue the design and testing process without compromising fidelity and functionality.

UXPin Patterns is a fantastic tool for creating one-off or rarely-used UI components. These patterns aren’t used enough for promotion to the design system, but design teams still need access to them.

Storing these in your UXPin Patterns Library provides the benefits of fully functional Merge components without adding them to the design system’s repository. Engineers can store the component in a separate repository and use it when needed.

How to use UXPin Merge Patterns?

This quick demo shows how easy it is to create a new Merge Pattern in UXPin. We’re using the same components we imported for our MUI npm Tutorial, which you can check out here.

The pattern below features three MUI components imported using Merge’s npm Integration and two UXPin Classic text elements–not going to win any design awards, we know!

But even a simple pattern like this takes some setting up, so it would be nice to eliminate that repetitive task by creating a reusable pattern.

Step 1

Add and arrange the components you want for your pattern. Remember, you can combine multiple component libraries and UXPin Classic elements.

Step 2

Set the properties for the Merge components. 

• We’ve created an email input field with a placeholder and some help text for accessibility. We’ve also made this field required so users know they must complete it.
• Next, we’ve added an MUI checkbox that users must check to accept marketing from us.
• Lastly, we’ve chosen an MUI button and set it to primary so it’s obvious where users must click once they complete the email field and checkbox.

Here is an example of the email component’s Properties Panel.

Step 3

Switch to the Patterns tab on the left sidebar above your component library.

Step 4

Select the group of UI elements or a single component you want to save as a pattern. Click the large white + Add button in the left sidebar, and your new pattern will appear.

Step 5

Click on the pattern’s name to change it to something more descriptive or to align with your design system’s naming convention. Once you have multiple patterns, you can use UXPin’s search feature to filter what you need.

Deleting a Pattern

You can also delete any old patterns by clicking the pencil icon (“Enter edit mode”) below.

Select the patterns you want to remove and click Delete.

Creating Different States

Now that we have a default pattern, we might want to create additional states to optimize our workflow further.

For example, we can set up an error state pattern triggered when the user doesn’t enter an email address.

We could also create a disabled state for the button that’s only active once the user enters a valid email address and checks the marketing terms.

Now we have three newsletter patterns ready to start prototyping. Designers can drag and drop to make quick changes without worrying about setting properties or switching individual components from the pattern.

Ready to streamline your workflows with UXPin Merge and Patterns? Request access to Merge and let’s get going.

The post How to Use UXPin Merge Patterns? A Quick Tutorial appeared first on Studio by UXPin.

Component-driven prototyping significantly improves user testing while providing stakeholders with realistic product design expectations. UXPin’s npm integration enables design teams to use open-source component libraries to design fully functioning, high-fidelity prototypes.

Get on board the code-based design revolution with UXPin’s Merge technology and npm Integration. Discover more about component-driven prototyping that maximizes the use of design systems, improves design handoffs, and scales design significantly.

Bring UI components via Git repo, Storybook, or through our newest npm integration. Learn more about UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

What is UXPin Merge?

UXPin Merge is a code-based technology allowing you to sync a component library hosted in a repository, Storybook or as an npm package to UXPin’s design editor. Designers can use these UI components to build prototypes that look and function like the final product.

Any changes engineers (or the design system team) make to functional components in the repository automatically sync to UXPin, notifying design teams of the update. Merge includes version control, allowing team members to switch to an older design system version if needed.

This single source of truth enhances collaboration while reducing the burden on DesignOps and the DS team to manage two design systems–one for design tools and the other for code.

What is UXPin’s npm Integration?

UXPin Merge required engineering expertise to set everything up until now. Not every team has valuable engineering resources for the setup, so we came up with a way of integrating npm components to UXPin.

Merge’s npm Integration gives designers complete control over installing and managing open-source component libraries available as npm packages. Designers can import and customize components to meet their prototyping needs using an intuitive interface. It requires zero coding skills to set everything up.

If you want to learn about npm for designer, read our introductory guide: What is npm package?

The Benefits of Working With Ant Design

Ant Design is the product of the Ant Group–a Chinese-based conglomerate of several tech/finance organizations, including Alipay, Huabei, and Yu’ebao, to name a few.

Organizations have used Ant Design to build a multitude of applications, including B2B, B2C, and enterprise products. The comprehensive design system includes React, Angular, and Vue component libraries, with a complementary icon set. You also get Ant Design Mobile for building native applications.

Ant Design npm Integration With UXPin Merge

Ant Design’s React component library is available as an npm package (antd). Designers can import Ant React components using UXPin’s npm Integration and customize properties in the Merge Component Manager.

If design teams want to use Ant Design with other design tools, they must use one of Ant Design’s static vector-based UI kits, but with UXPin’s npm Integration, designers have access to the same components engineers use.

Component-driven prototyping with Ant Design creates a single source of truth between designers and engineers while ensuring the highest consistency between UX and product teams.

With UXPin’s npm Integration, you can choose which Ant Design React props you want to import–color, size, icons, states, etc.

Assigning Properties in Merge Component Manager

Our npm Integration includes Merge Component Manager–your central control for importing and managing each Ant Design’s component properties.

UXPin’s npm Integration works with React components, so you can follow Ant Design’s React documentation to reference which props you want to import. Once you set these up in Merge Component Manager, the component’s properties appear in UXPin’s Properties Panel.

For example, there are six types or variants of an Ant Design button:

• Primary
• Ghost
• Dashed
• Link
• Text
• Default

These button types (and all other properties) appear as a dropdown in the Properties Panel for designers to choose. Props can appear as text fields, checkboxes, code editors, etc., depending on the component.

Connecting UXPin to the Ant Design npm Package

Navigate to your UXPin dashboard and click “New Project.”

Name your project and click “Create New Project.”

Click “New prototype” to open the project in UXPin’s design canvas.

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.

Select “Import React Components” and click “Next.”

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 Ant Design’s npm page. Copy and paste the Install contents from npm into the “Library package name” field (delete everything preceding antd).

To import component styling properties, Merge requires the path to Ant Design’s CSS (antd/dist/antd.css). You can find this under Usage in Ant Design’s React installation instructions.

Importing Ant Design Components

UXPin will automatically redirect you to the canvas once you complete the npm integration. Now it’s time to select the Ant Design components you want to import.

From the lefthand sidebar, click “Open Merge Component Manager.”

Merge Component Manager will open in a new tab.

Click “Add new component.”

Enter the name of the component you want to import.

You’ll find the correct naming convention in the Ant Design docs under Component API. Ant Design’s components use CamelCase with no spaces. Always capitalize the first letter. For example, Date Picker would be DatePicker.

For this tutorial, we will import an Ant Design Button as our first component and add it to a new category called General. We recommend using the same categories as Ant Design’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.”

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.

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 (General) and your first component (Button) in the left sidebar.

Click on the Button to begin adding properties. You can find these React props in Ant Design’s documentation under API in Components > General > Button.

Adding Component Properties with Merge Component Manager

Let’s add a few Ant Design button properties using the React props from the documentation.

The React button type prop imports the six Ant Design button styles.

• Property name: enter “type” (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 “Type” to keep things uniform
• Description: Add a short description or instructions for designers–we’ve used “Type of button”
• Property type: “enum”–allows you to create a dropdown display the six styles
• Property control: “select”
• Options: Add the options from Ant Design’s API docs–primary, ghost, dashed, link, text, default
• Default value: Your preference–we’ve gone with “default” as per Ant Design’s docs

As you complete the component’s properties, you’ll notice a component preview will appear and change according to your preferences.

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 Ant Design 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 Ant Design components in less than a minute.

When you select an Ant Design component, the properties you created in Merge Component Manager appear in the righthand Properties Panel.

Try building an Ant Design prototype with UXPin’s npm integration. Discover how component-driven prototyping can revolutionize your product development workflows to deliver better user experiences to your customers. Learn more about UXPin Merge.

The post How to Import Ant Design to UXPin? An npm Integration Guide appeared first on Studio by UXPin.