Icons → Code

<p>The Design System Middleware that allows you to manage, import, convert and sync graphical assets or icons directly from Figma into your application code.</p><p><br></p><p>Direct export options</p><p>(Export 50 icons for free - no subscription required)</p><p>----------------------------------------</p><p>• React (.js)</p><p>• Vue (.js)</p><p>• Angular (.js)</p><p>• Meteor (.html)</p><p>• ReactNative (.js)</p><p>• Android (.xml)</p><p>• iOS (.pdf)</p><p>• Icon Font (.ttf)</p><p>• Vector Graphic (.svg) (minified)</p><p>• CSS Sprite (.svg)</p><p>• ICO (.ico)</p><p>• EPS (.eps)</p><p>• Portable Document (.pdf)</p><p><br></p><p>Build a custom component (with subscription)</p><p>----------------------------------------</p><p>Upload custom code and set a file type of choice to then be able to export icons based on your template.</p><p><br></p><p>Updating boards (with subscription)</p><p>----------------------------------------</p><p>Push updates or changes to an existing or new <a href="http://icanicon.io" rel="noreferrer noopener nofollow" target="_blank">icanicon.io</a> board to enable team-wide access, the API, and the sync command.</p><p><br></p><p>How to use the plugin</p><p>----------------------------------------</p><p>• Select all icons you would like to export, choose an export option and click the export button.</p><p><br></p><p>Good to know</p><p>----------------------------------------</p><p>• You can download a template in case you are uncertain about the structure: <a href="https://icanicon.io/syncing-figma-files" rel="noreferrer noopener nofollow" target="_blank">https://icanicon.io/syncing-figma-files</a></p><p>• Avoid including mockups, more complex components, or other elements that are not meant to be icons in your export file.</p><p>• Choose your file naming-convention wisely as these names might carry over to your codebase.</p><p><br></p><p>Other features (with subscription)</p><p>----------------------------------------</p><p>• NPM Command: In your icon directory execute our ii-client command to sync your assets locally</p><p>• API Access: Use your token to fetch any icon, segment, or board</p><p>• File-less Rendering: This opens up the possibility of integrating your icons without the need for handling files at all.</p><p><br></p><p>Thanks, and enjoy it!</p><p>Your Sugarcode Team</p>