Luis Ouriach built a plugin for copying or exporting your Figma variables into CSS variables format.

SVG exports will now correctly render background blur and both angular and diamond gradients.

Miggi explains and shows the new export options in action.

When exporting a raster image (JPG, PNG, PDF), now you can choose an image resampling option. Image resampling helps maintain the quality of your exports by determining the color of each pixel. It’s useful when exporting images to different sizes or a vector design to a raster format.

The Detailed option (default) uses an image resampling method called ​“bicubic sampling.” This method looks at each pixel and uses a weighted average of at least four surrounding pixels from the original image for export. Best used when optimizing for detail in exports, such as high-quality images, vector art, and assets with gradients or drop shadows.

The Basic option uses an image resampling method known as ​“nearest neighbor sampling.” This method looks at pixels from the original image and finds the closest matching pixel to use for the export. Best used when optimizing for hard lines in assets or for assets that don’t need finer details, like icons, low-resolution images, and pixel art.

“We’ve added a new export quality setting to give you more control over the file size and quality of images when exporting frames and images from Figma as JPEGs or PDFs. A new quality dropdown in Advanced export settings allows you to choose from High, Medium, or Low quality when exporting as a JPEG or PDF. Low quality will compress your images the most, resulting in the smallest file size, and High quality won’t compress images at all. If you do not select a quality setting upon export, there will be no change to how your files are exported; Figma will follow existing default settings (Medium quality for PDFs and High quality for JPEGs). Also available in FigJam.”

A Chrome extension that converts any page or a section of a page into React code or an editable Figma design.

Sam Anthony explores the most effective methods to export, share, and hand off your designs in Figma.

Nanda Syahrasyad explains how to export SVGs with individual paths from Figma to be animated with CSS. This article is a part of his Interactive SVG Animations course that will be launched this fall.

I designed my resume in Figma but didn’t know that the exported PDF isn’t compatible with ATS systems used by HRs. Good tip from Kris Puckett!

A short explainer on bringing SVGs from Figma to Rive, where you can build functional graphics with rich interactivity and animation.

Last week, we discussed exports; now it’s time to examine imports! This short tutorial shows how to import files into the file browser or add assets directly to a design file.

Exporting assets might seem easy, but there are a lot of nuances to get it right. ​“You can export content to share designs with others, move content between tools, or save copies of your work outside of Figma. In this video, we’ll walk through how to export content and go over ways to troubleshoot common export issues.”

“You can export content to share designs with others, move content between tools, or save copies of your work outside of Figma. In this video, we’ll walk through how to export content and go over ways to troubleshoot common export issues.”

“Copy as PNG” is a lifesaver. I even use it when moving mockups to FigJam for presentation to keep things simple.

I see this tip on exporting the original image file from the Inspect panel shared from time to time, and it always surprises people. Wish it wasn’t so hard to discover!

One-click export of Figma prototypes and animations to GIF, WebM, or MP4.

Honestly, I always assumed that SVG bugs are just a part of the game and will always be here — not a surprising conclusion when 49% of imported SVGs relied on buggy features. In retrospect, it was a silly assumption considering SVG is one of only a few open vector formats. In this fantastic thread, Figma engineer Lauren Budorick shows how much work went into detecting, analyzing, and fixing these bugs. I didn’t realize that luminance mask support was a part of this work as well, and Miggi is already exploring creative applications for composited motion visuals in prototypes.

If you’re still relying on JPGs and PNGs, it may be time to give WebP format a try with this plugin!

A few tricks for successfully exporting Figma mockups to Framer. In the end, it all comes down to using flexible and consistent structures in Figma that translate to code in Framer really well.

A new plugin by Rogie King fixes the most common issues with importing and copy-pasting SVGs from Adobe Illustrator to Figma. Huge time saver if you’ve ever had to deal with these problems manually!