{"id":67,"date":"2020-04-14T14:04:00","date_gmt":"2020-04-14T14:04:00","guid":{"rendered":"https:\/\/v1.staging.magicul.io\/blog\/?p=67"},"modified":"2023-07-28T13:48:54","modified_gmt":"2023-07-28T13:48:54","slug":"importing-figma-adobe-xd-in-uxpin-builderx-and-origami","status":"publish","type":"post","link":"https:\/\/magicul.io\/blog\/importing-figma-adobe-xd-in-uxpin-builderx-and-origami","title":{"rendered":"Importing Figma & Adobe XD in UXPin, BuilderX, and Origami"},"content":{"rendered":"\n
In this article, we are going to discuss how you can use UXPin, BuilderX or Origami and import your existing designs from Adobe XD or Figma. We are going to take a deeper look at what’s currently possible, which drawbacks each solution has.<\/p>\n\n\n\n
Introduction<\/h2>\n\n\n\n
It is becoming common practice to use multiple UI\/UX tools on the same project as you get more involved with the process. Designers tend to use Sketch or XD to craft the UI, InVision or UXPin to prototype, and tools like Zeplin to hand off designs to developers.<\/p>\n\n\n\n
Different tools in the market are filling in niches that some designers have been looking for. Popular use-cases are: design to code conversion<\/strong> or extensive prototyping<\/strong> functions. Each tool comes with its own set of import functionalities.<\/p>\n\n\n\n
The tools that we are looking at today each have a special set of features. Let\u2019s dive into it…<\/p>\n\n\n\n
The Tools<\/strong><\/h2>\n\n\n\n
You might be wondering why I chose UXPin, BuilderX and Origami. Well, they each have unique features that make them worth exploring.<\/p>\n\n\n\n
BuilderX<\/em><\/p>\n\n\n\n
BuilderX – Sketch to React Feature<\/figcaption><\/figure>\n\n\n\n
First up, we have BuilderX, a tool with a very unique feature to easily convert your design into React Native or React<\/strong>. It allows your designs to be responsive and promises a ready-to-deploy application with a click of a button. BuilderX is not limited to just designing websites, thanks to its support for React Native you can easily design apps in it as well.<\/p>\n\n\n\n
Key Features<\/p>\n\n\n\n
\n
Converts to production-ready React Native & React code<\/li>\n\n\n\n
You can still design within BuilderX<\/li>\n\n\n\n
Browser-based like Figma<\/li>\n\n\n\n
Converts Absolute layouts to Flex<\/li>\n\n\n\n
Open-source icons available in-app, no need to install plug-ins<\/li>\n<\/ul>\n\n\n\n
UXPin<\/em><\/p>\n\n\n\n
UXPin – Code Components for Design to Code<\/figcaption><\/figure>\n\n\n\n
UXPin might be the solution to getting rid of needing duplicate artboards to mimic a sense of interaction. With UXPin, you can add highly interactive states by using logic and code wrapped with an easy-to-use interface.<\/p>\n\n\n\n
Key Features<\/p>\n\n\n\n
\n
Allows for clean interactions by removing the need for duplicate artboards<\/li>\n\n\n\n
Real-time collaboration like Figma, which Adobe XD lacks (although it is currently in Beta development)<\/li>\n\n\n\n
Soon allows HTML importing and automatic syncing with React.js components<\/li>\n\n\n\n
Constantly being updated based on user feedback<\/li>\n<\/ul>\n\n\n\n
Origami Studio allows for a highly interactive prototype and works differently to the current popular tools. They make use of a patch editor to build the app.<\/p>\n\n\n\n
Since the patch editor uses logic, they\u2019re great for showing micro-interactions or an exact and detailed visual presentation of how the page would work. It is so exact, that a prototype with a camera feature would be capable of taking actual pictures or even recording, just like an actual app would.<\/p>\n\n\n\n
Great way to precisely show how an app would behave<\/li>\n\n\n\n
Free to use & it\u2019s open-source<\/li>\n\n\n\n
Powerful animations and interactions features<\/li>\n<\/ul>\n\n\n\n
Import Functionality of UXBuilder, UXPin, and Origami<\/strong><\/p>\n\n\n\n
Here\u2019s an overview of what each tool supports<\/p>\n\n\n\n
<\/th>
UXPin<\/th>
BuilderX<\/th>
Origami<\/th><\/tr><\/thead>
Adobe XD (.xd)<\/td>
–<\/td>
–<\/td>
–<\/td><\/tr>
Figma (.fig)<\/td>
–<\/td>
–<\/td>
–<\/td><\/tr>
Sketch (.sketch)<\/td>
Direct Import<\/td>
Direct Import<\/td>
Direct Import<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
While UXPin, BuilderX, and Origami don’t currently support importing Adobe XD and Figma files out of the box, there is still a way to access them. Since all three tools support the direct import of Sketch files we can convert the XD or Figma files to Sketch and then simply import the Sketch file to those tools. <\/strong>Sketch has established itself as a standard format among designers and it will be a while since that\u2019s going to change.<\/p>\n\n\n\n
The Workaround: Converting XD\/Figma files to Sketch<\/strong><\/p>\n\n\n\n
There are multiple ways to move Adobe XD designs or Figma designs over to Sketch.<\/p>\n\n\n\n
\n
Using SVG<\/li>\n\n\n\n
Using a direct converter like Magicul<\/li>\n<\/ol>\n\n\n\n
Both options have pros and cons. In the next section, we will be looking at those.<\/p>\n\n\n\n
SVG<\/strong><\/em><\/p>\n\n\n\n
For both Adobe XD and Figma, you can save your XD\/Figma artboard as an SVG file and open it in Sketch. However, it\u2019s not a direct one-to-one conversion as you do lose some information like shadows, format, symbols, and in some cases even font styles.<\/p>\n\n\n\n
Let\u2019s take a deeper look.<\/p>\n\n\n\nDummy Music Dashboard in Adobe XD<\/figcaption><\/figure>\n\n\n\nDesign imported in Sketch through SVG<\/figcaption><\/figure>\n\n\n\n
Importing from Figma to Sketch using SVG isn\u2019t the best, it\u2019s often finicky. It can become frustratingly time-consuming when you have more complex design files or even design systems to fix all issues. Symbols, styles and even the positioning of layers aren’t convert properly. Additionally your folder structure is mostly not converted at all! <\/p>\n\n\n\n
![\"\"](\"https:\/\/magicul.io\/blog\/wp-content\/uploads\/2023\/05\/builderx-sketch-to-react-1024x866.png\")
![\"\"](\"https:\/\/magicul.io\/blog\/wp-content\/uploads\/2023\/05\/uxpin-1024x573.png\")
![\"\"](\"https:\/\/magicul.io\/blog\/wp-content\/uploads\/2023\/05\/origami-sketch-import-1024x578.png\")
![\"\"](\"https:\/\/magicul.io\/blog\/wp-content\/uploads\/2023\/05\/xd-file-original-1024x641.jpg\")
![\"\"](\"https:\/\/magicul.io\/blog\/wp-content\/uploads\/2023\/05\/figma-svg-export-1024x600.jpg\")
![\"\"](\"https:\/\/magicul.io\/blog\/wp-content\/uploads\/2023\/05\/magicul-converter-figma-landing-page-1024x557.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/blog.magicul.io\/content\/images\/2020\/04\/Download-xd2sketch.png\")
![\"\"](\"https:\/\/magicul.io\/blog\/wp-content\/uploads\/2023\/05\/magicul-converter-result-1024x601.jpg\")
![\"\"](\"https:\/\/magicul.io\/blog\/wp-content\/uploads\/2023\/05\/Sketch-to-UXPin-1-1024x570.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/magicul.io\/blog\/wp-content\/uploads\/2023\/05\/sketch-to-builderx-1024x576.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/magicul.io\/blog\/wp-content\/uploads\/2023\/05\/Sketch-to-Origami-1024x640.png\")
<\/figure>\n\n\n\n