Color NameĮditorOverviewRuler.bracketMatchForegroundĮlectionHighlightForeground (cc)ĮditorOverviewRuler.wordHighlightForeground (cc)ĮmonContentForeground (66) This only covers the default (dark) theme for now. Seti icons have color styles that you can also use.Ī quick way to get started is to copy one of the “Templates” and detach the symbol to start making edits.īelow is a mapping of the colors that are used in the Figma to their color tokens (alpha channel in parenthesis). Ensure that you use the correct icon style for either Codicons or Seti icons. Use the “Visual Studio Code Icons” Figma plugin to copy icon glyphs:Īll icons can be replaced by pasting a glyph. Most components will have various states that you can swap to, which should retain their overrides: 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.Įnsure that when you paste components that they are instances: Make sure you reload your Figma file after you’ve installed the fonts: Install the Codicon and Seti icon fonts to use the glyphs.

You can also rename & move this file to a team project if you wish to use this with others.Ĭreate a new file and enable the team library for your file: Next, Publish Styles & Components as a team library. This is the only way to re-use this file as a team library: Duplicate Fileīegin by duplicating this file to your Drafts. 👉 Figma Link: VS Code Toolkit How to use 1.

Visual studio code github plugin