Lesson List
Lesson: UI Interactions in Framer Playground
About Lesson

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.

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, OverridesProperty ControlsShared ColorsVariants 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.

Page

The Page feature allows you to quickly create beautiful multi-pages experiences like a user on-boarding flow or scrollable cards that snaps. It has preset animations such as CubeCover FlowWheel and Pile.

Overrides

With any design component that you create, you can quickly use CSS-inspired properties to create beautiful interactions and animations that can be customized in the design editor.

 

Exercise Files
No Attachment Found
No Attachment Found
Join the conversation
Lesson List
0% Complete