Tailwind Translator
Token Finder helps you translate a selected Figma layer into practical Tailwind CSS output. Select
Plugin Preview
About this plugin
Token Finder helps you translate a selected Figma layer into practical Tailwind CSS output.Select a single layer and get a clear breakdown of:Raw values (from Figma) and the Tailwind translation side-by-sideLayout (width, height, padding, gap)Radius (uniform or per-corner)Typography (font, size, line-height, letter-spacing, weight)Colors with token context (variable/style/raw), plus support for solid fills and gradientspx → rem conversion so values are usable in real codeYou can toggle which data points to show, copy individual Tailwind values with one click, and copy the full class list for the element.Built for designers and devs who want faster, more reliable handoff from Figma to Tailwind, without guessing.
Plugin Details
| Version | 2 |
|---|---|
| Created | February 19, 2026 |
| Last Updated | February 20, 2026 |
| Category | Software development |
| Creator | Jonathan Bernard Pace |
| Stats | 2 installs, 1 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the Software development category.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
SkewDat
Skew any layer or group with all layers preserved to edit.