Back to Plugins
Figma Token Exporter

Figma Token Exporter

Token export made a breeze - Load your variables and export them in various formats for handover

csstokenstailwindlessvariableshandoffstylingstylusdesign systemdevelopmentconsistencysass

Plugin Preview

Figma Token Exporter preview

About this plugin

This tool is designed to extract Figma variables/tokens and export them in CSS, SASS and other formats for handover to development.


Features

  • Load tokens from your Figma file
  • Select collection
  • Select modes/themes
  • Select syntax: CSS, SASS, Less, Stylus, Tailwind
  • Select naming convention if using "Code Syntax"
  • Export all variables in table
  • Export individual variables by row
  • Search variables table
  • Sort variables table
  • Show custom variable name if using "Code Syntax" (variable name highlighted in bold)
  • Download all variables in selected syntax
  • Download individual variables in selected syntax
  • Plugin support for dev mode

Plugin Details

Version6
CreatedFebruary 29, 2024
Last UpdatedJune 11, 2024
CategorySoftware development
CreatorFigma-tokens
Stats648 installs, 71 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • http://localhost:8888Dev
    • https://cdn.figma-tokens.com
    • https://fonts.googleapis.com
    • https://fonts.gstatic.com