属性

给你的元素设置尺寸、圆角、填充色、投影等等属性,或者使用对齐工具和真实模拟来使元素具有响应式特性。

在画布的右侧你可以看到一个属性面板。和其它设计工具一样,它包含所有可设置的图层样式属性。而其顶部是对齐工具,用它来智能对齐一系列图层。

Frames

在 Framer X 中有两种 Frame——画布级别的和嵌套的。画布级别的 Frame 用来绘制屏幕,它包含了一系列预置的设备尺寸,你还可以设置它的旋转方向等属性,默认为白色背景。

你可以在画布 Frame 中再添加一个 Frame,这就是嵌套的 Frame,它的背景是半透明的蓝色。

Frame 有四种属性:

  • 布局: 边界, 响应式模拟
  • 通用: 透明度、圆角、旋转角度等
  • 交互: 链接、代码
  • 样式: 填充色、投影、模糊等

文本

在 Framer X 中文本是一种具有特殊属性的图层。当你绘插入一个文本图层时,它会 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.

Resizing Text

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.

Styling 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

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

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

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

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.