Closing the gap between designers and developers – breaking the magazine.

Quick summary.

UXPin has recently launched a new feature called “Merge”. The tool aims to address design and development flaws, while improving the agility and quality of our teams. This new technology may cause some to think about how the entire design team and engineering team collaborate.

In the last two years, it’s no secret that our design tools have evolved rapidly. With so much partial management and prototyping, you’re wondering what the next big leap could be.

Let’s look at a common dilemma:

We say you are the designer of the Design Systems team where you spend many hours documenting all usage cases and properties that may or may not change. You eventually remove a large complex component and pass it on to developers.

How do we know the code is the same UI? Do we really need to audit every single component? How can we bridge the gap between what is designed and what is not?

All of this and you have to help teach people. Different ways to use ingredients.Appropriate distance and design for the responsive web, and of course, the component will need to be updated for future use matters.

There are so many types it’s hard to say. It almost feels like the more we move forward in the design system, the more there is for everyone! Now, it looks like a light is shining at the end of the tunnel, and the next big thing is on its way.

A hidden gem in all chaos.

I recently had the opportunity to review a tool that I haven’t used in a long time – a tool that aims to reduce this gap and reduce it all: UXPin. A new feature called “Merge” has been launched to help address design and development flaws, while improving the agility and quality of our teams. This new technology can cause some people. Reconsider how the entire design and engineering teams collaborate. And work through usage issues and building components.

Out with the old process

If we look at the current process that most companies use today, it can be very beautiful. Painful with some obvious flaws. When we create a new component from scratch, we will design the basic level of the component, add different types, write the document, publish it in the library and pass it on to the developers. Listing the process is long, but fortunately it only needs to be done once (we hope):

Preview of the joint process for creating and updating components. (Large preview)

Now, what happens when we need to update a component? A new case of use has emerged, or perhaps we have decided to sharpen our borders with a razor? Now we need to add the variables to the library, (possibly) re-update the document, publish it and pass it on to our developers. Oops! Let’s hope nothing goes wrong along the way. With all the reorganization of the component for our designers.

I almost forgot, we still need to publish the update in the development library! Let’s hope the product teams can finish before they go on their way to meeting the deadline.

With new process.

So, you may be wondering, how does UXPin Merge technology help in this top-notch process that we use today? Okay, take a look at the picture below. You can see that no component creation and variation is required (in most cases). This new process. Reduces the amount of stir Due to our now compatible relationship with developers, with auto layout tools:

The diagram shows a new process and how to manage components.

A preview of the new process and a different way of managing components. (Large preview)

All we need to do is design the documentation and the level of detail required for implementation. There is no need to design simple components such as buttons or other atomic surface components. Why waste your time doing double work? When can growth start immediately with a little overhead? In a way, we are in full swing. We are going back to the old ways when static components show only a few interactions in documents.

Notice that publishing to the library is now at the end of the process. This is because, once the developer is finished with the component, they can now use the merge to make it available to designers in UXP, and of course, all your product developers have it at the same time. Is!

When updating components, it’s basically the same as the new one, except that it’s possible to skip the first step in terms of scenario. For example, it says you want to add an option to add an icon to the buttons. It’s not something that needs designing, but rather, it needs to communicate with your new best friends in development.

Although this new relationship is formed with your developers, the new way for designers to formally launch components can only be with the release of the developers. Gone are the days of product designers asking if there were any components available to their product developers. If it’s in the library, it is. Available in development and ready for designers. Working now.

But enough about the process. Let’s take a look at how UXPin Merge works.

Management of libraries.

Best of all, libraries can be imported directly from your code repository, such as Gut Hub, Butt Bucket, Gut Lab, (works only for reaction components), or even from Storybook. Also Once the library is created, you will have the option to name the library.

Screenshot of options to choose from when adding a library.

(Large preview)

When importing with Storybook, the process is straightforward. Just grab the URL of the library, and UXPin will do the rest for you. With the reaction components, using CLI, you have. Ingredients control Which are published by explaining the unique tokens of the UXPin library.

