Compress our Assets

Exporting Assets Efficiently

In this video, I explore several methods for exporting design assets, focusing on optimizing workflow for developers and designers.

I introduce plugins and tools that simplify the process, making it accessible for both large teams and individual freelancers. In the video, I cover traditional and modern approaches to exporting design assets, including the use of Figma’s built-in features and external plugins. I demonstrate how to connect design files to Zeppelin, manually export assets in various formats, and utilize plugins like Tiny Compressor and Anima to streamline the process. This ensures that developers can easily access and use these assets without additional hassle. Ultimately, I provide practical tips for both large production teams and solo freelancers to enhance their workflow efficiency.

Summary

1. Connecting Design Files to Zeppelin: I start by explaining the traditional method of using Zeppelin to connect design files, create guidelines, and assist developers with red lines directly in the design.
2. Figma’s Built-in Export Features: Next, I highlight Figma’s ability to share links with developers, allowing them to view code and export files. This streamlines the process, removing the need for separate tools like Zeppelin.
3. Manual Export Process: I detail the steps for manually selecting layers, exporting them in desired formats and sizes, and ensuring the correct settings for optimal output.
4. Using Tiny Compressor: I introduce Tiny Compressor, a plugin for compressing files. I demonstrate how to use it by selecting frames and adjusting settings to achieve the desired compression quality.
5. Progressive JPEG Compression: I explain the benefits of progressive JPEG compression, particularly for large rasterized images, which load gradually in increasing resolutions.
6. Third-Party Plugins: I mention additional tools like TinyPNG and ImageOptim for compressing files, noting their limitations and suitability for smaller projects.
7. Anima Plugin: I recommend Anima, a powerful tool for exporting entire pages or frames into HTML, CSS, and compressed images. This tool is particularly useful for larger projects, though it requires a subscription.
8. Practical Tips for Freelancers: I offer advice for freelancers on compressing and managing files, emphasizing the importance of using efficient tools to save time and effort.
9. Large Team Efficiency: For larger teams, I suggest delegating the task of exporting assets to developers, utilizing Figma’s built-in features to facilitate this process.
10. Overall Workflow Optimization: Throughout the video, I stress the importance of optimizing the export workflow, using the right tools and methods to enhance productivity and ensure high-quality output.