Token Collector
by Jessica McCune
Convert styles and variables to JSON tokens
Installs
117
Likes
14
Users
1,078
Views
1,500
Preview
About this plugin
Creates variable collections from local color styles (only solid fill styles for now), with the option to bind the variables to the stylesShows variable bindings for local color stylesBuilds design tokens JSON from both local styles and local collection variables -- Local styles JSON output includes composite typography tokensJSON view has options for showing font sizes in either px or rem (1rem defaults to 16px for now) and replacing raw values with variable aliasLATEST UPDATE: JSON view now follows DTCG formatExample JSON tokens built from local styles:{ "color": { "app": { "primary": { "$description": "App primary color", "$type": "color", "$value": "#041c2c" }, "secondary": { "$description": "", "$type": "color", "$value": "#041c2c" }, "accent": { "$description": "", "$type": "color", "$value": "#3169bb" } } }, "typography": { "body": { "$description": "Default body text", "$type": "text", "$value": { "font-size": "0.75rem", "font-family": "Inter", "font-style": "Regular", "text-decoration": "none", "letter-spacing": "0%", "line-height": "auto", "text-transform": "none" } } }}Color tokens with option selected to replace value with alias:{ "color": { "app": { "primary": { "$description": "App primary color", "$type": "color", "$value": "{color.app.primary}" }, "secondary": { "$description": "", "$type": "color", "$value": "{color.app.secondary}" }, "accent": { "$description": "", "$type": "color", "$value": "{color.app.accent}" } } }}
More import & export plugins plugins
View allhtml.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css)
Paidby divRIOTS
Convert any website into fully editable Figma designs
Figma to HTML
by Figma2HTML
Convert Figma design to HTML
TinyImage Compressor
Paidby Hypermatic
Export/downsize compressed JPG, PNG, SVG, WebP, GIF, WebM, MP4, AVIF and PDF image files from Figma
Pitchdeck Presentation Studio
Paidby Hypermatic
Turn your Figma designs into animated slide decks or export them to PowerPoint/PDF