What problem does it solve? Setting up an icon system in Figma is slow and error-prone: hand-drawing icons wastes effort, importing entire 1,700-icon libraries bloats the file, and inconsistent naming silently breaks the mapping between Figma components and code packages like lucide-react. This Skill automates the whole process with a deterministic mechanism per library. ## Core Features & Use Cases - Deterministic per-library import: Fetches official SVGs directly from the Lucide, Tabler, or Phosphor repos by deterministic path and converts them to components via figma.createNodeFromSvg; uses the official community file or importer for Material; batch-imports custom SVGs. - Curated subset with name validation: Imports only the 40-120 icons actually needed, validating every name against the installed library version so Figma names map exactly to code exports (e.g. icon/arrow-right ↔ ArrowRight). - Normalized output and handoff: Lays icons out in an auto-layout grid on a dedicated Icons page, binds strokes to color tokens, optionally installs the matching npm package, and walks through Figma library publishing for typed icon dropdowns. - Use Case: A designer starting a new design system asks for a Lucide icon set; the Skill fetches the pinned release's SVGs, builds named components bound to the text/primary token, and records the version so the sync layer can later detect drift between Figma and code. ## Quick Start Set up a Lucide icon system in my Figma file with the essential UI icons, named to match lucide-react.
