You may wonder what the difference between UXPin and Merge is. And, which one is right for my design team?

To put it simply, UXPin is an all-in-one design software that covers the entire product design process together, including design handoff, while Merge is a technology that allow you to bring interactive components to UXPin and design prototypes using them.

Ultimately, Merge technology leads to a more collaborative and faster design process in which both designers and developers can share a single source of truth and create consistent UIs. Check more about UXPin Merge here.

Reach a new level of prototyping

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

Discover UXPin Merge

Image-Based vs. Code-Based Design Tools

Before we get into UXPin and Merge, it’s important to understand the difference between image-based and code-based design tools. 

When designers hear code-based design tool, they assume it’s a developer tool or must learn code to use it–both are incorrect.

Code-based refers to how the tool renders what UX designers create on the canvas. Traditional image-based tools produce static vector graphics, whereas code-based tools render code.

Learn more about it: How to Turn Figma Designs into Interactive Prototypes?

For the most part, designers won’t notice much difference when comparing the two interfaces, except that code-based tools generally have more options for interactivity.

For example, if you create an input field using an image-based tool, it’s just a block on the canvas. In UXPin, an input behaves like it would in the final product. When users click the input, a cursor appears, and they can enter text. With UXPin’s various features, designers can then:

• Validate inputs
• Check password criteria (i.e., letters, numbers, symbols, etc.)
• Personalize welcome messages
• Populate a user’s profile page

What is UXPin?

UXPin is an end-to-end code-based design tool for advanced prototyping and testing. Designers can build prototypes that accurately replicate final product interactions and functionality.

UXPin looks and feels like any other design tool but with features that enhance UX workflows, collaboration, prototyping, and testing. 

Some of those key features include:

• Variables
• Interactions and Conditional Interactions
• Expressions
• Auto Layout
• Design Systems
• Comments

Variables

Variables allow designers to capture data from input fields and use it elsewhere in the prototype. This example from our demo sign-up form demonstrates how you can capture a user’s email address to personalize the confirmation page.

Interactions and Conditional Interactions

UXPin makes it easy to add Interactions to your prototypes with a few clicks. Designers have an extensive list of Triggers, Actions, and Animations that accurately mimic final product interactivity.

Conditional Interactions take interactivity to another level with if-then and if-else conditions–similar to what Javascript does for devs. 

Returning to our demo sign-up form, we see how you can use Conditional Interactions to present users with error messages if they leave the email and password fields blank. Only when the user meets the input’s conditions can they proceed to the confirmation page.

Expressions

Expressions take prototyping to the next level, allowing designers to create dynamic user experiences comparable to code. In our sign-up form prototype, we use Expressions to define the email and input field criteria:

• Email: must have the @ symbol and domain extension (.com, .co.uk, etc.)
• Password: must be longer than 8 characters

Designers can add as many Expressions to components and prototypes as they like, achieving results indistinguishable from code.

Auto Layout

Many design tools offer auto layout, but UXPin’s Auto Layout uses Flexbox naming and properties to create realistic expectations and improve designer/developer collaboration.

Designers use Auto Layout to automatically resize, fit, distribute, and fill designs, eliminating the time-consuming task of doing this manually.

Further reading: Bringing Auto Layout to UXPin.

Design Systems

Design Systems allows designers to create a library of reusable components and share these across the organization. It’s a fantastic feature for building a design system from scratch, including documentation and permissions. 

UXPin automatically categorizes Design Systems into:

• Colors
• Typography
• Assets
• UI Patterns

The entire library appears in the left-hand sidebar, so designers simply drag and drop elements to build user interfaces.

UXPin also provides five Built-in Design Libraries, including OS, Material Design, Bootstrap, Foundation, and User Flows, so teams can build prototypes or MVPs fast to test ideas and hypotheses at every stage of the design process.

Comments

Comments allow design teams and stakeholders to collaborate, share feedback, assign tasks, and provide context within design projects and on prototype previews.

UXPin allows anyone to use the Comments on Preview feature, eliminating the need to purchase additional users like stakeholders and developers who don’t need access to UXPin’s canvas. Designers can password-protect designs, so only those authorized can view them.

What is UXPin used for?

Design teams use UXPin at every stage of the design process. While high-fidelity prototyping is UXPin’s strongest feature, its ready-made forms make it an excellent wireframing tool.

Here are some examples of where UXPin outperforms its image-based competitors:

• Interactive prototyping
• API integrations via IFTTT
• Fast design iterations
• Collaborating with design teams, engineers, and stakeholders
• Smoother design handoffs
• Building and scaling design systems from scratch

Further reading:

• UXPin Docs for info and tutorials about UXPin’s features
• Interactive patterns and app examples showing UXPin’s features in action

Ready to see what code-based design is all about? Sign up for a free trial to build your first interactive prototype with UXPin today!

What is UXPin Merge?

UXPin Merge is a technology that syncs code components from a repository to UXPin’s design editor. Organizations can use Merge with open-source libraries or import their product’s design system.

Designers use these code components like building blocks, dragging and dropping to build user interfaces.

Merge components include properties defined by the design system, including interactions, states, colors, typography, sizing, etc. These properties appear in UXPin’s Properties Panel, where designers can make adjustments according to prototyping requirements.

You can change the color, size, variant, and add an icon using properties.

Merge pulls these properties from the repository and automatically syncs any changes. For example, if the design system team changes the primary color from blue to red, Merge will detect the update and notify design teams of the new release.

Version Control allows designers to choose when they want to switch to the latest release and can revert to early versions whenever they want.

Is There a Way to Test UXPin Merge?

Yes, you can test UXPin Merge on trial or you can enjoy its features on Merge AI plan that’s perfect when you want to use leverage popular open-source component libraries such as MUI, Ant Design, and Bootstrap without needing to start from scratch.

When you sign up for UXPin Merge, you gain access to three trial kits—MUI, Ant, and Bootstrap—giving you a starting point to experiment and create interactive prototypes using real React code.

Each trial kit comes fully loaded with reference patterns and example components, such as cards, snack bars, and skeleton loaders, which you can use directly in your projects. Additionally, you can browse full layouts, like dashboards, to jumpstart your designs without the need to build from the ground up.

Here’s how UXPin Merge works:

1. Select a Library: Choose from built-in component libraries like MUI or even custom Tailwind UI components. Simply drag and drop these ready-made components into your design canvas.
2. Edit Variants and Properties: Customize the components with real React code by toggling between different variants and modifying their properties. You’re not just working with static design assets but actual coded components that behave as they would in production.
3. Use Custom Code: If you’re working with custom Tailwind UI components, you can paste code directly into UXPin to generate entire UI sections instantly. This feature allows you to skip designing components from scratch and speeds up your workflow by using existing code.
4. AI-Powered Component Generation: UXPin Merge even integrates AI to help you create code-based components on the fly. For example, you can prompt the system to generate a “Persona Card,” and UXPin will create a fully functional Tailwind CSS-based component directly on the canvas.
5. Effortless Developer Handoff: Once your design is complete, UXPin Merge makes it easy to hand off your work to developers. Share your prototype through a preview link, and developers can access the real JSX code, dependencies, and functions for each component. This ensures that developers receive production-ready code that they can immediately use in their environments.

With UXPin Merge, there’s no need to waste time recreating components for the design team or manually coding every element from scratch. Merge AI allows designers and developers to work more efficiently by tapping into the power of real React components, ensuring consistency between design and development from the very beginning.

How to Sync Your Design System With UXPin Merge

There are three ways to sync a design system with UXPin Merge:

• Git Integration: for React component libraries only
• Storybook Integration: for Storybook libraries (React, Angular, Ember, Vue, and more.)
• npm Integration: for importing components from open-source libraries available in the npm registry

These three integrations each serve different prototyping and team needs. The Git and Storybook integrations require technical knowledge to set up the components and repository for Merge. UXPin provides a boilerplate for engineers, and our technical team is on hand to guide the setup process.

Storybook is probably the best option for private design systems because engineers can build components in isolation, prototype, and test them before pushing them to UXPin for design teams.

The npm integration and Merge Component Manager give designers more control over the components and properties they want to import. Designers can follow the design system’s docs and don’t need engineers to import UI elements.

Key Benefits of UXPin Merge

Merge’s primary benefit is that it creates a single source of truth between design and development. Designers and engineers use the same component library from the same repository–creating a seamless design handoff process.

1. Engineers simply import the component library. 
2. Copy JSX changes UXPin produces from component properties. 
3. And develop the final product according to the design team’s prototype.

This streamlined workflow creates many product development efficiencies, including:

• Faster prototyping (PayPal scaled by 8X)
• Faster time to market
• No designing from scratch
• Little to no front-end coding
• No design drift
• Reduced UX and front-end debt
• Seamless handoffs with less communication and documentation
• Flawless cohesion and consistency
• Higher quality feedback from stakeholders
• Meaningful, actionable results during testing
• High-quality outcomes = better user experience

UXPin to Merge – The Scalable Design Solution

UXPin offers companies a scalable design solution with the tools and features to support your workflow at every stage of maturity.

UXPin Standard is an excellent solution for startups and companies who aren’t using a design system. Designers can build fully-functioning interactive prototypes and MVPs for accurate testing.

UXPin Standard also includes UXPin’s Design Systems feature, so designers can save and share product components, color palettes, typography, and assets.

Scaling With Merge

Whether you’re a fast-growing startup or multinational enterprise, Merge enables companies to scale design operations. 

FinTech giant PayPal and leading software developer Iress have both experienced enhanced workflow optimization and collaboration from switching to UXPin Merge.

At the enterprise level, Merge enables teams to move faster because they have a single source of truth across the entire product development team. There’s less friction and better collaboration because designers and engineers speak the same language while working within the same constraints.

What Merge designers use in UXPin to create a button or any other UI component is exactly the same button or what have you as which engineers pull from the repository to develop the final product.

We’ve also seen how Merge helps companies at the startup stages. Startup TeamPassword doesn’t have a UX team, so engineers use UXPin Merge for prototyping and testing. Because Merge creates a drag-and-drop environment, the learning curve is significantly reduced compared to traditional design tools.

TeamPassword’s engineers use components they’ve programmed to build prototypes in UXPin, so they can test, make changes, and iterate fast!

Take your prototyping and testing to the next level with the power of Merge. Visit our Merge page for more details and how to request access.

The post What’s the Difference Between UXPin and Merge Technology? appeared first on Studio by UXPin.

In 2016, we did an intense user research campaign. After 40+ interviews with design and engineering leaders and a survey of 3,100+ designers and developers, we concluded traditional design tools aren’t good enough to serve modern product development.

Workflows are too fragmented, disconnected, and unfocused. Design system tools must be a complete hub for design and development. 

We summarized our findings with three simple rules for our first release of UXPin Design Systems:

• Dynamic environment, not static documentation
• An actionable system, not a reference document
• Facilitate a connection between design and development, not just a library of design patterns

With these principles in mind, we released the first design system platform on June 13th, 2017.

UXPin’s Design System Libraries support various stages of design system maturity. The final stage is syncing design and development to create a fully integrated system where designers and engineers share one component library—a single source of truth.

UXPin Merge allows you to import code components from your design system’s repository as visual design elements. Designers can use these components to build prototypes using a simple drag-and-drop workflow. Merge components render on UXPin’s canvas exactly as they do in the repository, enabling designers to create fully functioning prototypes indistinguishable from the final product. 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

How to Create a Design System in UXPin

To begin, open the Design Systems tab in the top bar of your UXPin dashboard. Here, you can create a new design system or view existing ones. Let’s start by clicking the “Create Design System” button.

You can build a design system in two ways:

• Using an Existing Library: UXPin provides pre-built libraries that you can use as a foundation.
• Starting from Scratch: For this tutorial, we’ll start with a blank slate by clicking “Create from Scratch.”

