相关推荐
您可能对下面课程感兴趣
Figma之UIUX项目交互教程

58小节已有3457人学过

UI设计之Figma系列教程

120小节已有22740人学过

Figma Design 中的框架
发布时间:2025-01-16 11:22 [ 我要自学网原创 ] 发布人: 快乐小女 阅读: 2975

Figma 中,您可以直接将图层添加到画布。如果您针对特定设备或屏幕尺寸进行设计,则可能需要为设计创建一个容器。这时框架就派上用场了。


如果您以前使用过设计工具,那么您一定对画板很熟悉。与画板一样,画框允许您选择画布上的某个区域来创作设计。

与传统画板不同的是,您还可以将框架嵌套在其他框架中。这样可以创建更复杂的协同设计。

框架还使您能够访问额外的功能,例如布局网格,自动布局,约束和原型设计。


创建框架

使用框架工具在画布中创建框架。有几种方法可以选择框架工具:

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


然后您可以在画布中创建各种尺寸的框架:

单击画布以创建尺寸为 100 x 100 的默认框架单击并拖动画布以创建具有自定义尺寸的框架使用右侧边栏的下拉菜单选择框架预设。选择流行设备和资产模板的预设:电话药片桌面推介会手表纸社交媒体Figma 社区档案单击箭头展开该部分并从列表中选择一个预设。通过以下方式识别框架在图层面板中。


提示!您还可以在现有对象周围创建框架,无论是单个图层还是选定的图层。使用框架选择键盘快捷键:

苹果OptionCommandG窗户Ctrl++AltG提示:您可以交出框架进行开发,而无需重新组织文件。为框架创建一个部分,或将框架转换为部分。然后,将该部分标记为Ready for dev


框架属性

框架具有一些相关属性。框架支持以下属性。

圆角半径:将框架的角弄圆,以创建更柔和的边缘。剪辑内容:隐藏框架内超出框架边界的任何对象。布局网格:创建指南来帮助您的设计形成视觉结构。自动布局:创建响应其内容的动态框架填充:将实心填充、渐变、图像(PNG、JPEG、GIF、TIFF 和 WEBP)应用于框架。描边:向框架添加描边以创建边框或轮廓效果:为框架添加阴影或模糊


额外功能

框架允许您访问 Figma 中的额外功能。您需要使用框架来使用以下特性或功能:


布局网格:将透明网格、列和/或行应用于框架以提供视觉结构约束:定义调整框架大小时子对象的响应方式。对框架内的对象应用约束。自动布局:向框架添加自动布局,以创建响应其内容的动态布局原型设计:创建在画布中的框架之间移动的交互式原型框架是对象。这意味着它可以控制或影响您放置在其中的任何子对象。


了解有关 Figma 中父/子关系的更多信息 →

调整框架的属性

以前,选择框架时可以调整子对象的属性。现在,您可以调整框架本身的属性。


使用键盘快捷键选择一个子对象:或。EnterReturn按下Tab键来选择下一个兄弟。按Shift+Tab选择上一个同级。按Shift+Enter选择父级如果您想调整框架及其子框架的填充和描边属性,您可以使用选择颜色来查看或调整混合选择中的颜色。


将框架嵌套在其他框架中

Figma 中,你可以在其他框架内创建框架。我们将此过程称为嵌套。这允许你将具有不同属性的框架组合在一起以构建复杂的界面。

这将创建新的层次结构或关系:


顶级框架:任何直接位于画布上的框架。如果某个框架是顶级框架,则不能将其嵌套在另一个框架、组或对象中嵌套框架:任何放置在另一个框架内的框架。您可以将框架放置在顶层框架内,也可以放置在其他嵌套框架内。嵌套框架既是父框架又是子框架子项:框架内的任何对象了解更多关于父母、子女和兄弟姐妹关系


顶层框架

Figma在图层面板中以粗体显示顶层框架,并显示画布上任何顶层框架的名称。


嵌套框架

嵌套框架是放置在另一个框架或对象内的框架。这使它们既是父框架又是子框架。您可以将框架放置在以下框架内:


顶层框架其他嵌套框架团体在下面的示例中,每个元素都在自己的框架中。顶部有一个状态栏,底部有一个导航菜单。我们还有一张卡片,其中包含我们即将购买的门票的详细信息。

使用我们的设备预设之一,我们可以为元素创建顶层框架。我们可以将元素添加到顶层框架,以在我们的移动应用中构建单个屏幕。


调整框架大小

您可以像与画布上的其他对象一样与框架进行交互,包括更改框架的大小或比例。有几种方法可以更改框架的大小:

拖动框架

拖动以手动调整框架大小。


选择画布中的框架,或左侧边栏中的图层面板。单击其中一个角上的手柄并拖动以调整大小。或者,单击其中一个边缘并拖动。提示!要忽略对子对象的任何约束,请按住修饰键:

苹果:Command视窗:Ctrl


更改帧预设

选择另一个框架预设来更改框架的大小。

选择框架。在右侧栏的属性面板中,选择框架字段。从列表中选择一个预设。选择流行设备和资产模板的预设:电话药片桌面推介会手表纸社交媒体Figma 社区档案Figma 将更新您的框架的尺寸以匹配预设。注意:如果您对任何子对象应用了约束,Figma 将调整它们的大小以匹配新的框架预设。否则,框架内的对象将保持原始尺寸和位置。


属性面板

使用右侧边栏更新框架的宽度高度。

WH字段中输入新数字,或将鼠标悬停在图标上以清除字段。向左拖动以减少,向右拖动以增加。

切换宽度和高度旁边的链接按钮限制调整大小为当前比例。


提示:您可以使用尺寸字段进行计算。这允许您快速缩放或调整对象大小。

%百分比,例如 50%+添加,例如 +100-减去,例如 -20*乘法,例如 *4/除法,例如 /8无法将宽度或高度乘以百分比,例如*50% 将得出原始值的 50 倍,而不是 50%。


调整大小以适合

您可以调整框架的大小,使其缩小或增大以适合其子对象。这将重新绘制框架,使其围绕其中对象的最外层边界。

使用键盘快捷键:苹果:OptionShift CommandR视窗:AltShiftControlR点击在右侧边栏的布局部分


取消框架的分组

要取消组合框架,请选择该框架并按:

Mac:CommandShiftG或 CommandDeleteWindows:ControlShiftG或ControlBackspace

Figma之UIUX项目交互教程
我要自学网商城 ¥40 元
进入购买
文章评论
0 条评论 按热度排序 按时间排序 /350
遵守中华人民共和国的各项道德法规,
承担因您的行为而导致的法律责任,
本站有权保留或删除有争议评论。
参与本评论即表明您已经阅读并接受
上述条款。
V
特惠充值
联系客服
APP下载
官方微信
返回顶部
相关推荐
您可能对下面课程感兴趣
Figma之UIUX项目交互教程

58小节已有3457人学过

UI设计之Figma系列教程

120小节已有22740人学过

分类选择:
电脑办公 平面设计 室内设计 室外设计 机械设计 工业自动化 影视动画 程序开发 网页设计 会计课程 兴趣成长 AIGC