Back to Plugins
Radix Colos as figma variables

Radix Colos as figma variables

add Radix colors as Figma variables intou your collection

radix colorsvariablesradix

Plugin Preview

Radix Colos as figma variables preview

About this plugin

Here is the first version of Radix colors as Figma variables. Beta.


Radix Colors - "A gorgeous, accessible color system for user interfaces"


This plugin is a simple way for you to get any of the Radix colors as variables into a variable collection from any of your files.


The plugin allows you to:

  1. add any color to a preferred variable collection
  2. add solid or alpha variants
  3. choose light or dark values for single mode collections
  4. add both light and dark values as modes for multimode collections (Figma paid seat is required for variable modes)
  5. (soon) add a custom color created in radix web ui
  6. set-up a new variable collection with 2 modes
  7. choose your own collection where to put the variables
  8. choose your ow light and dark modes from the collection


INFO: The plugin is functional, but the user guide and error handling are not done yet. I am releasing it as i is for now so everybody can use the current feature set that covers most of the intended feature set


In order for the plugin to function, you need to go to settings and:

  1. select a mode of operation
  2. select or create a variable collection. It can be renamed at any time in the Figma UI
  3. select variable modes where the values will land. (They can also be renamed at any time)


Settings are saved as you select them.

Known bug: When you create a new collection, you need to close and reopen the settings page to reflect the changes, or press the refresh button.


This was mostly developed in coffee shops. I hope you see where i'm going with this... 😆


https://www.buymeacoffee.com/bogris

Plugin Details

Version3
CreatedJuly 28, 2024
Last UpdatedApril 2, 2025
Categorydesign-tools-other
CreatorBogriceanu Sorin
Stats16 installs, 3 likes
PricingFree

Technical Details

  • API:1.0.0
  • main:dist/code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • http://localhost:3000/Dev
    • https://fonts.googleapis.com
    • https://xoxo-mono-radix-colors.vercel.app