Note: All examples here are created within UXPin, but UXPin Design Systems also support Sketch and Figma imports.

Create a Library of Styles

A solid design system begins with the most prevalent design elements—text styles and color palettes. UXPin lets you pull these directly from your design projects and save them in a shared Design Systems Library, which acts as an actionable toolkit for your product’s design system.

Adding Colors and Text Styles

To add colors or text styles, select the relevant layers in Sketch or UXPin. UXPin will automatically pull the styling and add it to your system. These styles stay synced with the library in UXPin or Sketch, making your system dynamic and up-to-date.

• Typography: Text styles can be added directly from the Editor, allowing you to maintain a consistent typography system across all designs.
• Colors: Add colors by typing their HEX code and pressing “Enter,” importing colors from a website URL, or linking directly to a CSS file. This ensures that all color palettes are centralized and easy to update.

Create a Library of Assets

Next, save your graphic design assets and share them alongside your colors and text styles—such as logos, approved stock photos, or icon libraries. These assets can be stored in the Design Systems Library, providing your entire team with easy access to a centralized design toolkit.

Assets: Upload images and icons in various formats, including SVG. This makes it easy to maintain a library of all design assets that can be reused across different projects.

Create an Actionable Library of Patterns

Design patterns are essential components and elements in your design system. In UXPin, you can create, save, and share these patterns, including those imported from Sketch. You can also add interactivity and animations, enabling designers to reuse these patterns without starting from scratch for each new project.

UI Patterns: These are reusable components and elements designed and prototyped in UXPin. Add them to your design system to ensure consistency and streamline the design process.

Generate a System and Keep it in Sync

Having a library of shared assets is an excellent first step, but it’s not enough to solve the problem of scaling software development.

Most solutions stop here and don’t move toward development. We’ve decided to go all the way.

In UXPin Design Systems, all the colors, text styles, assets, and patterns become a living system with one click. When you add new patterns, text styles, assets, or colors, UXPin automatically updates your design system and generates documentation. These changes are immediately available to all team members and stakeholders.

Add Documentation for Developers

Once you’ve built your system, you can add documentation, including code snippets for patterns and components. Developers can view this documentation with prototypes and mockups, keeping style guides, assets, and instructions in one platform for smoother, faster design handoffs.

Make Documentation Actionable

Design system documentation shouldn’t just be a reference document. It must be where the action is – inside the design projects.

With UXPin, your design system documentation follows your projects.

When you deliver a new release, UXPin automatically generates documentation from the product’s design system, including markup, imports, names of Javascript components, etc

Scaling Design Systems With UXPin Merge

UXPin’s Design System Libraries take you from stage one to three in design system maturity. The final stage is syncing design and development to create a fully integrated design system where designers and engineers share one component library–a single source of truth.

And that’s where UXPin Merge comes in.

Merge imports code components from your design system’s repository as visual design elements designers can use to build prototypes using a simple drag-and-drop workflow.

Merge components render on UXPin’s canvas exactly as they do in the repository, allowing designers to build fully functioning prototypes indistinguishable from code.

This high degree of fidelity and code-like functionality enables design teams to get meaningful, actionable feedback from usability testing and stakeholders who can interact and engage with prototypes as they would the final product.

Single source of truth

Merge also significantly enhances the product development process by centralizing the design system’s management and distribution from a single repository–no more managing UI kits and a component library with separate instructions and documentation to maintain.

Any changes to the repository automatically sync to UXPin, notifying teams of the update. With UXPin’s Version Control, designers can choose which projects to update and even revert to earlier design system releases when needed.

Teams can use Merge Design System Documentation or Storybook’s Docs (for Merge Storybook Integration) to manage documentation for all team members, simplifying one of the most time-consuming governance and maintenance procedures.

Scaling and streamlining with Patterns

UXPin’s Patterns enable design teams to create new patterns and templates by combining Merge components. They can use elements from the design system or combine components from other design systems.

UXPin’s Patterns are also helpful for saving multiple versions or states of a component, template, or screen, allowing designers to swap out and try different variations during testing or feedback sessions with stakeholders. These “on-the-fly” changes allow designers to iterate faster and maximize valuable testing time.

Final Thoughts

To recap, setting up a design system in UXPin involves:

• Creating and organizing design elements like colors, typography, assets, and UI patterns.
• Documenting each element with descriptions, code, and links.
• Using the Spec mode to inspect elements and ensure consistent implementation across your project.
• Scaling and syncing design and development with UXPin Merge to maintain a single source of truth.

By following this guide, you’ll be able to create, manage, and scale a comprehensive design system that supports your team from design to development. Visit our Merge page and explore how UXPin can transform your design workflow today! Request access to UXPin Merge.

The post Creating a Design System in UXPin – The 3-Minute Guide appeared first on Studio by UXPin.

Are you searching for the best UX tool? If so, then you might have noticed that the tools out there vary greatly in terms of the features they offer. Because of that, it can be hard to assess if the user experience software you’re considering genuinely has all you need. Or, even, if you’ll need to get multiple design tools just to create a prototype from start to finish.

Luckily, all hope is not lost, as there is a way to find the perfect design software for your upcoming project. We’ll show you what key features you should be looking for and why they are necessary for the design process that makes product development fast and easy.

Looking for a tool that will support your development and design collaboration? Try UXPin for free.

Build advanced prototypes

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

Try UXPin

How should your UX tool help you in the design process?

There are seven key features that you should check off your list while searching for the right UX design platform. You’ll want to look for design software that: 

It has real-time collaboration

Real-time collaboration will allow you to work together with your team on the same project whether team members are in the same room or not. This increases productivity and enables those who are working remotely to interact with other team members in real time. UXPin, for example, features advanced collaboration abilities that allow you to get feedback on projects, leave comments, and even share prototypes.

You can also save your project and flip through previously saved versions on command. For an enhanced collaboration environment, you can also integrate Slack and Jira. You can also see any edits made by team members, which helps keep everyone on the same page. 

It has convenient design handoffs

As you know, once the prototype process is complete, the next step is to hand the prototype off to developers so that they can create the finished product. Unfortunately, this process isn’t as simple as it seems. Most high-end tools like Adobe XD allow the user to share design documents with other team members. While this is a simple process, the problem is that your designs are typically going to be rendered in vectors. On the other hand, UXPin will render your designs in code.

Since the design documents will be rendered in code instead of vectors, developers will have a clear understanding of each component in your design. On top of that, when creating the final product, developers can refer to your coded designs, which results in a faster and more convenient development process. When it comes down to it, coded designs help ensure that there is no misunderstanding or complications while the team works on bringing the product to life.

It’s equipped with interactive prototyping

Interactive prototyping is becoming more and more popular because it allows you to explore different design ideas by creating an interactive environment that lets you put your idea to the test. It is also great when you want to explain a design or pitch an idea, as others will be able to better understand the value that your design offers. UXPin is equipped with interactive prototyping features, and with it, you can:

• Give engineers or stakeholders an interactive experience of your design so that they can fully understand and experience what your product will look like.
• Test your products with real-life users to gather more accurate feedback and data on how users will go about using your design.
• Design prototypes that function like the finished product by using features such as states, variables, advanced interactions, and more.
• Add details to make your prototypes look closer to the finished product by using the “auto-generate” feature that will add names, images, and more to your design.
• Create interactive components such as button hovers and conditional navigation flows so as to best show off your design. 

With UXPin, your prototypes don’t have to be static and non-clickable designs. Instead, you can create dynamic prototypes that accurately reflect the look, user experience, and functionality of the finished product. 

It helps stakeholders understand your design 

As you know, when it comes to designing a product, it is critical to make sure that stakeholders and other interested parties are on the same page. That is why it is important to keep them involved throughout the design process, from brainstorming new ideas to testing out your design.

So, you’ll want to make sure you have a UX tool that:

• Allows stakeholders to experience and test out prototypes and design components via an interactive experience. This will help them understand your design and how it will play out when it is finished.
• Gives stakeholders the ability to leave feedback on your designs throughout the design process. Tools like UXPin allow others to add comments and questions on designs. You can then easily reply to their feedback all without ever having to be in the same room as them.

It helps designers communicate with developers

Designers are not only responsible for creating the design, but also for showing developers how to create the finished product. And so, communication is critical—especially in this day and age where remote work is becoming more of the norm. Because of that, having the right communication tools have become an essential part of the design process.

So, using tools such as UXPin, you can ensure that there is better communication and understanding between you and the developers. With UXPin’s Merge technology, you can also use the Git repository and Storybook integrations which let designers use the same technology as developers so as to produce consistency between the two teams. Plus, there is no need for designers to compromise on their own design process. UXPin’s Merge technology ensures that there is no extra work that the designer needs to perform to achieve that level of consistency between the teams.

Lastly, because Merge is a tool that both developers and designers use, both will be able to work on projects together without complications.

It’s a tool that doesn’t require you to buy plugins

If you’re like me, then you may find it annoying whenever you buy a product only to find that many of its features are locked behind a paywall. Unfortunately, that can be the case with many design tools on the market. 

A lot of design software out there is lacking needed features. So, it is not uncommon for designers to find themselves having to purchase plugins to complete their product. 

Thankfully, you don’t have to buy any plugins when using UXPin as all the necessary features are built-in and come at no additional costs. In other words, UXPin comes with everything you need to carry out your design from start to finish.

It’s available on both Mac and Windows, and is cloud-based

Design tools like Figma are only web-based. Because of that, designers can run into compatibility issues when using different devices as well as various limitations. So, it is important to find design software that is compatible and available on multiple systems including Mac, Windows, and cloud-based systems.

UXPin works across systems and can be used through desktop apps as well as on the web. On top of that, you can even import your Figma design to UXPin so that you have access to more features and increase usability across systems. 

You’ll also be able to download UXPin to your computer or simply use the web-based version. By using the downloaded software, you will have the additional ability to work on projects when offline. 

What’s more, UXPin also has a mobile app view. This allows you to create and test prototypes for mobile devices, which greatly helps assess the user experience of an app.

Try UX Design with UXPin 

All in all, UXPin is really a one-stop solution for all designers. It comes with all the features you could need such as being able to scale a design on command or engage in interactive prototyping. 

UXPin also comes with some of the best collaboration features, which will allow you to cooperate seamlessly with your team—regardless of whether you’re all working remotely or not. Plus, it is available across devices and systems which will ensure that there are no compatibility issues among team members.

So, whether you’re building out a simple design or a complex system, UXPin has all the features you need to complete a project from start to finish. Try UXPin for free here.

The post How to Choose the Best UX Tool appeared first on Studio by UXPin.

Here are product updates that were released in UXPin in the last two months. They include new features, such as Paste & Replace, Flexbox for UXPin Merge, and a couple of usability and user management updates.

Paste & Replace

This feature allows you to copy an element to your clipboard, and then, swap it for an element that you have on the canvas with a key combination. Instead of deleting an element to paste another one in its place, use “Ctrl (Command) + C” to copy a component, image, shapes, etc. and paste it in the place of another element with a “Ctrl (Command) + V” key combination. It works for coded components, too.

Use New Canvas Sizes

Our users works with canvases instead of artboards as in Figma. When starting a new project, you need to adjust the canvas to your design purpose, be it a desktop application. You can do that in Properties Panel on the right.

We want to let you know that we’ve added new canvas presets, each corresponding to a device frame (like iPhone 15 Max). There’s also a corresponding device frame available for each new canvas size.

Set up Grid Styles

Grids in UI design and design systems are structural frameworks used to organize content on a page, ensuring consistency and alignment across different devices and screen sizes.

They serve as a foundational element in the layout of user interfaces, aiding designers in creating balanced, organized, and aesthetically pleasing designs.

UXPin now allows you to set up a predefined grid and add it to your design system library. You can set up a standard grid style and reuse it in every project.

Access specs with “Get Code” button

