Introducing Figma Connect. The best way to turn your Figma designs into code. No MCP hell. No plugins. Just copy and paste your designs into MagicPath and turn them into interactive prototypes without compromising your craft. Every pixel. Every detail. Every asset. Preserved.

You spent hours perfecting those pixels in Figma. We care about that. Your design becomes a living prototype you can: • Edit with AI using your design system • Share as interactive links • Export as production ready code Your precision, plus the magic of MagicPath.

We built this because designers should not have to choose between craft and speed. You designed it perfectly. Now you can prototype it perfectly too. Effectively, this is the best way to turn Figma into code, like, ever. Your vision, preserved. Your workflow, 10x faster.

To start: 1) Open any project and click Import from Figma, or start from the landing page 2) Connect your Figma account. 3) Copy any design with ⌘L on Mac or Ctrl + L on Windows 4) Paste it into MagicPath with ⌘V Images, typography, colors, and layout are all preserved.

We meet designers where they are. Your craft stays intact. You just get superpowers. It's amazing seeing your design materialize on an infinite canvas, fully interactive and responsive. It's amazing running variations and flows on your designs

Figma Connect is now live. Try it and turn your designs into real, interactive prototypes in seconds. Design to code, it's now solved. Learn more:

Brilliant.

From the legend himself 🙏🙏🙏

I’m so excited to use this!!!

Can't wait to see what you make!

Bro so excited to see this launched. The gap is closing.

fantastic work

Thank you!

This might actually kill the design-dev handoff problem for good.

@DimitryYou65358 Yes!

Ohhhhhhhhhhh ??????

It's insane! Try it out and let me know :)

This is officially nuts. So, so accurate.

We did it!

Had to hurry and launch this bcuz you saw Pencil yesterday eh 😄 dammit now I have to go compare them…. Cmon yall are making it so hard to keep up!!!

There's not much to compare, our code is real and we have a better product hope that helps! lol

Ayyeeoooo now I HAVE to try it out 😆 what code does Figma Connect output? Claude Code made a perfect react/tailwind/next.js render using Pencil MCP for me on the very first try. I’m trying to use it to map an import for the Unbounce page builder right now. Trickier because unbounce has an antiquated builder with absolute positioning. I hate using it but have clients that rely on it. Can your tool be used to help me build something like that?

It's react code that you can export it in any IDE as well :)

Do you support exporting framework-agnostic HTML/CSS/JS that can be embedded into tools like Unbounce? Unbounce does not support React, which is my current constraint. With Pencil, I’m able to map sections into an Unbounce import via MCP, so I’m trying to understand whether your output can be used in a similar way, or if it is React-only.

I am really impressed. Thats dope Pietro.

Thanks for trying it! I know! I also get mind-blown each single time haha.

This is fire! 🔥🔥🔥 Congrats on the launch this feature! ✨

Whoa

Congrats

Thank you bro!

🔥🔥🔥

Been testing this afternoon, so far it's pretty darn amazing! Great work.

Thank you! We cracked the code, just me and my cofounder coding over the break, haha

This is increadible. Jumping on it now!

Yeah Pietro, magicpath is such great tool 🤙

This is a massive step up for MagicPath, design just became much more interesting for us creatives. I love it.

The team is cooking 🔥🔥

Never stops

This is massive 🔥. MagicPath team never misses.

wow, i need to try this!

Looking forward to testing this out.

Is this as revolutionary as it sounds?

Yes sir

Don't mess with me Pierto, I just finished a huge design and this couldn't have come at a better time. Will follow up on implementation in DM if you want it.

Try it out and let me know! Feel free to DM me with any questions or feedback anytime :)

Awesome. Will test tomorrow 🙌. Been waiting for this.

Pietro said... "Listen I'm going to cook.... And whether you come to the barbeque or not, you gonna smell this s#!+." 😂 Good job

Hahah

figma to code without pain feels illegal

It does feel like an insane cheat code lol

I can finally turn my app designs into real app now????😳😳😳

Yes, the dream is here

My man.

This is awesome! It’d be super helpful if we could choose the component framework and have the output align to the selected framework. Connect -> Choose framework (Bootstrap) -> Output (Bootstrap). Any thoughts here?

This is a game changer for designers who really use auto layouts and constraints. For canvas-style Figma users, it’ll probably be a rough transition.

No it works for both!

Great then!

Magic path is my favorite Ai design tool

That’s insane. Congrats 👏

Thank you! Try it out and let me know

preserving every pixel in prototypes crushes the entropy of manual recoding. design-to-dev handoff is now atomic. 🇳🇴

This is 🔥

Thank you!

Looks awesome @skirano! Couple questions for you: 1. How would you say this compares to Figma Make? 2. My biggest gripe with Make currently is how messy the code is and how non-production ready it is. Is the goal here to prepare ship ready code or simply prototypes?

The accuracy is way higher than Figma's. Try it out, it works better, it's faster, and the code is ready to be implemented. Of course, this is v1, so we'll keep optimizing.