Figma入门-自动布局

Figma入门-自动布局

前言

在之前的工作中,大家的原型图都是使用 Axure 制作的,印象中 Figma 一直是个专业设计软件。

最近,很多产品朋友告诉我,很多原型图都开始用Figma制作了,并且很多组件都是内置的,对各种原型图的制作极其友好,只需熟悉一下基本的操作即可上手。

所以我打算一探究竟,听说的终究是听说,自己上上手才是真的。

所以接下来的文章我打算记录从0开始上手 Figma 的过程。

本系列直接从实操开始,有所错漏或者操作错误,还请大家指正。

如果有更高效的使用方式,也欢迎交流。

本篇我们来讨论自动布局。

自动布局

我们先输入这样的一个文字组件

选中后 Shift+A 会对这个文字组件套上一个 frame 框,此时我们可以看到右边的自动布局设置。

我们将宽高都设置为适应。

我们将 direction 设置为向右的时候,可以看到如下效果:即所有的内部元素都向右排列

此时,当我们尝试复制里面的元素的时候,就会出现如下情况:

最终自动地顺序往下排列

拖住中间的间隔框,我们可以很容易地修改他们之间的间隔。

我们也可以拖动其中的一个元素,可以很轻松地交换他们的位置。

到这里,已经可以看出这个自动布局,跟 cssflex 布局非常相似。

几乎的参数都是可以一一对应的。

当然属性肯定是没有 css 的全面的,不过在这种场景下也足够使用。

和 flex 对比

主轴方向(flex-direction)

Figma : 通过设置 布局网格 中的 对齐分布 属性来控制。
CSS : flex-direction 属性控制主轴方向,可以设置为 rowrow-reversecolumncolumn-reverse

换行(flex-wrap)

Figma : 在 布局网格 中,可以通过设置 包装 属性来控制是否允许内容换行。
CSS : flex-wrap 属性控制是否换行,可以设置为 nowrapwrapwrap-reverse

主轴对齐(justify-content)

Figma : 在 布局网格 中,可以通过设置 对齐 属性来控制项目在主轴上的对齐方式。
CSS : justify-content 属性定义项目在主轴上的对齐方式,可以设置为 flex-startflex-endcenterspace-betweenspace-around

交叉轴对齐(align-items)

Figma : 在 布局网格 中,可以通过设置 对齐 属性来控制项目在交叉轴上的对齐方式。
CSS : align-items 属性定义项目在交叉轴上的对齐方式,可以设置为 flex-startflex-endcenterbaselinestretch

多行对齐(align-content)

Figma : 在 布局网格 中,可以通过设置 分布 属性来控制多行内容在交叉轴上的分布方式。
CSS : align-content 属性定义多根轴线的对齐方式,可以设置为 flex-startflex-endcenterspace-betweenspace-aroundstretch

间距(gap)

Figma : 可以通过设置 布局网格 中的 间隙 属性来控制项目之间的间距。
CSS : gaprow-gapcolumn-gap 属性控制项目之间的间距。

总结

如果对前端比较熟悉的同学,可以很快的理解这个自动布局的各种操作,基本上就是 flex布局 的使用方式。

里面的参数设置,跟 cssflex 布局参数基本一致。

-- 欢迎点赞、关注、转发、收藏【我码玄黄】,各大平台同名。

相关推荐
猴哥聊项目管理20 小时前
2025免费8大项目管理替代工具测评(敏捷/瀑布/跨平台适配性)
人工智能·项目管理·产品经理·项目经理·项目管理工具·项目管理软件·企业管理
阿豪31 天前
2025 年职场转行突围:除实习外,这些硬核证书让你的简历脱颖而出(纯经验分享)
大数据·人工智能·经验分享·科技·信息可视化·产品经理
qq7798233402 天前
PMP考试学习计划与知识大纲
学习·产品经理
产品研究员2 天前
AI智能体管理后台原型拆解:5大核心模块+模版分享
aigc·agent·产品经理
hikktn2 天前
Figma Make 输入指令浏览器无响应
figma
姜姜姜姜名字都有4 天前
001-003 产品经理-ML应用构建-ML应用范围
产品经理
2501_928094655 天前
Axure RP 9 Mac 交互原型设计
交互·axure·原型设计
姚瑞南7 天前
【AI产品思路】AI 原型设计工具横评:产品经理视角下的 v0、Bolt 与 Lovable
人工智能·经验分享·笔记·aigc·产品经理
向上的车轮7 天前
从9.3大阅兵看,产品经理要如何深度打造产品特性?
产品经理
你好~每一天7 天前
2025年B端产品经理进阶指南:掌握这些计算机专业技能,决胜职场!
java·人工智能·经验分享·学习·产品经理·大学生