You might have noticed that we added a new button in the right corner of the editor – “Get code.” This button redirects you to Spec Mode, where you can find all the specifications needed to build the interface of your product with a single click, faster than ever.

In UXPin, you get all sorts of specifications (read about in in our docs):

• redlining
• grids
• style guide
• canvas size
• colors
• typography
• assets
• CSS code
• JSX code with dependencies

User management for project groups

Now, Account Owners and Admins can see all the project groups created in the account including private ones. When a member who owned a private group is removed from the team, the ownership automatically transfers to Account Owner or Admin.

This feature is available on demand for Advanced, Enterprise, and Merge users.

Flexbox for Merge components

Flexbox is a layout model in CSS that provides an efficient way to lay out, align, and distribute space among items in a container. It is particularly useful for creating responsive and dynamic layouts.

We added Flexbox for coded components that works like Auto-Layout. You’ll find it on the right panel and the context menu. It’s an easy way to align, distribute, set gaps between elements, and adjust components responsively.

Usability improvements

We also added a couple of usability tweaks:

• Panel management in the Editor – to give you more flexibility, we tweaked the way you can use Panels. You can open “Pages & Layers” and “Design System Library” panels at the same time.
• Select nested components – in “Get Code” mode, hold “Command/Control” key and click on the nested component that you want to inspect. This is a faster way of inspecting individual components compared to the old way of selecting them through the Layers Panel.

Suggest new features to add to our roadmap

At UXPin, we’re always looking to improve and make your experience even better. If you have a brilliant idea or a feature you wish to see in our product, we’d love to hear from you.

Your feedback is incredibly important to us. Drop us an email at hello@uxpin.com with your suggestions and ideas for new features. Whether it’s a small tweak or a big addition, your input can help shape the future of UXPin. Haven’t used UXPin in a while? Start a free trial.

The post Product Updates August 2024 appeared first on Studio by UXPin.

As part of our commitment to help you create consistent user interfaces, we’re excited to introduce Color Tokens — a powerful tool that brings a new level of precision and organization to your design workflow.

In open beta, you can set up a color token library, easily update your design system and control colors of your components. In the future, you will be able to facilitate the full design process with colors. Follow along the advice posted in this article. Set up a UXPin account. Try UXPin for free.

Build advanced prototypes

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

Try UXPin

What are Color Tokens?

Color tokens are a set of predefined, reusable variables representing colors used in a design system.

Instead of manually applying hex codes or RGB values across different elements, designers can now use these tokens to ensure uniformity, consistency, as well as simplify updates and maintenance of colors in their design system.

Learn more about design tokens: What are design tokens?

Why Are Color Tokens Important?

Color Tokens help keep designs consistent by using the same colors across projects. They make updates easy, reducing manual work. They also help teams use a common set of colors, so everything looks cohesive and in line with company standards.

1. Consistency: By using Color Tokens, teams can ensure that the same color values are applied consistently across all design assets, eliminating discrepancies and maintaining brand integrity.
2. Efficiency: Tokens streamline the design process by reducing the need for repetitive tasks. When a color change is required, tokens can help designers and engineers do it quickly, saving time and reducing errors.
3. Collaboration: Color tokens facilitate better collaboration between designers and developers. With a shared language and defined color standards, design handoffs are smoother, and the implementation is more accurate.

How to Access Color Tokens in UXPin

Before you can access Color Tokens, you need to set them up. You can do that manually or convert an existing library into a Color Token library. See UXPin’s documentation for detailed instructions: Color Design Tokens.

Convert an existing library

If you created a Color library in UXPin before July 17th, 2024, you can convert it to a token library and use the saved colors as token colors.

Open the existing library, click Library Settings and Click ‘convert library to use colors as tokens’. Save changes and you’re good to use those colors as tokens.

Set up a new library

To create a Color Token library, you need to navigate to Design System Library in UXPin. Open Design System Libraries (or press “cmd” + “2” to get there faster).

Then, at the bottom of the panel, click “+ New library”. Navigate to the colors section and get ready to add Color Tokens.

You can set up Color Tokens in two ways:

• Copy colors from selected elements – select one or more elements on the canvas and click “+Add” in the library panel to add the colors as tokens.
• Type in a color HEX code – enter the HEX codes to set up Color Tokens automatically.

The colors from your library will also appear in the Color Picker, so you can quickly apply them to elements on the canvas. Select the element that you want to switch a color of and choose an appropriate color from the library.

This trick works for setting up the colors for properties like fill, border, and shadow.

What Can You Do with Color Tokens in UXPin?

1. Change colors of elements that you have on the canvas – Pick an element and add a color to it from the saved Color Tokens.
2. Update colors in your design system – If you use a design system, you can now try new colors and change your design system library for a more modern look.
3. Maintain a uniform look within a project – Access the same Color Tokens in every new prototype that you and your teammates create within a project.
4. Share Color Tokens across your organization – Share your design system library with tokens across your organizations, so everyone can use the same Color Tokens.
5. Manage Color Tokens as you like – Set up new Color Tokens, update existing ones, share them with your team, and more. 

A Step Towards Comprehensive Design Tokens

Introducing Color Tokens is just the beginning. At UXPin, we understand that Design Tokens extend far beyond color. As part of our commitment to creating a robust design system, we are actively working on expanding our token offerings to include typography, spacing, and other design elements.

This comprehensive approach will further enhance consistency, improve scalability, and streamline the entire design-to-development workflow.

Use code-backed components in both design and development. Build advanced prototypes effortlessly and generate production-ready code directly from the design. Try UXPin for free.

The post Color Tokens in Open Beta – Simplify Color Management appeared first on Studio by UXPin.

Mobile-first design is an approach to designing UIs that prioritizes small-screen experience. Given that different devices need different layouts based on their screen size and orientation, it makes sense to design multiple arrangements for your users. This article will show you how to create a mobile-first prototype of a product and transform it into tablet and desktop screens.

Make your own responsive or adaptive variations right in UXPin. Create a mobile-first design and scale it up for tablet and desktop views in UXPin – an advanced prototyping tool. Go ahead and create a free trial and follow along below.

Build advanced prototypes

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

Try UXPin

What is Mobile-First Approach?

The mobile-first approach is designing for the smallest screen and working your way up. It is one of the best strategies to create either a responsive or adaptive design.

• The mobile-first approach is a tenet of progressive enhancement. It is the ideology that mobile design, as the hardest, should be done first. Once the mobile design questions are answered, designing for other devices will be easier. What it boils down to is that, the smallest of the designs will have only the essential features, so right away you have designed the heart of your UX.
• The opposite approach is graceful degradation. This incorporates all of the complexities right from the start, then strips them away later for smaller devices. The problem with graceful degradation is that when you build the all-inclusive design right from the start, the core and supplementary elements merge and become harder to distinguish and separate. The entire philosophy runs the risk of treating mobile design as more of an afterthought since you’re “cutting down” the experience.

We, along with others, strongly recommend progressive enhancement with a mobile-first approach. In this post, we’ll explain tips & techniques, then finish off with a hands-on lesson in which we build a hypothetical website with the mobile-first workflow.

Mobile-first design is also a response to the realities of modern user behavior and technological advancements, such as increasing mobile usage, future-proofing the design, and more. By prioritizing mobile, designers can ensure a more effective and efficient design process that meets the needs of the majority of users.

Who uses Mobile-First Design?

Mobile-first design has been adopted by numerous organizations across various industries. Here are some notable examples and case studies of companies that successfully implemented mobile-first design.

1. Google

• Context: As a leading technology company, Google recognized the shift toward mobile usage early on.
• Implementation: Google began encouraging a mobile-first approach through initiatives like AMP (Accelerated Mobile Pages) and mobile-first indexing.
• Outcome: Websites adopting Google’s mobile-first guidelines generally experienced improved mobile performance and search rankings. Google’s emphasis on mobile-friendly designs helped shape industry standards and practices .

2. Dropbox

• Context: Dropbox transitioned from a desktop-centric service to a mobile-friendly platform to meet user demands for accessibility on-the-go.
• Implementation: They adopted a mobile-first approach in redesigning their app, focusing on a simplified, intuitive interface for mobile users first and then scaling up for desktop users.
• Outcome: The redesign led to a more consistent user experience across devices and contributed to increased mobile engagement and user satisfaction .

3. BBC

• Context: The BBC needed to reach a global audience on various devices, particularly mobile phones, given the increasing consumption of news on the go.
• Implementation: They adopted a mobile-first strategy for their website and apps, ensuring content was accessible and optimized for mobile devices.
• Outcome: The BBC saw a significant improvement in mobile traffic and user engagement. Their responsive design approach also made it easier to manage content across multiple platforms .

4. Flipkart

• Context: Flipkart, a major e-commerce company in India, recognized the growing trend of mobile commerce in the region.
• Implementation: They adopted a mobile-first approach to design their app and website, focusing on fast load times, simplified navigation, and a user-friendly interface.
• Outcome: This approach contributed to a surge in mobile transactions, with Flipkart reporting that a large majority of their sales came from mobile devices .

5. Airbnb

• Context: Airbnb aimed to create a seamless experience for travelers and hosts who increasingly relied on mobile devices.
• Implementation: They redesigned their platform with a mobile-first mindset, prioritizing mobile usability and a responsive design that adapted to various screen sizes.
• Outcome: The mobile-first design contributed to higher user satisfaction, increased mobile bookings, and a more consistent user experience across devices .

6. Spotify

• Context: Spotify needed a mobile-friendly design to cater to users who accessed music primarily through mobile devices.
• Implementation: Spotify embraced mobile-first design principles to ensure a seamless, intuitive user interface on mobile devices before adapting it for desktop users.
• Outcome: This approach enhanced user engagement and satisfaction, with the majority of Spotify’s user base accessing the service via mobile devices .

Mobile-First means Content-First

If your site is good on a mobile device, it translates better to the rest of devices, be it tablet, desktop computer or laptop. More important, though, is that a mobile-first approach is also a content-first approach. Mobile has the most limitations, screen size, and bandwidth to name a few, and so designing within these parameters forces you to prioritize content ruthlessly.

The mobile-first approach organically leads to a design that’s more content-focused, and therefore user-focused. The heart of the site is content — that’s what the users are there for.

One caveat, though, is that mobile users sometimes require different content than desktop users. Device-specific content can be gauged by considering context — what, in a given situation and a given environment, will your user appreciate more. The best way to plan ahead for these is by creating user scenarios.

Another advantage to the mobile-first approach is that the small-screen breakpoints can better fit around the content. Again, the alternative is worse: having to squeeze an already plump design into a tiny framework. But with the mobile-first approach, the breakpoints develop naturally around content, so you don’t need any awkward edits.

What is mobile-first design framework?

We’ll describe a process that helps our designers at UXPin.

As usual, wireframing is a recommended early step to most efficiently structure your layout. When wireframing or prototyping, we use the responsive breakpoint menu to streamline the process of moving to different screen sizes, starting with the smallest.

These presets layout the proper screen size for you, so you can wireframe keeping only the content in mind.

Our procedure follows these steps:
1. Content Inventory — This is a spreadsheet or equivalent document containing all the elements you want to include. Learn more about doing an inventory of content.

Source: Maadmob

2. Visual Hierarchy — Prioritize the elements in the content inventory and determine how to display the most important elements prominently. Learn more about visual hierarchy.

3. Design with the smallest breakpoints and then scale up — Build the mobile wireframe first, then use that as the model for larger breakpoints. Expand the screen until there’s too much negative space.

4. Enlarge touch targets — Fingers are much wider than pixel-precise mouse cursors, and so need larger elements on which to tap. At the time of this writing, Apple recommends 44 pixels square for touch targets (read about mobile design for iOS and Android). Give hyperlinks plenty of space, and slightly enlarge buttons, and make sure that there’s enough space around all the interactive elements.

