ColorCode

About this plugin

ColorCode turns plain text into beautifully highlighted code — directly inside Figma.

Whether you're designing developer docs, building a portfolio, creating slide decks, or mocking up a code editor UI — ColorCode applies real syntax coloring to any text layer in one click.

Supported Languages

JavaScript, TypeScript, Python, HTML, CSS, JSON, JSX, and TSX.

11 Built-in Themes

VS Dark · VS Light · GitHub Dark · GitHub Light · Monokai · Dracula · Nord · Night Owl · One Dark Pro · Solarized Dark · Solarized Light

How it works

Select a text layer containing code

Pick your language and theme

Hit "Apply Syntax Highlighting"

That's it. Each keyword, string, comment, and function name gets colored individually — no images, no workarounds, just native Figma text you can still edit.

Why ColorCode?

Works entirely offline — no network requests, no API keys

Preserves your existing fonts and text styles

Live preview before applying

Lightweight and fast

Built for designers who care about the details.