Visual Studio Code Figma Toolkit

How to use

1. Duplicate File

Begin by duplicating this file to your Drafts. This is the only way to re-use this file as a team library:

2. Publish Styles & Components

Next, Publish Styles & Components as a team library. You can also rename & move this file to a team project if you wish to use this with others.

3. Enable Library

Create a new file and enable the team library for your file:

4. Install Icon Fonts

Install the Codicon and Seti icon fonts to use the glyphs. Make sure you reload your Figma file after you’ve installed the fonts:
Link: Codicons

Link: Seti

5. Using Components

You can now search for components using the “Assets” panel or you can go to the master library and copy components and paste them into your file.

Ensure that when you paste components that they are instances:

6. Swapping States

Most components will have various states that you can swap to, which should retain their overrides:

7. Using Icons

Use the “Visual Studio Code Icons” Figma plugin to copy icon glyphs:
Figma Plugin: Visual Studio Code Icons

8. Icon Styles

All icons can be replaced by pasting a glyph. Ensure that you use the correct icon style for either Codicons or Seti icons.

Seti icons have color styles that you can also use.

9. Using Templates

A quick way to get started is to copy one of the “Templates” and detach the symbol to start making edits.

Color Mapping

Below is a mapping of the colors that are used in the Figma to their color tokens (alpha channel in parenthesis). This only covers the default (dark) theme for now.

Color Name
Color token

Base 01
activityBar.dropBackground (1f) activityBar.foreground activityBar.inactiveForeground (99) activityBarBadge.foreground badge.foreground button.foreground editor.rangeHighlightBackground (0b) extensionBadge.remoteForeground extensionButton.prominentForeground list.activeSelectionForeground menu.selectionForeground menubar.selectionBackground (1a) panel.dropBackground (1f) peekViewResult.fileForeground peekViewResult.selectionForeground peekViewTitleLabel.foreground sideBar.dropBackground (1f) statusBar.debuggingForeground statusBar.foreground statusBar.noFolderForeground statusBarItem.activeBackground (2e) statusBarItem.hoverBackground (1f) statusBarItem.prominentForeground statusBarItem.remoteForeground tab.activeForeground tab.inactiveForeground (80) tab.unfocusedActiveForeground (80) tab.unfocusedInactiveForeground (40) terminal.selectionBackground (40) textSeparator.foreground (2e)

Base 02
checkbox.foregrounddropdown.foregroundsettings.checkboxForegroundsettings.dropdownForeground

Base 03
panelTitle.activeForegroundpanelTitle.inactiveForeground (99)settings.headerForeground

Base 04
terminal.ansiBrightWhiteterminal.ansiWhite

Base 05
editor.foregroundeditorSuggestWidget.foregroundforeground

Base 06
breadcrumb.foreground (cc)descriptionForeground (b3)editorWidget.foregroundforegroundinput.foregroundmenu.foregroundmenubar.selectionForegroundnotifications.foregroundpeekViewTitleDescription.foreground (b3)settings.numberInputForegroundsettings.textInputForegroundterminal.foregroundtitleBar.activeForegroundtitleBar.inactiveForeground (99)

Base 07
editorActiveLineNumber.foregroundeditorLineNumber.activeForeground

Base 08
menu.separatorBackgroundpeekViewResult.lineForegroundsideBarTitle.foreground

Base 09
editorOverviewRuler.bracketMatchForegroundeditorOverviewRuler.selectionHighlightForeground (cc)editorOverviewRuler.wordHighlightForeground (cc)

Base 10
imagePreview.border (59)panel.border (59)panelTitle.activeBorder (59)sideBarSectionHeader.background (33)terminal.border (59)

Base 11
editorOverviewRuler.border (4d)textBlockQuote.background (1a)

Base 12
editorOverviewRuler.commonContentForeground (66)merge.commonContentBackground (29)merge.commonHeaderBackground (66)

Base 13
editorHoverWidget.bordereditorSuggestWidget.bordereditorWidget.bordersettings.dropdownListBorder

Base 14
checkbox.backgroundcheckbox.borderdropdown.backgrounddropdown.borderinput.backgroundsettings.checkboxBackgroundsettings.checkboxBordersettings.dropdownBackgroundsettings.dropdownBordertitleBar.activeBackgroundtitleBar.inactiveBackground (99)

