Figma + GitLab CI: A Modern Icon Delivery Workflow
This article outlines a modern icon delivery workflow that moves from static image resources to a Figma‑driven process, using a custom Figma plugin and GitLab CI to fetch, optimize with SVGO, and automatically generate React/Vue SVG component libraries, publish npm packages, and deploy documentation.
This article presents a comprehensive solution for icon delivery in web development, addressing the challenges of maintaining icon libraries between design and development teams. The author describes transitioning from traditional methods (image resources and IconFont) to a modern workflow using Figma, Figma plugins, and GitLab CI to generate SVG React/Vue component libraries.
The article details the complete workflow: designers update icons in Figma and run a plugin, which triggers GitLab CI to fetch SVG resources via Figma Web API, process them using SVGO, and build React/Vue component libraries. The system automatically generates merge requests, builds packages, publishes to npm, and deploys documentation sites. Key technical aspects include SVG optimization, component generation, and CI/CD pipeline configuration.
The solution offers benefits like scalability, cross-platform compatibility, and efficient collaboration. The author provides implementation details including Figma plugin development, GitLab API usage, and CI configuration, along with references to related resources.
DeWu Technology
A platform for sharing and discussing tech knowledge, guiding you toward the cloud of technology.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.