{"id":52143,"date":"2024-03-05T06:46:00","date_gmt":"2024-03-05T14:46:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=52143"},"modified":"2024-03-05T09:03:21","modified_gmt":"2024-03-05T17:03:21","slug":"merge-ai-announcement","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/merge-ai-announcement\/","title":{"rendered":"Product Announcement \u2013 Helping You Bring Design Vision to Life"},"content":{"rendered":"\n
\"product<\/figure>\n\n\n\n
<\/div>\n\n\n\n

We are excited to share what we\u2019ve been working on in the past few months. We\u2019ve been doing extensive research and development concerning the technology behind UXPin Merge, and today\u2019s the day when we announce it all.<\/p>\n\n\n\n

Evolution of UXPin<\/h2>\n\n\n\n

Our tool was grounded in a passion for innovation and a strong desire to make design accessible to anyone. It started as a paper prototyping notepad, aimed at democratizing prototyping and making it a universal concept that can be used to conceptualize design ideas fast.<\/p>\n\n\n\n

Around 2011 we developed a digital wireframing solution. At that time, this type of design work had its limitations. UXPin emerged as a solution to overcome existing flaws and introduce new advantages \u2013 from better collaboration with teammates outside of design to the challenges of quick iterations.<\/p>\n\n\n\n

UXPin was dedicated to reinventing the design process from the very beginning. Instead of operating on pixels, the tool was backed with code. Instead of focusing on flat mockups, it gave users the power to build highly interactive prototypes. Instead of following a well-threaded path of making a design handoff an afterthought, it married it into the design process from the very beginning.<\/p>\n\n\n\n

All of that is backed up with many interesting feature releases, such as Spec Mode<\/a>, an advanced version of Figma\u2019s \u201cDev Mode\u201d which UXPin has had for about 8 years. With Spec Mode, developers could inspect properties, measure distance, and get a generated style guide from the design.<\/p>\n\n\n\n

We\u2019ve never stopped innovating \u2013 the next step was developing a unique design technology \u2013 UXPin Merge<\/a> \u2013 meant to bridge the gap between design and development by making teams share a single source of truth (coded UI components<\/a>.)<\/p>\n\n\n\n

And now, we clarified our mission even further \u2013 we want to foster an even more inclusive design environment for everyone.<\/p>\n\n\n\n

The Journey to Change<\/h2>\n\n\n\n

Our journey began with a critical realization \u2013 developers often struggle to find a designer and need to build a UI by themselves. This sparked the inspiration to refocus UXPin Merge<\/a> to cater specifically to design-less or developer-driven teams, seeking a more straightforward way to create highly interactive and beautifully-looking user interfaces.<\/p>\n\n\n\n

After talking to the users, we understood that UXPin Merge<\/a> can play a key role in making design accessible<\/strong> and heralding the new era of design \u2013 one in which you can blend both design and development into one cohesive process<\/strong>.<\/p>\n\n\n\n

Starting with the most popular coded component libraries, MUI, Ant Design, Bootstrap, and Tailwind UI, we transformed UXPin Merge into a drag-and-drop UI builder<\/strong> that serves as a powerful tool for anyone who wants to design fast without compromising on quality, interactivity, and documentation.<\/p>\n\n\n\n

UXPin Merge Update \u2013 Drag-and-Drop UI Builder with Code Export<\/h2>\n\n\n\n

To achieve our mission, we introduced key functionalities that make the product development process easier. Let\u2019s explore them one by one.<\/p>\n\n\n\n

AI Component Creator<\/h3>\n\n\n\n

<\/h3>\n\n\n\n

AI proved itself to increase productivity, speed of work, and when it comes to the world of UI and code \u2013 product development. That\u2019s why we decided to include it in our design tool.<\/p>\n\n\n\n

Our built-in ChatGPT integration can help you get AI-generated fully customizable components based on the prompts you use<\/strong>. Just describe the component you need, and in seconds, it will appear on the canvas. If you need to reuse it or share it \u2013 save it as UXPin Pattern<\/a>.<\/p>\n\n\n\n

The AI Component Creator is located on the left (see the screenshot below.) For now, it works with the Tailwind component library (you will read more about that in a separate article.)<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

It\u2019s a great tool for getting custom components to complement your Tailwind UI library<\/strong>. A form field, menu, modal \u2013 the AI Component Creator can generate fully coded components<\/strong>. Once you finish up your AI-generated design, you can copy the working code off the prototype<\/strong>, and kick off the product development phase.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The plugin requires an OpenAI API key, but we\u2019re ready to help with that. Anyone interested in the plugin is welcome to write to our support team or read our help documentation.<\/p>\n\n\n\n

Open-source UI component libraries<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

We\u2019re adding new UI libraries, so that you can enjoy 100% code parity<\/strong> between design and development. This release includes MUIv5<\/strong>, Ant Design<\/strong>, React Bootstrap<\/strong>, and Tailwind UI<\/strong> \u2013 four powerful UI libraries that are fully themeable, customizable<\/strong> and their elements can be copied to the development environment without translation.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

What\u2019s worth highlighting is that since code comes from open-source libraries, you are the owner of it! You can copy the entire code<\/strong> and use it outside UXPin Merge<\/strong>. We\u2019re giving you a safe design environment to do UI and code exploration. Without making you dependent on our tool.<\/p>\n\n\n\n

1. Tailwind UI<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

We\u2019re adding a full library of Tailwind UI components<\/strong> that is available in UXPin. Tailwind is one of the best choices for reusable CSS code and it\u2019s a great fit for anyone who wants to rapidly build a polished front-end without the need to start from scratch.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

It works like this: open Tailwind library in UXPin, pick components that you need, adjust their props, go to Spec Mode and copy the code off your design with one click. We\u2019re including 18 components<\/strong> (button, alerts, input, avatar group, dropdown, and more,) plus we\u2019re giving users the option to add custom Tailwind components<\/strong>, be it with AI Component Creator<\/strong> or just the \u201cCustom component<\/strong>\u201d option in the library.<\/p>\n\n\n\n

With Custom component, you can take any code from Tailwind UI and paste it into UXPin<\/strong>. Let\u2019s say you want a Hero Section. Go to Tailwind UI > Components > Marketing > Hero Sections (quick link here<\/a>.) Then, copy the code by clicking the icon on the right. Go to UXPin\u2019s Tailwind library<\/strong> and click the first component named \u201cCustom component.\u201d Paste the code and watch how your hero section gets dropped on the canvas.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Additionally, with this integration, users can set up themes<\/strong>:<\/p>\n\n\n\n