Framer X is a design tool focused on interaction design. It’s perfect for responsive design because it can accurately guess the constraints for your layout. Everything’s built on Web frameworks, and most importantly, everything is code-based. There is a strong emphasis about Frames and Shapes that we need to understand right before we start designing.
Downloads
To follow this course, you’ll need the assets. You will also find the Framer X source files to compare against your own work.
Layout tool panel
You can easily create Frames, Shapes and interactions from the tool panel. It is divided in 4 parts, layout, interactive, drawing and canvas.
Frames
Frames are a versatile tool. They can be used for a number of containers including drop shadows, gradients and background blurs. More importantly, they can be turned into a component.
A frame is similar to an Artboard in Sketch, but with more flexibility. It can be used to create a button, card or a screen. Its properties can be modified to be rectangular or rounded, and it can also be nested inside other frames to create larger user interface components.