Phase - Create interactive Figma prototypes with real code export
We've built on our super easy to use animation tool to give you the ability to also prototype interactive elements in your design. Import designs from Figma -> design your interactions -> export to code.
Replies
been waiting for something like this 🫡
as a PM who lives in Figma but cries in handoff meetings, this honestly feels like therapy lol.
most “prototype” tools just look real, but devs still have to rebuild everything from scratch anyway 🙃
this one’s different. multi-interaction support?? actual React code export?? y’all really said “no more figma > dev purgatory” and delivered.
already thinking of trying this out on our onboarding flow redesign — too many moving parts for static screens.
and not gonna lie, i’m weirdly excited there’s no timeline unless i want one. thank u for respecting chaos (╯°□°）╯︵ ┻━┻
code export still alpha? totally fair. if it handles flex + framer-motion style stuff down the line, i’ll never look back.
congrats on the drop team! this is a serious level-up for design → dev workflows 🚀
The keyframe animations is something that I've never seen before and an interesting take! How is the Phase team tackling the learning curve to learn Phase compared to a designer taking their Figma design straight to Vercel v0?
Phase
@lienchueh Hi Lien! That's a really good question because it goes to the heart of what we are building. V0 and Lovable and all are great tech, super fun to play with, but we don't actually have control of our work. That's the way LLMs work, they aren't deterministic. So as a designer when we get into the details we're going to have to open up a text editor and change the code. This is not a happy outcome for designers. We're building Phase to make sure that designers have total creative control of their work without having to work directly on the code, even when we can reliably work with an AI to help us create the design and animations. Designers are artists, they need control of their work; the kind of control that you get from a static design tool like Illustrator or Figma. So that's what we're building but with animations and now interactions. It's super hard 😅 but a lot of fun 🥳
We're moving fast too so expect more launches soon..
Phase
Hey Product Hunt! 👋
I’m Fergus, I head up marketing here at Phase. We’re all so excited to share what we've been working on.
Our team is building a tool for designers and anyone who loves being creative that gives you end to end control of your creative work.
The problem we're solving with our launch today is: prototyping.
We built this because the back-and-forth between design and engineering kills momentum. Now you can ship exactly what you designed. Import from Figma → Add real interactions → Export working React code. The whole flow is simple and crazy fast to iterate on.
What's different:
• Multiple interactions can run simultaneously
• No timeline unless you want it, but the power of keyframes is there if you need them!
• Exports real code, not just specs
• Built for how designers actually think
(Alpha disclaimer): Code export is early, it’s super hard to roundtrip the canvas with html/css. It works great, but it's not perfect. We're improving it every week based on your feedback and shipping as fast as we can.
We would love to hear:
• What interactions have been hardest for you to prototype?
• What framework do you need exports for?
• How does your team handle design → dev handoff today?
Thanks for checking us out! Happy to answer any questions 🙌
Reasonable product form. nice try.
Phase is a super-intuitive tool, making animations and interactions a really smooth process for even less-experienced designers. I appreciate the smooth process of exporting designs from Figma, which makes the entire design process more efficient. The option to export animations and interactions directly to code makes the implementation process complete, allowing me to hand it off to the developers smoothly. I 100% recommend Phase to every solo designer and design team! 🔥
Third strong drop from Phase 🧩💡—bridging Figma and code with style.
As a Product Designer, I’ve tested a lot of prototyping tools.
What I love:
• Seamless Figma import
• Advanced interactions with rules and states
• Timeline + keyframes logic (feels like After Effects, made for product design — adios Media Encoder bugs)
I save time, communicate ideas better, and devs finally get exactly what I mean. Can’t wait to see what’s next!
I just love Phase tool, easy to use and some new updates are best 5/5 ⭐
As someone who's tried almost every prototyping tool out there, I can honestly say this: most tools promise a lot on their marketing landing pages but rarely deliver once you're inside the actual product. However, phase genuinely delivers on every promise it makes.I've spent so much time struggling with various workarounds to create micro-interaction animations in Figma and then bringing them to life on a website. Phase’s seamless workflow completely surprised me. I was able to export a test project from Figma using the phase plugin, animate it effortlessly within phase, export it as a Lottie file, and then test it live on a website, all in under 2 minutes and without a single issue. Compared to the usual headache of going from Figma to After Effects to Lottie (with countless preview tests in between), PHASE felt like a dream come true. Honestly, I was ready to buy it right then and there only to realize it's currently free! Huge congratulations to the entire PHASE team, awesome job!