5. Don’t count on hovers — It almost goes without saying, but designers often rely on hover and mouseover effects in their interactive work. If you’re thinking mobile-friendly, don’t do that.

6. Think “app” — Mobile users are accustomed to the motion and a modicum of control in their experience. Think about off-canvas navigation, expandible widgets, AJAX calls, or other elements on the screen with which users can interact without refreshing the page.

7. Avoid large graphics — Landscape photos and complex graphics don’t display well when your screen is only a few inches across. Cater to mobile users with images that are readable on handheld screens.

8. Test it in a real device — Nothing beats discovering for yourself how usable a website is (or isn’t). Step away from your desktop or laptop computer and load up your product on a real phone or tablet. Tap through pages. Is the site easy to navigate? Does it load in a timely fashion? Are the text and graphics easy to read?

This is just a basic outline. For the complete guide to our process, download the free Content Wireframing for Responsive Design.

How to Create Mobile-First Design

We prepared for you a tutorial that will explain how to create a mobile-first design. Our mobile-first design tutorial has four steps.

• Step 1: Set your content priorities.
• Step 2: Design smartphone view.
• Step 3: Work on tablet view.
• Step 4: Create desktop view.

Step 1: Set your content priorities

A “mobile-first approach” differs from “desktop-first” in that we add information to each progressively larger layout rather than cut away as we design smaller. Thinking mobile doesn’t mean eliminating information. It means sorting information into primary, secondary, and tertiary content.

In this example, we know that the home page should have certain elements, like the company’s name and links to products. A blog post wouldn’t hurt either. But like we said, not everything will fit into a smartphone view, so we set priorities based on what will achieve the site’s goal: selling bikes.

1. The newest model bike

2. The best-selling bike

3. “Find your perfect ride” CTA

4. Company name and hero image

5. Navigation

6. Search

7. The second-best-selling bike

8. Gift certificates

9. A testimonial

10. The latest blog post

Based on that ordered list, we can create with the confidence that our work will solve a design problem of getting sales.

Step 2: Design smartphone view

How much do users need?

Thinking mobile-first forces us to think about what’s really important. In this smartphone view, the top-selling bike and newest model will lead directly to sales, so can we leave other items — such as gift certificates, a less-popular model, the latest news — for inside pages. The final call to action is especially prominent and easy to hit with a single tap of the finger.

Step 3: Work on tablet view

As we design for a tablet-sized view, we’re better able to add secondary information like additional products (e.g. “The Capacitor”). We can also expand the navigation at the top of the page and add content that encourages sales without actually leading to them — namely, the testimonial.

Because more options are available, this can be surprisingly more difficult than deciding what to include in a smartphone UI. The difference between secondary and tertiary elements is a blurry line, and temptation is strong to include everything.

Resist the urge. Use the ordered content list. Like smartphones, space is still limited.

Step 4: Create desktop view

Finally, the desktop view can support as much information as you decide is important. This is where the home page can accommodate all of the information you see fit, whether or not it fits. Notice some of the additional content we’ve included:

• Gift certificates
• Customer testimonials
• Blog post exploring the newest Lightning Bolt bike

Design device-appropriate layouts yourself

If you’re using UXPin, it’s fairly easy to create different layouts for these views.

1. Open a UXPin prototype.
2. Tap “Add new adaptive version” at the bottom right of the UXPin editor
3. Choose a preset size or enter your own dimensions.
   
4. You don’t have to recreate everything from scratch. Choose a size from which to copy your design’s elements.
   

And that’s it. Switch between breakpoints by tapping the different sizes above your canvas, and adjust each to suit your needs. If you’d like to try prototyping mobile-first yourself, go ahead. Start a free trial in UXPin.

The post A Hands-On Guide to Mobile-First Responsive Design appeared first on Studio by UXPin.

Figma is a great tool for creating beautiful mockups and collaborating in real-time with other designers. It is one of the best for building a portfolio and showing off your skills. When working in an enterprise-level company, Figma might not be enough, as it’s difficult to translate its design into code.

This is where UXPin comes in. It helps designers and developers communicate and use a shared library of UI components which can be copied from design to development workflow. No translation needed. That’s why we decided to build a Figma plugin and help you bring Figma design to UXPin for more robust prototyping. Sign up for a free trial to build your first UXPin prototype today!

Build advanced prototypes

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

Try UXPin

Design in Figma. Prototype in UXPin.

We get it. You love designing in Figma! But, you also prefer the higher fidelity and functionality you get from prototyping in UXPin. If this is you, UXPin’s Figma plugin gives you the best of both worlds–design your mockups in Figma, and copy your screens to UXPin for prototyping.

While this workflow offers the best of both worlds–and we encourage teams to implement solutions that work best for your product and circumstances–designers must use two tools when they can use UXPin for everything. UXPin is effective as a design and prototyping tool and comes packed with features to scale UX beyond what’s possible in any image-based tool.

Why does it make sense to prototype in UXPin vs. Figma?

Figma, Adobe XD, Sketch, and others render static vector graphics, meaning designers can’t replicate code, and when they do, it takes a lot of effort, workarounds, and additional tools.

UXPin is a code-based design tool. This doesn’t mean designers work with code; UXPin renders HTML, CSS, and Javascript behind the scenes to give designers the same fidelity and functionality as code.

These four features powered by code allow designers to create more advanced prototypes in UXPin.

States

UXPin States allows designers to create multiple states for a single component. For example, a button can have several states, which include different properties triggered by user interactions.

States also allow designers to create complex components like functioning dropdown menus, steppers, carousels, accordions, and more.

Interactions

Designers can create complex UXPin Interactions constrained by code rather than a design tool’s limitations. UXPin also offers many Triggers, Actions, and Animations to design immersive prototype experiences.

Conditional Interactions with “if-then” and “if-else” conditions allow design teams to create dynamic prototypes that respond to user inputs and triggers. This Javascript-like interactivity lets designers see how design decisions impact the user experience and pinpoint areas for improvement.

With these realistic interactions, stakeholders and engineers need little explanation making the feedback process and design handoffs more productive.

Variables

It’s impossible to test forms in most design tools, including Figma. Why? Because the fields are images rather than inputs. In UXPin, form fields function as if they were developed by an engineer. UXPin gives designers text inputs, checkboxes, radios, selects/dropdowns, multi-selects, and buttons ready to use out of the box.

With Variables, designers can capture user inputs from prototypes and use that data elsewhere in the application. For example, capturing a user’s information during signup and using the name field to create a personalized welcome message.

Expressions

UXPin’s Expressions enable designers to take prototyping far beyond the possibilities of any other design tool. Validate passwords and other form fields, design a functioning shopping cart that updates based on user interactions, create dynamic error messages, and more.

When combined with other UXPin features like States, Interactions, and Variables, Expressions enable designers to build prototypes, and user flows indistinguishable from code.

Learn more about these and other advanced UXPin features in this YouTube tutorial from UX design influencer Jesse Showalter.

5 Reasons to Turn Your Figma Mockups into Interactive UXPin Prototypes

1. High-Fidelity Prototyping

Figma: Beautiful-looking vector mockups that unfortunately don’t replicate real-like functionality or fidelity, making prototypes challenging to interpret for devs and stakeholders.

UXPin: Code-like fidelity and functionality allow designers to create immersive, dynamic prototype experiences indistinguishable from the final product–less documentation, smoother design handoffs, and faster time-to-market.

There is a big difference between a high-fidelity mockup (what Figma, Sketch, Adobe XD, etc. produce) vs. a high-fidelity prototype that looks and feels like the final product. UXPin offers genuine high-fidelity results where prototypes need little or no explanation because they respond to user interactions like code.

2. Bridging the Gap Between UI Design and REAL Prototypes

Figma: Design and develop UI design ideas in Figma

UXPin: Push past Figma’s limitations to create advanced prototypes in UXPin

While Figma offers the features to create beautiful designs and mockups, designers hit a brick wall at the prototyping stage. UXPin’s Figma plugin allows design teams to leverage the best qualities of both tools to create high-fidelity prototypes in UXPin.

Make changes and iterate on UI designs in UXPin, or only use it as a prototyping tool using Figma for designing and editing–the choice is yours!

3. Enhanced User Testing

Figma: Testing limited to basic click/tap interactions, user flows, and navigation

UXPin: Immersive prototypes that accurately replicate the final product

Figma’s vector-based constraints and limitations prevent accurate testing. Designers must use multiple frames to achieve basic interactivity, and many components are impossible to reproduce.

As a code-based design tool, UXPin enables designers to build prototypes limited only by  the feasibility of what devs can build–without writing a single line of code! These complex, dynamic prototypes give design teams valuable insights to improve the user experience and identify business opportunities.

Designers also pinpoint critical usability and accessibility issues when testing with UXPin prototypes, resulting in less UX debt and higher quality design project outcomes.

4. Faster Iterations

Figma: Multiple frames and components to mimic end-product’s behavior–changes and redesigns are time-consuming

UXPin: Uses layers and states on a single screen allowing changes in a few clicks

One of the challenges with prototyping in Figma is that designers must create multiple frames and components to mimic code’s interactivity. These interactions feel awkward and non-intuitive. They’re time-consuming to design and make changes.

In UXPin, designers work with pages and layers. Instead of switching between multiple frames and pages, designers work on a single canvas, making changes via the Properties Panel. This workflow is more intuitive and facilitates faster iterations so that designers can solve issues much quicker.

5. Smoother Design Handoffs

Figma: Lots of documentation, back and forth comms with devs, videos/GIFs to mimic interactions, and links to other tools

UXPin: Prototypes replicate the end-product experience and interactivity, reducing the need for lengthy documentation and additional tools

Designers often use tools like After Effects and others to replicate motion and interactions. Why? Because design tools lack fidelity and functionality. Designers also create transitions and interactions that engineers can’t reproduce due to technical constraints. Switching between multiple tools and files is also confusing, time-consuming, and increases errors.

With UXPin, designers don’t have to use additional tools because they can design components and interactions that accurately mimic code. No need for videos/GIFs, back-and-forth communication, and long-winded PDFs to explain what the prototype is supposed to do.

Designers can create documentation in UXPin with annotations on prototypes, so engineers and stakeholders don’t have to switch between multiple files–everything is in one place! Devs and stakeholders can use UXPin’s Comments on Preview to ask questions, tag team members, and even assign comments for edits.

With realistic prototypes, supporting documentation, and collaboration in one place, design handoffs are smoother with less friction in UXPin.

UXPin–An End-to-End Design Solution

While you can design in Figma and prototype in UXPin, it means using two tools when you only need one! UXPin offers a comparable design experience to Figma, including collaboration, wireframing, information architecture design, mockups, and designing components from scratch!

With UXPin’s end-to-end design solution, designers don’t need to switch between tools because they can do everything inside UXPin, including building, managing, and sharing a design system.

Reducing tools not only streamlines UX workflows but also reduces costs, allowing design leaders to reallocate valuable resources elsewhere.

Stakeholders have little time or patience to decipher image-based prototypes and the accompanying documentation. UXPin prototypes need less explanation, allowing stakeholders to enjoy a final product experience. This immersive experience elicits meaningful stakeholder feedback while increasing buy-in for design solutions.

Say goodbye to the limitations of image-based design, and hello to enhanced prototyping, collaboration, and design outcomes with UXPin. Discover how UXPin can revolutionize your product design workflows and deliver exceptional user experiences to your customers. Sign up for a free trial.

The post Turn Figma Designs into Interactive Prototypes 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.

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

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

Ready to give Merge AI a go? All the features we will talk about are available on trial. Try UXPin Merge for free.

Design UI with code-backed components.

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

Try UXPin Merge

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

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

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

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

Quick instruction:

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

Use pre-built layouts and patterns

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

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

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

Instruction:

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

AI Component Creator for ChatGPT wizardry

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

What we added: AI Component Creator

Instruction:

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

UXPin and StackBlitz integration

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

