{"id":23747,"date":"2021-02-24T04:13:00","date_gmt":"2021-02-24T12:13:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=23747"},"modified":"2023-06-02T07:21:14","modified_gmt":"2023-06-02T14:21:14","slug":"code-based-approach-design","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/code-based-approach-design\/","title":{"rendered":"Why Your Team Needs to Take a Code-Based Approach to 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\/2023\/06\/Why-Your-Team-Needs-to-Take-a-Code-Based-Approach-to-Design-min-1024x512.png\" alt=\"Why Your Team Needs to Take a Code Based Approach to Design min\" class=\"wp-image-45153\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Why-Your-Team-Needs-to-Take-a-Code-Based-Approach-to-Design-min-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Why-Your-Team-Needs-to-Take-a-Code-Based-Approach-to-Design-min-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Why-Your-Team-Needs-to-Take-a-Code-Based-Approach-to-Design-min-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Why-Your-Team-Needs-to-Take-a-Code-Based-Approach-to-Design-min.png 1200w\" 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>Traditionally, product designers have used image-based designs created with software that doesn\u2019t communicate well with the programming that websites and mobile apps need. When your design team hands vector or raster graphics to the development team, the developers have to spend a lot of time finding ways to write code that creates attractive, functional features for users. Graphic designers play a critical role, but they also generate a lot of extra work for developers.<\/p>\n\n\n\n<p>Taking a <a href=\"https:\/\/www.uxpin.com\/code-to-design\" target=\"_blank\" rel=\"noreferrer noopener\">code-to-design approach<\/a> changes several things about the relationships between graphic designers, developers, and products. If you\u2019re unsure why your team needs to take a code-based approach to design, read on.<\/p>\n\n\n\n<p>Increase quality of usability testing, ship products faster, and improve communication with developers. Achieve all of that with UXPin&#8217;s Merge technology that syncs interactive components with UXPin. <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-image-based-design-creates-too-many-challenges\"><strong>Image-based design creates too many challenges<\/strong><\/h2>\n\n\n\n<p>Teams that rely on image-based designs <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">create numerous challenges<\/a> for themselves and developers. When developers receive image-based designs, they have to make changes that can disrupt:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The overall aesthetic of the original design, which could have a negative impact on user experience.<\/li>\n\n\n\n<li>Force developers to reinterpret designs to make them more functional. This makes everyone unhappy because the developers have to do extra work and the designers see that they put a lot of effort into choosing colors, text, and other features that get changed during the production phase.<\/li>\n\n\n\n<li>Prototyping and production as developers try to translate static images into interactive components with dropdown menus, sorting capabilities, and other features.<\/li>\n<\/ul>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"249\" src=\"https:\/\/lh5.googleusercontent.com\/Xqt8hgIWNYCXNWWDrE2iVWPUdLxHxPAKlN0PF8pYNWac_TVu_6FDPC91aR-2TaCcbikaqd7hdepfnyn2vLIK4oden4zXWstTmN8dPXFaJUIcCLf5o4vWTaCSoCMZZyuz8MNnZDk_\"><\/p>\n\n\n\n<p>A lot gets lost in translation when your team sends image-based designs to the development team. Code-based design makes the handoff smoother.<\/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-finally-your-designers-and-developers-can-speak-the-same-language\"><strong>Finally, your designers and developers can speak the same language<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/zLnN59EOoFqCYPD5r-sxmac6Pl4T7YJGRUiAcIsNJn_cMzpK7bMPt-ZjkO71TZ3UcyTcpZsKO7VFKc1RinERaJy0KF4bysPeD7JLSgI2LPCDTnSmbs3tleuQKE-1DLw5LQxace11\" alt=\"\" width=\"750\"\/><\/figure>\n\n\n\n<p>Right now, your design and development teams probably speak completely different languages. You might think that your artboard of static images will make sense to anyone who sees it. In reality, the developers will often feel confused by what you want them to do.<\/p>\n\n\n\n<p>Code-based design lets your designers and developers communicate with each other much more accurately. Instead of delivering image-based designs that the developers don\u2019t understand, your team can adopt code-based design that uses:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/material.io\/design\" target=\"_blank\" rel=\"noreferrer noopener\">Material Design<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">React JavaScript library<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/uxpin-merge\/mineral-ui\" target=\"_blank\" rel=\"noreferrer noopener\">CA Technologies Mineral UI<\/a><\/li>\n\n\n\n<li>IBM Carbon<\/li>\n<\/ul>\n\n\n\n<p>At first, this might sound like it puts a lot of extra work on designers by making them learn to code. That\u2019s not the case, though, when you use a no-code designing and prototyping solution, like UXPin Merge. Instead of forcing anyone to learn new, challenging skills, you give designers and developers a common language that they both understand. You get better communication between teams simply by choosing the right application.<\/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-code-based-design-streamlines-your-prototype-and-release-processes\"><strong>Code-based design streamlines your prototype and release processes<\/strong><\/h2>\n\n\n\n<p>Developers must turn everything that your design team gives them into code. The attractiveness of your design matters, but all digital products run on code.<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/PpRGiXJxhe337a0TGZLZasCEeCuqXBUwkuU14R9m9CzdBXC8lzxfaZk145sWh8grQ1FUPdrV_OzJwoPyqdqUlGIWhy5qbOCdR1f2R9tHaRfmvD_yobe46_VlcmQ5UZGREX9P25DD\" width=\"624\" height=\"249\"><\/p>\n\n\n\n<p>Code-based design streamlines your prototype and release processes by giving developers designs that they don\u2019t need to recreate with code. The developers might want to make some subtle adjustments, but they don\u2019t have to redo your work. This solution already lets you <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-turn-code-into-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">use elements that are code-based<\/a>.<\/p>\n\n\n\n<p>What\u2019s in it for you? The elements that you use are already interactive so that your prototype will behave just like the end-product.\u00a0 <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Get access to UXPin Merge<\/a> to see how much your workflows improve. The hours you save add up quickly, which means you can work on more projects and earn higher revenues.<\/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-merge-offers-code-based-design\"><strong>UXPin Merge offers code-based design<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/v0k_GOdrzfN3VEZOXxsHV4WE7aJTZ3FeZv16u1wwhGl4sRN9Q0yZGMn-aTXUiSTY8cGioV3simnV6ZXFHCmE4QhenpTBcrV5mUL1Aalyu0Ay1Y49HIXivXgBYq4y24I1iQoDDAeg\" alt=\"\"\/><\/figure>\n\n\n\n<p>You need the right tool for your team to take a code-based approach to design. UXPin Merge makes the transition easy by:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Giving your team a drag-and-drop design environment.<\/li>\n\n\n\n<li>Using <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">components that already exist in the code repository<\/a> without any additional work or need for coding expertise.<\/li>\n\n\n\n<li>Saving reusable components to save you time on future projects.<\/li>\n\n\n\n<li>Controlling properties to ensure that they work when the product reaches consumers.<\/li>\n\n\n\n<li>Improving agile workflows without the time-consuming drawbacks of waterfall methods.<\/li>\n<\/ul>\n\n\n\n<p>Now, your designers can abandon static images in favor of realistic, interactive components. It\u2019s difficult to underestimate the benefits of code-based design, especially when you have support from a no-code tool.<\/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-help-your-designers-succeed-with-uxpin-merge\"><strong>Help your designers succeed with UXPin Merge<\/strong><\/h2>\n\n\n\n<p>You can read about the benefits of code-to-design approach all day without truly appreciating how much value it adds to your team and workflows. Learn from experience by <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">requesting access to UXPin Merge<\/a>. Sign up now to see how you can improve communication between designers and developers and shorten your handoffs!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"326\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/MergeAccess_wide_Blog-1024x326.png\" alt=\"\" class=\"wp-image-23833\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/MergeAccess_wide_Blog-1024x326.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/MergeAccess_wide_Blog-700x223.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/MergeAccess_wide_Blog-768x244.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/MergeAccess_wide_Blog.png 1401w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\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","protected":false},"excerpt":{"rendered":"<p>Traditionally, product designers have used image-based designs created with software that doesn\u2019t communicate well with the programming that websites and mobile apps need. When your design team hands vector or raster graphics to the development team, the developers have to spend a lot of time finding ways to write code that creates attractive, functional features<\/p>\n","protected":false},"author":156,"featured_media":23749,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[350,346],"class_list":["post-23747","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-code-and-design","tag-code-based-2"],"yoast_title":"","yoast_metadesc":"Code-based approach to design can improve handoffs and save time. See how to improve your designer-developer communication.","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 Your Team Needs to Take a Code-Based Approach to Design | UXPin<\/title>\n<meta name=\"description\" content=\"Code-based approach to design can improve handoffs and save time. See how to improve your designer-developer communication.\" \/>\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\/code-based-approach-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Why Your Team Needs to Take a Code-Based Approach to Design\" \/>\n<meta property=\"og:description\" content=\"Code-based approach to design can improve handoffs and save time. See how to improve your designer-developer communication.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/code-based-approach-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-24T12:13:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-02T14:21:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/02\/Why-Your-Team-Needs-to-Take-a-Code-Based-Approach-to-Design.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\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: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=\"5 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\\\/code-based-approach-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-based-approach-design\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/dfa8a72ffa3bb472596d4442937c7c6a\"},\"headline\":\"Why Your Team Needs to Take a Code-Based Approach to Design\",\"datePublished\":\"2021-02-24T12:13:00+00:00\",\"dateModified\":\"2023-06-02T14:21:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-based-approach-design\\\/\"},\"wordCount\":769,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-based-approach-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/Why-Your-Team-Needs-to-Take-a-Code-Based-Approach-to-Design.png\",\"keywords\":[\"code and design\",\"code-based\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-based-approach-design\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-based-approach-design\\\/\",\"name\":\"Why Your Team Needs to Take a Code-Based Approach to Design | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-based-approach-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-based-approach-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/Why-Your-Team-Needs-to-Take-a-Code-Based-Approach-to-Design.png\",\"datePublished\":\"2021-02-24T12:13:00+00:00\",\"dateModified\":\"2023-06-02T14:21:14+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/dfa8a72ffa3bb472596d4442937c7c6a\"},\"description\":\"Code-based approach to design can improve handoffs and save time. See how to improve your designer-developer communication.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-based-approach-design\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-based-approach-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-based-approach-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/Why-Your-Team-Needs-to-Take-a-Code-Based-Approach-to-Design.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/Why-Your-Team-Needs-to-Take-a-Code-Based-Approach-to-Design.png\",\"width\":1200,\"height\":600,\"caption\":\"Why Your Team Needs to Take a Code Based Approach to Design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/code-based-approach-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Why Your Team Needs to Take a Code-Based Approach to 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\\\/dfa8a72ffa3bb472596d4442937c7c6a\",\"name\":\"UXPin\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/zbigniew-trzeciakuxpin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Why Your Team Needs to Take a Code-Based Approach to Design | UXPin","description":"Code-based approach to design can improve handoffs and save time. See how to improve your designer-developer communication.","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\/code-based-approach-design\/","og_locale":"en_US","og_type":"article","og_title":"Why Your Team Needs to Take a Code-Based Approach to Design","og_description":"Code-based approach to design can improve handoffs and save time. See how to improve your designer-developer communication.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/code-based-approach-design\/","og_site_name":"Studio by UXPin","article_published_time":"2021-02-24T12:13:00+00:00","article_modified_time":"2023-06-02T14:21:14+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/02\/Why-Your-Team-Needs-to-Take-a-Code-Based-Approach-to-Design.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"UXPin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/code-based-approach-design\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/code-based-approach-design\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/dfa8a72ffa3bb472596d4442937c7c6a"},"headline":"Why Your Team Needs to Take a Code-Based Approach to Design","datePublished":"2021-02-24T12:13:00+00:00","dateModified":"2023-06-02T14:21:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/code-based-approach-design\/"},"wordCount":769,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/code-based-approach-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/02\/Why-Your-Team-Needs-to-Take-a-Code-Based-Approach-to-Design.png","keywords":["code and design","code-based"],"articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/code-based-approach-design\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/code-based-approach-design\/","name":"Why Your Team Needs to Take a Code-Based Approach to Design | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/code-based-approach-design\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/code-based-approach-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/02\/Why-Your-Team-Needs-to-Take-a-Code-Based-Approach-to-Design.png","datePublished":"2021-02-24T12:13:00+00:00","dateModified":"2023-06-02T14:21:14+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/dfa8a72ffa3bb472596d4442937c7c6a"},"description":"Code-based approach to design can improve handoffs and save time. See how to improve your designer-developer communication.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/code-based-approach-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/code-based-approach-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/code-based-approach-design\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/02\/Why-Your-Team-Needs-to-Take-a-Code-Based-Approach-to-Design.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/02\/Why-Your-Team-Needs-to-Take-a-Code-Based-Approach-to-Design.png","width":1200,"height":600,"caption":"Why Your Team Needs to Take a Code Based Approach to Design"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/code-based-approach-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Why Your Team Needs to Take a Code-Based Approach to 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\/dfa8a72ffa3bb472596d4442937c7c6a","name":"UXPin","url":"https:\/\/www.uxpin.com\/studio\/author\/zbigniew-trzeciakuxpin-com\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/23747","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\/156"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=23747"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/23747\/revisions"}],"predecessor-version":[{"id":45157,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/23747\/revisions\/45157"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/23749"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=23747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=23747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=23747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}