UI Interactions in Framer Playground

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.
The great thing about Framer is that designers can learn code and build prototypes that are so close to production without all the friction.
// Import design and code components import { Login } from "./canvas” import { Input } from "./Input" export function LoginScreen() { return ( <Frame width={375} height={812}> <Login /> <Input /> </Frame> ) }
// Override components and animate import { Override } from "framer" export function Animate(): Override { return { animate: { scale: 2, opacity: 0 }, transition: { duration: 5, ease: "linear", yoyo: Infinity}, } }
In all my years teaching designers how to code, setting up the development environment is the single most challenging step for new coders. Framer removes that barrier.
// Set up drag and constraints const data = Data({ isActive: false, }) // front export function CardFront(): Override { return { drag: "y", dragConstraints: { top: -790, bottom: 0 }, animate: { top: data.isActive ? 700 : 300 }, } } // back export function CardBack(): Override { const [animate, cycle] = useCycle({ top: 205 }, { top: 0 }) return { drag: "y", dragConstraints: { top: -200, bottom: 0 }, animate: animate, onTap() { cycle() data.isActive = !data.isActive }, } }
// Create a Lottie animated assets import Lottie from "react-lottie" import * as animationData from "./lottiefile" export function LottieFile() { return ( <Lottie options={{ loop: true, autoplay: true, animationData: animationData, }} size={"100%"} /> ) }
React Hooks is the new way to write stateful components with the simplicity of stateless components. In other words, your code will be shorter and more beautiful.
// Persistent data between components fetch("https://uinames.com/api/?ext") .then(response => response.json()) .then(response => { setState(response.name + " " + response.surname) setRegion(response.region) localStorage.setItem("photo", response.photo) })
What you’ll design and code
All design and code files are shared so that you can learn at any skill level. Learn to design, prototype and build an app from scratch. This course is entirely free.