How would you architect a Figma-to-code icon system?

What's really being asked

Cross-functional systems thinking between design and engineering. It evaluates whether you can treat visual assets as infrastructure rather than static files, establishing a source-of-truth pipeline that enforces constraints in Figma and automatically distributes clean, versioned assets to developers. Senior interviewers want to see knowledge of design tokens, component architecture, CI/CD for assets, and the socio-technical boundary between design teams and frontend code.

The full answer

First, Figma structure: use a dedicated library file with atomic icon components built from vector primitives tied to published styles and variables for stroke weight, corner radius, and color so that a single token change propagates globally. Second, naming conventions and metadata: enforce a strict taxonomy like category-size-variant so assets map directly to code imports. Third, automation pipeline: use the Figma REST API or a plugin to pull SVG or JSON on every design-system release, transform them via SVGO or a custom script to strip presentational attributes and apply currentColor, then commit to a versioned package in a monorepo or npm registry. Fourth, code consumption: developers import from a single icons package where React or Vue components are generated programmatically, ensuring the API surface matches the Figma taxonomy. Fifth, governance: establish a design-system council or PR checklist so new icons pass both design review and automated visual regression before publishing.

The mistakes people make

Treating Figma as a static asset dump where designers manually export PNGs or SVGs into Slack channels. Proposing to store raw SVGs directly in the product repo without a transformation step, which leads to bloat and inconsistent attributes. Suggesting developers manually tweak stroke weights in CSS after import, which breaks the source-of-truth contract. Ignoring the versioning problem by saying the design team will just tell engineers when things change.

What usually comes next

How do you handle responsive sizing when Figma frames are fixed? What is your rollback strategy if a batch of exported icons breaks rendering in Safari? How do you prevent designers from detaching instances and violating the stroke constraints? How do you handle animations if these illustrations need to be interactive?

A concrete example

Describe a pipeline where Figma variables define a 1.5 pixel stroke and 2 pixel corner radius. A scheduled GitHub Action calls the Figma API weekly, downloads all components tagged icon or illustration, runs them through an SVGO pipeline that enforces currentColor and removes hardcoded fills, then opens a pull request against the icons npm package. The frontend imports IconArrowRight16 from the company icons scope, which renders an SVG with CSS custom properties mapping back to the same design tokens used in Figma. When the design team updates the stroke variable to 2 pixels, the next pipeline run regenerates all assets and bumps the package minor version, and consuming apps update via automation.