The discussion has been going on for as long as I have been in the web design and development industry. It focuses on the contradiction between design tools and development tools. The end product of web design is often a model. The old joke was that web developers make websites and web designers paintings websites. This detachment is a source of tremendous friction. What is the source of truth?

What if the source of the truth could really exist. What if the design tool works with the same code as the production site? The last chapter of this epic discussion is UXPin.

Let’s set the facts so you can see everything playing.

UXPin is a browser-based design tool.

UXPin is a powerful design tool with all the expected features, especially for digital display-based design.

The fact that it is internal to the browser is very good here. Website design… a website is self-evident and natural. It means what are you watching Is what it looks like. This is especially important with typography! The implementer of this card component sees the exact colors used (in the correct formats) as well as the exact pixel dimensions, etc.

This has been nicely presented by Ania Kubów In a video about UXPin.


More than a decade ago, Jason Santa Maria thought a lot about what a next-generation design tool would look like. Could we use the browser directly?

I don’t think a browser is enough. A web designer who jumps into the browser before solving creative and message problems is similar to an architect who hits pieces of wood together and measures afterwards. The imaginative process is shortened with the tools at hand; and it is that imagination – or spark – at the beginning of the design that creates the path to everything that follows.

Jason Santa Maria, “A real web design application”

Maybe not directly from the browser, but a design tool indoors a browser that could be the best of both worlds:

Such an application can significantly change the web design process. Most importantly, it would not be a proxy application that we use to simulate the look and feel of a website – it would already speak the language of the network. That would really be the design of the browser.

It’s so great to see this presented in a way that is consistent with what the great designers imagined before it was possible and with new aspects that blend in with today’s technological possibilities.

You can work yours Reacts components in UXPin.

Here is the source of truth magic can happen. There is one thing if a design tool can print a React (or any other frame) component. That’s a cool trick. But it’s probably a one-way trip. The components of real life projects are full of other things that are not entirely an area of ​​design. Perhaps the component uses the hook to restore the rights of the current user and disable the button if he does not have access. The Disabled button has a formatting element, but most of the code does not.

It is impractical to be a design tool that cannot respect other code in that component and just leave it alone. Basically, it is not a design tool if it exports components but cannot import them.

This is where UXPin connection comes in.

Now the fair is fair, this requires little work. It may only take a couple of hours or the entire design system took a few days. UXPin only works with React and integrates it with an online package configuration.

Once you’ve joined, The components used in UXPin are literally the components you use to build your production site.

It’s really impressive to see how a design tool blends pre-built components and lets them be used with a whole new canvas to create prototypes.

They have a lot of help with the implementation of the project, including:

As it should, it will likely affect how you build the components.

Parts usually have props, and props control things like design and content. UXPin gives you an interface to the prop, which means you can have complete control over the component.

<LineChart 
  barColor="green"
  height="200"
  width="500"
  showXAxis="false"
  showYAxis="true"
  data={[ ... ]}
/>

Knowing this, you can give yourself a component interface that gives you a lot of design control. For example, integration theme change.

All of this is even faster with Storybook.

Another very popular tool in JavaScript-components-land for viewing components is Storybook. It’s not a design tool like UXPin – it’s more than a components zoo. You may already install it, or you may find value in using the Storybook as well.

Great news? UXPin connection works great with a storybook. It makes integration very quick and easy. In addition, it supports any framework such as Angular, Svelte, Vue, etc. – in addition to React.

See how fast:

Marcin Treder, CEO of UXPin had a strong vision:

What if designers could use the same components that engineers use and they are all stored in a shared design system (with accurate documentation and tests)? Many of the frustrating and costly misunderstandings between designers and engineers would cease the event.

And the plan:

  1. Connect to any Git backpack.
  2. Learn about all the parts of a repo.
  3. Make these components available to the UXPin visual editor.
  4. Check for any changes to the repo and take them into account in the visual editor.
  5. Let the designer design and provide detailed information to developers about the use of these components.

And that’s what they’ve pulled from here.

LEAVE A REPLY

Please enter your comment!
Please enter your name here