0
100
200
300
400
500
600
700
800
900
1000
1100
0
100
200
300
400
500
600
700
800
900
1000
1100
Figma plugin#19 in Variables & Tokens

Token Variable Export

Export Figma Tokens into CSS Variables

by Cranberry

users
11K
likes
51
saves
809
comments
14
Open in Figma
FreeWorks inFigma DesignDev Mode
Price
Free
Latest version
v1 ยท Jul 23, 2023
First published
Jul 21, 2023
Publisher
Cranberry
Features

What Token Variable Export does

What the plugin declares in its manifest.

  • Manifest

    Dev Mode panel

    Adds a panel to Dev Mode's Inspect tab.

On this page
Overview

About Token Variable Export

Token Variable Export is a free Figma plugin published by Cranberry in 2023. It works in Figma Design and Dev Mode and has 11,492 users and 51 likes on the Figma Community. It ranks #19 in Variables & Tokens on our lists.

In the developer's words

In Figma (dev or standard mode), launch this plugin to receive all collections, modes and values as css variables which match those exported through the native dev inspector.

Changelog

What's new

Version 1 ยท released Jul 23, 2023

The developer didn't publish release notes for this version.

Trust

Permissions and privacy

Network access

Token Variable Export can only connect to the domain declared in its manifest: cdn.jsdelivr.net.

  • cdn.jsdelivr.net

Extra permissions

None beyond the standard access to the file you run it in.

Read from the plugin's published manifest.

Rankings

Where Token Variable Export ranks

Compare

Token Variable Export alternatives

  1. 1

    Styles & Variables Organizer

    by Chenmu Wu

    134K users3.2KFree + $15 upgrade

    Apply styles and variables to all your designs with one click!

    View details
  2. 2

    Export/Import Variables

    by Honza Toman

    85K users1.7KFree

    Export variables from one file and import them to another. Supports modes, references, and scopes.

    View details
  3. 3

    Design Tokens

    by Lukas Oppermann

    62K users1.9KFree

    Export design tokens to JSON or GitHub.

    View details
  4. 4

    Figma Tailwindcss

    by Jan D'Hollander

    53K users606Free

    Export design tokens to tailwind theme

    View details
  5. 5

    Kigen

    by vijay verma

    34K users1.7KFree

    Create Design System Variables, Tokens, Styles and more with documentation

    View details
  6. 6

    variables2css

    by Kai-Uwe Hella

    28K users353Free

    Convert Figma Variables to CSS, Sass, Tailwind, Json, Javascript (Styled-Components), Less or Stylus

    View details
FAQ

Token Variable Export FAQ

What does Token Variable Export do?

Export Figma Tokens into CSS Variables. It's a Figma plugin by Cranberry that runs in Figma Design and Dev Mode.

Is Token Variable Export free?

Yes. Token Variable Export is free to install and run from the Figma Community, with no paid tier listed.

Is Token Variable Export safe to use?

Figma plugins can only reach the internet through domains listed in their manifest. Token Variable Export can only connect to the domain declared in its manifest: cdn.jsdelivr.net. As with any plugin, check the developer's privacy policy before using it on client work.

How do I install Token Variable Export?

Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.

What are the best alternatives to Token Variable Export?

By user count, the closest alternatives are Styles & Variables Organizer, Export/Import Variables and Design Tokens. Compare all of them on the best Figma plugins for variables & tokens.

For developers

Built this plugin?

Use this page as a landing page for Token Variable Export: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.

Token Variable Export on figmaplugins.co

Style

Label

Size

Code

<a href="https://figmaplugins.co/plugins/token-variable-export/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="Token Variable Export on figmaplugins.co" width="220" height="48"></a>