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.

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.

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.

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.

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.

This example shows how you can change the color, size, variant, and add an icon using properties defined by MUI’s design system.

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.

How to Sync a 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 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.

Our goal at UXPin is for designers to spend less time designing and building and more time testing and iterating on ideas. We have a ton of shortcuts and features to help designers prototype faster and get more meaningful results during testing.

We’ve compiled a list of our top 9 tips and tricks to design faster in UXPin. If you’re new to code-based design, sign up for a free trial and follow the tips in this article to discover how UXPin makes prototyping quicker and more enjoyable.

Build advanced prototypes

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

Try UXPin

One-Page Design vs. Multiple Artboards

Image-based design tools require designers to duplicate multiple artboards to create basic functionality and interactions. The transitions often look “unnatural” and don’t provide an authentic user experience.

With UXPin, you can create multiple interactions for a single screen without switching artboards, just like you would using the final product. UXPin’s Calming App is an excellent example of you can create interactions and animations on a single screen.

The Calming App has four screens, each with microinteractions and animations triggered by a user tapping a button. When you click “Start” on the app’s “Breathe” section, the screen completely transforms with a pulsing animation–all of which we designed using a single frame in UXPin.

Feel free to download and install our Calming App to see how UXPin’s designers built this immersive prototype. If you don’t have a UXPin account, sign up for a free trial and follow the instructions in the download attachment to install the app.

Refresh Data

Finding and adding dummy data to your prototypes can feel like a waste of time. Even if you have a well-organized content library, you still have to copy/paste and upload it accordingly.

In UXPin, you can add dummy data to your project with just a few clicks or use our Match Content by Layer Name feature to populate fields automatically.

UXPin also allows you to refresh dummy content instantly using our Refresh Data shortcut CMD+SHIFT+D on Mac or CTRL+SHIFT+D on Windows.

Scrollable Content

Depending on the design tool you use, creating scrollable content can be a time-consuming exercise. With UXPin’s Crop and Scroll feature, you can add vertical or horizontal scrolling in just two clicks.

• Step One – Add your content to the prototype so that everything is visible (even if this means your content overflows off the artboard. See example.)
• Step Two – Make sure you have the content selected and check the box “Crop selected content,” and choose whether you want it to scroll vertically or horizontally.
• Step Three – Crop your content to the edge of the prototype, so the excess is hidden.

When you preview your prototype, the content will scroll according to your settings.

Copy and Paste Styles

Copy and Paste styles from one component to another without impacting the second’s content in just two shortcut commands. 

• Copy: CMD+OPTION+C on Mac or CTRL+ALT+C on Windows
• Paste: CMD+OPTION+V on Mac or CTRL+ALT+V on Windows

This shortcut will only copy/paste styles, not interactions–but we have a shortcut for that too :)

Copy and Paste Interactions

If you also want to copy and paste a component’s interactions, you can use this UXPin shortcut:

• Copy: CMD+SHIFT+C on Mac or CTRL+SHIFT+C on Windows
• Paste: CMD+SHIFT+V on Mac or CTRL+SHIFT+V on Windows

Hide a Page from Preview

You have to present a prototype you’re working on to stakeholders, but you don’t want to show them parts you still haven’t completed. You can duplicate the prototype, delete the extra screens, and present what you’ve completed. 

There are several issues with this approach:

• Wastes time
• Leads to multiple project files, each with different screens missing
• Increases the likelihood of errors
• Any notes you or stakeholders make on the second prototype must be copied to the original
• Causes confusion with others working on the same project

A more straightforward solution would be to hide the screens you don’t want people to see and share the prototype link–which is what UXPin’s Hide a Page from Preview does. You can hide any screens you don’t want to appear in the prototype and reveal them again with a single click.

Advanced Animations

UXPin renders HTML, CSS, and Javascript, allowing designers to create code-like interactions and animations. Using UXPin’s properties panel, designers can choose the type of animation and tweak its settings to achieve the desired result.

Designers can take interactions to the next level with Conditional Interactions. Create a set of “if-then” and “if-else” rules to trigger dynamic user experiences that accurately represent a coded product.

With UXPin’s advanced animations, designers can create immersive, intuitive prototypes that make sense to the user experience.

Accessibility Features

While we all know the importance of creating inclusive products, accessibility can sometimes feel like a chore because designers have to use plugins or external tools to test UIs.

With built-in accessibility features, designers don’t have to leave UXPin to test their color choices. UXPin provides two tools for testing on the fly:

• Contrast Checker: Check your prototypes against WCAG standards with an indicator for levels AA and AAA.
• Color Blindness Simulator: Test how color blind users will see your prototypes by switching through the eight types of color blindness.

Built-in Library of Icons and Forms

Building forms and icons from scratch take up significant time when you want to build a quick prototype. Most design tools have third-party libraries, but you still have to search through these to find what you need.

UXPin comes with a vast library of icons built-in, including Google’s Material UI, Font Awesome, Pixel, and Retina icon sets. You can also import your own SVGs and make edits inside UXPin.

UXPin also includes basic form elements designers can use as-is or customize to meet their needs.

Try Advanced Prototyping in UXPin

