Exported JSON files of Figma Variable collections that I prefer🥰
Has two variable modes, Light and Dark.
Originally defined in Radix Colors, an open-source color system for designing beautiful, accessible websites and apps.
Accessibility made easy
Each step is designed for a specific use case, with multiple combinations guaranteed to pass WCAG contrast ratio.
Automatic dark mode
Switching to dark theme is as simple as applying a class to a container. Dark mode Just Works™.
Transparent variants
Each scale has a matching transparent variant, which is handy for UI components that need to blend into colored backgrounds.
Exported from Radix Color Scales by Honza Toman (@honzatmn).
Has only one variable mode.
Exported from Tailwind CSS Variables by Honza Toman (@honzatmn).
Has only one variable mode.
Exported from Tailwind CSS Variables by Honza Toman (@honzatmn).
Firstly, install a Figma plugin named Export/Import Variables by Honza Toman (@honzatmn) to your desired Figma files.
Then, pick a JSON files to apply preconfigured Figma variable collections as shown.
Honza Toman (@honzatmn) for providing such an amazing plugin and presets!✨