{"id":57993,"date":"2026-01-19T20:56:38","date_gmt":"2026-01-20T04:56:38","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=57993"},"modified":"2026-01-19T13:31:27","modified_gmt":"2026-01-19T21:31:27","slug":"design-real-ant-design-components-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/design-real-ant-design-components-uxpin-merge\/","title":{"rendered":"How to Design with Real Ant Design Components in UXPin Merge"},"content":{"rendered":"\n<p><a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a> lets designers use <strong>real <a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Ant Design<\/a> components<\/strong> directly in their prototypes, ensuring designs and code are perfectly aligned. This eliminates the need for developers to rebuild mockups, reduces inconsistencies, and speeds up workflows. With production-ready <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">React<\/a> components, designs behave exactly as they will in the final product, saving time and resources.<\/p>\n<p><strong>Key Takeaways:<\/strong><\/p>\n<ul>\n<li><strong>Ant Design in <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge:<\/strong> Drag-and-drop React components like Buttons, Tables, and DatePickers directly onto your canvas.<\/li>\n<li><strong>Real Functionality:<\/strong> Components include built-in interactivity and reflect production behavior.<\/li>\n<li><strong>Consistent Design:<\/strong> Use Ant Design tokens for colors, spacing, and typography to maintain uniformity.<\/li>\n<li><strong>Efficient Handoff:<\/strong> Developers get JSX code directly from prototypes, avoiding translation errors.<\/li>\n<li><strong>Proven Results:<\/strong> Teams report up to 50% faster development time.<\/li>\n<\/ul>\n<p>Start by accessing the Ant Design library in UXPin, configure component properties, and create high-fidelity prototypes that match production standards.<\/p>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/696e93e60a871bef4add38a3-1768855756089.jpg\" alt=\"How to Set Up and Use Ant Design Components in UXPin Merge\" style=\"width:100%;\"><figcaption style=\"font-size: 0.85em; text-align: center; margin: 8px; padding: 0;\">\n<p style=\"margin: 0; padding: 4px;\">How to Set Up and Use Ant Design Components in UXPin Merge<\/p>\n<\/figcaption><\/figure>\n<h2 id=\"getting-started-accessing-ant-design-in-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Getting Started: Accessing <a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Ant Design<\/a> in <a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a><\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/696e93e60a871bef4add38a3\/6d1e4799fb91b83abf674d958f4e05ea.jpg\" alt=\"Ant Design\" style=\"width:100%;\"><\/p>\n<h3 id=\"accessing-the-pre-built-ant-design-library\" tabindex=\"-1\">Accessing the Pre-Built Ant Design Library<\/h3>\n<p>Ant Design comes ready to use in UXPin Merge &#8211; no installations, external configurations, or file imports needed. Once you start a new project, the library is at your fingertips.<\/p>\n<p>Here\u2019s how to begin: Open your UXPin dashboard and click on <strong>New Project<\/strong>. Choose <strong>Design with Merge Components<\/strong>, then select <strong>Use Existing Libraries<\/strong>. This will instantly give you access to Ant Design.<\/p>\n<p>What\u2019s great about these components? They\u2019re fully aligned with the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ant-design-introduction\/\" style=\"display: inline;\">production Ant Design library<\/a>, meaning they function exactly as they would in a live React application.<\/p>\n<p>Once the library is loaded, double-check that it\u2019s properly integrated into your project.<\/p>\n<h3 id=\"verifying-component-availability\" tabindex=\"-1\">Verifying Component Availability<\/h3>\n<p>To confirm everything\u2019s set up, go to the <strong>Design System Libraries<\/strong> tab in the bottom-left corner of the UXPin Editor. From the dropdown menu, select <strong>Ant Design<\/strong>.<\/p>\n<p>Next, glance at the sidebar to see the list of components available &#8211; like Button, Input, DatePicker, and Table. If these components appear, you\u2019re ready to start creating prototypes that reflect production-level functionality.<\/p>\n<h2 id=\"building-prototypes-with-ant-design-components\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Building Prototypes with Ant Design Components<\/h2>\n<h3 id=\"using-drag-and-drop-to-build-uis\" tabindex=\"-1\">Using Drag-and-Drop to Build UIs<\/h3>\n<p>Creating <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/high-fidelity-prototype-how-to-design\/\" style=\"display: inline;\">high-fidelity prototypes<\/a> with Ant Design in UXPin Merge is a smooth and efficient process. All the components you need are located in the <strong>Design System Libraries<\/strong> tab on the left side of the screen. To start, simply drag a component &#8211; like a Button, Input, or Table &#8211; onto your canvas.<\/p>\n<p>What sets this approach apart from traditional tools is that these components aren&#8217;t just static visuals; they function like actual code components. For example, when you place a DatePicker on your canvas, it behaves exactly as it would in a live React application. There&#8217;s no need to manually simulate states or interactions.<\/p>\n<p>This approach significantly speeds up UI creation. Instead of building component behaviors from scratch, you&#8217;re working with pre-built, functional elements.<\/p>\n<p>Once you&#8217;ve added a component, you can fine-tune its behavior and appearance using the Properties Panel.<\/p>\n<h3 id=\"configuring-component-properties\" tabindex=\"-1\">Configuring Component Properties<\/h3>\n<p>After placing components on your canvas, the next step is configuring their properties to reflect real-world behavior. The <strong>Properties Panel<\/strong> on the right-hand side gives you access to all customization options, mirroring the React props used in production code.<\/p>\n<p>Take the Button component, for example. You can adjust its <strong>Type<\/strong> (such as Primary, Default, Dashed, Text, or Link), enable the <strong>Danger<\/strong> property for actions like deletions, or activate the <strong>Loading<\/strong> state to display a spinner. Every change you make in the Properties Panel will reflect how the component behaves in the final product.<\/p>\n<p>For broader customization, you can use <strong>Seed Tokens<\/strong> like <code>colorPrimary<\/code> to modify themes throughout your prototype. Ant Design&#8217;s algorithms automatically calculate and apply Map and Alias tokens across the library, ensuring consistent updates to buttons, links, and other branded elements.<\/p>\n<p>If you need more precise control, UXPin Merge also includes a <strong>Custom CSS control<\/strong> for tweaking elements like padding, margins, and borders.<\/p>\n<h3 id=\"creating-common-ui-patterns\" tabindex=\"-1\">Creating Common UI Patterns<\/h3>\n<p>Designing common UI patterns with fully functional components bridges the gap between design and development. Enterprise applications often rely on specific patterns, such as forms for data entry, tables for presenting information, and navigation components for managing complex workflows.<\/p>\n<p>For <strong>data entry forms<\/strong>, you can combine components like Input, DatePicker, and Select. Since Ant Design supports <strong>69 languages<\/strong> for <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/internationalization-vs-localization-in-app-design\/\" style=\"display: inline;\">internationalization<\/a>, these forms can effortlessly adapt for global use.<\/p>\n<p><strong>Data tables<\/strong> are another essential pattern. You can drag a Table component onto your canvas and configure its columns and data sources directly through the Properties Panel. Add Pagination for large datasets or pair it with the Statistics component to create detailed dashboards.<\/p>\n<p>When it comes to <strong>navigation<\/strong>, Ant Design offers versatile options. Use the Breadcrumb component to display a user&#8217;s location, the Steps component for multi-step processes, or the Menu component for global navigation headers. You can even nest components by dragging &quot;children&quot; into &quot;parent&quot; containers using the canvas or the <strong>Layers Panel<\/strong>. This ensures proper CSS layouts, like flexbox, are applied automatically.<\/p>\n<p>Because these are real code components, they come with built-in interactivity, so you don\u2019t need to add extra effort to make them functional.<\/p>\n<h2 id=\"maintaining-consistency-and-scalability\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Maintaining Consistency and Scalability<\/h2>\n<h3 id=\"using-ant-designs-design-tokens\" tabindex=\"-1\">Using Ant Design&#8217;s Design Tokens<\/h3>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/\" style=\"display: inline;\">Design tokens act as the backbone<\/a> for keeping visual elements consistent, whether you&#8217;re working on a prototype or production code. Ant Design&#8217;s tokens for elements like color, spacing, and typography seamlessly integrate into the design canvas, bridging the gap between design and development.<\/p>\n<p>When using Ant Design components in UXPin Merge, you&#8217;re tapping into the same npm package (<code>antd<\/code>) that developers rely on. This creates a <strong>true single source of truth<\/strong>, ensuring what you design is exactly what gets shipped. Controlled properties &#8211; such as <code>colorPrimary<\/code>, <code>size<\/code>, and <code>type<\/code> &#8211; in the Properties Panel ensure styling adheres to system specifications, eliminating inconsistencies.<\/p>\n<p>To maintain this consistency on a global scale, a <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/wrapper-component\/\" style=\"display: inline;\">Global Wrapper Component<\/a> can be used to load CSS files (like <code>antd.css<\/code> or custom theme files) across your entire prototype. This approach ensures uniform application of typography, colors, and spacing without needing to configure each component individually. Developers can also leverage Spec Mode during handoff to access precise token-based values, including CSS properties, spacing, and color codes.<\/p>\n<blockquote>\n<p>&quot;This is perfect for Design Systems, as nobody can mess up your components by applying the styling that isn&#8217;t permitted in the system!&quot; \u2013 UXPin Documentation <\/p>\n<\/blockquote>\n<h3 id=\"scaling-prototypes-for-complex-systems\" tabindex=\"-1\">Scaling Prototypes for Complex Systems<\/h3>\n<p>With a foundation of consistent design tokens, scaling prototypes for complex systems becomes a seamless process. Enterprise-level projects can grow without losing alignment between design and development. Since UXPin Merge uses components backed by actual code, scaling is straightforward &#8211; there&#8217;s no risk of the design drifting away from the codebase.<\/p>\n<p>Erica Rider, a UX Architect and Design Leader, shared her team&#8217;s success syncing the <a href=\"https:\/\/fluent2.microsoft.design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Microsoft Fluent<\/a> design system with UXPin Merge. With just three designers, they supported 60 internal products and over 1,000 developers. This efficiency is possible because the components enforce system constraints automatically. For instance, if a component&#8217;s CSS specifies fixed dimensions, resizing is only possible through defined prop values, keeping everything in check.<\/p>\n<h6 id=\"sbb-itb-f6354c6\" tabindex=\"-1\" style=\"display: none;color:transparent;\">sbb-itb-f6354c6<\/h6>\n<h2 id=\"simplifying-handoffs-to-development-teams\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Simplifying Handoffs to Development Teams<\/h2>\n<h3 id=\"design-equals-code-no-translation-required\" tabindex=\"-1\">Design Equals Code: No Translation Required<\/h3>\n<p>With Ant Design in UXPin Merge, the typical challenges of <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/better-design-handoff\/\" style=\"display: inline;\">handoffs between design and development teams<\/a> fade away. Forget the old days when developers had to rebuild mockups from scratch &#8211; now, your designs are created using <strong>actual React code<\/strong> pulled directly from the <code>antd<\/code> npm package. This means developers receive prototypes that are already ready for production.<\/p>\n<p>In UXPin&#8217;s Spec Mode, specifications are automatically generated with valid JSX code. Developers can simply copy this code into their projects &#8211; no need for interpretation or second-guessing. Every element in the design is tied to valid Ant Design React props, ensuring everything aligns with technical requirements.<\/p>\n<blockquote>\n<p>&quot;Imported components are 100% identical to the components used by developers. It means that components are going to look, feel and function (interactions, data) just like the real product.&quot; \u2013 UXPin Documentation <\/p>\n<\/blockquote>\n<p>This alignment between design and code eliminates unnecessary translation, paving the way for smoother workflows. Let\u2019s dive into how this approach minimizes rework and design inconsistencies.<\/p>\n<h3 id=\"reducing-rework-and-design-drift\" tabindex=\"-1\">Reducing Rework and Design Drift<\/h3>\n<p>Design drift &#8211; when the final product doesn\u2019t match the approved designs &#8211; often occurs when separate systems are used for design and development. UXPin Merge solves this problem by creating a <strong><a href=\"https:\/\/www.uxpin.com\/design-systems\" style=\"display: inline;\">single source of truth<\/a><\/strong>. Any updates made to the Ant Design library are automatically reflected in the design editor, ensuring everyone stays on the same page.<\/p>\n<p>Larry Sawyer, a Lead UX Designer, shared how impactful this system can be:<\/p>\n<blockquote>\n<p>&quot;When I used UXPin Merge, our engineering time was reduced by around 50%. Imagine how much money that saves across an enterprise-level organization with dozens of designers and hundreds of engineers.&quot; <\/p>\n<\/blockquote>\n<h2 id=\"conclusion\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Conclusion<\/h2>\n<h3 id=\"why-ant-design-and-uxpin-merge-work-so-well-together\" tabindex=\"-1\">Why Ant Design and <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge Work So Well Together<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/696e93e60a871bef4add38a3\/ea3f61f43f2584611a0d1ceebb169698.jpg\" alt=\"UXPin\" style=\"width:100%;\"><\/p>\n<p>Using Ant Design components within UXPin Merge allows you to create prototypes that are ready for production &#8211; no extra rework needed. Since you&#8217;re working directly with React code from the <strong>antd npm package<\/strong>, the designs you create translate seamlessly into <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/convert-design-to-code-better-way\/\" style=\"display: inline;\">production-ready code<\/a>. Teams leveraging UXPin Merge have reported speeding up their product development process by as much as <strong>10x compared to traditional workflows<\/strong>.<\/p>\n<p>What makes this approach so effective? Your prototype and codebase share the exact same components, eliminating misunderstandings and ensuring consistency. Properties, states, and interactions are all aligned from the very beginning, reducing the risk of design drift or errors.<\/p>\n<h3 id=\"how-to-get-started\" tabindex=\"-1\">How to Get Started<\/h3>\n<p>To dive in, start by exploring the built-in Ant Design library in UXPin. You can simply drag and drop components onto the canvas to create interactive prototypes &#8211; no complicated setup required. Play around with component properties and experiment with <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/use-right-ui-design-patterns\/\" style=\"display: inline;\">UI patterns<\/a>. Plus, with Spec Mode, you\u2019ll see how UXPin generates production-ready JSX code in real time.<\/p>\n<p>For teams using custom design systems, UXPin Merge makes it easy to integrate your own component libraries. The <strong>Merge Component Manager<\/strong> helps map properties and ensures your designs stay in sync with your development codebase. This tight integration keeps your products consistent and efficient from start to finish.<\/p>\n<h2 id=\"design-using-your-favorite-react-ui-libraries\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Design Using Your Favorite <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">React<\/a> UI Libraries<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/696e93e60a871bef4add38a3\/2e4e16a9d321c762f569ac1854dc7375.jpg\" alt=\"React\" style=\"width:100%;\"><\/p>\n<p> <iframe class=\"sb-iframe\" src=\"https:\/\/www.youtube.com\/embed\/0qAFWWrQCoI\" frameborder=\"0\" loading=\"lazy\" allowfullscreen style=\"width: 100%; height: auto; aspect-ratio: 16\/9;\"><\/iframe><\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"how-do-ant-design-components-in-uxpin-merge-enhance-the-design-to-development-process\" tabindex=\"-1\" data-faq-q>How do Ant Design components in UXPin Merge enhance the design-to-development process?<\/h3>\n<p>Using <strong>Ant Design components<\/strong> in UXPin Merge streamlines the workflow between design and development, offering a code-first approach. These components are pulled directly from the React library that developers use, meaning any updates made in the code repository instantly appear in the UXPin editor. This ensures designers and developers are always aligned, working from the same up-to-date source, and eliminates the need to recreate or redraw elements already in production.<\/p>\n<p>Prototypes created with Ant Design in Merge function just like the final product, complete with realistic interactions and data-driven states. This reduces inconsistencies, speeds up feedback, and improves user testing. Plus, features like built-in version control and npm integration make it easy for teams to access the latest updates or custom design system builds, simplifying collaboration and minimizing handoff issues.<\/p>\n<h3 id=\"how-can-i-use-ant-design-components-in-a-new-uxpin-project\" tabindex=\"-1\" data-faq-q>How can I use Ant Design components in a new UXPin project?<\/h3>\n<p>To start incorporating Ant Design components into your UXPin projects, just follow these straightforward steps:<\/p>\n<ul>\n<li> <strong>Step 1<\/strong>: Open your UXPin dashboard and either create a new project or open an existing one. Navigate to the <strong>Merge<\/strong> tab within the editor. <\/li>\n<li> <strong>Step 2<\/strong>: Add a new library using the npm integration. Click on <strong>Add Library<\/strong> and select the npm option. <\/li>\n<li> <strong>Step 3<\/strong>: Give the library a name, like &quot;Ant Design&quot;, so it\u2019s easy to find in your Libraries list later. <\/li>\n<li> <strong>Step 4<\/strong>: Input the Ant Design npm package name (<code>antd<\/code>) and pick the version you want to use (e.g., &quot;Latest&quot;). <\/li>\n<li> <strong>Step 5<\/strong>: If necessary, include any additional dependencies or assets, like CSS URLs or icons, in the provided fields. <\/li>\n<li> <strong>Step 6<\/strong>: Save your library. UXPin will automatically sync the Ant Design components. <\/li>\n<li> <strong>Step 7<\/strong>: Once the sync is complete, you can simply drag and drop Ant Design components onto your canvas to craft interactive, high-fidelity prototypes. <\/li>\n<\/ul>\n<p>By following these steps, you\u2019ll integrate Ant Design into UXPin smoothly, allowing you to design with production-ready components in no time.<\/p>\n<h3 id=\"how-does-uxpin-merge-maintain-consistency-between-design-and-code\" tabindex=\"-1\" data-faq-q>How does UXPin Merge maintain consistency between design and code?<\/h3>\n<p>UXPin Merge bridges the gap between design and development by connecting React component libraries directly from sources like a Git repository, <a href=\"https:\/\/storybook.js.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Storybook<\/a>, or an npm package. These components act as a <strong>single source of truth<\/strong>, ensuring that updates &#8211; whether it&#8217;s props, interactions, or styles &#8211; are automatically reflected in the UXPin editor.<\/p>\n<p>By using this approach, teams can create high-fidelity prototypes that closely resemble production-ready components. This eliminates the usual inconsistencies between design and development. Plus, features like built-in version control and update notifications make collaboration smoother, keeping designs perfectly in sync with the latest code changes.<\/p>\n<h2>Related Blog Posts<\/h2>\n<ul>\n<li><a href=\"\/studio\/blog\/reusable-react-components-in-prototypes\/\" style=\"display: inline;\">Reusable React Components in Prototypes<\/a><\/li>\n<li><a href=\"\/studio\/blog\/react-components-real-time-design\/\" style=\"display: inline;\">How React Components Improve Real-Time Design<\/a><\/li>\n<li><a href=\"\/studio\/blog\/design-real-bootstrap-components-uxpin-merge\/\" style=\"display: inline;\">How to Design with Real Boostrap Components in UXPin Merge<\/a><\/li>\n<li><a href=\"\/studio\/blog\/prototype-gpt-5-2-ant-design-uxpin-merge\/\" style=\"display: inline;\">How to prototype using GPT-5.2 + Ant Design  &#8211;  Use UXPin Merge!<\/a><\/li>\n<\/ul>\n<p><script async type=\"text\/javascript\" src=\"https:\/\/app.seobotai.com\/banner\/banner.js?id=696e93e60a871bef4add38a3\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use production-ready Ant Design React components inside UXPin Merge to build interactive, consistent prototypes and export JSX for faster handoffs.<\/p>\n","protected":false},"author":231,"featured_media":57990,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-57993","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"","yoast_metadesc":"","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>How to Design with Real Ant Design Components in UXPin Merge | UXPin<\/title>\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\/design-real-ant-design-components-uxpin-merge\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Design with Real Ant Design Components in UXPin Merge\" \/>\n<meta property=\"og:description\" content=\"Use production-ready Ant Design React components inside UXPin Merge to build interactive, consistent prototypes and export JSX for faster handoffs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/design-real-ant-design-components-uxpin-merge\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-20T04:56:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/01\/image_3688006c5f34d11a1553cc123b18806f.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andrew Martin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andrewSaaS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andrew Martin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 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\\\/design-real-ant-design-components-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-real-ant-design-components-uxpin-merge\\\/\"},\"author\":{\"name\":\"Andrew Martin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"headline\":\"How to Design with Real Ant Design Components in UXPin Merge\",\"datePublished\":\"2026-01-20T04:56:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-real-ant-design-components-uxpin-merge\\\/\"},\"wordCount\":2180,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-real-ant-design-components-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/image_3688006c5f34d11a1553cc123b18806f.jpeg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-real-ant-design-components-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-real-ant-design-components-uxpin-merge\\\/\",\"name\":\"How to Design with Real Ant Design Components in UXPin Merge | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-real-ant-design-components-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-real-ant-design-components-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/image_3688006c5f34d11a1553cc123b18806f.jpeg\",\"datePublished\":\"2026-01-20T04:56:38+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-real-ant-design-components-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-real-ant-design-components-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-real-ant-design-components-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/image_3688006c5f34d11a1553cc123b18806f.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/image_3688006c5f34d11a1553cc123b18806f.jpeg\",\"width\":1536,\"height\":1024,\"caption\":\"How to Design with Real Ant Design Components in UXPin Merge\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-real-ant-design-components-uxpin-merge\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Design with Real Ant Design Components in UXPin Merge\"}]},{\"@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\\\/ac635ff03bf09bee5701f6f38ce9b16b\",\"name\":\"Andrew Martin\",\"description\":\"Andrew is the CEO of UXPin, leading its product vision for design-to-code workflows used by product and engineering teams worldwide. He writes about responsive design, design systems, and prototyping with real components to help teams ship consistent, performant interfaces faster.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/andrewSaaS\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/andrewuxpin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Design with Real Ant Design Components in UXPin Merge | UXPin","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\/design-real-ant-design-components-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to Design with Real Ant Design Components in UXPin Merge","og_description":"Use production-ready Ant Design React components inside UXPin Merge to build interactive, consistent prototypes and export JSX for faster handoffs.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/design-real-ant-design-components-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-01-20T04:56:38+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/01\/image_3688006c5f34d11a1553cc123b18806f.jpeg","type":"image\/jpeg"}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-real-ant-design-components-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-real-ant-design-components-uxpin-merge\/"},"author":{"name":"Andrew Martin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"headline":"How to Design with Real Ant Design Components in UXPin Merge","datePublished":"2026-01-20T04:56:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-real-ant-design-components-uxpin-merge\/"},"wordCount":2180,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-real-ant-design-components-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/01\/image_3688006c5f34d11a1553cc123b18806f.jpeg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-real-ant-design-components-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/design-real-ant-design-components-uxpin-merge\/","name":"How to Design with Real Ant Design Components in UXPin Merge | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-real-ant-design-components-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-real-ant-design-components-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/01\/image_3688006c5f34d11a1553cc123b18806f.jpeg","datePublished":"2026-01-20T04:56:38+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-real-ant-design-components-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/design-real-ant-design-components-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-real-ant-design-components-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/01\/image_3688006c5f34d11a1553cc123b18806f.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/01\/image_3688006c5f34d11a1553cc123b18806f.jpeg","width":1536,"height":1024,"caption":"How to Design with Real Ant Design Components in UXPin Merge"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-real-ant-design-components-uxpin-merge\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"How to Design with Real Ant Design Components in UXPin Merge"}]},{"@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\/ac635ff03bf09bee5701f6f38ce9b16b","name":"Andrew Martin","description":"Andrew is the CEO of UXPin, leading its product vision for design-to-code workflows used by product and engineering teams worldwide. He writes about responsive design, design systems, and prototyping with real components to help teams ship consistent, performant interfaces faster.","sameAs":["https:\/\/x.com\/andrewSaaS"],"url":"https:\/\/www.uxpin.com\/studio\/author\/andrewuxpin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/57993","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\/231"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=57993"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/57993\/revisions"}],"predecessor-version":[{"id":57995,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/57993\/revisions\/57995"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/57990"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=57993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=57993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=57993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}