Framer Playground - A new creative coding environment in Framer X

Framer Playground is a brand new creative coding environment, available now in Framer X. It’s made up of three parts: a built-in code editor that helps you learn React as you go, an extensive animation library, and comprehensive docs.

Add a comment

Replies

Best
Hey all! We‘re very excited to introduce Framer Playground, a new creative coding environment available right in Framer X. It’s made up of three parts: a built-in code editor that helps you learn React as you go, an extensive animation library, and best-in-class documentation. We can‘t wait to see what you‘ll create.
I built you a curated guide for when you're just starting: The goal is to help you build things you could only imagine before. I have seen thousands of people learn how to code. You can do it too.
Definitely going to pour over this, thank you!
solid thanks
Congrats on release! How does it compare to 'Code' section from Framer Classic?
Thank you! Framer Classic was great for exploring ideas in code because it allowed you to start new projects quickly, had instant visual feedback, good examples and great error reporting. But it had its limits, too. - It had no implied structure so larger projects were hard to manage. - It was hard to share parts of your projects that would be useful to others. - There was no easy way to repurpose your previous work or parts of it. - It was moving away from popular standards (ES6, React) over time. Framer X was built to solve all of these. It has everything great from Classic plus: - Components give your projects structure. - Components allow you to isolate logic, share and re-use parts of your projects. - It‘s completely based on standards and you can combine it with anything. - Production quality animation library. We always intended X to be better than classic for code too, and we believe it is now. Plus, all code components created in Framer X can be distributed on our Store, either publicly or privately, allowing others to learn and benefit from your work. This ecosystem empowers designers to add interactivity to their projects, even without having to know any code.
Reusability and component store sound like right ideas for quicker prototyping. I'd might even try to relearn Framer ;) Any recommendations for react tutorials/courses that would be also useful when learning FramerX?
Yes! wrote this great introduction to React and ES6 specifically for Framer. You can find this here: Plus, we have a couple of really nice tutorials gathered here, too:
Been digging into this... its a game changer for me...
Super excited that we launched this also! I can't wait to see what everyone will start making :)
We used the Framer Beta (for Playground) in a recent client project. It was risky, since things are likely to break in a beta. But the upside was worth it. The new update brings a lot to the table and we where able to build a high-fidelity prototype in a single day with one designer and one developer. Both working in Framer, side by side. Great that this is now out of beta and ready for projects of all kind!
Congrats ! Guys, you've done great work! Good luck to you.
Promo video is amazing! Made in house?
This is cool, hope it will help to code more quickly
very pretty design