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

最新推荐文章于 2024-03-19 13:46:23 发布
最新推荐文章于 2024-03-19 13:46:23 发布
阅读量7.2k 收藏 2
点赞数
分类专栏： 设计 Figma 软件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pinton_tech/article/details/106696745
版权
设计 同时被 3 个专栏收录
5 篇文章 0 订阅
订阅专栏
软件
2 篇文章 0 订阅
订阅专栏
Figma
1 篇文章 0 订阅
订阅专栏

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

Figma 自动布局参数设定区

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

弹窗内的元素之间距离不同

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

图层列表树

有更好的方法或者问题请在评论区留言。本文章同步发表于站酷Figma Auto Layout（自动布局）内部元素单独自定义间距

Doke_Design
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
juuust-react-icon:使用 Figma 响应图标自动化
07-23
使用 Figma 的图标自动化工作流程 它是的存储库。 发展 在根目录中创建一个.env 。 将您的 Figma 文件 url 和 Figma 令牌放入其中。 FIGMA_FILE_URL=https://www.figma.com/file/********************/juuust-react-icon FIGMA_TOKEN=******************************** 获取SVG文件 运行yarn fetch从 Figma 文件中获取 SVG 文件。 这会将您的./src/svg/拉入./src/svg/ 。 为图标生成 React 组件 运行yarn generate以从 SVG 文件生成组件文件。 这会将您的组件文件拉入./src/icons/ 。 在当地发展 运行yarn dev来开发可以看到所有图标的应用程序。 在当地发展 运行yarn
掌握 Figma 的自动布局，轻松设计 - 简化指南！
2301_79599164的博客
11-08 201
自推出以来，Figma的创新一直受到国内外众多UI设计师的关注，包括在推动设计团队开展高效设计工作方面，Figma推出了自动布局等创新功能。除此之外，即时设计还支持选中已设置自动布局的画板或分组，在右侧面板中，点击切换「纵向布局」或「横向布局」，手动修改【间距】【上下边距】【左右边距】的数值，让容器内所有小框按照你希望的间距排列。选中按钮画板，按快捷键Shift+A，或右键单击按钮，在下拉菜单选择添加Figma自动布局，或从设计面板中添加Figma自动布局，这样按钮的尺寸会随着文本的增减而扩展和收缩。
Figma快速指南：3点核心技巧助你迅速掌握！
2301_79599164的博客
11-17 259
Figma确立了在线设计工具的形式，在国际上具有不可低估的影响力。Figma颠覆了传统的设计模式，不仅是为了设计师，也是为了设计本身。从产品经理到研究人员，从开发人员到营销人员，设计过程需要很多团队角色的参与，Figma可以说是所有参与角色的组织者。如何使用Figma也成为很多朋友关注的问题。然而，Figma并不是当地设计师的首选工具，尤其是最近有消息透露，Figma被Adobe以200亿美元收购，这确实让人感到不安全。
前端使用figma如何查看设计稿中元素的间距【解决记录】
最新发布
Fyhang_work的博客
03-19 674
省流:选中元素后按住alt键，鼠标移动到其他元素上就可以了。
walkthrough:Figma插件，可让您创建带注释的元素导览
04-30
演练Figma插件 通过任何元素选择创建引导流。 添加笔记并与他人共享您的演练。 在Figma社区上查看它并在此处安装： :
figma-inspect-element:Figma插件来检查元素
05-03
Figma插件-检查元素 这是一个自定义插件，旨在填补我们目前的移交流程中的特定空白。 未来的更新可能会使更多的受众受益。 安装 待审核
设计提效-Figma技巧篇
m0_73257876的博客
09-06 3483
触发器用于定义原型从一个框架到另一个框架的交互方式。你可以使用原型选项卡中的 Trigger 下拉列表进行设置。智能动画利用Figma内的智能动画，设计师可以轻松地做出丰富的动画效果，例如开关的切换、tab的平移、选择器的滑 动等。简单来说，设计师只需要制作开始帧和结束帧的设计稿，利用触发器将两者串联后，智能动画会帮助设计师补齐过程中发生的动画，你也可以在这个过程中选择 合适的动画曲线让你的动画更具表现力。弹性动画Config 2022的更新中，Figma为设计师专门提供了在原型转换中的弹性动画。
16-Figma-自动布局
billycoder的专栏
01-22 2730
16-Figma-自动布局 常见操作 创建自动布局,shift+a 解除自动布局,属性面板操作或者alt+shift+a 自动布局加背景圆角,属性面板 自动布局内子元素新增,属性面板设置自动布局元素新增方向(水平或垂直),再ctrl+d 自动布局控制内边距,属性面板 自动布局控制项目间距,属性面板 自动布局设置大小,拖动或者属性面板 自动布局如何适应内容,属性面板操作 自动布局让子元素居中对齐,属性面板操作 自动布局如何设置等距模式,属性面板操作 改变自动布局宽高子组件固定高度调节宽度,属性面板操作 改变
figma下载_不用担心Figma中的间距
weixin_26732881的博客
08-03 1760
figma下载 重点 (Top highlight)I spend way too much time caring about spacing when designing interfaces and building design systems. You are probably no stranger to the constant 1 px and 8 px nudging, cont...
想要用好figma，一定不要错过这几个技巧
七小嗨少的博客
08-26 2485
这个时候你调整高度没问题，但是如果你想调整整个宽度，你必须(水)垂)回调的问题就像一个洞，一旦出现，就要想办法补救，所以一开始就要想办法避免。在设计中，使用一些技巧，有时会用一半的努力得到两倍的结果。这里拿APP命名使用场景确定大类后，根据图标进行命名使用Tab来分小类，比如语雀的Tab栏：小记，文档，新闻，我的。问题很明显，调整高度(H)学位结束后，我们必须对齐调整，如果还觉得不够精致，就要重复前面的步骤。零件的命名方式就像一个圈子，一个陷阱，也许这里每个人的习惯都不一样，所以命名方式也会不一样。...
figma-remove-bg:自动删除图像背景
05-02
Figma Remove.bg插件 一键删除图像的背景（使用 ）。 用法 将其下载到Figma插件库 发展 首先克隆此存储库 git clone https://github.com/aaroniker/figma-remove-bg.git cd figma-remove-bg 安装依赖项和构建文件 npm install npm run build # Or watch: npm run dev 之后，在Figma Desktop中打开一个项目，选择Plugins-> Development-> New Plugin 。 单击Choose a manifest.json然后在此插件目录中找到manifest.json文件。 完毕！ 现在插件->开发->删除BG->运行/设置API密钥 去做 显示有关可用/已用积分的统计信息 更多选项，原尺寸 支持选择多个节点 作者 亚伦伊克
game-fig：在Figma内部运行的Gameboy模拟器！
02-05
游戏图 GameFig是一个Figma插件，可在Figma内部运行一个游戏男孩模拟器！ 游戏输出呈现为SVG，因此您可以随意缩放屏幕。 整个游戏状态都存储在Gameboy层内部，因此您可以复制和粘贴这些层以创建保存状态，甚至可以将它们粘贴在文件之间。 安装 GameFig尚未在Figma社区上发布，但是您可以在本地安装它。 首先克隆此存储库。 然后，您可以执行以下操作： git submodule init git submodule update npm install npm build 执照 麻省理工学院:copyright: 学分 从导出的Gameboy Svg
学习figma
qq_66740903的博客
06-27 4655
Figma是目前最流行的一款免费云端设计工具，常用于UI设计，Web设计，移动应用设计和交互设计等领域。下面介绍一些Figma的基本概念和使用方法。
figma button_您可能现在知道的figma提示和技巧
weixin_26715991的博客
08-30 2435
figma button 重点 (Top highlight) 忽略约束 (Ignore constraints) With constraints you can set items to stick to the left, right, or center of their parent frame — or to stretch. Constraints are one of the be...
Figma常用快捷键（Mac版）
热门推荐
SongD1114的博客
04-10 2万+
Figma常用快捷键（Mac版）
Mac系统怎样管理第三方字体
lls67889的博客
10-20 577
看到好看的字体总是会忍不住保存起来，总觉得哪天会用得着！不知不觉就多了！那么在Mac电脑中的第三方字体如何管理呢？Mac电脑中有一个专门管理Mac字体的应用程序，你不知道在哪？没关系，你可以使用快捷键组合【Alt+SpaceBar】，在搜索框内输入【字体册】即可！今天给大家分享的是如何删除Mac电脑中的第三方字体，有兴趣的朋友，请往下看！ 特别注意 系统自带字体不能删除 如何删除/停用Mac电脑中的字体？ 第一步：搜索到你想要删除的字体 第二步：右键这个字体，选择【移除XXX系列】或【停用XXX系列】，字
Figma用了那么久，怎么还在问标注和切图！
设计“1+2”，摹客就够了！
10-14 5094
推荐了那么久的Figma，居然每天都还有很多粉丝在私信里问我：用Figma交付要怎么做切图和标注呢？ 都是假粉吧！ 这事儿说过了，单靠Figma肯定不行，因为它得依托于外网，不用加速器读取效率就会很受限，所以还是得借助三方工具来发力。 而在今年年初捣鼓Figma的时候，我就找了一圈，发现只有它能上传Figma设计稿，实现切图和标注，就一直捆绑推荐到现在。而且不负所望，直到现在他们也是这一块做得最好，最稳定的一家。 “它”就是国内最早推出Figma插件的（也是我依旧推荐的）设计协作平台..
figma客户端_50 个 Figma 提示和技巧，让你设计时快如闪电
weixin_39725365的博客
11-30 2794
提示：更多资源文章可以访问我的 Figma 中文网：https://figmacn.com3…2…1！我整理了一些最新和最方便的 Figma 快捷方式和技巧，帮助你节省时间，让你设计快如闪电(译者注：不是《疯狂动物城[1]》里的闪电)。下面开始欣赏视频吧，看看有没有你不知道的。详细文字版：复制图层要复制图层，只需要选择图层并按住 Option(Windows 下是 Alt，下同) 拖动就...
figma怎么做响应式布局
06-10
4. 使用Figma的自动布局功能，如垂直和水平布局，来自动调整元素的位置和大小； 5. 在设计完成后，可以使用Figma的Prototype功能来预览和测试响应式布局效果，以及进行微调和优化。 总之，Figma提供了丰富的工具和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值