Base 15
editor.findRangeHighlightBackground (66)editor.inactiveSelectionBackground

Base 16
activityBar.backgrounddebugToolBar.background

Base 17
notificationCenterHeader.backgroundnotifications.border

Base 18
settings.numberInputBackgroundsettings.textInputBackground

Base 19
breadcrumbPicker.backgroundeditorGroupHeader.tabsBackgroundeditorHoverWidget.backgroundeditorSuggestWidget.backgroundeditorWidget.backgroundmenu.backgroundnotifications.backgroundpeekViewResult.backgroundquickInput.backgroundsideBar.backgroundtab.border

Base 20
breadcrumb.backgroundeditor.backgroundeditorGroupHeader.noTabsBackgroundeditorGutter.backgroundeditorPane.backgroundpanel.backgroundpeekViewTitle.backgroundtab.activeBackgroundtab.unfocusedActiveBackgroundterminal.background

Base 21
editorUnnecessaryCode.opacity (aa)listFilterWidget.outline (00)scrollbar.shadowstatusBarItem.prominentBackground (80)statusBarItem.prominentHoverBackground (4d)terminal.ansiBlackwidget.shadow

Blue 01
editorInfo.foregroundeditorMarkerNavigationInfo.backgroundeditorOverviewRuler.infoForeground

Blue 02
editorOverviewRuler.incomingContentForeground (80)merge.incomingContentBackground (33)merge.incomingHeaderBackground (80)

Blue 03
notificationLink.foregroundpickerGroup.foregroundtextLink.activeForegroundtextLink.foreground

Blue 04
editor.hoverHighlightBackground (40)editor.selectionBackground

Blue 05
tab.activeModifiedBordertab.inactiveModifiedBorder (80)tab.unfocusedActiveModifiedBorder (80)tab.unfocusedInactiveModifiedBorder (40)

Blue 06
editorSuggestWidget.highlightForegroundlist.highlightForeground

Blue 07
activityBarBadge.backgroundeditorOverviewRuler.addedForeground (99)editorOverviewRuler.deletedForeground (99)editorOverviewRuler.modifiedForeground (99)editorOverviewRuler.rangeHighlightForeground (99)extensionBadge.remoteBackgroundinputOption.activeBorder (00)inputValidation.infoBorderpeekView.borderstatusBar.backgroundtextBlockQuote.border (80)

Blue 08
button.background

Blue 09
list.activeSelectionBackgroundmenu.selectionBackground

Blue 10
editorSuggestWidget.selectedBackgroundlist.focusBackground

Blue 11
peekViewEditor.backgroundpeekViewEditorGutter.background

Red 01
editorInfo.foregroundeditorLightBulbAutoFix.foregroundeditorMarkerNavigationInfo.backgroundeditorOverviewRuler.infoForegroundnotificationsInfoIcon.foreground

Red 02
editorOverviewRuler.incomingContentForeground (80)merge.incomingContentBackground (33)merge.incomingHeaderBackground (80)

Red 03
notificationLink.foregroundpickerGroup.foregroundtextLink.activeForegroundtextLink.foreground

Red 04
editor.hoverHighlightBackground (40)editor.selectionBackgroundminimap.selectionHighlight

Green 01
gitDecoration.addedResourceForegroundeditor.focusedStackFrameHighlightBackgroundgitDecoration.untrackedResourceForegroundeditorLink.activeForeground

Green 02
editorOverviewRuler.incomingContentForeground (80)merge.incomingContentBackground (33)merge.incomingHeaderBackground (80)terminal.ansiBrightGreen

Green 03
statusBarItem.remoteBackgroundeditorGutter.addedBackground

Green 04
extensionButton.prominentBackgroundextensionButton.prominentHoverBackgroundeditorBracketMatch.background

Purple 01
editorOverviewRuler.wordHighlightStrongForegroundgitDecoration.conflictingResourceForeground

Purple 02
terminal.ansiMagentaterminal.ansiBrightMagenta

Purple 03
statusBar.noFolderBackground

Yellow 01
gitDecoration.modifiedResourceForegroundtextPreformat.foreground

Yellow 02
editorMarkerNavigationWarning.backgroundeditorOverviewRuler.warningForegroundeditorWarning.foregroundlist.warningForeground

Yellow…