{"id":31201,"date":"2021-08-05T06:00:00","date_gmt":"2021-08-05T13:00:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=31201"},"modified":"2024-06-12T20:48:21","modified_gmt":"2024-06-13T03:48:21","slug":"storybook-best-practices","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/storybook-best-practices\/","title":{"rendered":"Storybook Design System: It\u2019s Time to Reap Its Many Benefits"},"content":{"rendered":"\n

<\/h2>\n\n\n\n

Since you\u2019re here, there\u2019s a good chance that you have used our design-with-code  Merge technology to build fully functional prototypes. (If you haven\u2019t taken that step yet, try for free<\/a> our Storybook integration.)<\/p>\n\n\n\n

Recently, we took a giant leap forward by releasing an integration with Storybook<\/a>. <\/p>\n\n\n\n

We don\u2019t want to assume that you know a lot about Storybook and the advantages you get from combining it with Merge. To make sure you and everyone else understand why this matters so much, we\u2019ve put together some of the top benefits of using the Storybook design system and write a quick tutorial to get you started.<\/p>\n\n\n\n

By the time you get to the end of this post, we know you\u2019ll feel our excitement!<\/p>\n\n\n\n

<\/div>\n\n\n\n

Storybook design system as a single source of truth<\/h2>\n\n\n\n

Digital design projects can get messy, especially when you have multiple people working on several jobs at once. The Storybook design system reigns in the chaos to give everyone involved a single source of truth<\/a> and make it easy to test components<\/p>\n\n\n\n

Your fellow product team members may not be on the same page with all the standards and there might be just too many back-and-forths about making sure that the design has everything that\u2019s needed for the development stage. In that case, you need to centralize all your knowledge in a better way. An interactive design system that keeps everyone on the same track is the answer.<\/p>\n\n\n\n

With the Storybook design system, any change that you make gets updated everywhere. You don\u2019t run into problems with one person having the 20.2 version while someone else follows the 21.1 version. You eliminate that madness by creating a digital design system that gives the same information to everyone.<\/p>\n\n\n\n

Storybook also makes it easier than ever for your team members to find the components they want. The component finder and sidebar<\/a> will direct them to results that match their search queries. If you can use Google, you can find the right components in your Storybook design system. (If you can\u2019t use Google\u2026 how did you even get here?)<\/p>\n\n\n\n

<\/div>\n\n\n\n

Storybook design system inspires creativity without (adverse) consequences<\/h2>\n\n\n\n

Unlike a lot of design and development tools, Storybook lets you build UI components and test them in isolated sandboxes. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

So, you can create interactive components without damaging other aspects of your design system or components library. <\/p>\n\n\n\n

You can explore your most creative ideas without fear. You might find a unique approach that adds to your brand\u2019s aesthetic and functionality. Even if you don\u2019t reach those goals, you can\u2019t hurt anything by trying.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Integrating Storybook and Merge eliminates design-development inconsistencies<\/h2>\n\n\n\n

Clearly, we\u2019re big fans of code-based design<\/a> at UXPin. We saw a lot of designers and developers working against each other. The problems almost always came from miscommunication and the lack of a single source of truth. The two types of professionals didn\u2019t have a common language, so they often struggled to understand each other. Designers worked with image-based technology, whereas development focused on code. <\/p>\n\n\n\n

Merge helps solve those problems by giving your teams a no-code, drag-and-drop design environment that\u2019s still powered by code. Designers can create new products by pulling from the component library, making a few adjustments, and sending it on to the developers. The developers already have the code for those elements, so they cut down the time to build digital products.<\/p>\n\n\n\n

When we discovered Storybook, we knew that we had found kindred spirits who understood that visual design needed to evolve into the code-based design. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

After a lot of work, we built an integration that would let our users access their Storybook design systems. You don\u2019t have to worry about add-ons or APIs. You integrate the two and start using your Storybook design system within Merge\u2019s editing and prototyping platform.<\/p>\n\n\n\n

The remarkable thing is that your prototypes will function just like the final product. Storybook excels at building atomic components<\/a> that make testing extremely easy. Basically, if the components work correctly, the user interface will also work correctly.<\/p>\n\n\n\n

Now, you don\u2019t have to think about inconsistencies between your original design and the finalized product. <\/p>\n\n\n\n

<\/div>\n\n\n\n

How to integrate Storybook with UXPin <\/h2>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

It\u2019s time to wade into the technicalities of integrating Merge and Storybook. Hold your breath! Just kidding. It\u2019s actually very easy.<\/p>\n\n\n\n

First, you need a UXPin trial account. Sign up<\/a> and we can make that happen.<\/p>\n\n\n\n

You also need a Storybook, which you can install from here<\/a>. (Make sure you get version 6 or above.) If you have a private Storybook URL, contact us at sales@uxpin.com<\/a> for some extra help. Import your components to Storybook<\/a> if you already have some. <\/p>\n\n\n\n

Assuming that you have a public Storybook, just follow these steps: <\/p>\n\n\n\n