UXPin Merge Changelog: Component Documentation URL Tag

MergeThemeSwitcher

Our Merge technology allows you to copy the ready JSX code of your UI code component. However, sometimes it’s hard to find the exact documentation for each component. See how you can do it quickly.

Design with React, Storybook or npm components that your devs build apps with in UXPin’s editor. Create prototypes that can quickly be translated to code and streamline product development process. Discover UXPin Merge.

Reach a new level of prototyping

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

Our solution to the challenge

Design systems can have very complex, detailed, or hard-to-navigate documentation, so we wanted to reduce your struggles and frustrations of finding it. 

So, we added a very simple but effective feature for doing just that. We’ve added a new JSDocs tag to our component commentating syntax that creates a link in the Merge Preview Spec panel.

Component Documentation

It could be used to link out to usage, prop info, Storybook, or for those without any documentation, it could link to UXPin layout examples. Adding this feature not only saves time but also helps to centralize and integrate all your current processes and toolsets into one place.

How to add it

It couldn’t be easier to implement too, just add a JSDocs comment before your component like the below example:

/**
* @uxpindocurl https://mui.com/api/card-media/
 */
function CardMedia(props) {
return <CardMediaM controls {...props} />;
}

Design with code with Merge technology 

What’s different about a UXPin Merge prototype? You get to use interactive UI blocks that save you from redesigning the same things over and over again. As these blocks are coded components, developers can just copy the code straight from your design.

Using such components not only increases the level of interactivity you wouldn’t be able to reach in an image-based tool but also speeds up the prototyping process.

Designers and engineers have three options for connecting code components with UXPin Merge:

  • Git repository—currently only supports React components
  • Storybook—supports React, Vue, Angular, Ember, and many more
  • npm–bring React components through npm

Read more about Merge.

Sync your Design System components with our design tool and enjoy all the perks! Request access now. 

Use a single source of truth for design and development. Discover Merge

Logos
Robert Kirkman

by Robert Kirkman on 25th November, 2021

Just a British man working in Tokyo as a software engineer and technical content writer for UXPin.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you