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

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

相关推荐
TaoSense1 天前
AI芯片产品经理:算力革命的架构师
人工智能·产品经理
火火PM打怪中1 天前
产品经理岗位职责拆解
产品经理
产品经理独孤虾1 天前
人工智能大模型如何助力产品经理优化商品定价策略
人工智能·大模型·产品经理·电子商务·数字营销·智能营销·价格策略
阿星AI工作室3 天前
AI产品经理必看的大模型微调劝退指南丨实战笔记
人工智能·产品经理·ai编程
java攻城狮k3 天前
【跟着PMP学习项目管理】项目管理 之 成本管理知识点
经验分享·笔记·学习·产品经理
产品经理独孤虾3 天前
人工智能大模型如何助力电商产品经理打造高效的商品工业属性画像
人工智能·机器学习·ai·大模型·产品经理·商品画像·商品工业属性
DeepSeek大模型官方教程4 天前
NLP之文本纠错开源大模型:兼看语音大模型总结
大数据·人工智能·ai·自然语言处理·大模型·产品经理·大模型学习
AxureMost5 天前
Axure版ArcoDesign 组件库-免费版
产品经理·axure
梓贤Vigo6 天前
【Axure高保真原型】动态打字输入效果
交互·产品经理·axure·原型
梓贤Vigo6 天前
【Axure视频教程】大小图轮播
交互·产品经理·axure·原型·中继器