Since you’re here, there’s a good chance that you have used our design-with-code Merge technology to build fully functional prototypes. (If you haven’t taken that step yet, try for free our Storybook integration.)
Recently, we took a giant leap forward by releasing an integration with Storybook.
We don’t 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’ve put together some of the top benefits of using the Storybook design system and write a quick tutorial to get you started.
By the time you get to the end of this post, we know you’ll feel our excitement!
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 and make it easy to test components
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’s 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.
With the Storybook design system, any change that you make gets updated everywhere. You don’t 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.
Storybook also makes it easier than ever for your team members to find the components they want. The component finder and sidebar 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’t use Google… how did you even get here?)
Unlike a lot of design and development tools, Storybook lets you build UI components and test them in isolated sandboxes.
So, you can create interactive components without damaging other aspects of your design system or components library.
You can explore your most creative ideas without fear. You might find a unique approach that adds to your brand’s aesthetic and functionality. Even if you don’t reach those goals, you can’t hurt anything by trying.
Clearly, we’re big fans of code-based design 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’t have a common language, so they often struggled to understand each other. Designers worked with image-based technology, whereas development focused on code.
Merge helps solve those problems by giving your teams a no-code, drag-and-drop design environment that’s 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.
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.
After a lot of work, we built an integration that would let our users access their Storybook design systems. You don’t have to worry about add-ons or APIs. You integrate the two and start using your Storybook design system within Merge’s editing and prototyping platform.
The remarkable thing is that your prototypes will function just like the final product. Storybook excels at building atomic components that make testing extremely easy. Basically, if the components work correctly, the user interface will also work correctly.
Now, you don’t have to think about inconsistencies between your original design and the finalized product.
It’s time to wade into the technicalities of integrating Merge and Storybook. Hold your breath! Just kidding. It’s actually very easy.
First, you need a UXPin trial account. Sign up and we can make that happen.
You also need a Storybook, which you can install from here. (Make sure you get version 6 or above.) If you have a private Storybook URL, contact us at sales@uxpin.com for some extra help. Import your components to Storybook if you already have some.
Assuming that you have a public Storybook, just follow these steps:
From now on, any change that you make to your Storybook design system will also get updated in UXPin.
Not getting the results you want? You can find more detailed integration instructions here.
Several editing and prototyping tools have add-ons and plug-ins that let you move designs to Storybook for development. We decided to be the first ones to do this the other way around so that you won’t have to design everything from scratch.
Get your Storybook integration today so you can start designing faster with code-based, interactive components. You won’t believe how quickly your team members start building digital problems once you’ve integrated with Storybook.
Storybook has become THE DevOps tool for developing and maintaining design systems. The platform’s excellent documentation, intuitive UI, built-in testing, and collaborative features make it the perfect tool for building and releasing components.
Understanding how Storybook works can help designers collaborate with front-end devs better and leverage the platform’s features to improve prototyping and testing.
One of Storybooks best features for design teams is its ability to sync a component library with UXPin using Merge technology. Merge creates a drag-and-drop design environment for assembling layouts fast. Discover UXPin Merge.
Design production-ready prototypes 8.6x faster. No pixels. pure code.
These are a few reasons why Storybook is the preferred DevOps tool for managing design systems.
Storybook enables engineers to develop UI components in isolation. This development workflow is great for design systems and component-driven front-end frameworks like React–which many organizations use for their component libraries.
Before Storybook, engineers would use sandbox platforms like CodePen and CodeSandbox to build and test components in isolation. Storybook offers this sandbox-style development environment with an intuitive user interface for engineers and stakeholders to view, test, and approve UI elements. They can also combine components and build little prototype patterns for testing.
Developing in isolation also benefits design system quality assurance. Engineers can invite designers, product managers, and other stakeholders to test and submit feedback on new UI elements before release.
Documentation is crucial for component libraries, but it’s often the last thing anyone wants to think about because it’s time-consuming.
Storybook’s DocsPage is a “zero-config default documentation” that automates basic doc creation. Product and engineering teams can expand this documentation to create usage and guideline information.
Managing the codebase for cross-platform applications is challenging. Storybook provides a single source of truth for testing components and patterns for each platform from a centralized environment.
This centralized environment maximizes consistency, as engineers can view components and patterns side-by-side and collaborate with developers responsible for each platform–iOS, Web, Android, etc.
Storybook’s A11y Accessibility add-on enables engineers to automate accessibility testing. The add-on creates a new Accessibility tab for each element showing WCAG standards in three categories:
Storybook’s docs outline a standard five-step design system workflow:
Once engineers have set up Storybook and connected to a GitHub repository, they begin developing each component and its variants. For example, a button might have several states, sizes, types, etc.
During the build process, engineers can install Storybook add-ons to automate workflows, integrate with other tools, or enhance the Storybook environment.
Engineers can add comments to components during the build process to enrich the automatically generated documentation. This example from Storybook’s docs demonstrates how these comments appear in your Storybook UI.
This documentation is crucial for the next step, Review, because it shows stakeholders how front-end developers interpret designs and what each ‘prop’ represents.
The component is now staged and ready to be promoted to the design system. Engineers can invite designers, product managers, and other stakeholders to review the element to ensure it meets interactive and aesthetic expectations.
Traditionally, engineers would have to create a staging environment or meet with stakeholders to present the component. With Storybook, it’s as easy as visiting a website, making the review process more accessible. Stakeholders can log in on their own time, interact with the component, read the docs, and leave feedback.
If there are any changes, engineers may iterate steps one to three until the new components meet all stakeholder’s expectations.
Jest and Playwright power Storybook’s framework-agnostic testing. When engineers commit the component, Storybook tests its code to ensure there are no programming errors, including:
The final step is to update the design system package on GitHub. Once complete, it’ll automatically sync the changes to npm. Engineers can install the updated npm package to use the new component(s).
If your design team works with UXPin Merge, these engineering changes will also be distributed to UXPin’s design editor and notify team members of the latest design system release.
UXPin’s Version Control allows designers to change to the latest release whenever they choose and switch to earlier versions of the design system.
UXPin Merge is a technology that bridges (or Merges) the gap between design and development. Organizations can sync a design system hosted in a repository to UXPin’s design editor so designers can use the same component library as engineers to build fully functioning prototypes.
Merge components are fully interactive and include React props (or Args for Storybook) defined by the design system, including colors, typography, states, sizes, etc. These props appear in UXPin’s Properties Panel so designers can adjust components to meet prototyping requirements while maintaining absolute consistency and zero drift.
Merge prototypes look and function like the final product because they use the same components. For example, a button in Storybook will render exactly the same in UXPin, including interactivity and styling.
Usability participants and stakeholders can interact with these UI elements and Merge prototypes like they would the final product, giving design teams accurate, actionable testing insights.
“It’s been so helpful for us to have these high-fidelity prototypes built with UXPin. We build high-fidelity prototypes much quicker, and we get immediate feedback after the session. If there’s something we can fix immediately, we make that change before the next participant and get feedback much faster than before.” Erica Rider – UX Lead EPX at PayPal, talking about how UXPin Merge enhances user testing.
Design systems evolve as products grow and scale. The design system team is constantly making changes and promoting new UI elements and patterns.
UXPin Patterns enables design teams to create new patterns for the design system–as one-offs or as a best new practice. Designers can combine UI elements (atoms and molecules) from the design system to create new patterns or use UXPin’s npm integration to import components from open-source libraries if the current library doesn’t support their needs.
Designers can save and share these patterns across the organization, so teams can continue prototyping while they wait for the DS team to follow governance procedures to develop and release the new component–following the five-step Storybook development process outlined above.
Iress achieved stage three design system maturity in 2017. For the next few years, the design system team searched for a design tool to take them to the next and final maturity level–Stage Four – Fully Integrated:
Merge solves these four design system challenges by default.
UXPin reduces the four stages of design system maturity to just two.
Take your product development to the next level by Merging the two best design and engineering tools for design systems. Request access to UXPin Merge.
293
0
0
All Comments (0)
Previous: The Ultimate Buyer's Guide for Purchasing Box Craft Paper
Next: Non-Treated 6 well Cell Culture Plates China Manufacturer
If you are interested in sending in a Guest Blogger Submission,welcome to write for us!
Comments