Fragmento
Sync design tokens to shadcn with version control
31 followers
Sync design tokens to shadcn with version control
31 followers
Fragmento is a design token management platform that bridges the gap between design (Figma) and development (GitHub). It enables teams to maintain a single source of truth for design tokens with version control and shadcn-ready CSS variable exports.
I built Fragmento after watching design tokens fracture across Figma files, spreadsheets, and ad‑hoc JSON exports. Designers couldn’t see what developers actually shipped, and engineers had to reverse‑engineer variables every release. Fragmento keeps a single source of truth. The plugin pushes curated tokens from Figma into web app, version them like code, and then release straight to GitHub with shadcn/ui-ready output. Along the way I realized the most reliable workflow is one-directional (Figma → Web → Code), so I doubled down on release management, and integrations that respect how teams already ship design systems. Excited to show you how much faster design + dev handoff feels now.
P.S. The Fragmento Figma plugin is currently in the review queue, so it’ll show up in the community file manager soon. In the meantime you can already push tokens directly from the web app. Just connect your project and ship releases from there.
@ronthomasgeorge As a designer, I love seeing tokens curated in Figma and shipped exactly as devs consume them. Fragmento bridges the gap beautifully
@masump Thanks ☺️. Getting those Figma design tokens to align perfectly with the tokens consumed by developers is exactly the core problem Fragmento was built to solve.
RiteKit Company Logo API
@ronthomasgeorge Very well executed. Nice to see that, too many slap-ups in PH now.
@osakasaul Thanks ☺️
Hi everyone! The plugin is now live on Figma Community.
Check it out: https://www.figma.com/community/plugin/1574365494469384127/fragmento
Swytchcode
Wow, this is amazing. But, in situations where there is an intentional design change in the Github repo that isnt present in Figma, how do you manage such a case?
@chilarai Thanks ☺️. That's a great point, and it highlights a limitation in the current synchronization approach. Bi-directional sync is something I'm planning to include in future releases.
Right now, since the current version only supports one-way sync (Figma to GitHub), managing the design change in GitHub requires a manual process to keep Figma updated and ensure the next sync doesn't overwrite it.
Swytchcode
@ronthomasgeorge awesome. keep it up!
Ordinary People Prompts
One of the non-sloppy products on Product Hunt. Good luck!
@wherelambo Thanks ☺️
Chatwoot
@ronthomasgeorge Congrats on the launch. Can I use this to sync variables from figma to tailwind css (v3.4)?
@webofnithin Thanks ☺️. The current version exports shadcn-compatible CSS variables. Tailwind CSS v3.4 export is coming in the next release.
@ronthomasgeorge : As someone who’s worked closely with you, I couldn’t be more excited to see Fragmento launched. This is a really elegant solution to a problem many design-dev teams face: keeping design tokens consistent, versioned, and actually usable in production. The Figma → Web App → GitHub workflow is seamless, and exporting CSS variables ready for shadcn is a brilliant touch.
One thing I’d be excited to see in the future is bidirectional syncing — allowing updates made in code to flow back into Fragmento or even into Figma. That would make Fragmento an even stronger single source of truth and close the loop for teams working in both design and engineering.
Huge congratulations on the launch. It’s been great seeing your growth from when we worked together, and you’ve built something genuinely valuable here. Looking forward to what comes next!
@sinadin_zidan_k Thanks so much for the feedback ☺️. And yes, bidirectional sync is definitely the top priority for future releases and it will be the feature that truly makes Fragmento the ultimate single source of truth. It’s been great sharing this milestone with you.