Framer Playground

A new creative coding environment in Framer X.

#2 Product of the DayMay 08, 2019
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.
Would you recommend this product?
6 Reviews5.0/5
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.
Hidden comment
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.
@koenbok Definitely going to pour over this, thank you!
Been digging into this... its a game changer for me...
@jamiegalbreath Super excited that we launched this also! I can't wait to see what everyone will start making :)
Congrats on release! @benjaminnathan @koenbok How does it compare to 'Code' section from Framer Classic?
@koenbok @amslu 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.
@benjaminnathan 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?
@amslu Yes! @koenbok 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:
Hidden comment
Hidden comment
Looks great as usual! I always wondered if Framer allows you to design and code directly React production ready components ? It would be a game changer for me, especially if i could use it to create my entire design system.
@nxalessandro Hey Alessandro! You can code production-ready components in Framer X and you can bring your already created components straight into Framer X. We have built a suite of tools to streamline the process of keeping your design system in-sync, be sure to try Bridge ( I hope you give it a shot and, if you need help along the way, I’m happy to jump in. Just send a message to :)
@vrenkema Thank you Viktor, i will definitively try out Framer X then.
Hidden comment
Hidden comment
Hidden comment