Vivid

💡 Hey Hunters! I’m Aryaman, cofounder of Vivid, and I’m thrilled to announce the launch of our Figma plugin that lets you generate and hand off ready-to-use components. Vivid cuts out redundant development work by letting designers own your UI while developers focus on functionality. Product designers meticulously craft pixel-perfect designs in Figma using components, variant properties, and autolayouts – why should developers repeat all that work in code? With Vivid, you can: 🎨 Generate React code using TypeScript from your Figma designs styled with CSS Modules or Tailwind CSS - with support for autolayout, components, and variants 👨🏽‍💻 Automatically create a pull request for developers to review with the newly generated code or preview code in a shareable sandbox 🚢 Ship 3x as fast by cutting out redundant engineering work In the upcoming weeks, we’ll be launching support for new Figma features like variables and modes, improving the modularity and responsiveness of our code output, and enabling you to link components already in your codebase to components in Figma. Try Vivid out at www.vivid.lol! Excited to hear your thoughts on what we’ve built so far!

We love using Vivid at Chestr! It makes our Figma-to-production workflows faster and easier. And, as a bonus, the product is so beautifully designed that you can feel the team's dedication to making every pixel perfect.⭐️

Congrats on the launch, Vivid will save me a lot of time!

awesome product, well done!

this is fantastic! can't wait to add it to the dev process. should 2x my iteration speed on frontend work.

Hi @aryaman_khandelwal , This is a very great answer to the known problem faced by many teams out there. I just booked a call with you and am looking forward to it. Congratulations on this work!!!