Create powerful animations and interactions with the Framer X code editor

Framer makes it incredibly easy to add complex user interactions inside your prototype, taking your design and code components to the next level. Playground allows you to quickly test new concepts within the all-new in-app code editor. You can combine your current app flow with new code components created in Playground.

About This Course

In this course, we’re learn how to build more sophisticated interactions and UI animations from scratch using React Hooks, the all-new in-app editor, Overrides, Property Controls, Shared Colors, Variants and a whole lot more. You’ll prototype things like user on-boarding, animated cards, login experience and an interactive landing page. We’ll use animated assets with Lottie, build a design system, create gestures, work with an API and connect a bunch of screens together to create a full app experience.

Framer Playground

Writing your first line of code in Playground is an order of magnitude easier than setting up a normal React project with NPM and VSCode. Nothing to download and nothing to set up, which can scare away so many designers. It’s all baked into Framer X. Their code editor has a beautiful light and dark theme and you get all the auto-completions that you need to make code less intimidating. You get auto-formatting like Prettier and real-time error notifications for your code, so you won’t get blocked by typing silly typos. You can check their well-documented API to learn new techniques and releases.