Exporting Assets for Web and Social Media

1. Choosing the Right Tool for the Job: File Formats

Before we export anything, we need to understand the different types of files we can create. Just as in accounting you'd use a spreadsheet for raw data and a PDF for a final report, in design, each file format has a specific purpose. The three most common formats you'll use for web and social media are PNG, JPG, and SVG.

Let's distill the key differences:

• JPG (Joint Photographic Group):

  • Best for: Complex images like photographs and gradients.
  • Key Feature: Uses "lossy" compression, which significantly reduces file size but can degrade quality, especially around sharp edges and text. It does not support transparency.
  • Analogy: Think of it like summarizing a detailed financial report. You get the main points across (smaller file), but some of the finer details are lost.

• PNG (Portable Network Graphics):

  • Best for: Graphics with solid colors, text, logos, or any design that requires a transparent background.
  • Key Feature: Uses "lossless" compression, which preserves all image data, resulting in crisp, clean lines. This comes at the cost of a larger file size. It does support transparency.
  • Analogy: This is like an audited financial statement. Every number is precise and accounted for (perfect quality), but the document is larger and more data-heavy.

• SVG (Scalable Vector Graphics):

  • Best for: Logos, icons, and simple illustrations that need to be scaled to any size without losing quality.
  • Key Feature: Unlike JPG and PNG (which are raster/pixel-based), SVG is vector-based. It's essentially code that draws the image. This means it's infinitely scalable and usually has a very small file size.
  • Analogy: This is the underlying formula in a spreadsheet cell. It doesn't matter how much you zoom in or out; the formula itself remains perfect and can be recalculated for any context.

For most of the social media and web banner work you'll do, you will be deciding between PNG (for graphics-heavy designs) and JPG (for photo-heavy designs).

2. Resolution Matters: The 1x vs. 2x Rule

Have you ever seen an image on a website that looked slightly blurry or fuzzy, especially on a new phone or high-end laptop? This is often a problem of resolution.

Modern screens (like Apple's Retina displays) have a very high pixel density. They pack twice (or even three times) the number of physical pixels into the same amount of space. If you export an image at its "standard" size (1x), these high-density screens have to stretch the image to fill the space, causing blurriness.

To solve this, we export our assets at a higher scale, most commonly 2x.

The rule of thumb for any asset that will be viewed on a screen is to export at 2x resolution. This creates an image that is twice the dimensions of your frame (e.g., a 300x250px frame exported at 2x becomes a 600x500px image file), providing enough pixel data for it to look crisp on any modern device.

3. The Export Workflow in Figma

Now let's apply this in Figma. We'll use the promotional banner you designed in the previous lesson.

The process of exporting in Figma is managed from the Export section in the right sidebar. It's a simple but powerful tool.

Practice Exercise: Exporting Your Banner

Let's get hands-on. Open the Figma file with the 300x250px banner you designed previously.

1. Select the Frame: Click on the name of the frame that contains your banner design in the Layers panel on the left.
2. Add Export Setting 1 (Low-Res JPG):
   • In the right sidebar, scroll down and click the + icon next to Export.
   • Leave the scale at 1x.
   • Select JPG from the format dropdown.
   • Click the Export [Frame Name] button and save the file to your computer.
3. Add Export Setting 2 (High-Res PNG):
   • With the same frame selected, click the + icon next to Export again to add a second setting.
   • Change the scale to 2x.
   • Make sure the format is PNG.
   • In the Suffix field, type @2x. Your file will now automatically be named [Frame Name]@2x.png.
   • Click the Export [Frame Name] button.

Now, locate both files on your computer. Compare them:

• File Size: Notice that the 2x PNG is significantly larger than the 1x JPG.
• Quality: Open both images and zoom in. You'll see the 2x PNG maintains its sharpness, while the 1x JPG will look pixelated and blurry. This is the difference between a professional and an amateur handoff.

4. A Freelancer's Guide to Perfect Instagram Exports

Your goal is to start earning quickly, and designing social media graphics is a fantastic way to do that. However, social media platforms, especially Instagram, are notorious for aggressively compressing images, which can ruin your beautiful designs.

There's a specific workflow you can use to "trick" the algorithm and ensure your posts are always crystal clear.

Your Instagram Export Checklist:

Based on that article, here is the definitive workflow for delivering sharp, high-quality Instagram graphics to a client:

1. Use the Right Frame Size: Start with a frame of 1080px wide. For a portrait post that takes up more screen space, use 1080 x 1350px.
2. Export as a 2x PNG: In the Figma export settings, choose PNG and 2x. This will produce a high-resolution file of 2160 x 2700px. This gives Instagram plenty of data to work with, preventing it from having to stretch a smaller image.
3. Compress the Exported File: The 2x PNG will be a large file. Before uploading it to Instagram, run it through a smart compression tool like TinyPNG or ImageOptim. These tools cleverly reduce the file size without any visible loss of quality.
4. Upload the Right Way: Ensure the "Upload at highest quality" setting is enabled in your Instagram app (Settings > Account > Data Usage).

This two-step process (high-res export from Figma, then smart compression) gives you the best of both worlds: a high-resolution source file that also has a small file size. This is the secret to bypassing Instagram's destructive compression.

Conclusion

Congratulations! You've just mastered a critical technical skill that bridges the gap between design and delivery. Knowing how to export assets correctly is a non-negotiable part of being a professional designer. It ensures the quality of your work is preserved and that you're handing off polished, ready-to-use files to clients and developers.

Key Takeaways:

• Choose Formats Wisely: Use JPG for photos, PNG for graphics with transparency or sharp text, and SVG for scalable logos and icons.
• Embrace the 2x Rule: For crisp visuals on modern screens, always export raster assets (PNG, JPG) at 2x resolution.
• Optimize for the Platform: For platforms like Instagram, follow a specific workflow: design at 1080px width, export at 2x as a PNG, and then use a tool like TinyPNG to compress the file before uploading.
• Organization is Key: Use the Suffix field in Figma to keep your exported files organized (e.g., _website@2x, _instagram).

Preview of the Next Lesson:
Now that you can create and export individual assets, our next step is to think about consistency and scalability. In the next lesson, we'll learn how to prepare a 'mini' style guide for a digital asset project. This involves documenting the colors, typography, and spacing you've used, creating a valuable reference for you and your future clients to ensure brand consistency across all designs.