What we added: Stackblitz integration for easy code export.

Instruction:

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

Export clean and working code off UI

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

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

What we built: Code export.

Instruction:

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

Try Merge AI for free

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

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

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

Evolution of UXPin

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

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

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

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

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

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

The Journey to Change

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

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

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

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

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

AI Component Creator

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

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

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

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

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

Open-source UI component libraries

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

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

1. Tailwind UI

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

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

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

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

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

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

2. MUIv5

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

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

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

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

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

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

3. Antd (Ant Design)

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

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

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

4. React Bootstrap

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

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

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

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

Templates

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

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

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

The templates include:

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

Spec Mode Improvements (Beta)

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

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

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

JSON Tree Viewer

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

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

Start Using UXPin Merge

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

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

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

The post Product Announcement – Helping You Bring Design Vision to Life appeared first on Studio by UXPin.

Overwhelmed by the plethora of Adobe XD alternatives? Are you looking for an upgrade to Adobe XD rather than a copy of your existing workspace? Discover why UXPin is the best Adobe XD alternative and the benefits of using a code-based design platform. We also introduce Merge and how this revolutionary technology bridges the gap between designers and engineers while creating a single source of truth for design systems.

Key takeaways:

• Adobe XD was a prominent vector-based design tool, but its standalone version is no longer available for new buyers.
• Consider intuitive UI, prototyping capabilities, design systems, collaboration features, and cost-effectiveness when seeking an Adobe XD alternative.
• UXPin Merge is a great choice, offering advanced code-based design capabilities over traditional vector-based tools.
• Unlike many Adobe XD alternatives, UXPin Merge addresses challenges across the product development spectrum, streamlining workflows for all stakeholders.

Connect design and development teams with a single source of truth – coded components that can be used across prototyping, design handoff, and app development stages of product creation. Learn more about it. 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 Adobe XD?

Adobe XD is a vector-based UI/UX design software developed and maintained by Adobe. It caters to web and mobile app design, an end-to-end solution for designers to create wireframes, mockups, and prototypes.

Some noteworthy features include:

• Vector Design and Drawing Tools: Adobe XD enables designers to create and edit intricate vector designs, ensuring sharp outputs regardless of the display size.
• Repeat Grid: This feature streamlines design processes. Designers can replicate elements like lists or photo galleries with a few clicks, reducing tedious, repetitive tasks.
• Prototyping: Designers can link artboards, adding animations and microinteractions to mimic interactivity. 
• Voice Design: Adobe XD supports voice commands, making designing voice user interfaces and integrating voice triggers possible.
• Responsive Resize: Automatically adjust and resize elements to fit different screen sizes, ensuring designs look good on all devices.
• Collaboration Tools: Adobe XD isn’t just for solo designers. Teams can comment, share, and co-edit in real time with in-app collaboration tools.
• Integration Capabilities: It seamlessly integrates with other Adobe Suite applications and some third-party tools, bridging the gap between prototype and final output.

Is Adobe XD Discontinued?

Contrary to speculation on social media, Adobe has not discontinued Adobe XD. While it’s no longer available as a single application for new buyers, it will continue supporting existing customers. You must purchase the Adobe Creative Cloud All Apps subscription to access Adobe XD as a new customer.

What to Look for in an Adobe XD Alternative?

If you’re an avid Adobe XD user, then you’ll want a design tool that’s comparable or better. Here’s a breakdown of essential aspects:

• User-Friendly UI: Design tools should simplify, not complicate. An intuitive interface speeds up the design process, reduces learning curves, and increases efficiency.
• Prototyping Capabilities:
  • Real-time Previews: Witness design changes as they happen.
  • Interactive Prototyping: Add life to prototypes with interactive elements, microinteractions, and animations.
  • Responsiveness: Your tool must allow you to create multiple viewports for designs with minimal effort.
• Design Systems: A must-have feature in modern digital product design. Guage a design system feature by its ability to bridge the gap between designers and engineers.
• Collaboration Features:
  • Commenting: Offer insights directly on designs.
  • Sharing: Distribute prototypes for feedback.
  • Real-time Collaboration: An integrated chat feature allows design teams to collaborate without leaving the workspace.
• Design Handoff: A seamless transition curtails back-and-forths between design and development teams. Look for tools that generate accurate specs, assets, and code snippets.
• Platform Integration: Integration capabilities mean less juggling between applications, promoting a unified workflow.
• Cost-effectiveness: A stellar design tool won’t drain budgets. Opt for solutions that offer robust features without a hefty price tag, ensuring value for every dollar spent.

What’s an Alternative to Adobe XD?

While vector-based tools like Adobe XD, Figma, and InVision have dominated the design scene for years, there’s a notable shift towards code-based platforms like UXPin. 

With UXPin’s Merge technology, designers can go beyond basic prototypes to advanced code-based replicas that look and feel like the final product. Some advantages of using Merge and code-based design platforms include:

• Realistic Interactive Prototypes: Code-based tools like UXPin mirror the final product, allowing designers to get high-quality insights from testing.
• Dynamic Elements: Unlike static elements in vector-based tools, UXPin has live code UI components with states, styling, logic, and real data.
• Seamless Handoff: Designers and developers speak the same language based on code via Merge, creating a smoother workflow with seamless handoff and fewer revisions.
• Superior Performance: Merge components have complex interactions and animations without lag or stutter, accurately replicating a final product experience.
• Desktop and Web Applications: Designers can use UXPin’s desktop application offline (Windows and MacOS) or web app with a comparable user experience in both environments.
• All Features Built-in: UXPin is a full-stack design tool with everything designers need from concept to final delivery, eliminating the need for plugins, extensions, and other third-party apps and subscriptions.

How is UXPin Used for Prototyping?

Merge creates a drag-and-drop prototyping environment in UXPin–like Logo blocks for designers. Every component has styling, interactivity, content, and other properties programmed into it from the design system’s repository, ready to start prototyping.

The design system team can include foundational UI elements to complete screen templates so designers can build prototypes faster. Any API components with connections are also available for designers to use in UXPin.

The design system team uses React props (or Args for the Storybook Integration) to give designers access to component properties, like text styles, sizing, colors, interactivity, and more.

Designers grab a component from UXPin’s Design System Libraries and adjust its properties via the Properties Panel. They can also switch to JSX mode to view and make changes in code.

Testing in UXPin with Merge

These fully interactive prototypes increase prototyping scope, allowing designers to build and test complex interfaces and user flows that usually require technical input from devs.

Designers can test prototypes in the browser using Preview and Share or UXPin Mirror for native iOS and Android app testing. They can send stakeholders a link to view the prototype and share feedback by annotating using UXPin’s Comments.

“Our stakeholders are able to provide feedback pretty quickly using UXPin. We can send them a link to play with the prototype in their own time, and UXPin allows them to provide comments directly on the prototypes. UXPin’s Comments functionality is great because we can follow along and mark comments as resolved once we address them.” Erica Rider, Product, UX, and DesignOps thought leader.

How is UXPin Used for the Design Handoff?

Design handoffs with Adobe UX and other vector-based design tools are notoriously challenging, often fraught with friction and many calls with designers trying to explain mockups and prototypes to devs and developers trying to explain technical limitations to design teams.

UXPin’s Merge technology smooths the transition from design to development because every team and department works with the exact same component library, from the exact same repository. This single source of truth means design handoffs require less documentation and explanation.

Engineers simply import the component repository into their project, copy interfaces from UXPin, and apply the same component properties using props or Args.

How is UXPin Used for Design Systems?

UXPin offers a design system solution for every stage of maturity, from creating a design system to a fully integrated UI library using Merge technology where designers and engineers use the same components.

Merge enables organizations to sync a UI library from a repository to UXPin’s design editor so designers use the same design system components in the design process as devs use to develop the final product.

Any changes to the repository automatically push to UXPin and notify teams of the latest release. UXPin’s Version Control allows designers to decide when they switch to the new release, and they can revert to earlier versions whenever they want. 

This code-based approach to design systems gives organizations a real single source of truth, where every team uses the same UI library, and powerful Merge automation keeps everyone in sync with a single release–no need to update code and design separately.

How is UXPin Used for Collaboration?

UXPin’s Comments are perfect for modern digital product design where teams work asynchronously. Slack and Jira integrations keep cross-functional teams in sync and constantly updated.

Comments functions like a chat app within UXPin. Team members can assign comments and mark them as resolved once actioned. Email notifications keep everyone updated. Designers can invite stakeholders to collaborate in UXPin, even if they don’t have an account, reducing the need to purchase extra seats.

Why UXPin Merge Beats the Best Adobe XD Alternatives

Where do Zeplin, Proto.io, Marvel, Figma, and other Adobe XD alternatives get wrong? These graphic design, prototyping, and editing tools focus on optimizing the designer workflow and UI design, neglecting other vital stakeholders and interactivity prototyping.

UXPin and Merge technology benefit the end-to-end digital product development process, including designers, product managers, engineers, DesignOps, and DevOps, by facilitating a single source of truth for cross-functional teams.

While there are many Adobe XD alternatives, UXPin is the only platform that solves many product development challenges by bridging the gap between design and development.

Are you still working with image-based tools with multiple platforms to achieve code-like results?

Switch to UXPin and instantly sync design and development with a single full-stack product design solution. Visit our Merge page for more details and how to request access.

The post The Code-Based Adobe XD Alternative – UXPin Merge appeared first on Studio by UXPin.

Here’s some news that will make you rethink how you’re running usability testing. UXPin has an integration with FullStory, one of the leading product analytics tools. Get valuable insights on how your end users will interact with your product right at the prototyping stage.

Key takeaways

• UXPin integrates with FullStory, so you can get quality insights about your design on the prototyping stage.
• UXPin and FullStory integration is available for everyone – you just need an active FullStory account to support it in UXPin.
• Test your products before committing resources to having them built, get quality test results, and run remote testing sessions with ease.

Design fully interactive prototypes that your test subjects can use like end-products. Build sortable data tables, interactive input fields, and clickable buttons that can be easily handed off for development. Get a free trial of UXPin.

Build advanced prototypes

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

Try UXPin

About UXPin and FullStory Integration

UXPin is an end-to-end design tool for building prototypes and handing them to the development team. Many design teams use UXPin’s preview mode to test the prototype’s user flow and get feedback from real users. The feedback helps them iterate on design and build an end-product that their users love.

When integrated with FullStory, UXPin gives the designers even more power when conducting user testing. They don’t need to worry about recording the session, writing down what users did, where they clicked or what they couldn’t understand. FullStory has their back. FullStory tracks the user’s behavior, making it super easy for you to conduct usability tests right in UXPin.

Catch every detail

With FullStory integration, designers can rest assured that every user action will be documented. They can analyze it later or share it with stakeholders for additional feedback. It makes testing a lot easier, doesn’t it?

Focus on facilitating

When you have a tool that records your users every move, you can focus on what you’re good at– facilitating the session. Gain the time to ask follow-up questions, record where users have their points of friction, and any feedback that they had to you. When a tool documents users’ movements, you get a bandwidth to focus on their reactions.

Run remote tests

UXPin’s FullStory integration simplifies remote user testing for you. It gives you a way to run tests without the need to be in the same room as your test participants and everything gets recorded. How does it work?

1. Send your prototype to your test subjects.
2. Run a live test – they don’t need a UXPin account to interact with the prototype.
3. See how FullStory saves their actions for you.

Record stakeholder feedback

The same way you send your prototype to users, you can share it with any stakeholder who needs to see the design. Track whatever they do and act on feedback fast.

How does it work?

The integration with FullStory is available for everyone who uses UXPin. To use it, you need to have an account in UXPin and FullStory. Here’s how to sync the tools together.

1. Log in to UXPin.
2. Go to the Integration page in Settings.
3. Paste in your FullStory Org Id and click ‘Apply.’
4. Open the prototype that you want to enable tracking for.
5. Open the Share modal and select the “Record user’s actions.’ 
6. Copy the preview link listed below.

