ColorCode

About this plugin

ColorCode turns plain text into beautifully highlighted code, right inside Figma.Whether you’re designing developer docs, polishing a portfolio, building slide decks, or mocking up a code editor UI, ColorCode applies real syntax coloring to any text layer in a single click.Supported languagesJavaScript, TypeScript, Python, HTML, CSS, JSON, JSX, and TSX.11 built-in themesVS Dark · VS Light · GitHub Dark · GitHub Light · Monokai · Dracula · Nord · Night Owl · One Dark Pro · Solarized Dark · Solarized LightHow it works1.Select a text layer that contains code2.Pick a language and theme3.Click Apply Syntax HighlightingThat’s it. Every keyword, string, comment, and function name gets its own color. No images. No workarounds. Just native Figma text that stays editable.Why ColorCode•Fully offline, no network requests, no API keys•Preserves your fonts and text styles•Live preview before you apply•Fast, lightweight, and made for design workflows•For designers who care about the fine print and the pixels