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 布局参数基本一致。

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

相关推荐
火火PM打怪中3 小时前
产品经理如何绘制服务蓝图(Service Blueprint)
大数据·产品经理
SickeyLee1 天前
解密独立页面数据:PV、UV、访问时长与跳出率的运营密码
产品经理
火火PM打怪中1 天前
产品经理笔试考试回忆集(2025湖南某国企)
产品经理
小严家3 天前
《硬件产品经理》第七章:产品开发流程之验证
嵌入式硬件·产品经理·智能硬件
三桥君4 天前
在AI应用中Prompt撰写重要却难掌握,‘理解模型与行业知识是关键’:提升迫在眉睫
人工智能·ai·系统架构·prompt·产品经理·三桥君
荣达5 天前
「CoT」巧思还是骗局?
前端·aigc·产品经理
产品经理独孤虾5 天前
GitHub Copilot:产品经理提升工作效率的AI助手
github·copilot·产品经理·原型设计·ai工具·效率提升·prd
产品经理独孤虾6 天前
如何利用AI大模型对已有创意进行评估,打造杀手级的广告创意
人工智能·大模型·aigc·产品经理·数字营销·智能营销·智能创意生成
TaoSense9 天前
AI芯片产品经理:算力革命的架构师
人工智能·产品经理
火火PM打怪中9 天前
产品经理岗位职责拆解
产品经理