Find more details on how to connect and use integration in our help documentation.

UXPin is making this integration available for trial users, too. So, go ahead, give this integration a shot. Start a free UXPin trial.

Try our FullStory integration

Conduct user testing sessions right at the prototyping stage. Learn how end-users interact with your design before committing resources to having it built.

Since design and prototyping is a much lower investment from the business point of view for the company, such product teams can create a better ROI on their work and ship their products to market faster, gaining the upper hand over their competitors.

What makes UXPin stand apart from other prototyping tools is that all visual elements and UI components are, in fact, HTML & CSS-based, which gives you the power of creating fully interactive prototypes without asking devs to help you.

Check how UXPin’s FullStory integration works. Sign up for a free trial.

The post FullStory Integration – Test Usability inside UXPin appeared first on Studio by UXPin.

Design systems streamline the product design process, ensuring consistency and scalability across teams. Figma and UXPin, offer robust solutions, each with unique features tailored to different needs. This article explores Figma’s Team Library, its benefits, and potential drawbacks. We also present an alternative to Team Library with UXPin’s Design Systems and Merge technology.

Key takeaways:

• Figma’s Team Library facilitates creating and sharing design systems, ensuring consistency.
• Figma’s Design Systems, while advanced, still present challenges in bridging the gap between designers and developers.
• UXPin’s Merge surpasses Figma’s Team Library in centralized management, ultimate consistency, and supporting multiple front-end technologies for a unified design-to-development process.

Create a single source of truth across your organization and simplify your product development process with UXPin’s Merge technology. Discover UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

Can you Create a Design System in Figma?

The Team Library feature allows designers to create design systems in Figma. They can publish and share UI components and styles across different files and projects. When design elements are updated, every design file using them remains consistent and up-to-date, keeping the entire organization in sync with the latest release.

What is Atomic Design–And How Does it Apply to a Figma Design System?

Figma has designed its Team Library around Brad Frost’s Atomic Design principles. Atomic Design breaks user interfaces down as follows:

• Atoms: These are the fundamental building blocks of a webpage, such as color styles, labels, text styles, and spacing.
• Molecules: When you combine several atoms, like colors, with a label and a shape, you get molecules. Examples include buttons, form inputs, and checkboxes.
• Organisms: Joining multiple molecules results in organisms. These can be more complex UI elements like sidebars or headers.
• Templates: When you combine various organisms, you create templates that form a page’s overall layout.

Figma’s atomic units: components and styles

Components and styles are the atomic units of Figma’s design system:

• Components: Reusable design elements, such as buttons or icons.
• Styles: Design specifications, such as colors or typography.

These elements reside in the original files where the design system team created them. To make them accessible across different files, the file owner can publish them to the Team Library.

How do you Access Figma’s Team Library?

Once you publish components and styles, you can find them in Figma’s Team Library:

1. Create or open a design file.
2. Open the Team Library from the Assets tab.
3. Search or browse for the desired team library.
4. Enable the library to make its components available in the assets panel.

With the Team Library enabled, designers can easily drag and drop instances of these components into their design files, ensuring design consistency.

Key features of Figma’s Design System

• Styles: Define component colors, text, effects, and layout grids.
• Variables (beta): Store reusable values like color values, numbers, and text to make components semi-interactive or switch between light and dark modes. 
• Variants: Create variants and states for components and patterns.
• Design tokens: Dynamic styles the design system team can share across multiple design files to centralize changes and updates.
• Storybook: Designers can embed Figma designs with Storybook components and import stories alongside relevant Figma components for reference.
• Library Analytics: Allows the Design System Team to monitor usage and adoption of patterns and components.
• Version History: View a Figma file’s version history and restore old versions.

What are the Disadvantages of Using Figma’s Team Library?

While Figma’s Design Systems have evolved to simplify designing, the tool still doesn’t bridge the gap between designers and engineers. The design system team must manage two libraries, one for Figma and another for code.

UXPin co-published with Whitespace in 2023, where we interviewed 19 globally recognized companies about design system challenges and how to overcome them in our insightful report. These companies used image-based tools like Figma and Sketch. 

We learned that a single source of truth is the primary goal for every organization. Companies rely on plugins or custom solutions to achieve this goal, increasing costs and creating workflow complications.

Here are some of the key challenges with using image-based tools for design systems:

• Organizations never achieve a single source of truth because designers and developers use separate libraries–a UI kit for Figma and code components for developers.
• Updates require changes in multiple places, including the design system repository, Figma, prototyping tool, and relevant documentation.
• Without centralized control over a single UI library, errors occur with teams using different versions.
• Design handoffs require lengthy documentation to explain interactions. Even with Figma’s 2023 releases, designers can’t achieve interactivity comparable to code.
• Designers must use additional tools and plugins for prototyping and testing, increasing costs, operational burdens, and the likelihood of mistakes.

How does UXPin’s Design Systems Compare to Figma’s Team Library?

UXPin offers two solutions for design systems, depending on your maturity:

• Design Systems feature: Create a design system, including components, assets, typography, and docs.
• Merge technology: Import a code component library from a repository into UXPin for prototyping and testing.

UXPin Design Systems

UXPin Design Systems works similarly to Figma’s Team Library. Organizations can create design systems and share these with team members. The design system team can set permissions to prevent unauthorized changes and ensure the system’s integrity.

Leveraging UXPin’s built-in design libraries

Organizations can use one of UXPin’s built-in design libraries as a foundation to build and scale a design system faster, including iOS, Material Design, Bootstrap, and Foundation.   

Better interactivity

Figma and Sketch are image-based design tools, meaning designers can only create static prototypes with minimal functionality. UXPin is powered by code. Instead of generating vector graphics, the canvas renders HTML, CSS, and Javascript behind the scenes.

Using a code-based platform like UXPin means designers can achieve interactivity that closely mimics components in the final product, including fully functional input elements, state management, and complex UI patterns.

Four features that separate UXPin from other design tools:

• States: allow designers to create multiple states for a single UI element and design complex interactive components like dropdown menus, tab menus, navigational drawers, and more.
• Variables (very different from Figma’s Variables): capture data from user inputs and create personalized, dynamic user experiences–like their name and profile image in the app bar.
• 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 accurately replicate the final product experience.

With UXPin’s advanced code-based features, organizations don’t need external tools or plugins for prototyping and testing, reducing costs, redundant workflows, and operational tasks.

UXPin’s Design Systems helps with the early and middle stages of design system maturity. With Merge technology, organizations can achieve the final stage, a fully integrated single source of truth.

How to Achieve a Single Source of Truth With Merge Technology

Merge technology allows organizations to reach ultimate maturity–where designers and developers work with the exact same component library. A single update syncs changes to Design and Engineering, including documentation.

A real single source of truth

With Merge, organizations can import a UI library from a repository into UXPin so designers can use the same design system components during the design process as engineers use to develop the final product. Any changes to the repository automatically sync to UXPin and notify teams of the latest version.

“With this new UXPin Merge approach, we see a more collaborative, integrative design process. Rather than separating design, prototyping, and development, UXPin allows us to create an integrated flow where we engage engineering and product teams throughout the process. As a result, the product’s final quality has improved dramatically.” Erica Rider, Product, UX, and DesignOps thought leader.

Version Control keeps teams in sync

Designers can use UXPin’s Version Control to choose when to switch to the latest release or revert to older versions when needed. With designers and engineers in sync with the same versioning, there’s never any confusion or miscommunication–one changelog for the entire design system.

What Makes Merge Better Than Figma’s Team Library?

Using Figma’s Team Library requires organizations to maintain two versions of a design system (sometimes more if they use different tools for prototyping and testing). With Merge, they only need to maintain one–the design system’s repository.

Centralized management

The design system team manages a centralized repository that serves design and engineering teams. This centralized management gives the team complete control over the component library, updates, governance, documentation, and promoting patterns.

Ultimate consistency

Managing a design system from one place prevents unauthorized changes to the component library. Properties, including interactivity and styling, are “baked-in” to components and patterns. 

Unlike Figma, where designers can detach and adjust components, Merge elements, and their properties are fixed. Designers can only work with the properties defined in the design system’s repository, which appear in UXPin’s Properties Panel.

The design system team can define component properties using React props or Storybook Args, which designers can view and adjust via the properties panel. 

These constraints mean designers and engineers always work within the same parameters and limitations, resulting in pixel-perfect consistency with every release. Merge eliminates drift while significantly reducing UX debt and technical debt.

Supports multiple front-end technologies

Organizations can sync most Javascript front-end technologies to UXPin using two integrations:

• Git Integration: Connect directly to a React repository
• Storybook Integration: Sync any Storybook library, including React, Vue, Ember, Angular, and more.

Figma’s Storybook plugin only lets designers visualize components and Stories, whereas UXPin’s Storybook Integration imports the component library to build fully interactive prototypes inside the design editor.

One tool for design, prototyping, and testing

Due to Figma’s interactive limitations, many companies must utilize different tools for design and prototyping–for example, Zeplin for prototyping. With Merge technology, design teams never have to leave UXPin, simplifying workflows and reducing costs.

Using code components in the design process means designers can build prototypes that look and feel like the final product, increasing prototyping scope and improving feedback from stakeholders and user testing.

Using open-source component libraries to prototype and evolve

UXPin has several built-in Merge libraries, including Fluent UI, Ant Design, MUI, and UXPin Boilerplate. Designers can use these Merge libraries to build fully functioning prototypes or MVPs for testing. 

Organizations using Merge’s Git Integration can combine components from these libraries to build and test new patterns, facilitating the design system’s evolution without engineering assistance.

Ready to take your product design to the next level with a code-based solution from UXPin? Sync design and development with a single source of truth using Merge technology. Visit our Merge page for more details and how to request access.

The post Figma Design System vs UXPin Design System – A Deep Comparison appeared first on Studio by UXPin.

Figma prototypes are great for visualization of what the end-product can look like, explaining design decisions, and planning user flow. They fall short when it comes to testing your prototype. This is where UXPin prototypes shine. UXPin helps designers create interactive prototypes that bring quality test results. Let’s analyze both tools.

Key takeaways:

• Figma offers real-time collaboration in a vector-based design environment, while UXPin provides advanced interactive prototyping through a code-based approach.
• Due to advanced features like Merge, complex interfaces can be built significantly faster in UXPin than Figma.
• A comparison test revealed that prototyping in UXPin was 8X quicker and more interactive than in Figma.
• While Figma excels at creating static UI mockups, low-fidelity prototypes, and collaborative design, it lacks interactive prototyping capabilities.

UXPin’s Merge technology allows design teams to build code-based prototypes streamlining the design-to-development transition, offering cost and time savings.

Bridge the gap between design and development and build advanced interactive prototypes using UXPin’s Merge technology. Visit our Merge page to learn more 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 Figma?

Figma is a vector-based design tool that enables real-time collaboration. Designers can use Figma to create various design assets, from wireframes to mockups to prototypes and information architecture.

Figma was founded in 2016 as a browser-based vector graphics editing tool, making it an interesting alternative to Adobe products which dominated the market at that time. Many UX/UI design teams fell in love with the simplicity of Figma and started to use the tool in their job – designing user interfaces.

Figma prototypes are great for explaining to other teams what design should look like. The tool is amazing at making creative prototypes, design explorations, and powerful drawings. Figma prototypes lack advanced interactivity that stays within dev’s environment constraints. It’s what UXPin is great at.

What is UXPin?

UXPin is a code-based full-stack design tool for cross-functional collaboration. UXPin’s biggest benefit is its interactive prototyping capabilities. Designers can build fully functional prototypes that look and feel like the final product. The platform also makes creating wireframes, mockups, map user flows, and information architecture effortless with built-in libraries and forms.

