一、什么是框架

框架是Figma设计里的一个组织工具，里面能够容纳文字、图形、矢量图、照片等基础元素，也能包含群组，甚至可以插入其他框架。这些框架能够彼此组合，并且支持多次套娃式地堆叠起来。

画布上直接存在的框架称作表层框架，框架和其包含的物件构成上下级关联，框架内部的物件彼此构成并列关联。

大部分的设计工作都是在框架中完成。

框架有着自己独特的功能，如布局指南、自动布局、约束和原型。

二、框架与画板的区别

Figma里的“框架”和Adobe XD等软件中的“画板”，虽然都是承载设计内容的工具，但差别很大：框架可以无限层叠构建层级体系，能直接使用自动布局达成响应式效果，作为原型互动的关键部分可以处理多重关联，还能储存为组件以便在不同文件间共享和同步调整，是充满活力且机动的功能载体，非常契合模块化设计和团队合作模式；而常规画板多是固定大小的独立单元，不能包含其他画板，缺少内置的动态排布机制，互动特性比较简单且重用价值不高，更专注于单个页面的信息承载。

三、创建框架

01 选择框架工具

工具栏中选择框架工具，或使用快捷键F或A。

02 创建框架

点击画布

启用“框架”工具后，进行以下操作可以创建框架：

技巧：借助框架装置能够围绕已有图层生成框框。选定一个或若干图层，运用快捷键++G（苹果系统）或Ctrl+Alt+G（其他系统）。在画面里，直接拉拽鼠标选取目标图层，同样可以在图层周边制作框框。

使用预设框架

使用“框架”功能时，右侧栏能够选取主流设备与资源模板的规格，涵盖手机、平板电脑、笔记本电脑、台式计算机、电视、智能手表、纸质媒介以及社交平台等。

点击已存在的框架，在右边的区域找到现成的规格，能够把当前框架的规格调整成选定的规格。

复制现有框架

有两种方法可以复制现有框架：

当采用前述两种复制手段时，若结构存在于局部sketch up图标，该局部会自行改变体量来配合新置入的结构。

四、框架属性

圆角半径：圆角框架，以创建更柔和的边缘。

剪辑内容：隐藏超出框架边界的内容。

布局指南：通过布局指南帮助制定设计上的视觉结构。

自动布局：创建响应其内容的动态框架。

填充：将单色、渐变色、图像应用于框架。

描边：为框架添加描边，创建边框或轮廓。

效果：为框架添加阴影、模糊、噪点、纹理、玻璃等效果。

五、框架额外功能

排版规范要求运用辅助标尺，加入横向标线、纵向标线以及网状参考线，以此确立标准的视觉构造。

限制：决定子元素在框架尺寸变化时的适应模式，作用于子元素在框架中的具体方位。

自动布局：为框架添加自动布局，以创建响应内容的动态布局。

原型：创建交互式原型，让其在画布中的各个框架之间进行切换。

六、调整框架属性

选择框架

调整框架属性之前，首选选择目标框架，有以下几种选择方法：

调整框架及其子元素的填充和轮廓特征时，先选中框架，然后借助右侧面板中的色彩选项，能够检视并修正混合模式下的色彩搭配。

02 调整尺寸大小

调整大小尺寸时，如果需要无视子元素的限定条件，那么在拖曳期间必须同时按住某个按键或者Ctrl键。

03 更改预设框架

确定框架，前往右侧边栏的参数面板，挑选一个不同的方案框架来替换现有的框架。Figma备有各类常用设备与素材的预设规格供我们选用，大致涵盖：便携式通讯设备、平板电脑、便携式个人电脑、台式计算机、电视接收器、计时工具、纸质载体、社交网络平台等。选定之后，Figma会自动调整框架规格为所选方案的预设规格。

当对子项施加限制时，Figma会自行修正它们的位置以匹配更新的布局规范，而若未施加限制，框架内子项的位置和大小则不会发生变动。

04 调整布局

调整尺寸

在右侧的布局区域里，借助W和H参数能够调整框架的横纵尺寸。设定大小可以采取好几种途径：

提示：在宽度和高度这些输入栏里，能够运用加号减号星号和斜杠来实施数学计算sketch up图标，也可以输入百分数进行比例调整。注意，乘法运算和百分比符号不能同时采用，比如输入星号后跟百分号会出现错误，正确的做法是单独使用乘号或者单独使用百分号。

调整大小以适应内容

能够根据内部子元素的规模来改变边框的规格，Figma会自行进行尺寸的增减处理。它会围绕子元素的外围重新勾勒出边框的线条。

借助键盘组合键Shift加加号R键（苹果系统）或者Alt加Shift加Ctrl加R键（其他系统），又或者点开右边栏里布局属性那块儿，找到那个“改到合身大小”的标志。

七、顶层框架与嵌套框架

01 顶层框架

画布上直接呈现的框架，不允许置于其他框架，或部分、组之内

Figma在图层管理区用加粗方式标示最上层的结构框架，同时在绘图工作区呈现该结构框架的标题名称。

02 嵌套框架

一个框架若被置于另一框架之内，便称作嵌套框架，框架能够安放在最外层框架之中，亦能安放在其他框架里面，嵌套框架同时扮演着上级框架与下级框架的角色。

在下面的示例中，每个元素都被安置在自己的专属「框架」里：

利用我们提供的初始设置，操作一次就能为全部项目设定一个总容器。把顶部显示区、选择条目和入场凭证逐一放置到这个容器中，便可在手机程序的同一个画面里，迅速搭建出整体界面。

从最初不擅长设计界面，到后来能绘制基本界面，再到逐渐理解用户心理，我经历了十年的时间，如果你也在努力提升自己，可以关注我，我们一起进步会更快。

如有侵权请联系删除！