{"id":39481,"date":"2023-03-08T06:48:25","date_gmt":"2023-03-08T14:48:25","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=39481"},"modified":"2026-05-08T17:08:31","modified_gmt":"2026-05-09T00:08:31","slug":"why-developers-use-frameworks","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/why-developers-use-frameworks\/","title":{"rendered":"Why Developers Use Frameworks?"},"content":{"rendered":"<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\/03\/Why-do-developers-use-frameworks-1024x512.png\" alt=\"Why do developers use frameworks\" class=\"wp-image-39490\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Why-do-developers-use-frameworks-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Why-do-developers-use-frameworks-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Why-do-developers-use-frameworks-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Why-do-developers-use-frameworks.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p>Modern product and web development rely on frameworks, libraries, and dependencies to achieve desired results and outcomes. Understanding these frameworks&#8217; capabilities and limitations can help designers <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/designers-developers-collaboration\/\" target=\"_blank\" rel=\"noreferrer noopener\">collaborate better with engineers<\/a> throughout the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-process-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">design process<\/a> and, most importantly, during <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/\" target=\"_blank\" rel=\"noreferrer noopener\">design handoffs<\/a>.<\/p>\n<p>Bridge the gap between design and development with UXPin Merge. Design fully interactive prototypes using UI coded components without writing a single line of code. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page<\/a>.<\/p>\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<p>            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\"><br \/>\n                <button class=\"discover-merge__button\">Discover UXPin Merge<\/button><br \/>\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<\/p><\/div>\n<\/section>\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}<\/p>\n<p>.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}<\/p>\n<p>.discover-merge__left {\n    width: 50%;\n}<\/p>\n<p>.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}<\/p>\n<p>.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}<\/p>\n<p>.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}<\/p>\n<p>.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}<\/p>\n<p>.discover-merge__button:hover {\n    cursor: pointer;\n}<\/p>\n<p>.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}<\/p>\n<p>@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}<\/p>\n<p>@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }<\/p>\n<p>    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}<\/p>\n<\/style>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h2 class=\"wp-block-heading\" id=\"h-what-is-a-front-end-framework-in-programming\">What is a Front-End Framework in Programming?<\/h2>\n<p>Front-end frameworks are pre-written code with tools, templates, functionality, and components that help developers build websites and applications fast. These frameworks provide a foundation for developers to be more product-focused rather than writing from scratch.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-front-end-library-vs-front-end-framework\">Front-End Library vs. Front-End Framework<\/h3>\n<p>People often use front-end frameworks and front-end libraries interchangeably, but there are distinct differences.<\/p>\n<p>Front-end libraries include pre-written code for common tasks, like manipulating the DOM, making HTTP requests, and animating elements. Libraries require less setup and configuration and have fewer constraints than frameworks, giving software engineers more freedom and control. Popular front-end libraries include <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/reactjs-websites-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">Reactjs<\/a>, jQuery, Django (for Python), and Redux.<\/p>\n<p>Front-end frameworks are pre-written code that provides structure for building websites and applications. These frameworks usually include libraries, tools, and other features to develop, scale, and maintain applications. Popular front-end open-source frameworks include React Native, AngularJS, Vue (<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/vue-react-angular-framework-comparison\/\" target=\"_blank\" rel=\"noreferrer noopener\">check out the difference between the three of them<\/a>,) and last but not least, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/merge-bootstrap-npm-integration-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap<\/a>.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-wait-isn-t-react-a-framework-not-a-library\">Wait, isn&#8217;t React a Framework, not a library?<\/h3>\n<p><a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">React is a Javascript library<\/a> floating between being a library and a framework. Many developers debate whether React is one or the other.<\/p>\n<p>While React technically isn&#8217;t a framework, it does provide the foundation to create reusable UI components\u2013which is why so many <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/top-react-component-libraries\/\" target=\"_blank\" rel=\"noreferrer noopener\">developers use React for design systems<\/a>. Engineers can combine React with other libraries to create a custom front-end solution.<\/p>\n<p>For the purposes of this article, we&#8217;re referring to React as a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/software-development-tools-guide-for-designers\/\" target=\"_blank\" rel=\"noreferrer noopener\">framework for product development<\/a>.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-programming-language-vs-framework\">Programming language vs. framework<\/h3>\n<p>Another important distinction is the difference between a programming language and a framework. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/which-programming-languages-will-you-hear-about-as-a-ux-designer\/\" target=\"_blank\" rel=\"noreferrer noopener\">Programming languages<\/a> are the actual code behind frameworks. Javascript, PHP, Typescript, HTML, and Python are all programming languages.<\/p>\n<p>For example, Javascript is a programming language. React, Angular, and Vue are all Javascript frameworks.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-types-of-programming-frameworks\">Types of Programming Frameworks<\/h2>\n<p>For digital product development, there are two primary framework categories:<\/p>\n<ul class=\"wp-block-list\">\n<li>Server-side\/back-end frameworks<\/li>\n<li>Client-side\/front-end frameworks<\/li>\n<\/ul>\n<p>You also get full-stack frameworks with everything programmers need to build a complete application, including front-end, back-end, and database management. The most famous full-stack framework example is <a href=\"https:\/\/rubyonrails.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Ruby on Rails<\/a>.<\/p>\n<p>Some common examples of other programming frameworks include:<\/p>\n<ul class=\"wp-block-list\">\n<li>Web application frameworks<\/li>\n<li>Mobile application frameworks<\/li>\n<li>Game development frameworks<\/li>\n<li>AI frameworks<\/li>\n<li>Data science frameworks<\/li>\n<\/ul>\n<p>Since this article focuses on digital product development, we will explore client-side or front-end frameworks, as these directly impact the design process and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-collaboration-tool\/\" target=\"_blank\" rel=\"noreferrer noopener\">designer\/engineer collaboration<\/a>.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-advantages-disadvantages-of-using-a-programming-framework\">Advantages &amp; Disadvantages of Using a Programming Framework?<\/h2>\n<p>Programming frameworks offer many benefits, notably streamlining workflows, improving code quality, and faster <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/cross-platform-experience\/\" target=\"_blank\" rel=\"noreferrer noopener\">cross-platform<\/a> application development. But there are some disadvantages and limitations, which we outline below.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-advantages\">Advantages<\/h3>\n<h4 class=\"wp-block-heading\" id=\"h-efficiency\">Efficiency<\/h4>\n<p>Developers can leverage a framework&#8217;s features to build applications faster than programming from scratch. This efficiency is also beneficial for developing minimum viable products and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-prototype-setting-user-interactions-without-coding\/\" target=\"_blank\" rel=\"noreferrer noopener\">prototypes<\/a>.&nbsp;<\/p>\n<h4 class=\"wp-block-heading\" id=\"h-consistency\">Consistency<\/h4>\n<p>Many frameworks use standardized structures, and code conventions engineers must follow. This standardization allows organizations to maximize cohesion and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/guide-design-consistency-best-practices-ui-ux-designers\/\" target=\"_blank\" rel=\"noreferrer noopener\">consistency across products and teams<\/a>.<\/p>\n<h4 class=\"wp-block-heading\" id=\"h-reliability\">Reliability<\/h4>\n<p>The most popular frameworks are well-maintained, with regular updates and fixes. They&#8217;re also compatible across multiple browsers and devices, so engineers can confidently build and ship products without worrying about bugs or compatibility issues.<\/p>\n<h4 class=\"wp-block-heading\" id=\"h-scalability\">Scalability<\/h4>\n<p>Frameworks provide the tools and features to scale faster than writing from scratch. Engineers can also add libraries, tools, and packages to extend functionality as the product evolves.<\/p>\n<h4 class=\"wp-block-heading\" id=\"h-community\">Community<\/h4>\n<p>Most frameworks have large communities where engineers can ask questions and discover new ideas. For example, React, Vue, Angular, and Bootstrap all have massive active global communities with users sharing ideas in multiple languages and across many markets and industries. It&#8217;s hard to find a problem that someone hasn&#8217;t already solved.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-disadvantages\">Disadvantages<\/h3>\n<h4 class=\"wp-block-heading\" id=\"h-restrictive\">Restrictive<\/h4>\n<p>While the structure and guidelines frameworks allow for faster development and scalability, they can limit creativity and flexibility. Developers must follow the framework&#8217;s architecture or conventions, which may stifle innovation.<\/p>\n<h4 class=\"wp-block-heading\" id=\"h-performance\">Performance<\/h4>\n<p>Frameworks add an extra layer of code which can slow performance and increase memory if developers don&#8217;t optimize code properly. There are fixes for these performance issues, but it comes with additional costs.<\/p>\n<h4 class=\"wp-block-heading\" id=\"h-dependencies\">Dependencies<\/h4>\n<p>Many frameworks, including React, Vue, and Angular, rely on third-party libraries and tools. Additionally, developers will use various dependencies and devDependencies to build projects. These dependencies increase maintenance and <a href=\"https:\/\/debricked.com\/blog\/vulnerabilities-dependencies\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">security risks<\/a>.<\/p>\n<h4 class=\"wp-block-heading\" id=\"h-maintenance\">Maintenance<\/h4>\n<p>Aside from dependencies, frameworks require constant maintenance and updates to stay up-to-date and secure\u2013<em>over and above maintaining the product<\/em>.<\/p>\n<h4 class=\"wp-block-heading\" id=\"h-learning-curve\">Learning curve<\/h4>\n<p>Each framework has different syntax, conventions, and codebase, which can take a long time to learn and master. This learning curve can be particularly challenging for beginners. For developers looking to expand their skills, platforms like <a href=\"https:\/\/teamtreehouse.com\" target=\"_blank\" rel=\"noopener noreferrer\">Treehouse<\/a> offer online coding education with hands-on learning support and career-focused courses to help accelerate the learning process.<\/p>\n<p>Most popular frameworks have excellent documentation and many tutorials, but this education requires significant time and resources. These learning curves are why most developers specialize in a specific programming language or framework rather than being a jack of all trades.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-using-front-end-frameworks-for-prototyping\">Using Front-End Frameworks for Prototyping<\/h2>\n<p>Many developers use front-end frameworks like React, Angular, and Vue for prototyping. These frameworks provide front-end developers with tools and functionality to create prototypes with basic functionality.<\/p>\n<p>For example, if you want to create a prototype with MUI&#8217;s React UI library, you install the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/merge-mui-npm-integration-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">MUI package and import components<\/a> into your project file. You can then add a button, complete with styling and interactivity, using one line of code:<\/p>\n<p>&lt;Button variant=&#8221;contained&#8221;&gt;Contained&lt;\/Button&gt;.<\/p>\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/mui-react-button-min.jpg\" alt=\"mui react button min\" class=\"wp-image-39493\" width=\"650\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/mui-react-button-min.jpg 1000w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/mui-react-button-min-700x286.jpg 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/mui-react-button-min-768x313.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n<p>While prototyping with front-end frameworks is significantly quicker than programming from scratch, it&#8217;s nowhere near as efficient as <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/top-prototyping-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">using a design tool<\/a>. Dragging and dropping components is much faster than writing code.<\/p>\n<p>Startup TeamPassword struggled with this challenge before fullstack developer Matthew Chigira joined the team. TeamPassword still had a 2-person engineering team and no UX designers. They were using outdated development methods resulting in slow time to market and UI inconsistencies.<\/p>\n<p>Matthew suggested switching to React and creating a custom version of the MUI design system to solve these issues. TeamPassword also added <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-with-code-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a> to their tool stack to facilitate faster prototyping and testing.<\/p>\n<p>Read the full story: <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/teampassword-uxpin-merge-case-study\/\" target=\"_blank\" rel=\"noreferrer noopener\">TeamPassword Case Study<\/a>.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-prototyping-with-react-using-uxpin-merge\">Prototyping With React using UXPin Merge<\/h2>\n<p><a href=\"https:\/\/www.uxpin.com\/merge\">UXPin&#8217;s Merge technology<\/a> syncs a UI library from a repository to UXPin&#8217;s design editor, giving design teams fully interactive components for prototyping.<\/p>\n<p>These Merge components render the same in UXPin as they do in the repository, allowing designers to build prototypes indistinguishable from the final product.<\/p>\n<p>TeamPassword&#8217;s engineering team achieves comparable results in UXPin using Merge than they do writing code, making it the perfect tool for prototyping and iterating quickly\u2013critical for a small startup competing with billion-dollar competitors.<\/p>\n<p>Once TeamPassword completes prototyping and testing, they have production-ready code to develop the final product. They install their custom MUI library, import the components into the project, and copy the layouts from UXPin. <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/configuring-the-properties-panel\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin even renders JSX<\/a> to copy\/paste for each component&#8217;s props.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-how-does-merge-work\">How does Merge work?<\/h3>\n<p>UXPin renders HTML, CSS, and Javascript, unlike <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-figma-designs\/\" target=\"_blank\" rel=\"noreferrer noopener\">other design tools<\/a> that generate vector graphics. This code-based approach means that a React button on UXPin&#8217;s design canvas is exactly the same as a React button in a developer&#8217;s IDE. Any props associated with the button will appear in UXPin&#8217;s Properties Panel, so designers can make changes using a mouse instead of editing code.<\/p>\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/uxpin-properties-panel-react-props-min.jpg\" alt=\"uxpin properties panel react props min\" class=\"wp-image-39495\" width=\"650\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/uxpin-properties-panel-react-props-min.jpg 1000w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/uxpin-properties-panel-react-props-min-369x300.jpg 369w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/uxpin-properties-panel-react-props-min-768x624.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n<p>Once you sync Merge with UXPin, the component library (green arrow) appears under Design System Libraries (purple arrow). Designers drag and drop UI elements onto the canvas to build user interfaces.<\/p>\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/design-libraries-example-min-1024x578.jpg\" alt=\"design libraries example min\" class=\"wp-image-39497\" width=\"650\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/design-libraries-example-min-1024x578.jpg 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/design-libraries-example-min-531x300.jpg 531w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/design-libraries-example-min-768x434.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/design-libraries-example-min-1536x867.jpg 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/design-libraries-example-min.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h3 class=\"wp-block-heading\" id=\"h-connecting-uxpin-merge\">Connecting UXPin Merge<\/h3>\n<p>UXPin offers three ways to connect a design system using Merge:<\/p>\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.uxpin.com\/merge\/git-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Git Integration<\/a> \u2013 React libraries only<\/li>\n<li><a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook Integration<\/a> \u2013 React, Vue, Ember, Angular, <a href=\"https:\/\/storybook.js.org\/docs\/react\/get-started\/introduction\" target=\"_blank\" rel=\"noreferrer noopener\">and more<\/a><\/li>\n<li><a href=\"https:\/\/www.uxpin.com\/merge\/npm-integration\" target=\"_blank\" rel=\"noreferrer noopener\">npm Integration<\/a> \u2013 import components from open-source libraries on the npm registry<\/li>\n<\/ul>\n<h3 class=\"wp-block-heading\" id=\"h-ultimate-consistency\">Ultimate consistency<\/h3>\n<p>Consistency is one of Merge&#8217;s biggest benefits. With every design and engineering team using one UI library, design drift, and inconsistencies are almost non-existent. While designers can adjust the component&#8217;s props, they can&#8217;t change its structure or interactivity.<\/p>\n<p>This single source of truth means designers and engineers can focus on solving user problems and product challenges rather than designing or programming from scratch or fixing errors and inconsistencies.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-better-testing\">Better testing<\/h3>\n<p>Testing is significantly better with Merge than with image-based design tools. UXPin&#8217;s component-driven prototyping methodology enables design teams to prototype and test with code-like fidelity and functionality.&nbsp;<\/p>\n<p>Designers can also connect external tools and services using <a href=\"https:\/\/www.uxpin.com\/docs\/how-to\/google-calendar-events\/#connect-your-ifttt-account\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s API<\/a>, extending the scope beyond what&#8217;s possible using other design tools\u2013like sending a confirmation email from a prototype or syncing a user&#8217;s calendar.<\/p>\n<p>Merge prototypes allow design teams to get accurate, meaningful feedback from testing. Participants can interact with prototypes like they would the final product, allowing designers to solve more problems and identify more opportunities during the design process.<\/p>\n<p>Stakeholders also provide better feedback because the prototype experience closely resembles the final product.<\/p>\n<p><em>&#8220;The C-suite people and the directors are able to give us stronger feedback about the ultimate direction because they experience the features and goals of these prototypes rather than just commenting about how, how these boxes don&#8217;t look like a text field, for example.&#8221; &#8211; <\/em><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/paypal-scaled-design-process-uxpin-merge\/\" target=\"_blank\" rel=\"noreferrer noopener\">Erica Rider, UX Lead EPX at PayPal<\/a>.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-smoother-design-handoffs\">Smoother design handoffs<\/h3>\n<p>Design handoffs in Merge are seamless and frictionless. With design and engineering teams using the same components and constraints, the transition from design to development is much smoother than traditional <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">design-to-code workflows<\/a>.<\/p>\n<p><em>&#8220;The markup required to render the prototype can be taken directly from Merge and handed over to the engineer, who can place it in their software development tool of choice. The engineer no longer needs to start from scratch and already knows what components and settings to use. It will help us avoid the &#8216;design drift&#8217; we so often see. Things like spacing and typography should all be aligned, as it is all driven from one place.&#8221;<\/em> \u2013&nbsp; <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/iress-design-tool-review\/\" target=\"_blank\" rel=\"noreferrer noopener\">Nick Elliott, Design System Product Owner and Regional Head of Product Design at Iress<\/a>.<\/p>\n<p>Designing products using components from the same framework your engineers use makes the most sense, yet few design tools offer this code-based workflow. Only UXPin Merge bridges this gap successfully.<\/p>\n<p>Designers and engineers still work within their familiar tools and environments, while Merge provides the translation to facilitate this code-based workflow.<\/p>\n<p>Whether you&#8217;re an early-stage startup like TeamPassword or a multinational tech giant like PayPal, UXPin Merge will streamline your product development process with a single source of truth across the organization. For more details, <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">visit our Merge page<\/a>.<\/p>\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>Modern product and web development rely on frameworks, libraries, and dependencies to achieve desired results and outcomes. Understanding these frameworks&#8217; capabilities and limitations can help designers collaborate better with engineers throughout the design process and, most importantly, during design handoffs. Bridge the gap between design and development with UXPin Merge. Design fully interactive prototypes using<\/p>\n","protected":false},"author":3,"featured_media":39490,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,441],"tags":[],"class_list":["post-39481","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-front-end"],"yoast_title":"","yoast_metadesc":"Find out why developers use frameworks. Discover the advantages and disadvantages of frameworks and how it relates to design.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Why Developers Use Frameworks? | UXPin<\/title>\n<meta name=\"description\" content=\"Find out why developers use frameworks. Discover the advantages and disadvantages of frameworks and how it relates to design.\" \/>\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\/why-developers-use-frameworks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Why Developers Use Frameworks?\" \/>\n<meta property=\"og:description\" content=\"Find out why developers use frameworks. Discover the advantages and disadvantages of frameworks and how it relates to design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/why-developers-use-frameworks\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-08T14:48:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-09T00:08:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Why-do-developers-use-frameworks.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: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=\"9 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\\\/why-developers-use-frameworks\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/why-developers-use-frameworks\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Why Developers Use Frameworks?\",\"datePublished\":\"2023-03-08T14:48:25+00:00\",\"dateModified\":\"2026-05-09T00:08:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/why-developers-use-frameworks\\\/\"},\"wordCount\":1851,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/why-developers-use-frameworks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/Why-do-developers-use-frameworks.png\",\"articleSection\":[\"Blog\",\"Front-End\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/why-developers-use-frameworks\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/why-developers-use-frameworks\\\/\",\"name\":\"Why Developers Use Frameworks? | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/why-developers-use-frameworks\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/why-developers-use-frameworks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/Why-do-developers-use-frameworks.png\",\"datePublished\":\"2023-03-08T14:48:25+00:00\",\"dateModified\":\"2026-05-09T00:08:31+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Find out why developers use frameworks. Discover the advantages and disadvantages of frameworks and how it relates to design.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/why-developers-use-frameworks\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/why-developers-use-frameworks\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/why-developers-use-frameworks\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/Why-do-developers-use-frameworks.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/Why-do-developers-use-frameworks.png\",\"width\":1200,\"height\":600,\"caption\":\"Why do developers use frameworks\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/why-developers-use-frameworks\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Why Developers Use Frameworks?\"}]},{\"@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 Developers Use Frameworks? | UXPin","description":"Find out why developers use frameworks. Discover the advantages and disadvantages of frameworks and how it relates to design.","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\/why-developers-use-frameworks\/","og_locale":"en_US","og_type":"article","og_title":"Why Developers Use Frameworks?","og_description":"Find out why developers use frameworks. Discover the advantages and disadvantages of frameworks and how it relates to design.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/why-developers-use-frameworks\/","og_site_name":"Studio by UXPin","article_published_time":"2023-03-08T14:48:25+00:00","article_modified_time":"2026-05-09T00:08:31+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Why-do-developers-use-frameworks.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/why-developers-use-frameworks\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/why-developers-use-frameworks\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Why Developers Use Frameworks?","datePublished":"2023-03-08T14:48:25+00:00","dateModified":"2026-05-09T00:08:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/why-developers-use-frameworks\/"},"wordCount":1851,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/why-developers-use-frameworks\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Why-do-developers-use-frameworks.png","articleSection":["Blog","Front-End"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/why-developers-use-frameworks\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/why-developers-use-frameworks\/","name":"Why Developers Use Frameworks? | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/why-developers-use-frameworks\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/why-developers-use-frameworks\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Why-do-developers-use-frameworks.png","datePublished":"2023-03-08T14:48:25+00:00","dateModified":"2026-05-09T00:08:31+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Find out why developers use frameworks. Discover the advantages and disadvantages of frameworks and how it relates to design.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/why-developers-use-frameworks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/why-developers-use-frameworks\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/why-developers-use-frameworks\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Why-do-developers-use-frameworks.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/Why-do-developers-use-frameworks.png","width":1200,"height":600,"caption":"Why do developers use frameworks"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/why-developers-use-frameworks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Why Developers Use Frameworks?"}]},{"@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\/39481","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=39481"}],"version-history":[{"count":6,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/39481\/revisions"}],"predecessor-version":[{"id":59452,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/39481\/revisions\/59452"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/39490"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=39481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=39481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=39481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}