microsoft / vscode-figma-toolkit

A Figma design toolkit for Visual Studio Code

Visual Studio Code Figma Toolkit

👉 Figma Link: VS Code 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.foreground dropdown.foreground settings.checkboxForeground settings.dropdownForeground
Base 03	panelTitle.activeForeground panelTitle.inactiveForeground (99) settings.headerForeground
Base 04	terminal.ansiBrightWhite terminal.ansiWhite
Base 05	editor.foreground editorSuggestWidget.foreground foreground
Base 06	breadcrumb.foreground (cc) descriptionForeground (b3) editorWidget.foreground foreground input.foreground menu.foreground menubar.selectionForeground notifications.foreground peekViewTitleDescription.foreground (b3) settings.numberInputForeground settings.textInputForeground terminal.foreground titleBar.activeForeground titleBar.inactiveForeground (99)
Base 07	editorActiveLineNumber.foreground editorLineNumber.activeForeground
Base 08	menu.separatorBackground peekViewResult.lineForeground sideBarTitle.foreground
Base 09	editorOverviewRuler.bracketMatchForeground editorOverviewRuler.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.border editorSuggestWidget.border editorWidget.border settings.dropdownListBorder
Base 14	checkbox.background checkbox.border dropdown.background dropdown.border input.background settings.checkboxBackground settings.checkboxBorder settings.dropdownBackground settings.dropdownBorder titleBar.activeBackground titleBar.inactiveBackground (99)
Base 15	editor.findRangeHighlightBackground (66) editor.inactiveSelectionBackground
Base 16	activityBar.background debugToolBar.background
Base 17	notificationCenterHeader.background notifications.border
Base 18	settings.numberInputBackground settings.textInputBackground
Base 19	breadcrumbPicker.background editorGroupHeader.tabsBackground editorHoverWidget.background editorSuggestWidget.background editorWidget.background menu.background notifications.background peekViewResult.background quickInput.background sideBar.background tab.border
Base 20	breadcrumb.background editor.background editorGroupHeader.noTabsBackground editorGutter.background editorPane.background panel.background peekViewTitle.background tab.activeBackground tab.unfocusedActiveBackground terminal.background
Base 21	editorUnnecessaryCode.opacity (aa) listFilterWidget.outline (00) scrollbar.shadow statusBarItem.prominentBackground (80) statusBarItem.prominentHoverBackground (4d) terminal.ansiBlack widget.shadow
Blue 01	editorInfo.foreground editorMarkerNavigationInfo.background editorOverviewRuler.infoForeground
Blue 02	editorOverviewRuler.incomingContentForeground (80) merge.incomingContentBackground (33) merge.incomingHeaderBackground (80)
Blue 03	notificationLink.foreground pickerGroup.foreground textLink.activeForeground textLink.foreground
Blue 04	editor.hoverHighlightBackground (40) editor.selectionBackground
Blue 05	tab.activeModifiedBorder tab.inactiveModifiedBorder (80) tab.unfocusedActiveModifiedBorder (80) tab.unfocusedInactiveModifiedBorder (40)
Blue 06	editorSuggestWidget.highlightForeground list.highlightForeground
Blue 07	activityBarBadge.background editorOverviewRuler.addedForeground (99) editorOverviewRuler.deletedForeground (99) editorOverviewRuler.modifiedForeground (99) editorOverviewRuler.rangeHighlightForeground (99) extensionBadge.remoteBackground inputOption.activeBorder (00) inputValidation.infoBorder peekView.border statusBar.background textBlockQuote.border (80)
Blue 08	button.background
Blue 09	list.activeSelectionBackground menu.selectionBackground
Blue 10	editorSuggestWidget.selectedBackground list.focusBackground
Blue 11	peekViewEditor.background peekViewEditorGutter.background
Red 01	editorInfo.foreground editorLightBulbAutoFix.foreground editorMarkerNavigationInfo.background editorOverviewRuler.infoForeground notificationsInfoIcon.foreground
Red 02	editorOverviewRuler.incomingContentForeground (80) merge.incomingContentBackground (33) merge.incomingHeaderBackground (80)
Red 03	notificationLink.foreground pickerGroup.foreground textLink.activeForeground textLink.foreground
Red 04	editor.hoverHighlightBackground (40) editor.selectionBackground minimap.selectionHighlight
Green 01	gitDecoration.addedResourceForeground editor.focusedStackFrameHighlightBackground gitDecoration.untrackedResourceForeground editorLink.activeForeground
Green 02	editorOverviewRuler.incomingContentForeground (80) merge.incomingContentBackground (33) merge.incomingHeaderBackground (80) terminal.ansiBrightGreen
Green 03	statusBarItem.remoteBackground editorGutter.addedBackground
Green 04	extensionButton.prominentBackground extensionButton.prominentHoverBackground editorBracketMatch.background
Purple 01	editorOverviewRuler.wordHighlightStrongForeground gitDecoration.conflictingResourceForeground
Purple 02	terminal.ansiMagenta terminal.ansiBrightMagenta
Purple 03	statusBar.noFolderBackground
Yellow 01	gitDecoration.modifiedResourceForeground textPreformat.foreground
Yellow 02	editorMarkerNavigationWarning.background editorOverviewRuler.warningForeground editorWarning.foreground list.warningForeground
Yellow 03	inputValidation.warningBorder list.invalidItemForeground inputValidation.warningBackground
Yellow 04	charts.yellow debugConsole.warningForeground (☀️) editorMarkerNavigationWarning.background (☀️) editorMarkerNavigationWarning.headerBackground (☀️) editorOverviewRuler.warningForeground (☀️) editorWarning.foreground (☀️) minimap.warningHighlight (☀️) notificationsWarningIcon.foreground (☀️) problemsWarningIcon.foreground
Yellow 05	terminal.ansiYellow terminal.ansiBrightYellow editor.stackFrameHighlightBackground
Orange 01	statusBar.debuggingBackground editorOverviewRuler.findMatchForeground (7e) minimap.findMatchHighlight
Orange 02	peekViewEditor.matchHighlightBackground editor.findMatchHighlightBackground (55) peekViewResult.matchHighlightBackground (4d)
Orange 03	editor.findMatchHighlightBackground editor.symbolHighlightBackground list.filterMatchBackground peekViewResult.matchHighlightBackground searchEditor.findMatchBackground editor.findMatchHighlightBackground (☀️) editor.symbolHighlightBackground (☀️) list.filterMatchBackground (☀️) peekViewResult.matchHighlightBackground (☀️) searchEditor.findMatchBackground
Gray 01	interactive.inactiveCodeBorder (☀️) list.inactiveSelectionBackground
Gray 02	button.secondaryBackground (☀️)

