Figma → SCSS

VSCode extension that transforms Figma-copied CSS into project SCSS mixins.

Features

• Font family & weight — converts font-family + font-weight into @include font-family(token, weight)
• Font size & line height — converts font-size + line-height into @include font-size(size, lh)
• Letter spacing — converts percentage values to em units
• Pixel → rem — wraps px values in rem() for layout properties (width, height, padding, margin, gap, border-radius, and more)
• CSS variables — resolves var(--Name, fallback) to the fallback value
• 8-digit hex colors — converts #RRGGBBAA to rgba(#RRGGBB, opacity)
• Blur — converts blur(25px) to blur(rem(25))
• Noise removal — strips opacity: 1, leading-trim, font-style, angle
• Auto font detection — reads your project SCSS files to map font names automatically, no config needed
• Auto color variables — replaces hex values with SCSS variables from your project _colors.scss automatically
• SVG cleanup — same shortcut cleans up SVG exported from Figma or Illustrator: strips the <?xml ... ?> declaration, generator comments, xmlns/version/id attributes, <defs> blocks, Illustrator class="st0" attributes, <mask> definitions, and unwraps <g clip-path="..."> / <g mask="..."> wrappers
• Context menu — right-click in the editor to run the transform

Usage

Select Figma CSS in the editor and trigger the command — or copy it to the clipboard and trigger without a selection.

Trigger options:

• Keyboard shortcut: Cmd+Shift+G (Mac) / Ctrl+Shift+G (Windows/Linux)
• Icon button in the top-right corner of the editor
• Right-click in the editor → Figma → SCSS: Transform selection
• Command Palette: Cmd+Shift+P → search Figma → SCSS

Configuration

Custom keyboard shortcut

Open the keyboard shortcuts editor (Cmd+K Cmd+S on Mac, Ctrl+K Ctrl+S on Windows/Linux), search for Figma → SCSS: Transform selection, and assign any key combination you prefer.

Font family map

The extension maps Figma's font-family value to the token used in your font-family() mixin.

Auto-detection

The extension reads your project SCSS files automatically — no configuration needed. It expects:

• scss/includes/_fonts.scss — $fonts map: token → variable
• scss/includes/variables/_fonts.scss — variable definitions

// variables/_fonts.scss
$font-display: "GT-Era-Display", sans-serif;
$font-text: "GT-Era-Text", sans-serif;

// _fonts.scss
$fonts: (
  display: $font-display,
  text: $font-text,
);

A font named GT Era Display Trial from Figma matches GT-Era-Display → @include font-family(display, 500).

Both files are watched — changes take effect immediately without reloading the editor.

Color variables

The extension automatically replaces hex color values with SCSS variables from your project's _colors.scss.

Auto-detection

The extension reads scss/includes/variables/_colors.scss and builds a hex → variable map. When a color property contains a hex value that matches a variable, the hex is replaced with the variable name. The first matching variable wins.

// variables/_colors.scss
$color-black: [#333](https://github.com/gregmatys/figma2scss/issues/333);
$color-white: #F6F5F3;
$color-gray-200: #EAE8E6;

color: [#333](https://github.com/gregmatys/figma2scss/issues/333) → color: $color-black

Both 6-digit (#333333) and shorthand (#333) hex notation are supported. The file is watched — changes take effect immediately without reloading the editor.

Manual override

To override auto-detection, set figma2scss.fontFamilyMap in settings.json. Keys are matched case-insensitively against the Figma font name; first match wins.

"figma2scss.fontFamilyMap": {
  "gt era display": "display",
  "gt era text": "text",
  "helvetica": "helvetica"
}