What To Know
- InVision allows you to export your designs as code, making it easier to implement your design in web or mobile applications.
- You can export your entire prototype as a standalone file, allowing you to share it with others without needing an InVision account.
- If you need to create a printable document of your design, exporting as a PDF is the way to go.
InVision is a powerful design platform that allows you to create stunning prototypes and collaborate seamlessly with your team. But what good is a beautiful design if you can’t share it with the world? That’s where exporting comes in. In this comprehensive guide, we’ll dive deep into the art of exporting from InVision, covering everything from basic image exports to advanced file formats.
Understanding the Export Options
InVision offers a variety of export options to cater to different needs. Here’s a breakdown of the most common export types:
- Images: This is the most basic export option, allowing you to export individual artboards or entire screens as images. You can choose from various image formats like PNG, JPG, and SVG.
- PDF: For creating high-quality, printable documents, PDF export is your go-to choice. You can choose to export individual pages or the entire prototype.
- Code: InVision allows you to export your designs as code, making it easier to implement your design in web or mobile applications. You can choose from various code formats like HTML, CSS, and React.
- Assets: This option lets you export individual assets like icons, illustrations, and images from your design. This is useful for creating reusable design elements.
- Prototypes: You can export your entire prototype as a standalone file, allowing you to share it with others without needing an InVision account.
Exporting Images: Your Foundation for Sharing
Let’s start with the most common export type: images. Here’s a step-by-step guide on how to export images from InVision:
1. Open your prototype: Navigate to the prototype you want to export.
2. Select the artboard: Click on the artboard you want to export.
3. Click the “Export” button: You’ll find the “Export” button in the top right corner of the screen.
4. Choose “Image”: From the dropdown menu, select “Image.”
5. Select your desired format: You can choose from PNG, JPG, and SVG.
6. Adjust settings: You can adjust the image quality, resolution, and background color.
7. Click “Export”: Once you’re happy with your settings, click “Export” to download the image.
Exporting PDFs: Delivering High-Quality Documents
If you need to create a printable document of your design, exporting as a PDF is the way to go. Here’s how:
1. Open your prototype: Navigate to the prototype you want to export.
2. Click the “Export” button: You’ll find the “Export” button in the top right corner of the screen.
3. Choose “PDF”: From the dropdown menu, select “PDF.”
4. Select your desired options: You can choose to export individual pages or the entire prototype. You can also adjust the PDF quality and size.
5. Click “Export”: Once you’re happy with your settings, click “Export” to download the PDF.
Exporting Code: Bringing Your Designs to Life
For developers, the ability to export code directly from InVision is a game-changer. Here’s how to export code:
1. Open your prototype: Navigate to the prototype you want to export.
2. Click the “Export” button: You’ll find the “Export” button in the top right corner of the screen.
3. Choose “Code”: From the dropdown menu, select “Code.”
4. Select your desired format: Choose from HTML, CSS, and React.
5. Click “Export”: Once you’re ready, click “Export” to download the code.
Exporting Assets: Building a Reusable Design Library
Exporting assets allows you to create a library of reusable design elements. Here’s how to do it:
1. Open your prototype: Navigate to the prototype you want to export assets from.
2. Select the asset: Click on the asset you want to export.
3. Click the “Export” button: You’ll find the “Export” button in the top right corner of the screen.
4. Choose “Assets”: From the dropdown menu, select “Assets.”
5. Select your desired format: Choose from PNG, JPG, and SVG.
6. Click “Export”: Once you’re ready, click “Export” to download the asset.
Exporting Prototypes: Sharing Your Work with Ease
Sometimes, you need to share your entire prototype with others, even if they don’t have an InVision account. Here’s how to export your prototype:
1. Open your prototype: Navigate to the prototype you want to export.
2. Click the “Share” button: You’ll find the “Share” button in the top right corner of the screen.
3. Choose “Export”: From the dropdown menu, select “Export.”
4. Select your desired format: Choose from HTML and ZIP.
5. Click “Export”: Once you’re ready, click “Export” to download the prototype.
Going Beyond the Basics: Advanced Export Techniques
InVision offers a range of advanced export features that can enhance your workflow. Here are a few to explore:
- Customizing export settings: You can fine-tune your export settings to control the size, quality, and format of your files.
- Exporting multiple artboards: You can export multiple artboards at once, saving you time and effort.
- Exporting with specific layers: You can choose to export specific layers from your design, allowing you to create focused assets.
- Using the InVision API: For developers, the InVision API allows you to automate the export process and integrate it with your existing workflows.
The Final Touches: Optimizing Your Exports for Success
To ensure your exports are ready for the real world, consider these optimization tips:
- Check file sizes: Large files can be slow to download and share. Optimize your images and PDFs to reduce file sizes without sacrificing quality.
- Use consistent naming conventions: This helps you organize your files and find them easily.
- Test your exports: Before sharing your exports, make sure they are working as intended and that all the elements are displayed correctly.
Beyond Exporting: InVision’s Powerhouse Features
While exporting is essential, InVision offers a plethora of features that go beyond just sharing your designs. Features like prototyping, collaboration tools, and design systems make InVision a comprehensive platform for design teams of all sizes.
The End of the Line: Your Exporting Journey Starts Here
As you’ve seen, exporting from InVision is a versatile process that allows you to share your designs in various ways. By mastering these techniques, you can effectively showcase your work, collaborate with your team, and bring your designs to life.
Frequently Asked Questions
Q: Can I export a specific layer from my design?
A: Yes, you can select specific layers to export. This allows you to create focused assets that you can reuse in other projects.
Q: How do I export a prototype as a standalone HTML file?
A: When you click the “Export” button, you can choose “HTML” as the export format. This will create a standalone HTML file that you can share with others.
Q: Can I export multiple artboards at once?
A: Yes, you can select multiple artboards and export them together. This is a great way to save time and streamline your workflow.
Q: What are the best practices for optimizing my exports?
A: Optimize your images for web use, check file sizes, and use consistent naming conventions.
Q: Can I use the InVision API to automate exports?
A: Yes, the InVision API allows you to integrate exports into your existing workflows and automate the process.