Ready to try these tips and tricks for yourself? We have several example projects that showcase UXPin’s advanced design and prototyping features. Sign up for a free trial and discover how code-based design can revolutionize your prototypes to create better user experiences for your customers.

The post 9 Tips to Design Faster and Tricks in UXPin appeared first on Studio by UXPin.

Improve the speed and consistency of your design process with the new Merge feature – Patterns, which makes building and reusing new components or their variants a breeze. Experiment with new UI elements while staying in line with what’s feasible, expand your design system, or save time on setting the same properties over and over again.

Try UXPin’s Patterns for free. Sign up for UXPin’s trial.

Build advanced prototypes

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

Try UXPin

Why Should You Try UXPin Merge?

UXPin Merge is a powerful technology for bringing code components into UXPin’s design editor. Design teams can use fully functional elements and build interactive prototypes with them. The teams that use UXPin Merge have found that it helped them achieve a higher maturity of their design system as well as scale design even if their designers were seriously outnumbered by developers.

We’re constantly evolving Merge, working on the ways designers can bring components to UXPin or use them in the editor. We’ve just launched Patterns – a feature that allows you to build and keep complex components inside UXPin.

Build a Robust Design Library at Speed

Aside from importing a code component library to UXPin via Storybook, Git or NPM package, you can have a design library in UXPin with predefined UI components that you quickly reuse in your prototypes.

The new Merge feature makes you a way more productive designer, helps you scale your design system, and allows you to try out new components that are not yet coded. Now it’s way easier to:

• Save and reuse variants and properties of your components.
• Combine your Merge components into bigger, more advanced elements.
• Create and share new components with predefined presets that are not yet in code.

Patterns acts as a standard UXPin library, but it allows you to go beyond atoms and basic components into more complex ones. You can also mix Merge with Classic components and try out new elements without asking developers to code them first.

How Can You Use Patterns?

Patterns is exclusive for Merge users and it works with all Merge integrations, that is Git repository, Storybook, and NPM package.

See UXPin’s docs and read the instructions on how to use Patterns.

Patterns is available on trial with the Storybook integration. Experience the speed and swiftness of using code components in your design process, try UXPin for free.

The post Discover Patterns – Quickly Build and Keep New Components in a Merge Library appeared first on Studio by UXPin.

During the Design Value Conference, our CEO, Yuga Koda, spoke on UXPin’s latest way of improving the design process for teams that would like to bring the single source of truth to design workflow, without developers’ help – Merge Component Manager with NPM integration.

Yuga explained the “why” behind Component Manager and showcased how it works.

Design Value Springs From Solid Foundations

“Empowering designers, developers, product managers, and really anyone and everyone involved in the product development cycle,” said Yuga “is key to any team or organization because people are the secret sauce.” 

People, “the secret sauce”, need strong foundations to produce great work. As Yuga says, “over the years, we’ve seen many improvements in the design process. These improvements (…) now have built on top of each other to form the foundations of design best practices.”

Build a Pyramid, not a Jenga Tower

When you ignore building the strong base of the foundations, “the more you try to build on top of it, the shakier the structure gets” which may “lead to inconsistencies in the UI that would bleed into the hand off process, and ultimately to the end users’ experience.” Yuga made an analogy that “it becomes a little like playing Jenga.” It will fall apart sooner or later.

“The benefits of having the solid foundations in place are twofold – first, you are able to immediately impact the inefficiencies with structure and standardization. Second, with less firefighting, you’re enabling teammates to focus on more value-add work, which will make a significant impact in the future.”

DesignOps is Key

DesignOps forms such foundations. It takes care of every piece of the puzzle, from creating a consistent design process to smoothing handoffs and eliminating the so-called tribal knowledge.

UXPin aims to support building foundations for a great design culture, which is clear when you look at the product roadmap, starting with UXPin Merge, a tool for smoother handoffs and better design-developer collaboration.

UXPin Merge Contributes to Creating Strong Foundations

We released UXPin Merge technology that helps designers and developers build products together and finally reach an understanding between what gets designed and what gets coded.

“The drift between what’s being designed and what gets coded remains to be an issue that is still being addressed today. Some aim to solve it by trying to translate the design into code. Our approach is to have code and the coded components be the single source of truth.”

With UXPin Merge, product teams can bring their coded components into the UXPin editor. The component libraries serve as a single source of truth that the whole team can understand and use to create their chunk of work. As Yuga said, designers and developers have a “common language of interactive coded components for building the product together.”

It means that organizational silos can finally be broken down and designers can finally scale their work without sacrificing design and product quality.

“With this approach everyone, even non-designers, are able to build advanced prototypes without the need of understanding how to add intricate interactions in the design tool. Since they are all baked into the component anyone can build high fidelity prototypes.”

UXPin Merge contributes greatly to building strong design foundations. It helps DesignOps teams create efficiencies, strengthen design culture, and bring the team closer together.

Introducing Merge Component Manager & NPM integration

UXPin Merge integrates with Git repo and Storybook – you can bring coded components to the design editor to maintain the component consistency in both design and development. With both of those solutions, you may want to include your developers in the integration process.

