As someone who constantly jumps between UI/UX design in Figma and writing Tailwind components, I was wasting hours manually inspecting computed CSS to extract hex codes and build tailwind.config.js files.
Over the weekend, I built Token Inspector, a 100% client-side Chrome extension to automate this. In one click, it exports ready-to-use Tailwind configs, Tokens Studio JSON, and zips all inline SVGs.
I tried sharing it on Reddit this morning to get my first 20 users, but the automods instantly nuked my post because of the link. So, I’m giving the promo code I made for them to the Dev.to community instead.
Use code REDDITPRO at checkout to bypass the paywall and get the premium version 100% free.
You can grab it from the Chrome Web Store here:
Let me know what you think of the code output!
Top comments (1)
Việc đồng bộ hóa giữa Figma và Tailwind thực sự là một cơn ác mộng nếu phải làm thủ công, nhất là khi các designer thay đổi spacing hay color palette liên tục. Mình từng gặp tình trạng tương tự khi cố gắng viết script để parse dữ liệu từ các plugin, nhưng vấn đề lớn nhất không phải là logic trích xuất mà là việc duy trì sự nhất quán của các design tokens qua các phiên bản. Nếu extension của bạn có thể tự động cập nhật file tailwind.config.js ngay khi có thay đổi trong Figma thì sẽ cực kỳ hữu ích cho workflow của team dev. Hy vọng bạn sớm xử lý được vụ bị bot Reddit chặn để mọi người cùng trải nghiệm.