Benjamin den Boer

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
Benjamin den Boer
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.
Koen Bok
I built you a curated guide for when you're just starting: http://bit.ly/framer-react 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.
Ridd
@koenbok Definitely going to pour over this, thank you!
William Lewis
@koenbok solid thanks
Andrzej
Congrats on release! @benjaminnathan @koenbok How does it compare to 'Code' section from Framer Classic?
Benjamin den Boer
@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.
Andrzej
@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?
Benjamin den Boer
@amslu Yes! @koenbok wrote this great introduction to React and ES6 specifically for Framer. You can find this here: http://bit.ly/framer-react Plus, we have a couple of really nice tutorials gathered here, too: https://www.framer.com/tutorials
Jamie Galbreath
Been digging into this... its a game changer for me...
Addison Schultz
@jamiegalbreath Super excited that we launched this also! I can't wait to see what everyone will start making :)
Jamie Galbreath
Daniel Wirtz
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!
Denis Shershnev
Congrats @benjaminnathan @koenbok ! Guys, you've done great work! Good luck to you.
Matt
Promo video is amazing! Made in house?
Sharon Matthews
This is cool, hope it will help to code more quickly
Diana Whitfield
very pretty design