We are introducing the third way of importing UI components to UXPin, an npm integration. It’s an easy, code-free way of bringing components from a design library to the UXPin editor. Check it out: Merge NPM integration.

Increase the Value of Design with Component Manager

With the upcoming release of Merge Component Manager, we aim to make the code-base design paradigm more accessible by making it as code-free as possible.

• Create fully-interactive prototypes fast –  import UI components and see how designing with them simplifies interactivity and increases design velocity.
• Simplify handoff with functional prototypes –  since you have a quick and easy way of designing with UI components, you can be sure that your product gets developed the way you designed it.
• Test UI components before bringing them to your component library – import components to UXPin and test them before committing to using them. It’s a great way to find out whether you should expand the UI component library or not.

During the Design Value Conference, we presented how Component Manager works. It’s very easy. You just need to follow a few steps until you can use code components in UXPin. 

How Does It Work?

Component Manager allows you to bring components via NPM package (Yuga demoed bringing Ant Design library), configure its properties, and build prototypes with the code-based UI elements you’ve just set up.

Bring Components via NPM integration

Merge Component Manager enables you to manage coded UI components in your design process and obtain a single source of truth, but before you can use it you need to import the said components. You can use our newest NPM integration for that.

The post New Ways of Revolutionizing Design Process – Insights from Design Value Conference 2022 appeared first on Studio by UXPin.

Design faster with our feature – Auto Layout. Align all the components the way you want within seconds and speed up your design workflow. 

At UXPin, our goal has always been to simplify design process and make sure designers have enough time to focus on meaningful work. Auto Layout removes the pain of manual resizing and makes your work more intuitive. Try Auto Layout for free. Sign up for UXPin’s trial.

Build advanced prototypes

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

Try UXPin

Challenges of designing without Auto Layout 

However, we want it to be true, designing isn’t only creative and fun work. You have to adapt to the constraints of your UI/UX tool. As designs are static by nature, without the proper technology, you can’t expect them to behave like a coded product. 

This means every element you draw only visualizes how it’s supposed to look and work. For example, when you design a simple button, first you draw a rectangle and then add text. The moment you want to expand your text, you need to adjust the length of the rectangle as well. It shows how designers need to think about every relation between all the UI elements. 

The disconnect between components translates into more repetitive work – constantly resizing multiple elements, adjusting them separately so that they can create a coherent whole. It takes too much time to do everything manually. On top of that, you have to keep the changes consistent in all elements, and let’s be honest – it’s easy to forget about setting the right paddings and gaps, especially when adding new elements to your design. 

That’s when Auto Layout can remove all those bottlenecks.

How Auto Layout works

Auto Layout gives you the freedom to focus on what matters and remove all the repetitive and manual work. We made sure that your UI won’t be constrained by the laws of static design but can benefit from the code-approach that we like so much. Thanks to Flexbox – CSS Flexible Box Layout, you can apply Auto Layout to groups as well as components to make chosen elements depend on one another’s position. 

Auto Layout removes all the hassle and will take you just a few seconds to adjust the components the way you want. Let’s take for example a simple button – whatever you need to change in the text, the rest of the elements will adapt to the new text length. It’s only one of many cases when Auto Layout speeds up your work. If you design repeated elements like a menu and want to swap the items’ places, or add an expanded/collapsed view, our new feature will save you a ton of work.

Get started

Drop elements to the canvas, select the group or pick a component from your library. Add Auto Layout in the properties panel and your design will behave in a flexbox-like manner. You can also add Auto Layout components to a Design System.

Align all the elements within a few clicks – Auto Layout can help you: 

Group scattered elements and wrap them how you want

Just by wrapping the elements, you can align them right away and adjust how many lines they should take by controlling their width or height. Say goodbye to moving the separate boxes around. 

Lay out and distribute elements

If you want to distribute your components in relation to each other, just set the vertical or horizontal direction and choose how they should be laid out (start, center, end, or stretch). 

Keep consistency

With Auto Layout maintaining consistency among gaps, paddings, borders, and radiuses is easy. When you apply the wanted value, all the elements with Auto Layout will align accordingly.   

Resizing

Resizing comes in handy when you want to change one chosen element in the Auto Layout group. You can still maintain all the properties set for the group and play around with one element by changing the width, height, or filling out the main group. 

TL;TR

Auto Layout automates some of the manual work that you have to do when tweaking, aligning, and resizing elements. Groups of items can now align intuitively to work as a whole. Check all the functionalities in our documentation. Need help? Ask our community.

Sign up for a trial and align all your components in one click.

The post How Does Auto Layout Work in UXPin? appeared first on Studio by UXPin.

In a recent interview Bree Walter, Senior UX Designer at H&R Block talks about her experience with cross-functional teams and how she manages their work using UXPin. So if you’re a Product Owner or a Product Manager, we know how much you value seamless collaboration – not only for designers but everyone involved. 

One of the key differences between UXPin and other design tools is that UXPin offers a few features that allow you to connect the worlds of design, business, and development, and make it easier for everyone to stay on the same page. 

Gather feedback from anyone, no sign-in required

Unlike other design tools on the market, such as InVision (see UXPin vs InVision comparison), comments in UXPin let you gather feedback right at the spot from anyone even if they don’t have an account.

