How do you export and optimize a Figma SVG for web?

WHAT THIS TESTS: This question tests whether a candidate understands the full pipeline from design asset to production code, not just clicking export. Interviewers want to see that you know Figma's export mechanics and, more importantly, that you understand SVGs exported from design tools contain editor-specific bloat that hurts web performance and maintainability. It separates candidates who treat design tools as black boxes from those who actively clean assets for engineering use.

A GOOD ANSWER COVERS: First, the selection step: you would select the specific icon layer, frame, or component in Figma, then locate the Export section in the right sidebar. If you have edit access it appears at the bottom of the sidebar; if you have view-only access it sits under the Properties tab. You add an export preset and set the format to SVG. Second, the optimization step: you would run the exported file through an optimizer like SVGO, SVGOMG, or a Figma plugin such as SVGO Compressor before export. The goal is to remove unnecessary Figma metadata, non-semantic IDs, editor comments, and empty groups, and to flatten transforms into clean paths. Third, the code readiness step: you would verify the viewBox and width or height attributes are correct, convert fixed hex fills to currentColor if the icon needs CSS theming, and ensure there are no inline styles that override external CSS. Fourth, the validation step: you would open the SVG in a browser or embed it inline in HTML to check for rendering parity with the original design.

COMMON WRONG ANSWERS: A major red flag is saying you would simply download the SVG and drop it into the codebase without inspection. Another is suggesting PNG or JPG for a simple icon, which misses the scalability and file-size benefits of vector graphics. Some candidates mention using the Slice tool for a single icon, which is unnecessary and indicates confusion about when slices are actually useful. Claiming that Figma exports perfectly clean SVGs by default is also incorrect, as the export typically includes metadata and non-optimized path data.

LIKELY FOLLOW-UPS: The interviewer might ask how you handle icons that need multiple colors or gradients, which would change whether you use currentColor or keep inline fill attributes. They might ask how you automate this across a large icon library, where you could mention batch processing with SVGO config files or design system pipelines. They could also ask about accessibility, prompting you to discuss adding meaningful title elements or aria labels, and when to use img tags with alt text versus inline SVG.

ONE CONCRETE EXAMPLE: Suppose you have a 24 by 24 heart icon in Figma. You select the vector layer, add an SVG export preset, and download the file. The raw export contains a Figma-generated ID and a transform attribute on a group. You drop the code into SVGOMG and enable pretty print, then remove the ID and flatten the transform. You change the fill from hash 000000 to currentColor so the icon inherits the parent text color in CSS. Finally, you paste the cleaned SVG inline into a React component or save it as an asset. The file size drops from roughly two kilobytes to under five hundred bytes, and it renders crisply at any scale.