UXPin prototypes can behave like a real product, because designers can put real interactions in their prototypes, store user input while testing, and use real data.

The design tool incorporates all the benefits of an easy-to-use interface with powerful code-backed features allowing designers to:

• Build robust interactive prototypes.
• Get high-quality, meaningful feedback from users and stakeholders.
• Streamline design handoffs.

What is the Difference Between Prototyping in Figma vs UXPin?

While Figma offers a reliable solution for prototyping with its collaborative capabilities and component-based approach, UXPin goes further with advanced interactions and a seamless transition from design to development with its Merge technology.

“With UXPin Merge, you can build complex interfaces in half an hour to one hour. In Figma, those interactions would take a week.” Larry Page, UX Lead Designer at Optum.

Figma falls into the “legacy design tool” category. While it’s easy to use, and designers can achieve beautiful Figma designs, the platform hasn’t evolved to meet modern UX design standards.

Here is a quick comparison of UXPin and Figma’s prototyping capabilities.

Figma:

• Basic interactions and transitions: Figma allows designers to add basic clickable transitions, making the mockups more engaging.
• Component creation and design systems: Designers can create shareable, reusable components to maintain UI consistency. 
• Collaborative design capabilities: Multiple designers can simultaneously work on the same design, streamlining the design process and promoting collective creativity.

UXPin:

• Advanced interactive prototyping: UXPin goes a step further with its sophisticated prototyping abilities. Features such as States, Interactions, Variables, and Expressions facilitate a more realistic prototype closer to the final product.
• Code-to-design with Merge: Designers can import React components into the design process, allowing them to build prototypes indistinguishable from the final product. Merge helps bridge the gap between design and development, aligning both processes for seamless product delivery.
• Real-time collaboration and user feedback: UXPin’s Comments facilitate cross-functional collaboration with team members and stakeholders. Yet, its edge lies in capturing user feedback directly on the prototype, enabling iterative design refinements based on tangible user insights and stakeholder feedback.

How Figma and UXPin Compare–a Real-World Case Study

Senior UX Designer, Anthony Hand, wrote a Medium article comparing UXPin and Figma’s prototyping capabilities. The team created a custom Microsoft Fluent web library, including relevant brand colors and third-party icons.

Anthony used a Fluent UI kit in Figma and imported a React UI library GitHub repository into UXPin using Merge technology. The React components included styling and interactive properties defined in the repo and necessary controls and APIs.

Conversely, the Figma UI kit was a static version of the Fluent Design System, requiring designers to set up relevant variants and interactions–albeit with significantly less fidelity and functionality than the React components in UXPin.

The experiment

Anthony created the same single-page reporting prototype on both platforms to compare UXPin and Figma’s prototyping efficiency. It took him an hour to design the page in Figma and just eight minutes in UXPin.

“The UXPin prototype had live dropdowns, calendar buttons, a sortable data table, and even an interactive Highcharts pie chart!” Anthony Hand, Senior UX Designer.

The prototype Anthony created with UXPin was better quality, had fewer errors, and featured interactive elements thanks to its use of live Microsoft Fluent controls. Conversely, the Figma prototype lacked these interactive qualities, relying on rasterized images that reduce real-time interaction–even though it took more than 8X as long to create.

Anthony’s conclusion

While Figma serves as a web-based evolution of familiar graphic design platforms and is an advancement over older tools, it still has limitations. UXPin stands out with its focus on “interactive prototypes” through a code-based design approach, allowing designers to create designs that feature live code elements, enhancing the interactivity and realism of the prototypes. Additionally, UXPin offers capabilities for complex interactions on a single page with minimal learning requirements.

“I liked Figma a lot. It’s a huge improvement over my previous go-to design tool, Balsamiq. But now that I’ve learned how to leverage the powerful scripting capabilities of UXPin and design interactive UIs with the same live HTML UI controls that my engineering colleagues will use in the finished product, there’s no way I could go back.” Anthony Hand, Senior UX Designer.

Is Figma Good for Prototyping?

Figma is undoubtedly a fantastic UI design tool but lacks the features necessary to create realistic interactive prototypes. Designers can still do some prototyping in Figma. Here are some examples of where the platform is most useful during the design process:

• Static UI mockups: Figma’s intuitive user interface and features make designing mockups effortless.
• Low-fidelity prototypes: Figma is great for low-fidelity wireframe prototypes since these only require basic transitions between screens.
• Information architecture: Designers can organize screens on a single artboard to map and visualize a product’s architecture and user flows.
• Collaborative design: Figma makes real-time collaboration easy, allowing teams to leave comments, run design critiques, access version history, and more.

What are Figma prototyping limitations?

Here’s where you might want to consider UXPin instead:

• Interactive prototyping: Figma offers simple click/tap interactions. Capturing user data and creating complex components like dropdown menus, carousels, accordions, and date pickers aren’t possible in Figma–limiting what designers can test.
• Live data and APIs: Unlike UXPin, you can’t import live data with Figma. These complex integrations require engineering input, increasing time and resources, making them unfeasible for most projects.
• Code-to-design: Figma works on a design-to-code approach, meaning developers must convert designs into code–a time-consuming and complex task. With the help of Merge, UXPin’s code-to-design workflow means designers can build code-based prototypes with the same building blocks developers use, significantly reducing development time while creating a seamless product development workflow.

Why is it Better to Prototype in UXPin?

The common theme throughout this article is interactivity. Modern digital products require designers to test ideas using interactive prototypes. Why?

• Development is time-consuming and expensive. Solving issues during the design process can save organizations countless time and resources, reducing wasteful expenditure.
• User experience is crucial for product adoption, engagement, and retention. Interactive prototyping allows designers to solve usability issues during the design process and enhance the product’s user experience.

When designers use image-based tools for prototyping and user testing, they miss usability issues and business opportunities during the design process. They must add these changes to the product’s UX and technical backlog, increasing debt and avoidable costs.

How interactive prototyping reduces UX debt

Merge reduces wasteful and avoidable UX and technical debt with better testing and smoother design handoffs. The design team can import interactive components from a design system repository for prototyping. This fully interactive component library increases prototyping scope, allowing designers to build exact replicas of the final product–impossible to do with image-based tools like Figma.

Users and stakeholders can interact with Merge prototypes like they would the final product, giving design teams accurate, meaningful insights to iterate and improve. 

Design handoffs require less documentation and explanation because designers and engineers use exactly the same components. Devs can import the same UI library from the same repository, apply JSX changes from UXPin, and deliver the end product.

“UXPin Merge reduced our engineering time by around 50%. Imagine how much money that saves across an enterprise-level organization with dozens of designers and hundreds of engineers.” Larry Page, UX Lead Designer.

Faster prototyping and iterations

Merge effectively creates a no-code, drag-and-drop prototyping environment for designers. As we learned from Anthony’s case study, switching to Merge allowed him to build a prototype 8X faster in UXPin than Figma using the same UI library.

Making changes to components and prototypes is quick and efficient using UXPin’s Properties Panel. Still, designers can increase efficiency by creating multiple variations and states for a single UI element and saving these in UXPin’s Patterns. Instead of making adjustments in the Properties Panel, designers simply swap components to get instant feedback during testing.

“It’s been so helpful for us to have these high-fidelity prototypes built with UXPin. We build high-fidelity prototypes much quicker and get immediate feedback after the session. If there’s something we can fix immediately, we make that change before the next participant and get feedback much faster than before.” Erica Rider, Product, UX, and DesignOps thought leader.

Take your prototyping to the next level with interactive components using UXPin’s Merge technology. Visit our Merge page for more details and how to request access.

The post Prototyping in Figma vs UXPin – Possibilities & Limitations appeared first on Studio by UXPin.

UXPin’s npm Integration empowers design teams to prototype at a higher fidelity and with code-like functionality. Component-driven prototyping in UXPin allows designers to create prototypes that previously required engineers to code.

With npm Integration, teams can bring component libraries to UXPin’s design tool and leverage full interactivity of shared components without complicated technical setup. Let’s see the tutorial to learn how fast it is to integrate components and use Merge.

Bring UI components to UXPin from Git repo, Storybook, or through our newest npm integration. Learn more about UXPin’s Merge technology.

Reach a new level of prototyping

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

Discover UXPin Merge

What is UXPin Merge?

UXPin Merge is a code-based technology that enables component-driven prototyping for design teams. Instead of designing from scratch, designers use production-ready UI elements from a repository to build high-fidelity, fully functioning prototypes.

Designers work with visual elements, and engineers the code behind them, creating a single source of truth for the entire product development team. Teams like PayPal or TeamPassword improved the quality, speed, and consistency of their design with UXPin.

What is UXPin’s npm Integration?

Using UXPin Merge for a private design system requires some engineering knowledge to set up the repository for syncing. But, to use an open-source component library, design teams can complete the npm Integration using an intuitive dashboard.

Designers can manage component imports and properties using Merge Component Manager. For example, you can import a button from Bootstrap’s component library and its nine variants:

• Primary
• Secondary
• Success
• Danger
• Warning
• Info
• Light
• Dark
• Link 

These variants appear in UXPin’s Properties Panel as a dropdown. Merge also includes basic hover states for most components, so designers don’t have to worry about these minor details and can begin prototyping immediately.

Design teams can find component properties to import via the React Bootstrap docs. They can import every property or only those relevant to the project.

The Benefits of Working With Bootstrap

Bootstrap is one of the oldest and most comprehensive mobile-first front-end frameworks available for React, Vue, and Angular. UXPin’s npm integration uses the React Bootstrap component library, but you can import the Vue or Angular versions using our Storybook Integration.

Bootstrap is best for building responsive websites and web applications, but you could use the React library for mobile app design projects. Bootstrap’s extensive collection of form elements, responsive tables, and other relevant components makes it an excellent option for web-based enterprise products.

We recommend checking Bootstrap’s Examples page to see what’s possible with this comprehensive front-end framework.

Bootstrap npm Integration With UXPin Merge

You can import Bootstrap components into UXPin’s design editor using the npm package (react-bootstrap). Merge Component Manager allows you to import each UI element and its available properties.

With component-driven prototyping in UXPin, design teams get the same fidelity and functionality as engineers because the elements come from the same repository. Designers can replicate whatever engineers can do with repository components in UXPin via the Properties Panel.

You can assign these properties using Bootstrap’s React props found in the framework’s documentation.

Assigning Properties in Merge Component Manager

Merge Component Manager is a central hub for importing and managing your npm components. You can import as many of these as you need to complete your project. 

You also have control over how many properties you import. For example, if you’re only going to use the Bootstrap button’s primary and secondary variants, you only need to import two instead of all nine.

Connecting UXPin to the React Bootstrap npm Package

Step 1

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

Step 2

Name your project and click “Create New Project.”

Step 3

Click “Design with Merge components” and “+ Add new Library.”

Step 4

Select “Import React Components with npm integration” and click “Next.”

Step 5

Name your library. This name is purely for your reference and won’t impact the import.

Merge requires two Bootstrap packages for the npm Integration to work. You’ll need React Bootstrap (react-bootstrap) and Boostrap (bootstrap).

Lastly, you must include a path to Bootstrap’s CSS file for component properties to work in UXPin. You can find this path under CSS in React-Bootstrap’s documentation.

• bootstrap/dist/css/bootstrap.min.css

Importing React Bootstrap Components

Once you complete the steps above, UXPin will redirect you to Merge Component Manager. You can also get there from the canvas following Step 1.

Step 1

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

Merge Component Manager will open in a new tab.

Step 2

Click “Add new component.”

Step 3

Enter the name of the component you want to import.

You’ll find the correct naming convention in React Bootstrap’s documentation.

We’ll import a Bootstrap button for this tutorial and create a new category called “Components.” We recommend using the same categories as React Bootstrap’s docs so designers and engineers have the same reference point.

You can add multiple components to a single import, saving you time repeating steps two and three.