This is perfect if you need to invite additional members of the team to contribute to the project or have someone suddenly jump on it and share their opinion. It’s a win-win for both.

Reviewers don’t have to create an account just to leave a comment, and you don’t have to request an additional seat so that they can contribute. You only need to share the preview link with them and you start having an open discussion about the design. 

Share your life-like prototype with the stakeholders or potential users of your product so that they can click through the prototype. This way you gather feedback on early stages and can iterate before the coding even begins.

How about this awesome Guess Game by Alexander Olssen from the video above? Wanna play too? Here’s his UXPin design preview. Simply click through and you’ll get the idea and the feel of what the game would work like if it was an actual product. (PS. The comments were turned off for this specific prototype because you don’t have to grant everyone access to comment on your design previews.) 

Keep feedback in one place

This way, all feedback is kept in one place. It doesn’t get lost in Slack conversations, emails or multiple versions of the same design files passed around by designers, where nobody knows what is final because there are endless non-final final versions of a single file.

Share documentation and specs with developers

UXPin goes way beyond the possibility of just leaving comments with no sign-in. It also makes the designer-developer collaboration feel like a breeze. The same preview link that you’ll use to get others to comment also includes all information about the designs that your dev team needs to translate layers into code.

UXPin’s Spec mode is like an open book to everyone. Thanks to it, designers can keep creating and developers can have access to any information they need to implement the project. Any changes update right away so you don’t have to worry about updating it.

Ready to change how you work?

Creating products with great user experience requires coordination and perfect alignment across the entire team. UXPin really supercharges complex teams to move faster, make better decisions by quickly exchanging feedback, and master the art of dynamic teaming. Sign up for UXPin 14-day free trial to check all the collaboration features with your cross-functional team now. 

The post Free and seamless collaboration for cross-functional teams appeared first on Studio by UXPin.

The whole idea behind cookie consents

When sites remember your login details, preferences, or store your shopping cart items for later, that’s all thanks to web cookies. Cookie consents are probably one of the most popular and obvious pop-ups. Still, when designing them, you need to provide a great user experience and ensure users’ privacy at the same time. 

What’s really required in the cookie policy messaging

Copy approaches to writing a cookie consent can be very different and may vary widely. However, at minimum, the consent should address:

• What you use cookies for,
• What do they give,
• How your users can manage them.

Selected examples of cookie consent banners done right

The vast majority of websites display the cookie consent at the bottom of the viewport. It can be displayed as the footer or simply in the bottom-right or bottom-left corner. Let’s take a look at some websites that have done it right.

Squarespace’s cookie consent is not intrusive, yet remains visible at the bottom of the screen as the user scrolls the page. It informs you of the privacy and cookie policy and what you consent to by continuing to use the site.

Another way is to display the cookie consent in the corner of the screen. The example from FullStory is a more prominent one. It is a fixed dialog in the bottom left corner of the viewport that stays in that place until you interact with it.

How to create a cookie banner in UXPin

You can create this kind of a pop-up in UXPin in minutes by using just a few elements, such as a Box, a Text element, and Buttons. If you want to know how to recreate it step by step, read our tutorial on How to Create a Cookie Consent Pop-Up.

On-scroll pop-up window

Instead of welcoming your site visitors with a newsletter sign-in pop-up right away, you may want to take a slightly subtle approach. You can display it only when it is relevant to the content and on a scroll, just like Curate Labs did.

How to build an on-scroll pop up in UXPin

To prototype an on-scroll pop up in UXPin, you’ll need to build an interaction that displays the pop up when the page is scrolled to a specified position. Watch the video below to see how to recreate it step-by-step or follow our tutorial.

The post Creative Pop-up Examples Done Right appeared first on Studio by UXPin.

Bridging the worlds of design and development, UXPin also brings out to the best of both with collaboration for everyone. Over the last months, we have showered you with a host of product updates. Behind the scenes, we’ve been working hard to improve performance. In case you missed any of our updates, here’s everything that we shipped between UXPin 2.1 on December 10, 2019, and UXPin 2.5 on May 19, 2020, in a nutshell.

We always listen to what you say

We always listen super carefully to what you say, taking every opportunity to make UXPin better. Over the last months, we have added many frequently requested features and more – and that makes us super proud!

Set different canvas sizes

Along with UXPin 2.5 came what we call Different Page Sizes. It’s the ability to set different canvas sizes for each Page separately within one Prototype. Before that, all Pages would always share the same size. Since we still receive some questions from you about it, we thought this tutorial would be of extra help.

Comments in editor

Comments in the Editor were among other frequently requested features. Ever since we enabled it, giving and replying to feedback to the design while working on it is such a no brainer.

Undo deleted pages

Without a doubt, undoing deleted pages (just like you do it with emails in your Gmail inbox), was something you often asked for. So we made it possible to recover deleted pages seconds after you remove them.

File import

Sharing designs between accounts has never been faster. The file import allows you to save your prototype as a .uxp file, share it with anyone who can import it back and open it inside UXPin – even if you don’t share the same account.

Color labels for pages

