{"id":31326,"date":"2023-08-17T07:34:03","date_gmt":"2023-08-17T14:34:03","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=31326"},"modified":"2023-08-17T07:42:47","modified_gmt":"2023-08-17T14:42:47","slug":"review-uxpin-storybook-integration","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/review-uxpin-storybook-integration\/","title":{"rendered":"Storybook-UXPin: Review of Merge Integration"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"513\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Header_UXPinStorybook-1024x513.png\" alt=\"\" class=\"wp-image-31308\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Header_UXPinStorybook-1024x513.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Header_UXPinStorybook-599x300.png 599w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Header_UXPinStorybook-768x385.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Header_UXPinStorybook.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>I decided to share my impressions on UXPin Merge Storybook integration and write about how it influenced the designer-developer collaboration in our team.\u00a0<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Merge is a part of UXPin<\/a> \u2013 that\u2019s technology providing two main integrations with developers\u2019 tools (Git and Storybook). It allows you to quickly prototype using ready UI code components that are React-based for Git integration, or any framework-based for Storybook integration. I tested the Merge integration with Storybook.\u00a0<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p><em>The review was written by Roy S. Kim, the CEO, and Jacobo Moreno Quiroga \u2013 Front end engineer &amp; Digital Content Designer from<a href=\"https:\/\/fixel.co.jp\/\" target=\"_blank\" rel=\"noreferrer noopener\"> Fixel Inc<\/a>., the Japanese UX\/UI design consulting company specializing in Design Systems.<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>Design with interactive Storybook components in UXPin. Build products 10x faster and bridge the gap between designers and developers. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Discover UXPin Merge<\/a>.<\/p>\n\n\n\n<section class=\"discover-merge\">\n    <div class=\"discover-merge__container\">\n        <div class=\"discover-merge__left\">\n            <p class=\"discover-merge__heading\">Reach a new level of prototyping<\/p>\n            <p class=\"discover-merge__text\">Design with interactive components coming from your team&#8217;s design system.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"discover-merge__button\">Discover UXPin Merge<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-merge.png\" class=\"discover-merge__image\" alt=\"\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}\n\n.discover-merge__container {\n    display: flex;\n    max-width: 690px;\n    height: 200px;\n    padding: 20px;\n    padding-left: 24px;\n    border-radius: 4px;\n    background-color: black;\n    box-shadow: 10px 10px #9999ff;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.discover-merge__left {\n    width: 50%;\n}\n\n.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}\n\n.discover-merge__button {\n    width: 174px;\n    height: 44px;\n    margin: 10px 0px;\n    border: none;\n    border-radius: 2px;\n    background: white;\n    color: black;\n    font-size: 16px;\n    text-align: center;\n}\n\n.discover-merge__button:hover {\n    cursor: pointer;\n}\n\n.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}\n\n@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }\n\n    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-uxpin-merge-and-storybook-integration\">UXPin Merge and Storybook integration\u00a0<\/h2>\n\n\n\n<p>I have both an engineering and design background, and I work on a daily basis on finding solutions to processes inside an application and then writing them in code. The designer part comes in handy when I need to consider and improve the user&#8217;s perspective.<\/p>\n\n\n\n<p>This involves more than defining visual aesthetics, it requires considering how the application interface can be subtle enough for someone to not notice it so that they can focus on what they are trying to achieve in the app.\u00a0<\/p>\n\n\n\n<p>I usually struggle with the back and forths between iterations of coding that aim to improve user experience.&nbsp;<\/p>\n\n\n\n<p>Those kinds of improvements are not the same as fixing the product because something doesn\u2019t work. It\u2019s more of intuitive work when a user reports that something feels off. Even if you apply all the design and UX good practices, the user could still complain, and they would be 100% right. This is where a coded Design System or an organized UI component library can help. If you have tested and polished the components approved for your Design System, then you can treat them as ready building blocks for new applications without spending too much time thinking or adjusting them.&nbsp;<\/p>\n\n\n\n<p>UXPin with Merge technology allows you to import all your Design System components stored in Git or Storybook to the design editor so that you can prototype with them right away. Thanks to this designers can use actual coded elements to speed up the prototyping. UXPin Merge\u2019s motto is &#8220;The single source of truth&#8221; because what you see in the prototype is combining design with actual working code that developers use as well.&nbsp;<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-uxpin-designing-to-coding\">UXPin \u2013 designing to coding\u00a0<\/h2>\n\n\n\n<p>Let&#8217;s start with just UXPin. Essentially, UXPin is a UI\/UX design tool similar to Sketch, AdobeXD, or Figma. It\u2019s similar to other competitors so you can get used to it very quickly. You can start with wireframing and end with advanced prototyping in this single tool.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/rzUqrMBax6xHUy40QzLBE9o6TG3HbtOImyri9t79HTcb6undIm-Y7hoAIA25d-el8LEab2OR1dso1BftQRb6FpANazf-zyfxixOIsD9-QHc2D2hEFpyVdxPNL1od_uXEraaPAU67\" alt=\"\"\/><\/figure>\n\n\n\n<p>In most of the similar tools, there is a big difference between what the designer creates in the design tool and what happens in the dev environment, where the real working product is coded. Features like the inspect tab in Figma enable you to see roughly what the CSS behind a certain object would look like. However, this is not always an accurate depiction between what is designed and what is coded.&nbsp;<\/p>\n\n\n\n<p>Designers and developers essentially come from two different worlds when it comes to the tools used in their daily work. Trying to find a common language between them can lead to way too many meetings and back-and-forths. This might be the very issue that UXPin Merge aims to solve, by having &#8220;The single source of truth&#8221; which the whole team can treat as the ultimate place of the right components and documentation.&nbsp;<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-uxpin-merge-approach\"><strong>The UXPin Merge approach&nbsp;<\/strong><\/h2>\n\n\n\n<p>Merge is UXPin\u2019s technology. Essentially, what Merge does is that it brings coded Design Systems stored in Git repositories or Storybooks to UXPin. Hence, a designer can use real components in their mock-ups and prototypes.<\/p>\n\n\n\n<p>These components are already coded in the repository, and the designer can access its different versions inside UXPin as needed. This way, the integrity of each component is never compromised. It minimizes possibilities for a designer to make mistakes and use elements that aren\u2019t in line with the company\u2019s standards.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/5QvCiqlKs2wu9-sw8vWc0Q41EZLjTFlocBprynx9R7cQzElaWhGxSFcXWmOpoE6kWh27v5ObJc5Cni-ew9H1qZJ-j0z0Vo8-klg3hRE0m2F-v_aGf2fU1ENBZZxrEZjGB4rpedfp\" alt=\"\"\/><figcaption class=\"wp-element-caption\">The components from your repository are stored in UXPin library&nbsp;<\/figcaption><\/figure>\n\n\n\n<p>Once you have a Design System and repositories ready to go, you won&#8217;t be really modifying them often as their purpose is to store and unify all the versions of the possible elements to speed up the product development process and create governance. <\/p>\n\n\n\n<p>Using UXPin Merge and the imported components, controls the design process as elements are predefined. The changes can be made without a problem but it must be done by developers, so that the chances for casual mistakes are pretty low.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/UGWGo8mmf57u08gn2QHY1e9cQWiqcd0u4zz1deHq_q_UC56dd6yzJUVDIuIB5Akma7rA4QD7vuS1Myas1bUCKZN-lelRo56C_3QamGB0XmCytsYynfNs2sH6F5wNJH2IM9ympSdv\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Once imported, you can have a component with all its variations. In this case you can change the Type, Size, Disabled, Label, Click properties of a Button which are defined in the props of the React Component.&nbsp;<\/figcaption><\/figure>\n\n\n\n<p>These limitations actually simplify the work of a designer. They can use fully interactive and prepared elements to focus on the most crucial part \u2013 user experience. Sure; color, padding, fonts, and other visual elements are important parts of the experience, but choosing every single little detail can slow down the process.<\/p>\n\n\n\n<p>If all of that is already sorted out in the Design System and repositories, building prototypes with real code components gets easier and faster. Also, it helps keep the consistency even if the components get updated in code as the imported UI is in sync with the components stored in devs\u2019 libraries. No need to worry that elements will be outdated and designers will have to redesign the projects.\u00a0<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-connecting-storybook\"><strong>Connecting Storybook&nbsp;<\/strong><\/h2>\n\n\n\n<p>One of the UXPin Merge integrations I got to see was Storybook. Storybook serves as a sort of developers\u2019 Design Systems to store all the coded UI. It is used by many companies, and it\u2019s very flexible framework-wise as it provides support for around 15 of them.<\/p>\n\n\n\n<p>Now, for teams that are not supported by developers,\u00a0 setting up a Storybook project and placing all the components there may be a struggle. However, once it\u2019s ready, it neatly holds and displays all the components that are in the Design System.\u00a0<\/p>\n\n\n\n<p>UXPin Merge aims to bring what is stored and defined in Storybook to UXPin so that components made in whichever framework can be used for prototyping. The integration part is very simple; grab the URL of a published Storybook project to import the components to the UXPin library for designing. I tested it and it seemed to work perfectly with React components \u2013 all the elements behaved in the design editor just as they should.&nbsp;<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-thoughts-for-the-future\"><strong>Thoughts for the future&nbsp;<\/strong><\/h2>\n\n\n\n<p>The design process including UXPin Merge in it can be visualized like this:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/LyVHIv6S6EuPu7m0k_PvtI8f3GklLkjEW_ma-JwRIdRuACB-BNRLhBOw8MeisDbZS9RKjt8WwIrSbcrt-hqxhEjddSFDu5STPjH-BL-0f3DxR0XfVt9MdEtOFLN8bASdODAgzWzH\" alt=\"\"\/><\/figure>\n\n\n\n<p>UXPin Merge plays a big part in Step B since it provides production-ready UI-coded components that you can use to iterate faster when creating prototypes. With a defined Design System or a component repository, you really shouldn&#8217;t worry about Step A because you most probably already have the organized components. Still, there is a possibility that you need to adjust something within the coded components, especially if you are in the middle of creating your own Design System.&nbsp;<\/p>\n\n\n\n<p>With Step C, which is the build-up step of the application, the developers look at the Merge prototype to see how code components are put together, as well as what code corresponds to which part of the design. However, they won\u2019t just copy and paste the whole code to build the product instantly \u2013 they will still need to adjust it so that the prototype becomes a product.&nbsp;&nbsp;<\/p>\n\n\n\n<p>UXPin Merge seems to be a great solution for rapid prototyping and keeping the consistency thanks to making the most of Design Systems. However, it appears that certain steps are still to be covered.&nbsp;<\/p>\n\n\n\n<p>To some extent, the work of designers is limited as they mostly can use pre-prepared components, however, it saves time and prototyping with code components brings the world of design and development together.&nbsp;<\/p>\n\n\n\n<p>Want to try out the integration? <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a 14-day trial<\/a>!<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noopener\">Try Storybook integration<\/a><\/center><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>I decided to share my impressions on UXPin Merge Storybook integration and write about how it influenced the designer-developer collaboration in our team.\u00a0 Merge is a part of UXPin \u2013 that\u2019s technology providing two main integrations with developers\u2019 tools (Git and Storybook). It allows you to quickly prototype using ready UI code components that are<\/p>\n","protected":false},"author":203,"featured_media":31327,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,339,199,174,441,440,172,8],"tags":[],"class_list":["post-31326","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-case-study","category-design-systems","category-enterprise-ux","category-front-end","category-merge","category-product-design","category-prototyping"],"yoast_title":"","yoast_metadesc":"See what Fixel, UX\/UI design consulting company, thinks of UXPin and Storybook integration that allows you to prototype with code components.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Storybook-UXPin: Review of Merge Integration | UXPin<\/title>\n<meta name=\"description\" content=\"See what Fixel, UX\/UI design consulting company, thinks of UXPin and Storybook integration that allows you to prototype with code components.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/review-uxpin-storybook-integration\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Storybook-UXPin: Review of Merge Integration\" \/>\n<meta property=\"og:description\" content=\"See what Fixel, UX\/UI design consulting company, thinks of UXPin and Storybook integration that allows you to prototype with code components.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/review-uxpin-storybook-integration\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-17T14:34:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-17T14:42:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Header_UXPinStorybook-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"601\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Roy S. Kim and Jacobo Moreno Quiroga\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Roy S. Kim and Jacobo Moreno Quiroga\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/review-uxpin-storybook-integration\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/review-uxpin-storybook-integration\\\/\"},\"author\":{\"name\":\"Roy S. Kim and Jacobo Moreno Quiroga\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/fa4f89fd3b8fb877f017c22c3c1d7271\"},\"headline\":\"Storybook-UXPin: Review of Merge Integration\",\"datePublished\":\"2023-08-17T14:34:03+00:00\",\"dateModified\":\"2023-08-17T14:42:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/review-uxpin-storybook-integration\\\/\"},\"wordCount\":1384,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/review-uxpin-storybook-integration\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/Header_UXPinStorybook-1.png\",\"articleSection\":[\"Blog\",\"Case Study\",\"Design Systems\",\"Enterprise UX\",\"Front-End\",\"Merge by UXPin\",\"Product Design\",\"Prototyping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/review-uxpin-storybook-integration\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/review-uxpin-storybook-integration\\\/\",\"name\":\"Storybook-UXPin: Review of Merge Integration | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/review-uxpin-storybook-integration\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/review-uxpin-storybook-integration\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/Header_UXPinStorybook-1.png\",\"datePublished\":\"2023-08-17T14:34:03+00:00\",\"dateModified\":\"2023-08-17T14:42:47+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/fa4f89fd3b8fb877f017c22c3c1d7271\"},\"description\":\"See what Fixel, UX\\\/UI design consulting company, thinks of UXPin and Storybook integration that allows you to prototype with code components.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/review-uxpin-storybook-integration\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/review-uxpin-storybook-integration\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/review-uxpin-storybook-integration\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/Header_UXPinStorybook-1.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/Header_UXPinStorybook-1.png\",\"width\":1200,\"height\":601,\"caption\":\"Header UXPinStorybook 1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/review-uxpin-storybook-integration\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Storybook-UXPin: Review of Merge Integration\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/fa4f89fd3b8fb877f017c22c3c1d7271\",\"name\":\"Roy S. Kim and Jacobo Moreno Quiroga\",\"description\":\"Roy S. Kim is the CEO and Jacobo Moreno Quiroga,- the Front end engineer\\\/Digital content designer of Fixel Inc., A Japanese UX\\\/UI design consulting company specializing in Design Systems.\",\"sameAs\":[\"https:\\\/\\\/fixel.co.jp\\\/\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/roy-s-kim-and-jacobo-moreno-quiroga\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Storybook-UXPin: Review of Merge Integration | UXPin","description":"See what Fixel, UX\/UI design consulting company, thinks of UXPin and Storybook integration that allows you to prototype with code components.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/review-uxpin-storybook-integration\/","og_locale":"en_US","og_type":"article","og_title":"Storybook-UXPin: Review of Merge Integration","og_description":"See what Fixel, UX\/UI design consulting company, thinks of UXPin and Storybook integration that allows you to prototype with code components.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/review-uxpin-storybook-integration\/","og_site_name":"Studio by UXPin","article_published_time":"2023-08-17T14:34:03+00:00","article_modified_time":"2023-08-17T14:42:47+00:00","og_image":[{"width":1200,"height":601,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Header_UXPinStorybook-1.png","type":"image\/png"}],"author":"Roy S. Kim and Jacobo Moreno Quiroga","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Roy S. Kim and Jacobo Moreno Quiroga","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/review-uxpin-storybook-integration\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/review-uxpin-storybook-integration\/"},"author":{"name":"Roy S. Kim and Jacobo Moreno Quiroga","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/fa4f89fd3b8fb877f017c22c3c1d7271"},"headline":"Storybook-UXPin: Review of Merge Integration","datePublished":"2023-08-17T14:34:03+00:00","dateModified":"2023-08-17T14:42:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/review-uxpin-storybook-integration\/"},"wordCount":1384,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/review-uxpin-storybook-integration\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Header_UXPinStorybook-1.png","articleSection":["Blog","Case Study","Design Systems","Enterprise UX","Front-End","Merge by UXPin","Product Design","Prototyping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/review-uxpin-storybook-integration\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/review-uxpin-storybook-integration\/","name":"Storybook-UXPin: Review of Merge Integration | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/review-uxpin-storybook-integration\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/review-uxpin-storybook-integration\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Header_UXPinStorybook-1.png","datePublished":"2023-08-17T14:34:03+00:00","dateModified":"2023-08-17T14:42:47+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/fa4f89fd3b8fb877f017c22c3c1d7271"},"description":"See what Fixel, UX\/UI design consulting company, thinks of UXPin and Storybook integration that allows you to prototype with code components.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/review-uxpin-storybook-integration\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/review-uxpin-storybook-integration\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/review-uxpin-storybook-integration\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Header_UXPinStorybook-1.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Header_UXPinStorybook-1.png","width":1200,"height":601,"caption":"Header UXPinStorybook 1"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/review-uxpin-storybook-integration\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Storybook-UXPin: Review of Merge Integration"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/fa4f89fd3b8fb877f017c22c3c1d7271","name":"Roy S. Kim and Jacobo Moreno Quiroga","description":"Roy S. Kim is the CEO and Jacobo Moreno Quiroga,- the Front end engineer\/Digital content designer of Fixel Inc., A Japanese UX\/UI design consulting company specializing in Design Systems.","sameAs":["https:\/\/fixel.co.jp\/"],"url":"https:\/\/www.uxpin.com\/studio\/author\/roy-s-kim-and-jacobo-moreno-quiroga\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/31326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/203"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=31326"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/31326\/revisions"}],"predecessor-version":[{"id":49451,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/31326\/revisions\/49451"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/31327"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=31326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=31326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=31326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}