Back to Plugins
Theme Importer for Visual Studio Code
Import Visual Studio Code themes as Figma Variables to design efficiently.
themevisual studio codeswatchesfigma-to-codevariablesvscodekaleidocodejson to variablescolorstyles
Plugin Preview
About this plugin
How to use
Select the built-in Visual Studio Code themes you would like to import as Figma variables and press the `Import` button. Theme tokens can be previewed in the left hand pane in either list or grid views.
How to add a custom Visual Studio Code theme to the plugin
- Open Visual Studio Code.
- Install the desired color theme and switch to the theme in Visual Studio Code.
- Press Ctrl+Shift+P and run Developer: Generate Color Theme from current settings.
- Select the file's contents and copy.
- Open the Figma plugin and press the Create a new theme button.
- Paste into the Create a new theme dialog and press Save.
Note: This plugin supports up to 10 custom themes.
Plugin Details
| Version | 15 |
|---|---|
| Created | July 25, 2019 |
| Last Updated | March 20, 2025 |
| Category | Import & export plugins |
| Creator | Kyle Anderson |
| Stats | 3973 installs, 100 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/src/ui/ui.html
- main:dist/src/code/code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the Import & export plugins category.
html.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css)
Convert any website into fully editable Figma designs
Anima - Figma to Code React, HTML, CSS, Tailwind, MUI (DevMode Inspect React / HTML / Vue / CSS)
Anima - AI Powered Design to code
Figma to HTML
Convert Figma design to HTML