Color labels for Layers that came with UXPin 2.0 turned out to be so helpful that we went the extra mile and enabled the same for Pages. Right-click on any page in the Pages panel and choose a color label for it.

Elastic boxes and buttons

Boxes and Buttons expand as you type into them, making last-minute copy updates a breeze. Just uncheck the Fixed Width and Height option in the Properties Panel.

Selecting elements made easy

We’ve made it easier to select locked elements, elements that overlap or are hidden under one another.

Get griddy with grids

With the introduction of New Grids, you have three different types of grids to choose from: column, baseline, and square. New Grids we also something we have tested inside and out internally before we gave it to more hands.

Jump between recent prototypes

To jump between recently opened prototypes, just click the down arrow in the top left corner of the Editor and choose the one you want to go to. It’s just much less clicking!

Color picker

Making the Color Picker faster and more intuitive took us a lot of work at the beginning of 2020, but the feedback we got from you proved that every hour of our work was really worth it!

The Color Picker gives you instant access to up to twenty recently used colors. Each time you use a color, it gets saved at the bottom of the Color Picker. That’s also where you can switch between colors from any of your Design System Libraries.

Contrast checker

Along with the rebuilt Color Picker, came the built-in Contrast Checker to ensure your text reads easily. When you’re working with text, there will be two lines across the color picker. These are the dividing lines between colors that make the text on your design readable and those that don’t.

Spell check

Both in the browser and in the desktop app, UXPin’s spell-checking ensure your copy is free of any typos. It constantly checks your prototypes for any typos and allows you to fix them with a few clicks.

OS fonts in the browser 

Speaking of fonts and text, we’ve brought all OS fonts to the Editor. Depending on your operating system, you’ll now see all of them in the Font picker under Local fonts.

One home for all your pages

We call it the Overview –  a single place with a bird’s-eye view of all your pages that makes it so much easier to keep things nice and neat.

Editable SVGs

With the UXPin 2.5 release, we introduced editable SVG files. Quickly upload and edit the SVG files on your design. With this, you can upload and refine illustrations or icons without leaving the prototype to use a different tool.

Big and small nudge

With the Big and Small Nudge, it’s possible to configure how many pixels the element will move or resize when using the keyboard. Especially handy with the 8px grid.

Duplicate improvements

Such a small thing yet so powerful! When duplicating elements, UXPin will remember the last offset, saving you so much time down the road.

Input placeholders

Inputs act like the “real-deal” – no need for additional interactions or states to make the placeholder.

The post What We Brought to UXPin Over the Last Months appeared first on Studio by UXPin.

The UXPin 2.5 release brings Comments to the Editor! You can now leave and reply to feedback as you work on the design. We’re introducing the option to set different canvas sizes for each Page. From now on, it’s also possible to edit SVG files. With it, you can refine your icons without leaving UXPin. See what else is new.

Comments in editor

Comments are now also in the editor! Giving and replying to feedback has never been easier and faster. Until now, Comments were available on Preview and we’re not taking them away from there.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/05/2-5_Comments_Blog_700x526-2.mp4″ autoplay=”true” controls=”false” loop=”true” muted=”true”]

Different canvas sizes for each page

You can now set different canvas sizes for each Page separately. Before that, all Pages would always share the same size.

Editable SVGs

With this release, we’re also introducing editable SVG files. Quickly upload and edit the SVG files on your design. With this, you can upload and refine illustrations or icons without leaving the prototype to use a different tool.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/05/2-5_EditSVG_Blog_700x526-1.mp4″ autoplay=”true” controls=”false” loop=”true” muted=”true”]

Big and small nudge

You can now configure how many pixels the element will move or resize when using the keyboard. This comes handy for the 8px grid.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/05/2-5_Nudge_Blog_700x526.mp4″ autoplay=”true” controls=”false” loop=”true” muted=”true”]

Duplicate improvements

Duplicate now remembers the last offset, saving you so much time. This sounds like a small thing, but it’s so useful!

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/05/2-5_Duplicateimprovements_Blog_700x526.mp4″ autoplay=”true” controls=”false” loop=”true” muted=”true”]

Improvements

This release also brings many improvements to the Editor.

• Image optimization for files bigger than 4000px to improve loading times.
• You can now place images into elements.
• We’ve enabled batch editing properties for different element types.
• You can double-click on the text’s resize handles to change it from fixed size to auto.
• You can now copy and paste canvas interactions 
• You can paste interactions to multiple elements at once.
• We added the “Loop” option to the following interactions: Set state, Next state, Previous state, Set variable, Set content, and API request.
• You can set the Delay for Set Variable and API Request interactions.
• Changed the default mask mode from the alpha to the outline.
•  Added Placeholder property to Input and Text area elements. 
• There’s a new option to reset image size to its original size in the Properties Panel.
• From now on, selecting a gradient from a Library in the Color Picker changes the Fill to Gradient.
• It’s now easier to resize very small elements.

Fixes

