Windstruck: Tailwind classes as Figma layer names

[corysimmons]

I built Windstruck, a Figma plugin where a layer's name is its styling. Name a frame flex gap-4 p-6 rounded-xl bg-card and the plugin sets auto layout, spacing, radius and fill as you type, using the colors, spacing and fonts from your theme.

The idea is that designers and developers on a Tailwind team end up using the same words. Since the layer names are already classNames, getting code out is mostly reading them back: you can copy a frame as JSX, or export the file as an Expo app (iOS, Android, web) built on HeroUI Native and Uniwind, and push it to a GitHub repo as a pull request. It only writes to its own windstruck/ branches.

It's free to start and needs no account for the core (class rendering, 54 themes, dark mode, copy code). There's a paid tier for unlimited custom themes and an AI builder.

• 50 second video: https://youtu.be/wAVX4UU1fII
• Plugin: https://www.figma.com/community/plugin/1700359260464408161
• Site: https://windstruck.app

Things I know are rough: the full project export targets Expo only, and the optional desktop sync app is Windows-only. I'd like to hear which utilities you reach for that don't render yet.

[krishkhinchi]

Hii @corysimmons,

This is a really interesting approach! I like the idea of using Tailwind class names directly as Figma layer names. A few things that I think could make Windstruck even more powerful:

1. Responsive utilities: Support for breakpoint-based classes like md:flex, lg:grid-cols-3, etc., would be really useful for designing responsive layouts.

2. Advanced styling: It would be great to have support for utilities like shadow-*, ring-*, border-*, backdrop-blur-*, gradients, and arbitrary values.

3. Interactive states: Support for variants like hover:, focus:, active:, and disabled: could make the design workflow much closer to actual frontend development.

4. Grid utilities: More complete support for CSS Grid properties, including column spans, row spans, and auto placement, would be a valuable addition.

5. Framework flexibility: Since the current full project export targets Expo, having export options for Next.js, React, and other popular frontend frameworks in the future could make it useful for a much wider developer community.

One thing I particularly like is the GitHub PR workflow. Being able to move from a Figma design to an actual codebase without manually recreating everything is a genuinely useful direction.

Overall, this looks like a promising tool for reducing the gap between design and development. Looking forward to seeing how it evolves!

---

If this answer solve your all doubts so can you please mark my answer as solved

or if did not solved yet so please tell me your doubt

[corysimmons]

Thank you so much for taking a look! ❤️

A good part of that already works:

• Responsive: sm: to 2xl: are read on the canvas. They’re measured against the parent frame's width, so resizing a frame flips them, and the breakpoints are editable per theme. dark: works too.
• Styling: shadow-*, ring-*, border-*, outline-*, divide-*, blur-*, backdrop-blur-*, gradients (bg-gradient-to-r from-primary to-accent) and arbitrary values (p-[12px], bg-[#ff0055]) all render.
• States: hover: and friends are skipped on the canvas on purpose, so the design shows the resting state. In the exported code active:, focus: and disabled: are kept.
• Grid: this is the real gap. Figma auto layout has no grid, so grid-cols-* and col-span-* don't render on the canvas yet; the export turns them into a wrapping row with the same column widths. For now flex flex-wrap with basis-1/3 children gets the same layout.
• Other frameworks: Expo only for now (it covers iOS, Android and web). Noted on Next.js and I originally started out with both Next.js + Expo support but it turned into a bit of a maintenance nightmare. If Windstruck gets popular I'll definitely add it back though.

Thanks again for taking a look and I hope you end up using it. There are a ton of free templates and themes already and I plan on adding a lot more.

[krishkhinchi]

Thank you @corysimmons for the detailed clarification! If this answers all your doubts, could you please mark this discussion as Solved? If anything is still unclear, feel free to let me know your remaining questions. Happy to help! ❤️