TailwindCSS → Style Dictionary → Figma Tokens
What‘s an equivalent of Tailwind‘s p-4 on the design side? This is an attempt to make the designer productive and accurate by using “default” tokens (in my case, Tailwind) in Figma!
Today I have to recreate all these default tokens from the UI tool, which is prone to human error. So I figured one of the ways is we pull Tailwind's full default config and transform them into a format that Figma Tokens can consume.
Thanks to this tutorial by @philwolstenholme on dev.to, we managed these token types so far:
- Spacing ✅
- Colors ✅
- Border Radius ✅
- Border Width ✅
- Opacity ✅
- Box Shadow ✅
- Line Heights ✅ (hat tip to @sonnylazuardi)
- Letter Spacing 🐞 (em doesn‘t seem to work on Figma)
Need help with
- Sizing
- Typography
- Font Family
- Font Weight
- Font Size
- Paragraph Spacing
- Text Case
- Text Decoration
- Composition (if available)
Notice the Other panel. Technically, each token type should be transformed correctly.
Credits, References & Resources
