设计 Design
Design 模式是响应式的，并且可以从头到尾完全在 Framer 中完成。Design 文档讲解了设计模式的界面和基础知识。
Framer 的设计界面和大部分图形设计软件一样，可以插入形状、文字等，属性面板调节属性，也都差不多。
image
和一般设计软件不同的是焦点、布局属性设置。因为最终目的是要实现交互设计的而不只是静态的展示，所以对于布局和层级结构有更智能的处理。支持相对定位和相对对齐模式（设计软件中的定位和对齐模式就是绝对模式），更多的支持响应式设计。
Design 模式可以独立使用，也可以和 Code 模式相结合使用，还可以用云协作和团队共同工作。具体怎么用看个人习惯。
画布
中间一大块灰色的空白的区域就是画布，画布上可以插入设备尺寸的画板。
Framer 设计模式提供了一个空白画布，可以直接在画布上绘制图像并插入图标，或设置一系列画板创建一个多屏幕应用程序流程。
不添加画板直接在画布上设计，那这些在画布上的图层都是没有父级的。把图层放置在x：0和y：0，切换到代码时，图层在预览窗口的左上角。直接在画布设计适和小的交互，复杂一些的需要用到画板，既然这样那就都用画板吧。
画板
画板实际上是自适应的，定义好图层的顺序、层级、位置、对齐方式，设计时需要考虑到其他尺寸的屏幕。
在 Framer 中，画板不再局限于固定的宽度和高度，他就是个容器，为了方便人类才显示成这样的，长啥样还是看人类选的哪个设备。而且因为是用的自用布局，所以还是可以随便该设备或大小，内容会按照适配规则去自己该去的地方。
点 Framer 左上角的画板图标就可以插画板了，快捷键A，右侧为显示常用设备尺寸供选择。。。。哎反正跟sketch一样啦。
图层
Framer 的块有各种形状和大小，甚至更好，图层响应周围的元素或环境，直观的适配响应布局和层级结构。
可以使用左侧栏工具包插入矩形、椭圆形、文字、图像和GIF。或者用快捷键：R = 长方形，T=文字。
但图层在 Framer 中远远不止只有样式，前面一直在强调的响应式设计，除了画板，图层也肯定是能支持响应式的，所以图层已经被编程为自动调节大小、层次结构、边界之类了。我们在布局部分再深入了解怎么使用。
除了典型的图层，Framer 还有支持GIF图。GIF图层和其他的图层一样并自动播放。
指向目标 Targeting
把设计模式中的图层同步到Code模式中，必须启用指向。只把需要的图层同步过去！保持代码整洁。
只有启用指向的图层会在代码模式中显示。
在图层面板上，点击要开启指向的图层右侧指向图标，然后输入一个本图层在Code模式中的名称。指向图标长成一个圆圈一个点的样子，悬停会显示文字“Rename to Target”。图层右侧的预览将显示在代码标签中调用的图层。
已开启了指向的图层名称旁会显示一个活动目标图层，删除或重命名目标对线，点击图层列表中的图层，选择“Delete Target” 或 “Rename Target ” 。
布局和层级 Layout & Hierarchy
Framer 满足响应式设计的需求
把图层放在画布里时，Framer 狠聪明的，能钩根据视觉位置来猜测层级结构，这里的顺序也会按照图层在层面板中的顺序进行说明。
以这种方式，画布上所有内容都将根据父子关系进行排序。
Framer 以这种方式自动猜测层次结构，所以不必再担心分组了。
- 每个画板都是一个父级
父级和子级 Parent & Child
了解这种关系很重要。如在矩形的内部放置一个圆圈，使得矩形成为圆的父级，圆是矩形的子级，任何放在矩形内的图层都将成为矩形的子级。以这种方式，画板可以是导航栏的父级，导航栏又可以是多个元素的父级，这些元素包括标题文本、电量、菜单图标等。
一旦这种层级关系成立，子级将始终继承父级的行为。如果改变父级尺寸或移动，子级图层也会有一样的变化。扩展多个屏幕尺寸时很方便的。
需要检查子级图层之间的对齐和间距？随时可以在图层面板中拖动和重新排序图层来调整层级结构。右键从层级结构中删除。
自动响应布局 Automatic Responsive Layouts
把图层放在画板中时，Framer 自动猜测布局规则，但需要你在不同的设备尺寸切换来检查。关于怎样设置布局规则在下面的 图层属性 中有详细说明。
图层列表的层级结构 Layer List Hierarchy
和设计软件不同，Framer 的设计模式不对图层分组。而是用上面说到的层级关系把图层链接在一起。相互见的层级关系体现在图层列表中。子级嵌在父级内在设计响应式布局设时更直观。
属性 Properties
图层元素样式，大小、半径、填充、阴影、不透明度等。对齐工具和实时模拟准确的锁定和解锁图层。
属性面板位于画布右侧，和设计软件一样，包含选中图层所有属性和工具。
画板属性 Artboard Properties
画板属性：填充颜色、大小、位置。要检查画板的响应是否理想，选中画板切换设备。
图层属性 Layer Properties
图层列表中选择一个或多个图层查看图层的属性，或直接在画布上高亮显示。Framer 的图层属性包含一般设计软件的图层属性，以及其他一些图层属性，如单个边框半径。
Framer 能根据图层的代销和位置控制图层行为，在下面的内容中将详细介绍每个高级功能，正确的使用这些功能可以超出想象力的强大。
图层定位 Layer Positioning
把新的图层放在其他图层上时(新图层就是其他图层的子级了)，Framer 可以自动识别位置并智能定位这个图层相对于父级或画板的锚点。这个功能提高了典型设计工作的流程和效率，如果需哟随时更改锚点，可以用属性面板中的定位工具手动更改（跟sketch和Hype中定位的差不多）。
如，在选项卡栏（父级）右侧放了一个菜单栏图层（子），Framer 自动猜测菜单栏应该相对于选项卡栏对齐。
调整图层尺寸 Layer Sizing
Framer 自动调整子级大小，以模拟父级的调整。
剪切蒙版图层 Layer Clipping
由于 Framer 是用层级关系而不是组，裁剪蒙版的处理方式有些不一样。需要给图层蒙版时，把子级放在父级的顶部，选中父级图层，在属性面板点击剪辑。
文本对齐属性 Text Alignment Properties
文本被定义为有一些智能属性的图层，文本将根据放在父级的位置进行逻辑对齐。
如，放在导航栏左侧的文本图层将立即对齐并锚定在那里，不管父级如何调整大小或缩放。
文本图层的属性可以随时在属性面板中调整。
调整文字大小 Resizing Text
可以更改文字和图层本身的大小，调整文本字段的大小将调整图层的约束大小。
附件功能 Additional Features
本节介绍设计模式中其他工具，可以在图层列表、画布、画板上右键打开这些功能入口。
Forward & Backward
快速给图层结构排序。选中图层点击 Forward 向上移动，Backward向下移动，向后移动图层时此图层的子级也会一起移动。
重复 Duplicate
把选中元素复制一个到画布上，包含属性和子级。复制的画板放在原来的画板右侧，复制的图层堆在原来的图层上。
删除 Delete
删除选中的图层或画板，包括子级。
从层级结构中删除 Delete from Hierarchy
要删除父级保留子级，选中父级右键点击 “Delete from Hierarchy” ，父级被删除，子级里的图层还在，但是变成了和原来父级同级的图层。
添加父级 Add Parent
选中两个或以上图层，右键点击“Add Parent”，将选中的图层组合在一起，并嵌在一个看不见的父级下。使用自动响应布局规则，这个两个图层将表现为单个实体，调父级大小不影响子级大小。
快捷键 Shortcuts
| 快捷键 | 工具 Tools | 快捷键 | 画布 Canvas |
|---|---|---|---|
| A | 画板d | Cmd 2 | 切换到代码模式 |
| R | 矩形 | Cmd + | 放大 |
| O | 椭圆 | Cmd - | 缩小 |
| T | 文字 | Cmd 0 | 实际尺寸 |
| Z | 缩放 | Cmd 1 | 画布居中 |
| - | - | 空格 拖 | ？ |
编辑 Editing
| 快捷键 | 名称 | 快捷键 | 名称 |
|---|---|---|---|
| Cmd 箭头 | 对象大小 | Alt 拖 | 重复 |
| Shift Cmd 箭头 | 以单位10缩放 | Alt Cmd C | 复制样式 |
| 0 - 9 | 改不透明度 | Alt Cmd V | 粘贴样式 |
| Alt | 显示距离 | Control C | 吸取颜色 |
| Cmd D | 重复 | Cmd A | 选中所有图层 |
排序 Arranging
| 快捷键 | 名称 | 快捷键 | 名称 |
|---|---|---|---|
| Alt Cmd ▲ | 上一层 | Alt Center | 插入父级（组） |
| Alt Cmd ▼ | 下一层 | Alt Del | 从结构删除 |
| Cmd ; | 隐藏 | Cmd L | 锁定选中 |
文本类型 Type
| 快捷键 | 名称 | 快捷键 | 名称 |
|---|---|---|---|
| Cmd B | 加粗 | Cmd I | 斜体 |
| Cmd U | 下划线 | Cmd T | 更换字体 |
导入 Importing
支持从Sketch、PS、Figma导入设计。
目前支持将设计导入代码模式中设置交互和动画。
切换到代码模式，打开设计文件，点击 Framer 左下角的 的Import按钮，然后会弹出一个窗口，选择要导入哪个文件，选择设计倍数。
选择图层 Select Layers
Framer 把设计文件中所有图层组转换为 Frame 中的图层组。在 Sketch 中给需要的图层编好组，在Framer 中通过查找组的名称选择图层（sketch 中没有包含在组内的图层不到导入到 Framer，也就是说 Framer 只能识别到组及组内内容，不能识别到单独的图层 ）。
导入成功后代码编辑器会自动添加下面的代码：
# 导了个叫 "design" 的sketch文件
sketch = Framer.Importer.load("imported/design@1x")
然后会加载所以的图层，默认情况下，文件以导入的应用程序命名，也可以重命名文件方面后面引用。
要选中已重命名为 layerA的图层，输入：
# 导了个叫 "design" 的sketch文件
sketch = Framer.Importer.load("imported/design@1x")
# 设置图层layerA的不透明度为50%
sketch.layerA.opacity = 0.5
放在图层组里的图层是子级图层，在下面的例子中，该组有连个子级，子级可以被直接选中，不需要考虑层次结构。
如果用的是Sketch，且不希望在 Framer 中选中子级，可以展平该组。
在组的名称后添加 * ，这个组就会变成一个单独的没有子级的图层， 要完全排除组，在名称后添加 -。
选中多个图层 Select Multiple Layers
选中多个图层用于一个动画要同时控制几个图层，或隐藏一个图层组。
使用 for-loop，选择所有导入的图层或特定的图层。
image.png
网友评论