Welcome back, design enthusiasts! In our Figma journey so far, we have explored setting up a social media post, some basic methods to export your work, and delved into website designs and simple UI design in Figma. Today, we're diving deeper into the best ways to export, share, and hand off your designs in Figma. We'll cover various methods, from the normal export feature to quick tricks for client feedback. So, let's jump straight into Figma and explore the best ways to export your work.
Getting Started with Exporting
As we open Figma, I've prepared a simple social media post for GoComment. For those unfamiliar, GoComment is an excellent product for developers and website designers, allowing for rich messaging and feedback within a team or client setting. It's similar to Figma's commenting system but with enhanced features.
For now, let's focus on how this social media post is structured and how to export it efficiently.
Understanding Frames
The post consists of a frame containing the heading, image, logo, and a circle. Frames are crucial as they keep all elements contained, making the export process smoother. To illustrate this, let's remove the frame and see the chaotic result when elements are no longer contained.
Without the frame, attempts to export will show multiple individual layers, complicating the process. Grouping elements help, but the result isn't as neat as using a frame. Hence, frames are indispensable for organised and efficient design work.
Exporting with Frames
To export, ensure the frame is selected. You can select it from the canvas or the layer panel on the left. With the frame selected, navigate to the bottom of the design panel and locate the export section. By clicking the plus icon, you can create a new export with several options presented.
Setting the Scale
The first box you encounter is the scale. One times (1x) represents the current dimensions (e.g., 1080 by 1350 pixels). Doubling the scale (2x) doubles the size, which can be crucial for high-resolution needs such as billboards or extensive displays. You can also set either the width or height explicitly by selecting 512W or 512H, where 'W' stands for width and 'H' for height.
For example, typing 3000W will export the frame at 3000 pixels wide. This control over scaling is essential for various project requirements.
Using Suffixes
The suffix box allows you to add a label to the export file, helping identify different versions. For instance, adding ‘var 2’ will result in a file name like ‘GoComment review var 2’.
File Types Next, select the type of file you want to export: PNG, JPEG, SVG, or PDF.
PNG: Supports transparency, suitable for designs requiring see-through backgrounds.
JPEG: Known for its excellent compression, ideal for web designs to ensure faster load speeds.
SVG: Best for scalable vector graphics, maintaining quality at any size, making it perfect for logos or icons.
PDF: Versatile for document sharing.
Batch Exporting
If you have multiple posts, batch exporting can save time. Setup export settings for each post, then use the command pallet (Ctrl + P) to type 'export'. This feature allows you to export multiple designs simultaneously, showing all settings clearly, which is particularly handy for large projects.
Quick Sharing with Clients
For quick feedback or initial reviews, Figma offers a ‘copy frame as PNG’ feature. Right-click on your frame, select ‘copy and paste as’, and choose PNG. This shortcut copies the frame as a PNG directly to your clipboard. You can then paste it into a conversation with your client for instant feedback without going through extensive export settings.
Conclusion
There you have it: a comprehensive guide to exporting your Figma designs. Whether you need a quick way to share for client feedback or more refined export settings for final products, Figma offers versatile tools to meet your needs. Figma might seem alien to those used to traditional export methods in other software, but I hope this post has demystified the process.
Thank you for reading!
