Token Inspect

About this plugin

TokenInspect is the Figma plugin that lets you easily inspect, view, and copy a component's design tokens.

Ideal for design system teams, it instantly displays all the tokens used by a Figma element: colours, fonts, spacing, radii, shadows, as well as the properties of its variants.

With TokenInspect, you can view the tokens applied, choose their format, and copy them directly to integrate them into your code. Perfect for speeding up the Figma → Dev transfer and ensuring design system consistency.

Key features :

🧑‍💻 Customisable token formats

1. Choose the format that matches your stack: (CSS (var), SCSS ($), JS (const), Dot Notation (a.b), Alias {alias}, ‘alias’, 'alias')

🧱 Adaptable naming conventions

1. Automatically convert tokens to: (kebab-case, snake_case, camelCase, dot.notation)

📋 One-click copying

Who is it for?

Developers and designers who want to easily transfer variables from Figma to code, preserving aliases and hierarchy, for direct integration into the development environment. Ideal for workflows that don't want to rely on complex synchronization tools.

Created by Robin Lopez

bento.me/robinlopez