• Occasionally, Go-to-page interactions couldn’t be copied with keyboard shortcuts. That won’t happen anymore.
• Some SVG files were broken when added (with drag-and-drop) –we got your back.
• In some cases, copy-pasting styles between Shape elements would also change the shape, not just the style.
• Changing the size of a Button from Fixed to Auto, saved the wrong result when the Button had padding set.
• After setting the anchor point, the position in the tooltip (that shows the positions on the X and Y axes) was different from the position in the Properties Panel.
• Fixed some snapping issues that occurred when resizing a group of elements.
• A delayed interaction would either interfere with other interactions or trigger even if you switched to another page.
• There were times when it wasn’t possible to paste copied elements. We fixed it.
• Contrast Checker now skips invisible elements.
• Snapping didn’t work when duplicating elements with Alt + drag.
• Smart distances in the Spec mode sometimes showed values mismatched by 1px.

The post What’s New in UXPin 2.5 appeared first on Studio by UXPin.

Comments in the Editor: New level of collaboration

We’re super excited to announce that Comments are coming to the editor!  Over the last months, we’ve received plenty of requests to make this happen. You will soon be able to add comments and reply to feedback when working on your design.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/05/2-5_Comments_Blog_700x526-1.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Editable SVGs: Refine your icons at the spot

We’re making SVGs editable in UXPin. This means that you will be able to upload and refine illustrations or icons without leaving the prototype.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/05/2-5_EditSVG_Blog_700x526.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

UXPin 2.5 will launch in a week so stay tuned as there’s more to come!

The post See What to Expect in UXPin 2.5 appeared first on Studio by UXPin.

Ignore snapping

When moving or resizing elements, you can ignore snapping by holding down the Cmd key on Mac and Ctrl on Windows.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/04/Snapping_800x600_24_Title.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Lock or hide all layers

To lock all layers in a group, just hold down Alt and click on the lock icon. To hide all layers, also hold down Alt and click on the eye icon – the layers will stay hidden even if you pull them outside the group.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/04/HideLock_800x600_24_Title.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Rename layers

To quickly rename a selected layer, use the Cmd R shortcut (Mac) and Ctrl R (Windows) and start typing. Press Tab to go one layer down and Shift and Tab to go one layer up.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/04/Renamelayer_800x600_24_Title.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Drag labels to change values

There’s a faster way to change input values than typing – you can just drag the label to increase or decrease the value. Holding down Shift when dragging will change the input value by 10.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/04/Draglabel_800x600_24_Title.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Hide UI

To toggle the visibility of the entire UI,  hold down Cmd and \ on Mac and Ctrl and \ on Windows.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/04/HideUI_800x600_24_Title.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Collapse all groups

To collapse all groups in the Layers panel at once, use the Cmd Alt L shortcut (Mac) and Ctrl Alt L (Windows). This will close all groups in the layers panel.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/04/Collapse_800x600_24_Title-1.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Expand and collapse multiple groups

To expand or collapse multiple groups at once, hold down Alt and hit the arrow next to the group’s name. This will open up or close absolutely everything within the chosen group.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/04/Expand_800x600_24_Title.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

The post UXPin Tips and Tricks You Need to Know – Part 3 appeared first on Studio by UXPin.

UXPin 2.4 comes with the .uxp file import! You can now save your prototypes as .uxp files and import them to UXPin. To open a file, simply drag and drop it onto your UXPin project dashboard where your other prototypes are.

The possibility to import and save .uxp files is especially useful when you want to share a design with others who don’t have access to the same UXPin account. See exactly how it works in UXPin Docs.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/03/import-uxp-file-mailing-1400×1000-1.mp4″ autoplay=”true” controls=”false” loop=”true” muted=”true”]

Ready-to-use examples

Discover our beautifully designed, ready-to-use examples that inspire, save your time, and accelerate your workflow. Just import them to UXPin and pick up from there!

The post See What’s New in UXPin 2.4 appeared first on Studio by UXPin.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/02/2-3_release_asset_Changelog__Post.mp4″ autoplay=”true” controls=”false” loop=”true” muted=”true”]

New color picker

Today we introduce our new color picker. It’s now a lot faster and more intuitive. It took a lot of work, but we’ve completely rebuilt it to make your workflow more efficient. To make it even better, we’ve already started working on a new eye-dropper tool!

The color picker gives you instant access to up to twenty recently used colors. Each time you use a color, it saves it at the very bottom of the picker. That’s also where you can switch between colors from your Design System Libraries if you have them. So for those that miss adding colors to your “favorites” with that little heart icon in the old picker, we recommend using Design System Libraries. They allow you to save your favorite colors and even share them with your team! You can read more in our Color Picker tutorial.

Built-in contrast checker 

We equipped our color picker with a built-in contrast checker which makes it the only color picker on the market to have one. It evaluates the contrast between the text and the background on the fly to ensure your text reads easily. Each time you edit text on your design, you’ll notice two lines across the color picker. These are the dividing lines between text colors that are at least “AA” rated, and those that don’t meet these standards. Learn more in the Contrast Checker tutorial.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/03/ColorPicker-700×526-3.mp4″ autoplay=”true” controls=”false” loop=”true” muted=”true”]

Spell checking 

