Exporting projects

Learn how to download/export your project to JPG, PNG, PDF or SVG files with a few clicks

Updated over a week ago

About downloading and exporting

In this guide, we'll elaborate on how you can download/export your project to your device with a flick of your wand and a click of your mouse. Let's jump straight into the magic, shall we? ๐Ÿคฉ


Accepted export options

Currently, you can export your project screens as images (JPG, PNG, SVG) or PDF files. Once you've completed your project, these are the only file types we are able to provide you at this time.

We're constantly working on expanding the variety of export formats, so you can expect to be provided with more options in the future ๐Ÿš€


Downloading a project in JPG, PNG, SVG, or PDF

There are a number of ways that you can download your project or its components!

First, we'll look at how to export your entire project.

Downloading an entire project

1) Select all screens by using the keyboard controls 'CMD' or CTRL' + 'A'.

2) Click 'Handoff Mode' in the right-hand menu:

3) You can select the scale of your export (1x, 2x, 3x, or 4x), the file type (PDF, JPG, SVG, or PNG), and if you're selecting PNG you can toggle on a transparent background under the "..." field:

4) You can also preview what pages you are exporting under the 'Preview' section:

5) When you're ready, click 'Export':

Downloading specific screen(s) or component(s)

Downloading or exporting specific screen(s) or component(s) works similarly to exporting an entire project.

1) Select the screen(s) or component(s) that you'd like to export.

2) Click on 'Handoff Mode' within the right-hand menu:

3) You can select the scale of your export (1x, 2x, 3x, or 4x), the file type (PDF, JPG, SVG, or PNG), and if you're selecting PNG you can toggle on a transparent background under the "..." field:

4) You can also preview what pages or components you are exporting under the 'Preview' section:

5) When you're ready, click 'Export.' Each component or page will be exported in a separate file:


Handoff Mode

Who can use this feature? ๐Ÿง™

  • Available to users with Pro, Business, or Enterprise subscriptions

You can inspect each individual component one at a time to see and copy the CSS or React code. This makes it easier to pass on to a developer!

Copying CSS code

1) Select the component you'd like to see the CSS of (Remember, you can only see the code of one component at a time).

2) Click "Handoff Mode" on the right-hand menu:

3) Make sure that 'CSS' is selected:

4) Click 'Copy code':

Copying or downloading React code

1) Click on the component that you'd like to copy the React code for. Remember you can only select one at a time.

2) Click on 'Handoff' within the right-hand menu:

3) Make sure that 'React' is selected:

4) Scroll to the bottom and click 'Copy code' or 'Download component' if you'd like a file version instead:


Exporting, converting, or generating a project to code

Currently, it's not possible to export your entire Uizard project to HTML, Javascript, or script.

Please note that you can inspect individual components and get CSS or React code in Handoff Mode. Downloading React code for individual components is the only code export we have currently.

You can submit your desired export formats here and we will consider the frequent requests as we continue to improve the platform ๐Ÿš€

Do you need help bringing your project to life?

We have curated a group of highly-vetted, expert freelancers to help you with different services (development, design, user research, etc) you may need during or after using Uizard.

Get help now from Uizard Certified Experts here!

*Please note that this is not an in-house team.


FAQs

Can I export the device frames along with my design?

You can't export the device frames with your designs at this time.

Can I export to Adobe XD?

You can export your project as an SVG file and import it to tools/platforms that support it! Read more about exporting projects here.

Can I export my project, file, or design to Figma?

You can export your project as SVG and import it into other tools/platforms that support it. Here is how you can export your project.

Can I export my project layers?

There isn't a way to export layers at this time.

Can I export my project as a PowerPoint file?

No, it's not possible to export a project as a PowerPoint file. The only export options available at this time are PDF, PNG, or JPG.

Can I export a project with the comments visible?

You cannot export the comments along with the project at this time.

Is it possible to have a clickable/interactive PDF or exported file?

It's not possible to have a clickable/interactive PDF.

Did this answer your question?