Click “Import Components.”

Step 4

Click “Publish Changes” in the top right to initialize the import process.

The first time you do this for a new component, it might take a minute.

Step 5

Once the import is complete, click “Refresh Library” to update the changes in your project library.

If you follow these instructions step-by-step, you’ll notice you have a category (Components) and your first component (Button) in the left sidebar.

Step 6

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

Adding Component Properties with Merge Component Manager

We’ll add a couple of button properties using React Bootstrap’s documentation.

Button Label

Step 1

You set a React Bootstrap button label using the children property as follows:

• Property name: enter “children” (always use lowercase for props)
• Display name: This is for your reference, but something descriptive that both designers and engineers use–we’ve gone with “Label” to keep things uniform
• Description: Add a short description or instructions for designers
• Property type: “string”
• Property control: “textfield”
• Default value: Your preference–we’ve gone with “Button”

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

Step 2

Once you have completed all the fields, click “Add property.”

Then “Save Changes.”

Lastly, “Publish library changes.”

Try Component-Driven Prototyping in UXPin

Once you import the React Bootstrap components and properties you need, prototyping in UXPin is as simple as drag-and-drop to build layouts. We created this simple email sign-up form using three Bootstrap components in less than a minute.

When you select a Bootstrap component, the properties you created in Merge Component Manager appear in the righthand Properties Panel.

Try component-driven prototyping with UXPin’s npm Integration today. Bring Bootstrap’s npm components and discover how quickly your product gets from ideation to development. Release features much faster.

The post How to Bring Bootstrap Components to UXPin – npm Integration Walkthrough appeared first on Studio by UXPin.

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

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

Reach a new level of prototyping

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

Discover UXPin Merge

Revolutionize Your Design Process with UXPin Merge

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

Move Away from Static, Change to Fully-interactive Design

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

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

Streamline Collaboration Between Design and Development

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

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

Use Accurate UI Components that Guarantee Design Consistency

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

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

The Third way of Importing UI components to UXPin Merge

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

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

Merge npm integration – What Do You Get?

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

How to use npm integration? 

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

Import npm Components to UXPin

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

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

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

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

1. Add a New Library to UXPin Merge

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

2. Configure UI Components

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

3. Start Creating Fully Interactive Prototypes

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

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

Follow our instructions and import interactive components

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

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

2. Import npm components from MUI to UXPin

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

How to import MUI components to UXPin?

3. Import npm components from Ant Design to UXPin

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

How to import Ant Design components to UXPin?

Use npm integration + Patterns

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

Read all about it: Patterns documentation.

Try Merge npm integration

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

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

The post Merge npm Integration – Another Way of Importing Components appeared first on Studio by UXPin.

With UXPin’s npm Integration, designers can import npm component libraries to build fully functioning prototypes. These high-fidelity prototypes enable designers to test features, interactions, and functionality impossible to achieve with traditional vector-based design tools.

Build fully interactive prototypes with real building blocks of your app. Try UXPin Merge and sync MUI with Merge and bridge the gap between designers and devs. Discover UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

What is UXPin’s npm Integration?

Firstly, it’s important to understand UXPin Merge because our npm Integration is the latest iteration of this game-changing technology.

Merge allows you to sync a design system’s component library to UXPin’s design editor so designers can prototype using fully interactive components that come from their design system.

This component-driven prototyping creates a single source of truth where designers and engineers work with the same design system. Any changes to the repository automatically sync to UXPin, so teams always use the latest version.

Enter npm Integration

Previously, designers needed an engineer’s help to connect and sync Merge. You needed someone proficient at a Git repository or Storybook. But, with UXPin’s npm Integration, designers (or DesignOps) can complete the integration using an intuitive user interface without writing any code.

If the component library exists as an npm package, you can connect it to UXPin through Merge and import the UI elements needed to start prototyping. Open-source design libraries like MUI work best with the npm Integration because they have a consistent naming convention, file structure, and documentation.

The Benefits of Working With MUI

MUI is a React component library based on Google’s Material Design UI. The comprehensive design system is excellent for prototyping because it has everything you need to build UIs fast.

The MUI team has done fantastic work to ensure components solve foundational usability and accessibility issues, giving you a ready-to-go product development solution.

MUI is themeable, so you can use it as a foundation to build your design system or take advantage of the comprehensive library to test UI elements when trying to find new patterns for your product’s component library.

MUI npm Integration With UXPin Merge

MUI has design kits for a few image-based design tools, but with UXPin, you can import its fully functioning component library–the same foundational components engineers use for development.

MUI components in UXPin look exactly like any other static component but have the same fidelity and functionality as code–UXPin renders HTML, CSS, and Javascript in the backend rather than vector graphics.

When you import UI elements into UXPin, you also get MUI’s component states out of the box. If you’ve ever set these up in an image-based design tool, you’ll know how time-consuming and complicated it can be to add basic states and assign them to the properties panel. With UXPin’s npm Integration, you can import these states with a few clicks!

Assigning Properties in Merge Component Manager

The Merge Component Manager allows you to set up properties for each MUI component.

You can use MUI’s docs to choose which React props you want to import for each component. Once imported, these React props appear in UXPin’s righthand Properties Panel, allowing you to customize individual UI elements.

For example, an MUI button has several color properties:

• Primary
• Secondary
• Success
• Error
• Info
• Warning

When you import these props via the Merge Component Manager, a dropdown appears in the Properties Panel, allowing you to select the desired color. The same applies to variant (contained, outlined, text), size (small, medium, large), and other multi-option props.

There are several property types, including boolean, function, string, array, and enum, to name a few. You can import any MUI React props found in the documentation according to your prototyping needs.

Connecting UXPin to the MUI npm Package

Step 1

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

Step 2

Name your project and click “Create New Project.”

Step 3

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

Step 4

Click the dropdown at the bottom of the Design System Libraries tab in the lefthand sidebar, and click “New library.”

Your sidebar and available libraries may differ from the example.

Step 5

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

Step 6

Name your library. This name is purely for your reference and won’t impact the import.

You also need to grab the npm package repository name, which you find under Install on MUI Material’s npm page. Copy and paste the Install contents from npm into the “Library package name” field.

Delete everything preceding the @ symbol (so you only have @mui/material), leave everything else as default, and click “Next.”

Importing MUI Components

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

Step 1

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

Merge Component Manager will open in a new tab.

Step 2

Click “Add new component.”

Step 3

Enter the name of the component you want to import.

You’ll find the correct naming convention in the MUI docs under Component API. MUI’s components use CamelCase with no spaces. Always capitalize the first letter. For example, bottom navigation would be BottomNavigation.

Let’s import an MUI Button as our first component and add it to a new category called Inputs. We recommend using the same categories as MUI’s docs, so designers and engineers have the same reference point.

You can add multiple components to a single import, saving you time repeating steps two and three.

Click “Import Components.”

Step 4

Click “Publish Changes” in the top right to initialize the import process.

The first time you do this for a new component, it might take a minute or two.

Step 5

Once the import is complete, click “Refresh Library” to update the changes in your project library.

If you follow these instructions step-by-step, you’ll notice you have a category (Inputs) and your first component (Button) in the left sidebar.

Step 6

Click on the Button to begin adding properties. You can find these React props in MUI’s documentation under Component API > Button.

Adding Component Properties with Merge Component Manager

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

Button Label

Step 1

A button label (or content) in MUI uses the “children” React prop.

• Property name: enter “children” (always use lowercase for props)
• Display name: This is for your reference, but something descriptive that both designers and engineers use–we’ve gone with “Label”
• Description: Add a short description or instructions for designers–we’ve used “Button’s label or CTA”
• Property type: “node” as per MUI’s docs
• Property control: “textfield” (note: this field will only appear once you select a property type and will differ depending on your selection)
• Default value: Your preference–we’ve gone with “Button” (note: MUI capitalizes button labels)

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

Step 2

Once you have completed all the fields, click “Add property.”

Then “Save changes.”

Lastly, “Publish library changes.”

Component-Driven Prototyping in UXPin

Once you import the MUI components you need, prototyping in UXPin is as simple as drag-and-drop to build layouts. We created this simple email sign-up form using three MUI components in less than a minute.

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

Ready to discover the possibilities of component-driven prototyping in UXPin? Try the MUI npm Integration (or other open-source component libraries available on npm).

The post Bring MUI Components to UXPin – npm Integration Walkthrough appeared first on Studio by UXPin.

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

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

Reach a new level of prototyping

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

Discover UXPin Merge

What Storybook 7.0 has to offer?

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

Better performance

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

More compatible integrations

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

More extensive testing

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

Improved documentation

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

Integrate Storybook 7.0 with UXPin

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

Create prototypes with Storybook components

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

Foster cross-functional collaboration

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

Streamline design handoff

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

Here’s how to integrate with Storybook

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

Get a guided tour of UXPin’s Storybook integration.

Try UXPin and Storybook 7.0

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

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

Join our upcoming webinar with DesignOps Assembly’s members. We invited Meredith Black, Salomé Mortazavi, and Adam Fry-Pierce to discuss strategies for building a resilient DesignOps practice.

Build a Reliable Design Operations

DesignOps strengthens your design team and processes for producing the best work possible. In difficult times, it’s extremely important to show the impact of the work you’re doing, back up your operations with data that make sense for the business, and tackle the real needs of the design team.

UXPin partnered up with DesignOps Assembly and invited top experts to discuss how to set up design operations to success when the resources are spare, designers have mixed feelings, and there’s an aura of uncertainty around us. Join us to listen to their discussion.

Save your free spot for the “Strategies for Building a Resilient DesignOps Practice” webinar.

You’ll learn about:

• Pinpointing the real needs of design teams. 
• Rightsizing the DesignOps practices.
• Establishing critical cross-functional partnerships.
• Measuring and impacting: How to tell a story about ROI of DesignOps.
• Influencing metrics in our sphere of control.

About DesignOps Experts

We invited three excellent DesignOps practitioners who have immense experience in leadership.

• Salomé Mortazavi – leads the DesignOps team at SiriusXM. Before DesignOps, she consulted Fortune 500 companies on how to transform their development practices through Lean, Agile and user centered methodologies and led design teams.
• Adam Fry-Pierce – Chief-Of-Staff for UX Leadership at Google. Previously the Head of DesignOps at DocuSign and the founding director of the Design Leadership Forum, he’s been a long-time community builder. Now, he’s involved in DesignOps Assembly.
• Meredith Black – Founder of DesignOps Assembly. She also consults companies worldwide on running DesignOps. She started and grew the DesignOps team at Pinterest, being instrumental for the team success and their international recognition.

Sounds exciting? Join our experts for free on June 28th at 9:00 AM PDT. You’ll get a unique opportunity of asking your questions and learning about improving your own operations. The webinar will be full of knowledge that will come in handy no matter if you’re expert or a fledgling designer.

Save your spot for the webinar here.

The post Free Webinar: “Strategies for Building a Resilient DesignOps Practice” appeared first on Studio by UXPin.

What is sabotaging your design system? Is it lack of support from stakeholders? Poor cross-team collaboration? No governance structure?

We joined forces with Whitespace to set up a discussion panel about overcoming challenges of scaling design systems. Join us for free on May 16th and listen to the experts who grow, govern, maintain, and evangelize enterprise design systems.

You’ll hear from:

• Dave Malouf — panel moderator, DesignOps expert
• Ben Shectman — Experience Design Director at Johnson & Johnson
• Ryan Kane — Head of UX Design at The Weir Group PLC
• Julien Vanière — Senior Design System Director at Sage

Join us 👉 Challenges of scaling design systems.

Date: May 16, 2023
Time: 9 AM PT / 6 PM CEST
Where: Online
About: Challenges of scaling design systems

The post Join Free Panel “How to Overcome Challenges of Scaling Design Systems” appeared first on Studio by UXPin.