Convert Figma design variables, including colors and numbers, into CSS, Sass, Tailwind, Stylus, Json, Less or Javascript (Styled-Components) variables to save time and ensure accuracy. Use it in Figma: Design and Development mode. How to use it: Select your collection and now also choose specifi...
Specs 2
Specs 2 is an ecosystem for specs driven component development. Via the plugin, turn a selected Figma component or component set into a compact, complete, schema-valid specification — computed directly from the file, not inferred from a screenshot. From the command line, generate specs from an en...
Component Variables
A plugin that helps customize Figma components in an orderly and automatic manner. Create and edit preset variables within your component without the hassle of going through groups and autolayouts. __________________ HOW TO USE • TEXT VARIABLES Assign a variable name to a text layer and chang...
Print Variables
First off, I want to apologize for the previous version. I know it might have been a bit too much for some of you. 🙇🏻♀️ This is my very first plugin, and I learned a lot about coding and the Figma API along the way. Now, I’m done just experimenting — I'm back to basics focusing on the problem...
Open design systems from the Figma Community
Browse and download design systems files—all open and free on the Figma Community
Tokens Studio for Figma
Gives you the ability to use Design Tokens that can be used for a whole range of design options, from border radii or spacer units to semantic color and typography styles that are able to reference other tokens. It allows you to change tokens and see these changes applied to the whole document, i...
A High-Level Grammar of Interactive Graphics
Vega-Lite - a high-level grammar for statistical graphics. Vega-Lite provides a higher-level grammar for visual analysis, comparable to ggplot or Tableau, that generates complete Vega specifications. Vega-Lite specifications consist of simple mappings of variables in a data set to visual encoding channels such as x, y, color, and size. These mappings are then translated into detailed visualization specifications in the form of Vega specification language. Vega-Lite produces default values for visualization components (e.g., scales, axes, and legends) in the output Vega specification using a rule-based approach, but users can explicit specify these properties to override default values.
Config 2025: Figma product launch keynote (Dylan Field, CEO & Co-founder, Figma)
Visual Variables
Visual variables are “the differences in map elements as perceived by the human eye” (wiki.gis.com). No matter what the type of map, these are the fundamental ways in which graphic symbols can be distinguished.
Color Palette Pro — A Synthesizer for Color Palettes
Generate customizable color palettes in advanced color spaces that can be easily shared, downloaded, or exported.
Color Palette Pro — A Synthesizer for Color Palettes
Generate customizable color palettes in advanced color spaces that can be easily shared, downloaded, or exported.
color variables creator
a plugin for those who handcraft their color scales ✨ how it works select layers with fills that you want to turn into color variablesrun the pluginselect collection and mode variable names will match the layer names. (If you'd like to learn how to batch rename layers, I have a video for that) ...
Figma Sites: Design, Prototype & Publish Your Next Website
Design, prototype, and launch your next website with Figma Sites—an all-in-one platform made for fast, collaborative web creation.
What nobody tells you about RGB
Plugins for Figma Design Systems
I spend a lot of time working on Design Systems, typically for large multi-platform products. I made this collection for essential (to me) Figma plugins. Some are very sophisticated. Some are simple and do one job really well.
Find Variables
Specs 2
Nested Instances
Background Apply To All
Print Variables
Version History → Slack