Some of the information in these videos may be outdated. For more details, visit our Help Center.
Tour the UI
The UI in Framer Design will be familiar to anyone used to vector UI drawing on Macs. Here’s a quick tour around the UI to help you get acclimated to some important features.
Shapes and Frames
Shapes don't exactly behave like the layers you're used to. You can style them, edit their shape and apply boolean operations. Frames can be placed on the canvas or in other frames, all while we guess layout and hierarchy.
Shapes and Text
Framer’s vector drawing and text tools should be familiar to designers. Because Framer was built with responsive design in mind, it automatically adjusts layouts and objects accordingly.
Images and Effects
Adding images and enhancing UI with subtle effects is a big part of design. In this episode, we’ll focus on adding final touches with some album art, shadows, and a cool trick to fade layers.
Add Code to Design
To bring your designs to life, you’ll have to add some code. Thankfully, Framer makes this easy with Auto-Code, though you can still free-form edit if you want to.
Share Your Prototype
Learn how to use Framer Cloud to upload and share your work with teammates and collaborators.
Build Layers in Code
Before doing more complex stuff, you’ll need to master building layers from scratch in Framer Code. This episode goes into the details of how to design in Code.
Layout with Loops
Using loops is typically shorter and more efficient than writing out every single layer. In this episode, you’ll use loops to rebuild your album stack from Design mode with code.
Arrays & Data
Arrays are useful constructs in any language, and in Framer it’s no different. You’ll put arrays to good use in this episode to populate your album stack with images.
Events to Looped Layers
Adding events to objects is pretty straightforward, but when those objects are in a loop, it gets a bit trickier. This time around, let’s add interaction to the album stack.
Functions & Code Reusability
Duplicating code is something to avoid no matter what you’re building, and functions are the first line of defense against that trap. In this episode, you’ll learn the basics of writing reusable Framer code.