Contributing

If you'd like to contribute components, please create a PR with a link to your Figma file that has the proposed the components. Please re-use the same naming convention found in the rest of the file. Depending on the

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

vscode-figma-toolkit's Issues

Link to Figma file giving 404 error

I was able to view this figma file but late last week it started giving 404 errors for myself and a colleague.

May i ask a question not related to any issue ?

Hi all, I am struggling to know more about this toolkit. Sorry for creating an issue.

I used Figma for a while and i love VSCode. I see that his toolkit is about VSCode components, their visual appearance. But can this toolkit then integrate changes to a compiled VSCode theme ? I haven't found any info on that. Or is it just a graphical helper for theme creators ?

Thanks a lot :)

Template: When switching activity bar item icon state, it becomes another icon

Ref: microsoft/vscode#85978

• Start from Sample extension template
• Change the currently active icon's state from active to default
• I expect the icon to become grayed-out
• The icon becomes greyed-out AND changes into another icon

Tab icon / title are not aligned

Ref: microsoft/vscode#85978

• Use Sample extension template
• See icons do not align horizontally with text

Update default themes to Dark/Light Modern

Given the recent update to VS Code's light & dark themes, the toolkit should be updated to reflect those. We should probably use Figma's new variables capabilities to replace the "Base " format today.

Light Theme

Will the figma toolkit have a light theme added?

Theme Plugin

Idea: Figma plugin that would allow to switch between themes from marketplace.

How to implement:

1. To fetch themes, see vscodethemes/web#197 (comment)
2. Show a dropdown with list of themes - search with autocomplete would be perfect here.
3. Update current style values to match theme values. Original values could be restored by selecting default theme(this might be a reset button)

Pros:

• no need create light theme
• test design with any theme from marketplace

Broken documentation links @ Figma

Hi there!

I'm not sure where to write about it. This looks like a relevant place for :)

The link to the documentation (https://aka.ms/fluent), found in the description of Microsoft Fluent projects, sends to a 404 page.

https://www.figma.com/community/file/836833645402438850
https://www.figma.com/community/file/836835062056249539
https://www.figma.com/community/file/836828295772957889

I think this should be replaced with https://www.microsoft.com/design/fluent/ or something like that.

Thank you!

Update Figma toolkit color tokens to use variables

Currently the Figma toolkit uses a raw set of color values via shared styles. This makes it difficult for consumers of the toolkit to use colors given that there's no semantic meaning associated with them.

For example, a designer building a VS Code extension would have no way of knowing which color was used for input backgrounds unless they manually cross-referenced the hex value with the colors in colorRegistry.ts

Ideally we could use variables to expose a list of semantic tokens that match the list used in VS Code itself. These variables would referenced the raw "Base " or "Accent " colors as they exist today, updated to use the latest themes.

Extension component

Hi there!

Thanks so much for making this toolkit for the community ♥️ I can't tell you how helpful it's been.

I would like to make a feature request: an extension component

It would help my workflow (and hopefully a bunch of other people too!) 🙏