Icons → Code Figma Plugin

The Design System Middleware that allows you to manage, import, convert and sync graphical assets or icons directly from Figma into your application code.

Direct export options
(Export 50 icons for free – no subscription required)
—————————————-
• React (.js)
• Vue (.js)
• Angular (.js)
• Meteor (.html)
• ReactNative (.js)
• Ionic (.js)
• Android (.xml)
• iOS (.pdf)
• Icon Font (.ttf)
• Vector Graphic (.svg) (minified)
• CSS Sprite (.svg)
• ICO (.ico)
• EPS (.eps)
• Portable Document (.pdf)

Build a custom component (with subscription)
—————————————-
Upload custom code and set a file type of choice to then be able to export icons based on your template.

Updating boards (with subscription)
—————————————-
Push updates or changes to an existing or new icanicon.io board to enable team-wide access, the API, and the sync command.

How to use the plugin
—————————————-
• Frame, Component, Instance = Icons
• Group = Segment
• Page = (irrelevant)
• File = Board

Good to know
—————————————-
• You can download a template in case you are uncertain about the structure: https://icanicon.io/syncing-figma-files
• Avoid including mockups, more complex components, or other elements that are not meant to be icons in your export file.
• Choose your file naming-convention wisely as these names might carry over to your codebase.

Other features (with subscription)
—————————————-
• NPM Command: In your icon directory execute our ii-client command to sync your assets locally
• API Access: Use your token to fetch any icon, segment, or board
• File-less Rendering: This opens up the possibility of integrating your icons without the need for handling files at all.