Figma#6：Auto Layout自动布局

已于 2023-10-22 22:03:17 修改
阅读量3.6k 收藏 2
点赞数
分类专栏： UI # Figma 文章标签： ui
于 2022-01-22 21:23:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62428841/article/details/122635312
版权
本文详细介绍了Figma的Auto Layout功能，包括如何创建自动布局、自动填充frame、创建有内容的布局、对齐与间距设置、边距调整以及Resizing选项。通过实例展示了Auto Layout在设计过程中的实用性和灵活性，帮助设计师更好地理解和运用这一强大的工具。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

参考视频：【Figma教程】保姆级教程，全网最简单易学的Figma教程08-Auto Layout 自动布局 弹性布局_哔哩哔哩_bilibiliicon-default.png?t=N7T8https://www.bilibili.com/video/BV1cZ4y1F7YxFigma 超级功能：Auto Layout 3.0 教学已就绪 大家随我冲！！！_哔哩哔哩_bilibiliicon-default.png?t=N7T8https://www.bilibili.com/video/BV1Uv411r7iD/?spm_id_from=333.788.recommend_more_video.3

目录

1 创建Auto Layout

2 自动填充frame 

3 ☆创建有内容的自动布局

4 对齐与间距

5 边距 

5.1 数值设置

5.2 内轮廓

5.1.1 Space Between

6 Resizing

1 创建Auto Layout

选中想要规划进某个Frame的图形，并摁住shift + A，就绘制了一个Auto Layout版的Frame。

在常规的Frame里点击Auto Layout的选项也可以转换成Auto Layout的模式。

2 自动填充frame 

如果背景形状的大小不能包裹住组件的话，创建Auto layout时会出现一些小问题。