You know the drill… you’ve worked really hard to create that perfect UI only to have this one accidental typo spoil your work. To avoid such situations, with the 2.3 release, we enabled your browser’s spell-checking powers to mark any spelling errors on your design as you type. From now on, you can have your prototype constantly checked for any typos and fix them with a few clicks. See how it works on UXPin Docs.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/03/SpellCheck-700×526-1.mp4″ autoplay=”true” controls=”false” loop=”true” muted=”true”]

Pages overview 

The name pretty much explains itself. We’ve created a single place where you can have a bird’s-eye view of all your pages. This makes it so much easier to keep things nice and neat.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/03/PagesOverview-700×526-1.mp4″ autoplay=”true” controls=”false” loop=”true” muted=”true”]

OS fonts in the browser 

Depending on your operating system, you’ll now see all OS fonts listed under Local fonts in the font dropdown.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/03/osfonts-700×526-1.mp4″ autoplay=”true” controls=”false” loop=”true” muted=”true”]

Improvements 

Check out all the improvements we shipped and the fixes we squashed with this release.

Editor

• From now on, the recently used Design System Library will show faster and without the loading spinner.
• We added new Rotate, Delete, Duplicate options to the element context menu and Zoom options to the canvas context menu.

Layers

• You can now duplicate elements with Alt drag in the Layers panel.
• To duplicate an element outside a Component, in the Layers panel hold down Alt and drag the element out.

Canvas

• It is now possible to scroll the canvas in both directions at once.
• The window now follows the cursor while scrolling, drawing Shapes or making a selection.

Components & States

• New options for Components in the context menu: Edit Master, Push to Library, and Pull from Library. Plus, we renamed Deatch to Unlink.
• Previously, setting a fixed position for an element in one Component Instance would influence it in other instances of that component. You can now change set the fixed position in one instance without influencing the rest.
• We simplified the default state name to “Base”.

Interface

• Toggling the UI with the Cmd \ shortcut works faster than before.

Fonts

• FontAwesome is not available in the fonts picker.
• You can now use Alt T to open the font picker for a selected text element.

Fixes

Elements

• When duplicating selected elements with Alt drag, they were placed below the last selected element in the Layers panel. Now, they’re placed on top of the first selected element.
• Fixed some bugs related to copy-pasting elements.

Components & States

• We fixed a bug causing the possibility to create States for elements inside and outside a Component at the same time.

Pen tool

• Fixed console error after pressing Delete while dragging a point in a path.
• The bounding box of a shape was not rounded to full pixel when creating paths and combined shapes.

Preview

• Multi-select padding wasn’t applied on Preview.
• When switching between pages, the sitemap would sometimes become inactive.

Merge

• Issues with pasting Code Components values, such as strings or arrays.
• On the desktop app, a popup with an error showed when you tried to edit text elements that are Components.

Other

• Gradients did not always apply properly.
• Multiple mask fixes.
• Custom fonts would not render properly when copying elements between prototypes.
• Fixed issues with adding Design System Library permissions to selected users.

What’s next 

See what’s coming up in the next release:

Importing .uxp files

Saving your prototypes as .uxp files will give you the possibility to import and open someone else’s design files and share your own work with others.

Editing SVG files

Uploading and editing SVG files will soon be possible in UXPin.

Comments in editor

You will soon be able to access comments in the editor.

The post New features and updates in UXPin 2.3 appeared first on Studio by UXPin.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/01/2-2_release_POST_800x600.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

New Grids are on the Block

You now have three types of grids to choose from and apply in your projects: column, baseline, and square. Define the right structure, hierarchy, and rhythm in your design and take the guesswork out of many aspects of your design process. Get griddy with it! See how it works in Docs.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/01/BaseSquareGrid_800x600.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Access to Recent Prototypes from the Editor

We know that until now switching between projects took far too many steps — open the Dashboard, go back to projects, open the project, choose the prototype, and so on. That’s why we’ve decided to make switching between prototypes easier and faster, by adding the possibility to access up to five recently opened prototypes. Just click on the down arrow in the top left corner of the Editor.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/01/RecentProjects_800x600.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Color Labels for Pages

After introducing color labels for layers, we’ve pretty much been snowed under questions and requests to enable this feature for pages. And we did it! Right click on a page to get an option to add a color label. See more in Docs.

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2020/01/ColoringPages_800x600_7.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Improvements

Here’s a list of selected improvements:

Text

• A number of improvements that make working with the font select smoother and easier.
• We renamed the Fonts Management to Font Library.
• You can now adjust the font size, line height, and letter spacing with shortcuts.
• The text no longer blinks when switching fonts.

Shapes

• Shapes, lines, and arrows that have Bézier curves or 2 points don’t have the radius option available.
• Rectangles and rounded rectangles will have radius available for all edges.
• On various zoom levels, Pen tool paths are always 1px.

Pages and Layers

• You can now use emojis in page, prototype, and project names.
• We’ve increased the time for undoing deleted pages from 10 to 20 seconds.
• Duplicated pages appear below the last duplicated element.

Editor and more

• The swipe gesture no longer exists the editor.
• We’ve updated the names of a few interaction triggers and actions.

Fixed

Check out all the fixes we smashed this time:

Breakpoints

