Style elements of your layers like size, radius, fill, multiple shadows, gradients and effects. Use the alignment tools and live simulation to accurately position layers for instant responsiveness.
On the right side of the design canvas, you’ll find a properties panel. Much like any other graphics tool, it contains all the tools you need to style the properties of a particular layer. At the top of the panel is a series of align tool options. Use them to smartly position your layers within the frame and in relation to each other.
There are two types of Frames in Framer X. Canvas-level frames and nested frames. Canvas-level frames behave like screens: you can select preset devices, customize its orientation and more. They get a white background color by default.
If you add another Frame within, it will get a semi-transparent blue background color. This is how you can differentiate nested Frames from canvas-level Frames.
There are four types of Frame properties:
- Layout: Constraints, Simulation
- Generic: Opacity, Radius, Rotation, etc
- Interactive: Link, Code
- Styling: Fill, Shadows, Blur, etc
In Framer, text is added as a layer with some smart properties of its own. A text layer will align logically based on where it is placed on the parent frame. For example, a text layer placed on the left side of a navigation bar will immediately left align and anchor there, no matter how the parent layer or frame is resized or scaled. You can alter the constraints of this automatic alignment at any time by selecting the text layer and using the positioning tool in the properties panel.
Text layers have two modes that affect their size: "Auto" and "Fixed". When set to "Auto", the width and height of the text layer will adjust acoording to the content and size of the text itself and can be adjusted via custom controls in the properties panel. When set to "Fixed", the size of the text box can be manually adjusted.
To view the styling properties of your layers, you can select one or more layers in the layer list or highlight them directly on your canvas. Framer contains all of the styling properties you would expect from a modern design tool.
Gradients in Framer are based on the CSS Model. This means our gradients are simple—an angle and two color stops. Resizing a layer will not impact the gradients because it will stay true to its angle and automatically adapt to the layer size.
Borders lets you add a border around any layer you create in Framer. You can control the color, width, and style of the border. Because Framer is web based, you’ll be able to set border styling and individual border size for the top, right, bottom, and left of the layer.
Multiple Shadows allow you to add more than one shadow to your desired layer. From outer to inner shadows, you can stack a combination of as many shadows as you want and customize them individually. Or right-click on any shadow and select Duplicate to speed up your workflow. In Framer X, you can even animate individual shadows.
Effects in Framer adds an extra set of styling capabilites, including blending modes to blend layers and colors, object blur to blur an entire object, or background blur to blur the layers behind it. There are also filters like Contrast, Grayscale, Hue Rotate, Invert, Saturate and Sepia, for enhanced photo editing.