最低0.47元/天 解锁文章
Figma#7：布局
weixin_62428841的博客
01-22 4669
参考视频：【Figma教程】保姆级教程，全网最简单易学的Figma教程08-Auto Layout 自动布局 弹性布局_哔哩哔哩_bilibili。
Figma Auto Layout（自动布局）内部元素单独自定义间距
Pinton_Tech的博客
06-15 8472
Figma自动布局是个非常好用的功能，但是它只能设定统一的
【Figma学习】之Auto Layout自动布局
weixin_44849501的博客
02-20 1609
学习资源：B站博主"设计师凯文CreativeKev"，下面每一节均放置学习视频链接。
Modern Auto Layout
04-21
Awesome tutorial on ios Autolayout and UI design for all devices
EDA软件：Cadence Virtuoso二次开发_（17）.-自动布局与布线
最新发布
2401_87715305的博客
04-18 984
Cadence Virtuoso提供了多种自动布局与布线工具，其中最常用的是Virtuoso Layout Suite和Virtuoso Analog Design Environment (ADE)。这些工具可以帮助设计者在不同的设计阶段进行自动布局与布线，从而提高设计效率和质量。在进行自动布局之前，需要定义布局区域。布局区域是指电路元件可以放置的区域，通常是一个矩形框。定义布局区域的步骤如下：在布局编辑器中，选择EditArea。在弹出的对话框中，选择布局区域的左下角和右上角坐标。点击OK。
figma-autolayout专题
基本无害的博客
03-23 1267
fill就是填满，就是让元素跟着父元素走，比如原来子元素是超出外框的，给子元素一个fill,它就收进来了。1.如果是给一个形状，shift+a，autolayout 则形状是子元素，还有一个frame父元素。用栅格自动处理除不尽的问题，自动计算间距，只要375把两边边距留好，中间间距留好，位置约束好即可。hug:跟着内容走，内容大就大，被撑起来，默认就是这种状态，对应前端里的box默认状态。HUG:指向子元素，跟着里面内容走，内容变大，frame就变大，没有子元素就没有HUG。
IOS 6 自动布局 入门－1
11-18 719
来自Ray：恭喜各位！你们已经通过宣传ios feast提前解锁了第一个有关IOS6的教程。 目前这份教程只是我们的新书iOS 6 By Tutorials里面某个章节的精简版。这份教程由同样著作过iOS Apprentice Series 的Matthijs Hollemans 完成，开始体验吧！ 这份教程由IOS 教程小组的组员 Matthijs Hollemans
掌握 Figma 的自动布局，轻松设计 - 简化指南！
2301_79599164的博客
11-08 635
自推出以来，Figma的创新一直受到国内外众多UI设计师的关注，包括在推动设计团队开展高效设计工作方面，Figma推出了自动布局等创新功能。除此之外，即时设计还支持选中已设置自动布局的画板或分组，在右侧面板中，点击切换「纵向布局」或「横向布局」，手动修改【间距】【上下边距】【左右边距】的数值，让容器内所有小框按照你希望的间距排列。选中按钮画板，按快捷键Shift+A，或右键单击按钮，在下拉菜单选择添加Figma自动布局，或从设计面板中添加Figma自动布局，这样按钮的尺寸会随着文本的增减而扩展和收缩。
AutoLayout
weixin_41787495的博客
07-25 692
//屏幕适配AutoLayout //1、添加依赖 implementation 'com.zhy:autolayout:1.4.3' //2、在清单文件中注明你要设计的初始屏幕尺寸 <meta-data android:name="design_width" android:value="1080" /> <meta-data android:name="design_heig...
(源码)基于Figma的自动布局转化插件.zip
03-17
由于Figma的Auto Layout布局与CSS Flex联系紧密，理解Layout属性有助于设计转化为代码，但随着项目复杂度增加，手动转化代码繁琐，此插件便应运而生。 ## 项目的主要特性和功能 1. 自动转化自动解析Figma中的Auto ...
Figma实战教程：设计一个完整的应用界面
介绍Figma的基本概念和界面布局 ## 1.1 了解Figma设计工具的基本特性 Figma是一款强大的在线界面设计工具，具有以下基本特性： - 支持多人协作：多个设计师可以同时在同一设计文件上进行编辑和评论。 - 可视化...
16-Figma-自动布局
billycoder的专栏
01-22 3433
16-Figma-自动布局 常见操作 创建自动布局,shift+a 解除自动布局,属性面板操作或者alt+shift+a 自动布局加背景圆角,属性面板 自动布局内子元素新增,属性面板设置自动布局元素新增方向(水平或垂直),再ctrl+d 自动布局控制内边距,属性面板 自动布局控制项目间距,属性面板 自动布局设置大小,拖动或者属性面板 自动布局如何适应内容,属性面板操作 自动布局让子元素居中对齐,属性面板操作 自动布局如何设置等距模式,属性面板操作 改变自动布局宽高子组件固定高度调节宽度,属性面板操作 改变
Auto Layout 入门及使用
热门推荐
余书懿
09-05 1万+
拟题...
autolayout
qq_26036225的博客
09-05 283
AutoLayout是什么？ 使用一句Apple的官方定义的话 AutoLayout是一种基于约束的，描述性的布局系统。 每个UIView都会有自己的frame属性，来定义其在当前视图中的位置和尺寸。使用AutoLayout的话，就变为了使用约束条件来定义view的位置和尺寸 以前采用的Autoresizing Mask方式和AutoLayout 有什么区别？ AutoLayout可以...
利用figma实现自动布局，提升设计效率
七小嗨少的博客
06-06 988
在进行产品设计时，有许多软件工具可供使用。多年来，该行业的发展经历了许多软件的迭代，从最初的photoshop，到sketch，再到今天的figma。这些软件工具使我们的设计非常方便。今天，让我们与大家分享一下自动布局，这是最流行的产品设计工具figma的核心功能之一。1.自动布局是什么。在IOS规范中，Autolayout是一种开发工具，用于构建自适应界面。通过自动布局，您可以定义管理应用程序内容的规则（称为约束）。Figma中的自动布局是指在增加或减少子集元素时，当子集元素的大小发生变化时，子集元素可以
figma button_figma中的自动布局组件
weixin_26715991的博客
08-30 1727
figma buttonI’m a big fan of atomic design because it works well for designers, and it brings us closer to the approach that front-end developers use in their work. While we use the same approach, we ...
WWDC 2012 Session笔记——AutoLayout（自动布局）入门
dean19900504的专栏
09-22 1879
这是WWDC2012笔记系列中的一篇，完整的笔记列表可以参看这里。如果您是首次来到本站，也许您会有兴趣通过RSS的方式订阅本站。 AutoLayout在去年的WWDC上被引入Cocoa，而在今年的WWDC上，Apple不惜花费了三个Session的前所未见的篇幅来详细地向开发者讲解AutoLayout在iOS上的应用，是由起原因的：iPhone5的屏幕将变为4寸，开发者即将面临为不同尺寸屏幕进
12. Auto Layout 自动布局
编程是一门实践技术
10-30 1398
本文主要介绍了 UI 设计中的 AutoLayout，包括自动布局的目的、计算公式、Xcode 布局工具、布局属性、示例以及编码实现等内容。AutoLayout 是一种用于 UI 设计的技术，主要用于窗口尺寸变化或屏幕翻转后的元素自适应。其目的是为了适配不同大小屏幕，通过约束关系来确定父子视图之间、相邻视图之间的相对位置关系。与传统布局以坐标原点为基点不同，自动布局以元素与元素视图的位置为基础自动计算当前元素的尺寸。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值