{"id":16574,"date":"2021-08-31T06:18:37","date_gmt":"2021-08-31T13:18:37","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=16574"},"modified":"2023-06-02T07:54:09","modified_gmt":"2023-06-02T14:54:09","slug":"its-time-for-designers-to-switch-from-image-based-to-code-based-design","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/","title":{"rendered":"Why You Should Switch to Code-Based Design"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Why-You-Should-Switch-to-Code-Based-Design-1024x512.png\" alt=\"Why You Should Switch to Code Based Design\" class=\"wp-image-31530\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Why-You-Should-Switch-to-Code-Based-Design-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Why-You-Should-Switch-to-Code-Based-Design-601x300.png 601w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Why-You-Should-Switch-to-Code-Based-Design-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Why-You-Should-Switch-to-Code-Based-Design.png 1201w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Since the very beginning of digital product design, the default way of designing user interfaces has been image-based.<\/p>\n\n\n\n<p>Designers have been drawing different states of the mobile app or web designs using graphic design tools \u2013 GIMP, Fireworks, Sketch, or now Figma, Invision, Adobe XD (which you can in <a href=\"https:\/\/justcreative.com\/adobe-creative-cloud-discounts\/\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Creative Cloud<\/a>) \u2013 and then the development teams have been writing code that would replicate what has been drawn.<\/p>\n\n\n\n<p>Over the years this method has proved to have considerable limitations. What limitations are those and is there an alternative? Read on to find out.<\/p>\n\n\n\n<p>Drive design process improvements, take care of operations, and boost collaboration with engineers with UXPin Merge. Request access to see if this design technology is for you. <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-the-problems-with-image-based-design\">The Problems with Image-Based Design<\/h2>\n\n\n\n<p>In the image-based design approach, designers produce a set of <em>static<\/em> artboards representing different states of the interface and forward them to software developers to code <em>interactive<\/em> interfaces on their basis. This brings about a lot of troubles for not only the UI design but also the whole product development process \u2013 let\u2019s have a closer look at them.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/3BrhnUqcu_yGLV-pIy-v6QHGh76yHiIBTLSu68oQ_PA8_dBke6PBoBuCV5suCEvACwi6HQ8eJC4bJP4Dmddepdqd00-g_SR8BZm6_gI23jmSbe2GiI7GKVa_vIh-Pw=s0\" alt=\"\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Lack of interoperability: <\/strong>There is virtually no connection between designers\u2019 and developers\u2019 universes. Designers work outside of the constraints set up in code and therefore, unknowingly, create things that are very difficult and expensive to code.&nbsp;<\/li>\n\n\n\n<li><strong>Lack of accuracy: <\/strong>As the image-based tools use completely different methods for rendering the result of the designers\u2019 work, texts, gradients, and colors that have been carefully chosen look different in code when an engineer applies the same specs. Some details are missing and some ideas that looked great on a static image are simply impossible to recreate on an actual working product. The handoff then turns into a nightmare.&nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/eb9amYtD2gDyPjnWcOsJR0TFMeJQasSW-u6RiwF0oZv03SjIdRoj6WNVvhQfotXTh6cTwiO_RxjqOKwDVJogqztfux43jBOFTf2FwTktIF9qUcnoClOv27DgHCeexA=s0\" alt=\"\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Static designs: <\/strong>Image-based design only allows for building static artboards, so even simple behaviors (e.g. expanding a dropdown) quickly become unmanageable. Interactive components can\u2019t be reused and there\u2019s no way of setting states of elements, defining variables for content, or using conditional logic. There are prototyping tools out there that fake the interactions but none actually use the ultimate language that creates the clickable elements in real life \u2013 the code.&nbsp;<\/li>\n\n\n\n<li><strong>Weak design-engineering collaboration: <\/strong>Even if you use a style guide or a design system, image-based design tools are completely separate from the engineering processes. They\u2019re rather abstract and \u2013 unlike technologies used by developers \u2013 can\u2019t be experienced by users as the final product. This lack of interactions or having very limited ones, and the inability to import components from code keeps engineers and designers disconnected and frustrated with one another. As a result, not only the handoff drift appears, but also the final user experience suffers.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-benefits-of-code-based-design\">The benefits of code-based design&nbsp;<\/h2>\n\n\n\n<p>This alternative approach to product design allows designers to render their design intent directly in code\u2026 <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/should-designers-code\/\" target=\"_blank\" rel=\"noreferrer noopener\">without even knowing how to code<\/a>! Whenever they draw something, the tool creates relevant HTML, CSS or Javascript, and engages the browser, showing the result visually. This totally flips the entire software designing process, making it more efficient and beneficial for everyone involved. The benefits are as follows.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-code-based-design-ensures-high-fidelity-and-interactivity\">Code-Based Design Ensures High-Fidelity and Interactivity<\/h3>\n\n\n\n<p>Unlike image-based tools, the code-based approach provides <strong>100% match<\/strong> between the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/designers-developers-collaboration\/\" target=\"_blank\" rel=\"noreferrer noopener\">intent of a designer and a code-able result<\/a>. That\u2019s because code-based tools use <strong>the same technology <\/strong>as those used in web development to render all of the design projects. As a result, designers can benefit from the full power of code without any coding expertise.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/TyRAsEGpBRQabOLS7tCCuk6eZW76sFrjWuNZO9kyqk3TcpEIwMRVq0PZ1ZFNXabwe-JABWP6DE_N46AXlnxoFe0GdmPrMlCB4GA5JWNIaNHvZa0WwDCY7A2ZjMMhvA=s0\" alt=\"\"\/><\/figure>\n\n\n\n<p>Code-based design tools allow for drawing objects that move, interact, and create complex patterns \u2013 on the highest level of interactivity. Before coding the final version, software developers can fully experience the product instead of just imagining how it should work.<\/p>\n\n\n\n<p>There\u2019s <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/fighting-front-end-debt\/\" target=\"_blank\" rel=\"noreferrer noopener\">no redundant code<\/a>, so the software works quickly and it\u2019s easy to maintain it. And as the provided designs <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/guide-design-consistency-best-practices-ui-ux-designers\/\" target=\"_blank\" rel=\"noreferrer noopener\">reflect the approved standards<\/a> for software development, the final products created by a given company or a software house are consistent with one another.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-code-based-design-bridges-gap-between-design-and-development\">Code-Based Design Bridges Gap Between Design and Development&nbsp;<\/h3>\n\n\n\n<p>The code-based design establishes a common language for both designers and software developers. Since everyone involved in the process uses the same technology, there are fewer misunderstandings between teams, especially on the handoff stage. <\/p>\n\n\n\n<p>ou can even go a step further and use a technology such as <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Merge<\/a> which allows you to take components that have already been coded by engineers and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/\" target=\"_blank\" rel=\"noreferrer noopener\">import them into your code-based design tool<\/a>. It uses elements<strong> that can actually be coded <\/strong>\u2013 because those ready and interactive components come from developers.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/o09v6PgeIInVnjNWLd6UUnlnK0K-xqrWf4BS7z0FEKRgbAEZKbO5y6yoBzKSoS0xaigjB_zdDukafA_fTU-wXePgVZFV83cod3JWI8fyJTRLtTMFTj6Yh7twZpdBvA=s0\" alt=\"\"\/><\/figure>\n\n\n\n<p>This <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/single-source-truth-benefits\/\" target=\"_blank\" rel=\"noreferrer noopener\">establishes a single source of truth for your entire software project<\/a> \u2013 all the components and documentation are stored in a components library like <a href=\"https:\/\/www.uxpin.com\/merge\/git-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Git<\/a> (importing React components), <a href=\"https:\/\/www.uxpin.com\/merge\/npm-integration\" target=\"_blank\" rel=\"noreferrer noopener\">npm<\/a> or <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook<\/a> and designers and engineers are connected in one collaborative, creative process, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/mistakes-that-kill-collaboration-between-designers-and-developers\/\" target=\"_blank\" rel=\"noreferrer noopener\">preventing misunderstandings and frustrations from building up<\/a>.<\/p>\n\n\n\n<p>Also, it helps to avoid <strong>inconsistencies<\/strong> in the user interface, code, and documentation \u2013 which in the long run saves a lot of time and money by <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/cross-functional-collaboration\/\" target=\"_blank\" rel=\"noreferrer noopener\">optimizing the design process<\/a>. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Code-Based Design Provides Endless Possibilities&nbsp;<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/eeIdCGP6jQ2PEZZmDwZBxc32gG13gpbk9P9AuwluhrETiwHEJqErSvxQoWZfpOHkXpNl_HyvIyhVds_C8EFpngEDDq9f1xYtm4eSWQZfCtNnnEg5VUjPVa2dgIhCLg=s0\" width=\"624\" height=\"312\"><\/h3>\n\n\n\n<p>Code-based design allows you to have richer prototyping options. And with the aforementioned Merge tool you can greatly extend them.<\/p>\n\n\n\n<p>You can create your own components that can be reused all across interfaces of different products you work on. This saves your entire team a lot of time and effort on designing, coding, and testing particular elements \u2013 you only need to do it once. And this also means there are <strong>fewer bugs<\/strong> in your products.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Code-Based Design Allows for Powerful Interactions<\/h3>\n\n\n\n<p>Using code-based design allows you to create <strong>prototypes that look and behave exactly like the final product <\/strong>built by developers. Instead of linking artboards, code-based design tools use the most advanced interactions on the components level, allowing designers to create highly reusable interactive design systems.<\/p>\n\n\n\n<p>Simply put: designers draw <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/create-interactive-prototypes\/\" target=\"_blank\" rel=\"noreferrer noopener\">interfaces with text fields<\/a> that can be clicked in, checkboxes that can be checked and unchecked, and so on. Goodbye, static artboards!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">PayPal and Code-Based Design<\/h2>\n\n\n\n<p>Don&#8217;t just take our word for it \u2013 some of the top UX designers in the industry corroborate what we say. <a href=\"https:\/\/medium.com\/designops2-0-paypal\/uxpin-vs-figma-comparing-two-great-ux-design-tools-4c3ebd94781a\" target=\"_blank\" rel=\"noreferrer noopener\">UX Design team at PayPal did a test of Merge, our new technology in our code-based design tool<\/a>. Our solution has accelerated their work while giving them the power to easily create their own beautiful high fidelity prototypes consistent with their Developer Console standards.<\/p>\n\n\n\n<p>When compared with an image-based tool, the design quality was much better and there were fewer errors. Also, unlike the competing image-based software, the drop-downs, calendar buttons, and data table controls made using UXPin Merge were interactive. And the entire designing process took less than 1\/6th of the time spent doing the same job using the competing software!<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/LBFTKf0j5DGbF10XtSSi2JpPvPdMFx9Ogfn5qr2JQiRsZg3-3aCF0MPAYeoqusF1b_M6wtIYvBqdCGa_ta-ZGBmQGztQC15MxBfT2QNkCHYqp9rZ9XHx7ej81ripmA=s0\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Try it Out!<\/h2>\n\n\n\n<p>As you can see, switching from image-based to code-based design is a no-brainer. It can only save your team time, effort \u2013 and frustrations. To unleash the power of merging the design and development workflows, <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">request access to UXPin Merge<\/a>. <\/p>\n\n\n\n<div class=\"wp-block-buttons\">\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\" target=\"_blank\" rel=\"noreferrer noopener\">Discover Merge<\/a><\/center><\/div>\n<\/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>Since the very beginning of digital product design, the default way of designing user interfaces has been image-based. Designers have been drawing different states of the mobile app or web designs using graphic design tools \u2013 GIMP, Fireworks, Sketch, or now Figma, Invision, Adobe XD (which you can in Adobe Creative Cloud) \u2013 and then<\/p>\n","protected":false},"author":3,"featured_media":31530,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,17,174,19,7],"tags":[217,27,54,220,218,219,223,222,31,221],"class_list":["post-16574","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-collaboration-2","category-enterprise-ux","category-uxpin","category-web-design","tag-codebased","tag-collaboration","tag-design","tag-fidelity","tag-imagebased","tag-interactions","tag-product-development","tag-raster-graphics","tag-user-experience-2","tag-vector-design"],"yoast_title":"Why Code-Based Design is Better for Higher Fidelity?","yoast_metadesc":"Tired of the tedious back and forth between design and development in image-based design? Put an end to that with code-based approach!","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>Why Code-Based Design is Better for Higher Fidelity?<\/title>\n<meta name=\"description\" content=\"Tired of the tedious back and forth between design and development in image-based design? Put an end to that with code-based approach!\" \/>\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\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Why You Should Switch to Code-Based Design\" \/>\n<meta property=\"og:description\" content=\"Tired of the tedious back and forth between design and development in image-based design? Put an end to that with code-based approach!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-31T13:18:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-02T14:54:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Why-You-Should-Switch-to-Code-Based-Design.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1201\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\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\\\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Why You Should Switch to Code-Based Design\",\"datePublished\":\"2021-08-31T13:18:37+00:00\",\"dateModified\":\"2023-06-02T14:54:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\\\/\"},\"wordCount\":1181,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/Why-You-Should-Switch-to-Code-Based-Design.png\",\"keywords\":[\"codebased\",\"collaboration\",\"design\",\"fidelity\",\"imagebased\",\"interactions\",\"product development\",\"raster graphics\",\"user experience\",\"vector design\"],\"articleSection\":[\"Blog\",\"Collaboration\",\"Enterprise UX\",\"UXPin\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\\\/\",\"name\":\"Why Code-Based Design is Better for Higher Fidelity?\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/Why-You-Should-Switch-to-Code-Based-Design.png\",\"datePublished\":\"2021-08-31T13:18:37+00:00\",\"dateModified\":\"2023-06-02T14:54:09+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Tired of the tedious back and forth between design and development in image-based design? Put an end to that with code-based approach!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/Why-You-Should-Switch-to-Code-Based-Design.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/Why-You-Should-Switch-to-Code-Based-Design.png\",\"width\":1201,\"height\":600,\"caption\":\"Why You Should Switch to Code Based Design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Why You Should Switch to Code-Based Design\"}]},{\"@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\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Why Code-Based Design is Better for Higher Fidelity?","description":"Tired of the tedious back and forth between design and development in image-based design? Put an end to that with code-based approach!","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\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/","og_locale":"en_US","og_type":"article","og_title":"Why You Should Switch to Code-Based Design","og_description":"Tired of the tedious back and forth between design and development in image-based design? Put an end to that with code-based approach!","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/","og_site_name":"Studio by UXPin","article_published_time":"2021-08-31T13:18:37+00:00","article_modified_time":"2023-06-02T14:54:09+00:00","og_image":[{"width":1201,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Why-You-Should-Switch-to-Code-Based-Design.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Why You Should Switch to Code-Based Design","datePublished":"2021-08-31T13:18:37+00:00","dateModified":"2023-06-02T14:54:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/"},"wordCount":1181,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Why-You-Should-Switch-to-Code-Based-Design.png","keywords":["codebased","collaboration","design","fidelity","imagebased","interactions","product development","raster graphics","user experience","vector design"],"articleSection":["Blog","Collaboration","Enterprise UX","UXPin","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/","name":"Why Code-Based Design is Better for Higher Fidelity?","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Why-You-Should-Switch-to-Code-Based-Design.png","datePublished":"2021-08-31T13:18:37+00:00","dateModified":"2023-06-02T14:54:09+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Tired of the tedious back and forth between design and development in image-based design? Put an end to that with code-based approach!","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Why-You-Should-Switch-to-Code-Based-Design.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/Why-You-Should-Switch-to-Code-Based-Design.png","width":1201,"height":600,"caption":"Why You Should Switch to Code Based Design"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Why You Should Switch to Code-Based Design"}]},{"@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\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/16574","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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=16574"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/16574\/revisions"}],"predecessor-version":[{"id":45168,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/16574\/revisions\/45168"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/31530"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=16574"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=16574"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=16574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}