How to Change UI with a Click of a Button — Use UXPin’s Components

In modern web development, efficiency and consistency are key. Imagine being able to change every button or navigation bar across your entire project with just a few clicks! That’s the power of components in UXPin.

In this tutorial, we’ll explore how you can harness this power to create cohesive, dynamic designs that are easy to manage and update.

Watch the video or scroll down. Sign up for UXPin’s trial to follow along.

Creating Components

Components are the building blocks of reusable design elements. They save you time, help maintain consistency across your designs, and make global updates a breeze. A button, list element, navigation bar, or any recurring element can become a component.

Let’s dive right in and see how to create them in UXPin.

You can create components in three different ways:

1. Using the Top Bar: Click “Create Component” in the top bar.
2. Keyboard Shortcut: Use the “Command + K” shortcut.
3. Context Menu: Open the context menu in the Layers panel and choose “Create Component.”

Once created, components are marked with a purple icon, distinguishing them from other elements on the canvas.

Did you know that instead of those you can use coded components? Unlike the components we’ve just created, this gives you the ability to reuse the component by your engineers.

Using Coded Components

Coded components in UXPin are actual UI elements built with code (HTML, CSS, JavaScript, React, etc.) that are imported into UXPin from a component library or design system.

These components are the same ones that developers use in the final product, ensuring that what designers are working with in UXPin is an exact match to the elements that will appear in the live application.

Request access to UXPin Merge to try code-backed components.

To use coded components in UXPin, you typically follow these steps:

1. Integrate a Component Library: UXPin allows you to integrate a component library from your development team. This can be done using tools like Storybook or through a direct integration with a Git repository. The library contains all the coded components that you want to use in your designs.
2. Add Components to Your Design: Once the library is integrated, you can drag and drop coded components directly onto your canvas in UXPin. You can use these components just like any native UXPin element, positioning them within your design and adjusting their properties.
3. Customize Component Properties: UXPin lets you customize the properties of coded components to match your design needs. For example, you can change text, colors, sizes, and even the behavior of the components. These changes are made using the component’s defined properties, ensuring that any customization aligns with the codebase.
4. Prototype and Test Interactions: With code-backed components, you can prototype user interactions that reflect the true functionality of the final product. This is especially useful for user testing, as it provides a realistic representation of how the product will work once developed.
5. Review and Handoff: When you’re ready to hand off your design to developers, they can access the exact same components and see all the specifications directly in UXPin. This includes the code behind each component, making it easy for developers to implement the design exactly as intended.

Try UXPin Merge and experience how robust prototyping can be once you use coded components. Request access to UXPin Merge.

Using Component Instances

Once you’ve created a component, you can reuse it throughout your design by creating instances. An instance is a copy of the original component (also called the master component). Here’s how you can create instances:

• ALT + Drag: Hold “ALT” and drag the component.
• Duplicate: Use “Command + D” to duplicate.
• Copy and Paste: Simply copy and paste the component.

Each instance acts like a child component that inherits properties from the master. You can override specific properties like text and color in each instance, but they remain linked to the master component for global edits.

Editing the Master Component

To edit all instances of a component at once, you need to modify the master component. This feature is incredibly useful for making global changes without having to manually update each instance.

For example, if you want to change the button style across your entire project, just update the master component. All linked instances will automatically update with the new style, except for any properties you’ve overridden in specific instances.

Resetting Component Properties

Sometimes, you’ll want to reset an instance back to the original settings defined in the master component. UXPin makes this easy:

• Select the instance you want to reset.
• Go to the Properties Panel.
• Choose the specific properties you want to reset back to the master settings.

This feature ensures you don’t have to rebuild elements from scratch, saving you time and maintaining consistency in your design.

Practical Use Cases and Benefits

Imagine you’re building a web app with a consistent button style. With components, if you decide to change the button style, you only need to update the master component, and all instances across your project will update automatically. This ensures consistency and saves hours of manual updates.

Components are especially valuable in maintaining a design system, where you can create a library of reusable elements, ensuring a cohesive look and feel across all your projects.

Summary and Next Steps

In this tutorial, we covered how to create and manage components in UXPin, a powerful tool for maintaining consistency in your designs.

Next, try using components in your own projects, or explore more advanced features like component states and interactions to take your designs to the next level.

Have you tried using components in your projects? Share your experience in the comments, or ask any questions you have. Let’s learn from each other! Try UXPin and build your first prototype.