• The “Open in New Tab” option for pages would always open the default breakpoint, instead of the active one.
• Custom breakpoints were not visible in canvas properties.
• Adding more than 8 breakpoints would make the Properties panel disappear from the viewport.

Elements

• Enabling auto-size for Boxes displayed the wrong values in the padding inputs.
• When zooming in, the zoom jumped from high level to very low too fast.
• Sometimes applying gradients from the Design System Library would make Rectangles transparent.
• Elements changed their position when pressing and releasing Alt during resize.
• Elements did not align to the pixel grid after being copied or duplicated.
• Drawing paths inside combined shapes was not possible.

Positions

• Snapping to guides did not work for elements that were outside the canvas.
• Elements did not align to the pixel grid when aligned to center.
• Smart guides moved 1px when duplicating elements on zoom.

Editor

• Disappearing bottom bar when switching to documentation mode.
• You couldn’t drag elements on the canvas after drawing a path and adding an image without closing the editing mode.
• Pinning the Sitemap to the right deselected pages.
• Blinking Sitemap on resize.
• We fixed issues that caused the app to crash.

What’s Next

See what’s coming up in the next release:

New Color Picker

We are still working on rewriting our Color Picker to make it faster and more intuitive.

Pages Overview

We’ve been working hard on a major update to our interface – the Pages Overview – thanks to which you will be able to access and view all your pages in one place. 

Spell check

Soon enough we will give UXPin a spell-checking superpower for everything you type on your design.

OS default fonts in the browser

You will soon have access to all your default OS fonts in the browser.

The post See what’s new in UXPin 2.2 appeared first on Studio by UXPin.

Elastic boxes and buttons

Boxes and buttons now expand as you type into them. Just uncheck the Fixed size option in the properties panel and you’re good to go! Apart from that, we’ve also enabled all text properties inside boxes and buttons. See how it works in Docs.

You can now undo deleted pages

This has been one of the most frequently requested features. So we’re happy to finally say that you can now recover deleted pages seconds after you remove them.

Hide pages from preview

If you have pages in your design that you don’t want to show on preview, just click the eye icon next to the page name. This makes them invisible on preview, excludes them from exports and the navigation. Learn more on Docs.

Selecting elements got a lot easier

Selecting elements on the canvas is now easier. If you want to select a locked element on the canvas or elements that overlap or are hidden under one another, we’ve got you covered. Just right-click and choose Select Layer from the context menu to get down to every single layer that’s right under your cursor. Read more in the tutorial.

Improvements

• You can now move elements to a position that’s not visible in your current viewport.
• We’ve improved grid rendering on large zooms levels.
• You can now set the weight of system fonts for Windows.
• The top bar now displays up to 5 avatars in the Top bar when you’re working with the team on the same prototype.
• We’ve improved the context menu for elements by grouping actions that are relevant and adding new ones.
• We have removed unnecessary options from the canvas context menu.
• Editing large projects would cause a performance drop.
• Sometimes the Esc button would not deselect a currently selected Page.
• From now on, the possibility to open the sitemap if you have only one page is blocked.
• Groups in the Pages panel are now expanded when dragging a page into the group.

Fixed

• The icon for removing the guide was stuck when clicking very close below the vertical guide and dragged it.
• Disappearing canvas when switching between pages while editing the Master Component.
• Pinning or unpinning the Pages and Layers panel did not remember the expanded or collapsed sitemap size.
• Adding a new page from the context menu duplicated the content of the selected page.
• The project switch button worked only when you clicked on the project’s name.
• We’ve fixed the order of layers after duplicating at least 2 elements with Alt-drag.
• Copy-pasting elements with Cmd/Ctrl C and Cmd/Ctrl V would place the copied element beneath the original element.
• The properties panel disappeared when you edited some expressions.
• Zen mode did not hide all panels.
• Flip Vertically and Horizontally is now blocked in Component Instances.
• Fonts added by users would not load on Chrome [Windows].
• When moving guides with Cmd pressed, ignore snapping didn’t work.
• The context menu in the layers panel did not close after the first click.
• Adding a new page in a collapsed pages panel no longer enters the edit name mode.
• Elements didn’t snap to guides after you zoomed in.
• States for hidden elements in the Layers panel were not grayed out.
• Depending on the browser, the collaborator’s initials inside team avatars were not centered properly.

What’s Next?

Here’s what you should be looking forward to in our upcoming releases:

Color Picker

We’re rebuilding our color picker by making it faster to use. You’ll know right away which colors are at least “AA” rated and which don’t meet accessibility standards. You’ll also have the option to switch between the list and grid view for colors from all accessible Design System Libraries.

Grids: Column, Baseline, and Square

We will soon be adding more grids to UXPin. Column Grids that are perfect for organizing elements into columns., Baseline Grids to give a flowing rhythm to the text in your design, and Square Grids where you can define the size of cells.

Recent prototypes

You’ll be able to view the list of your recent prototypes and switch between them from the top left corner of the editor.

Pages overview

An overview of all your pages will soon be available in UXPin. You’ll see a new icon at the top of the Pages Panel that will take you to a separate view with all pages from your current prototype.

The post See what’s new in UXPin 2.1 appeared first on Studio by UXPin.