Figma Auto Layout(自动布局)内部元素单独自定义间距

用户头像
中国/设计爱好者/6年前/2673浏览
Figma Auto Layout(自动布局)内部元素单独自定义间距
用户头像
Bin_M

介绍 Figma 软件中的自动布局(Auto Layout)如何实现具有高度灵活性的弹窗,向大家展示如何分别定制不同元素间的距离。

Figma自动布局是个非常好用的功能,但是它提供的调整属性只能设定统一的上下边距、左右边距、元素间边距。很显然直接使用这些参数来调整设计稿所能应用的范围是非常有限的。官方文档和例子中所演示的都是非常简单的情况,比如它所演示的弹窗,三行元素间的间距相等,这在现实的使用时适用性太差,估计也就能用在列表上。

如果我们想在一个弹窗的设计中使用自动布局怎么办?如下图中不同元素之间的距离不同,我们需要一些替代性的操作。

我们使用完全透明的矩形放到自动布局组中即可实现需要的效果,而且不会影响开发视角。当需要调整两个元素间的距离时,调整该矩形高度即可。

有更好的方法或者问题请在评论区留言。本文同步发布于CSDN博客Figma Auto Layout(自动布局)内部元素单独自定义间距

6
举报
|
8
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
3D渐变流体抽象矢量UI背景图
智能家居中心 简约 UI设计组件库
UI通用设计素材1
新能源APP应用UIKit
钱包ui模板
高级感金属拟物 UI设计组件库
【新年UI图标】珠宝icon
户外旅行飞机情侣假日出行
手表表盘UI系列
【新年UI图标】礼物/活动icon
拟物风质感写实UI卡片合集源文件
【新年UI图标】活动icon
高级表盘系列UI源文件
【新年UI图标】影音icon
UI界面 组件
UI 登录界面设计模板包
科技医疗透明柜UI界面设计
我的钱包-UI界面设计-app
【新年UI图标】体育icon
【新年UI图标】30个图标
APP/小程序商业项目UI模板|99个高保真UI+79个原型
新拟态风格 UI设计组件库
盲盒APP UI设计
【新年UI图标】积分icon
你可能喜欢
相关收藏夹
大家都在看
登录注册