Version control and testing

The biggest concern between designers and design systems teams is version control. Most concerns can be addressed with this UXPin integration feature. Let’s paint a quick picture:

Today, when we go out to upgrade a component, there is always the fear of breaking a component or layers that can be renamed and cleaned. The total restructuring of the component can even lead to frequent concerns (from the designer) as to whether they should upgrade a component or stick with the old one.

When a component is created, however, as long as the properties remain the same, it does not matter how the component configuration changes or the actual markup of the component. As a result, Allows designers to upgrade their components. With confidence in the latest version.

Of course, hopefully in the rare event that a component goes completely bad, just like a coding project, it can be easily reversed and an older version of the component can be republished.

Testing updates.

When testing new components or updates, it’s not that easy today. We cannot explicitly modify the existing design library because it may be published accidentally, and may block any other updates that are ready to go. Creating a component in a new file, testing it, and then trying to handle re-merging into an existing library without breaking the layers is also very cumbersome.

Fortunately for us, the developers have understood this issue long ago, and it fits perfectly into UXPin’s integration technology. When testing new components, it’s already there. The best way to make a code a fork or a branch., And this new branch can be published in the test environment within UXPin. Your team can test this or you can give access to a small group of beta testers in your company. Once the component has been tested and tested, the component can be quickly introduced and published in the Primary Design Library without any stitches.

Designing with code

So, how are our team members on the ground design, and what does this technology mean to them? Well, I’m glad you asked! From the product designer’s point of view – not much difference. When a designer uses a component of a development library using integration, they will. Marked with an orange hexagon. Anything new for each component will continue to behave exactly like the developer’s library.

Navigation component and layers.

Navigation component and layers (large preview)

Restrictions may be specified in the developer components, but in a good way. A common problem often occurs. Using icons as links. Instead of wrapping the icon in a button component. If we use only one icon from the library, it is closed and the user cannot add an interaction.

Home icon without chat options.

Home icon without interaction (large preview)

Alternatively, the icon button below allows chat. This allows us to really improve and control which components should be interacted with, and which should not. Both accessible with a standard approach.

Home button icon with interaction options.

Home button icon with interaction options. (Large preview)

With these types of restrictions, this design makes it easier for the systems team to use the components in their proper way, and if it is over-mounted, it will be clear from the layer panel that something has been customized. Is.

Hand off.

When you are ready to hand over to the developers, the finished prototype can display each component and its configuration for copying and pasting in the developer’s tools and Prepare the plan as soon as possible.. If your team does not yet have a component library, UXPin comes with a default library or you can. Easy import Some public libraries are available directly in UXPin.


When it comes to accessibility, it is often overlooked or not enough time to document at all. meta Label, aria Tags, etc. Designers don’t know what tags they need for input and developers don’t want to go through the hassle.

With UXPin, we can. Uncover multiple features. Even meta-level data that is never visible to the interface, such as ARIA labels. Designers can then enter all the information they need (or a copywriter if you’re lucky enough to join your team), and product developers won’t have much to implement.

Layouts, templates and grids.

Just by reading the title, you know what’s going on, and I’m sure you’re bouncing in your chair right now – I know I am. Grids, layouts and even page templates can be dragged into the library as a ‘component’ that allows users. Bring ingredients to the active area. Allows to handle all distances through one page and development library.

Common templates (such as login screens, completion pages, forms, profile pages, etc.) can all be used as a drag and drop component. Talk about speeding up the process and Reducing human error in design.!

In closing

If you’re ready to take the leap, it’s never too late to try out new software and new processes to improve your workflow. However, we all want to be as agile as possible. let’s go Build strong relationships In our teams, reduce our workload and work more efficiently. With tools like UXPin Merge, we get closer to a much smoother work environment.

Breaking editorial.(vf, he)

Write a Comment

Your email address will not be published. Required fields are marked *