About importing screens
Have you already been working on your prototypes in Figma, Sketch, or Adobe XD? No worries at all, you can import them to Uizard with a few clicks 🚀
Learn all about screens importing to Uizard from various prototyping software by checking the table of contents below 👇
Importing screens from Figma
Please note that we now have a Figma plugin to easily copy and paste from Figma into our platform. If you prefer the old way of importing screens, please follow these steps:
1) First of all, you'd need to export your Figma project to your local device. It can be done by following the steps provided below:
Select the screen you want to import into Uizard.
Click the '+' in the Export section of the right sidebar.
Select PNG or JPG for the output format.
Select 1x for the size.
Click the button 'Export' to download an image of your screen.
2) Inside Uizard navigate to the project where you want to import your screen.
3) Click 'Screen' on the left-sidebar and choose the 'Figma' import option:
4) Click 'import from screenshot':
5) Finally, drag and drop or click to upload your image from Figma and let the AI do the rest. In just a few seconds, you'll have the Figma screen converted into an editable screen in Uizard 🪄
Copying/importing from Figma to Uizard
1) Use the 'Uizard' plugin in Figma and click 'Run':
2) Select any components you'd like to copy and click the blue 'Copy' button:
3) Paste it within the Uizard platform by right-clicking and selecting paste or using CMD/CTRL + V:
4) A pop-up will show up to help optimize performance. You can select 'Show resolved' if no information is missing as shown below:
5) You can also click the drop-down to change the categorization:
6) And lastly, you can click 'Skip all' to skip this input or 'Save' to save any changes to the information:
You can also view this in video form:
Importing screens from Sketch
1) First of all, you'd need to export your Sketch project to your local device. It can be done by following the steps provided below:
Select the screen you want to import into Uizard.
On the right sidebar, click the '+' next to 'Make Exportable'.
Select PNG or JPG for the format.
Select 1x for the size.
Click the button 'Export Selected' at the bottom of the right sidebar.
Click the button 'Save' to download an image of your screen.
2) Inside Uizard navigate to the project where you want to import your screen.
3) Click 'Screen' on the left-sidebar and choose the 'Sketch' import option:
4) Finally, drag and drop or click to upload your image from Sketch and let the AI do the rest. In just a few seconds, you'll have the Sketch screen converted into an editable screen in Uizard 🪄
Importing screens from Adobe XD
1) First of all, you'd need to export your Adobe XD project to your local device. It can be done by following the steps provided below:
Select the screen you want to import into Uizard.
In the top bar menu, click 'File > Export > Selected'.
Select PNG or JPG for the format.
Select 1x for the export size.
Click the button 'Export' to download an image of your screen.
2) Inside Uizard navigate to the project where you want to import your screen.
3) Click 'Screen' on the left-sidebar and choose the 'Adobe XD' import option:
4) Finally, drag and drop or click to upload your image from Adobe XD and let the AI do the rest. In just a few seconds, you'll have the Adobe XD screen converted into an editable screen in Uizard 🪄
FAQs
Can I upload multiple screens at once to Uizard instead of individual screens one at a time?
Can I upload multiple screens at once to Uizard instead of individual screens one at a time?
Right now, it's not possible to upload multiple screens at once to Uizard. You will need to upload your project screens one at a time.