Vivid is a Figma plugin that lets you generate and hand off ready-to-use components. Cut out redundant development work by letting designers own your UI while developers focus on functionality.
💡 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!
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!!!
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.⭐️
this is fantastic! can't wait to add it to the dev process. should 2x my iteration speed on frontend work.
About Vivid on Product Hunt
“Hand off ready-to-use components from Figma”
Vivid launched on Product Hunt on June 28th, 2023 and earned 102 upvotes and 6 comments, placing #21 on the daily leaderboard. Vivid is a Figma plugin that lets you generate and hand off ready-to-use components. Cut out redundant development work by letting designers own your UI while developers focus on functionality.
Vivid was featured in Design Tools (259.5k followers), Artificial Intelligence (466.2k followers) and No-Code (5.6k followers) on Product Hunt. Together, these topics include over 126.4k products, making this a competitive space to launch in.
Who hunted Vivid?
Vivid was hunted by Aryaman Khandelwal. A “hunter” on Product Hunt is the community member who submits a product to the platform — uploading the images, the link, and tagging the makers behind it. Hunters typically write the first comment explaining why a product is worth attention, and their followers are notified the moment they post. Around 79% of featured launches on Product Hunt are self-hunted by their makers, but a well-known hunter still acts as a signal of quality to the rest of the community. See the full all-time top hunters leaderboard to discover who is shaping the Product Hunt ecosystem.
Want to see how Vivid stacked up against nearby launches in real time? Check out the live launch dashboard for upvote speed charts, proximity comparisons, and more analytics.
Aryaman Khandelwal