16-Figma-自动布局

最新推荐文章于 2024-11-30 21:40:35 发布
原创 最新推荐文章于 2024-11-30 21:40:35 发布 · 3.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #css #html #figma

本文详细介绍Figma自动布局的操作方法，包括创建与解除自动布局、调整背景圆角、子元素新增方向、控制内边距与项目间距等。通过具体步骤说明如何让子元素居中对齐、设置等距模式及调节组件宽度和高度。

16-Figma-自动布局

常见操作

  • 创建自动布局,shift+a
  • 解除自动布局,属性面板操作或者alt+shift+a
  • 自动布局加背景圆角,属性面板
  • 自动布局内子元素新增,属性面板设置自动布局元素新增方向(水平或垂直),再ctrl+d
  • 自动布局控制内边距,属性面板
  • 自动布局控制项目间距,属性面板
  • 自动布局设置大小,拖动或者属性面板
  • 自动布局如何适应内容,属性面板操作
  • 自动布局让子元素居中对齐,属性面板操作
  • 自动布局如何设置等距模式,属性面板操作
  • 改变自动布局宽高子组件固定高度调节宽度,属性面板操作
  • 改变自动布局宽高子组件固定宽度调节高度,属性面板操作
  • 改变自动布局宽高子组件调节宽度和高度,属性面板操作

简单总结

  1. 需要有一个大图层管理里面的小图层
  2. 适应内容：根据文字数量变化自动调节
  3. 固定宽度：组件的宽度和高度固定
  4. 填充容器：根据外轮廓的大小变化，内部元素大小也随之改变

区别

  • frame和自动布局的相同点
    • 边框
    • 填充
    • 效果
  • frame和自动布局的不同点
    • frame
      • 裁剪
      • ​ 子组件约束
      • ​ 布局网格
    • ​ 自动布局
      • ​ 项目边距
      • ​ 内边距
      • ​ 子组件堆叠
      • ​ 子组件等距
      • ​ 水平垂直居中方便
      • ​ frame的背景可以自适应内容变化
      • ​ frame的子元素可以方便的调整顺序
【Figma学习】之Auto Layout自动布局
weixin_44849501的博客
02-20 3613
学习资源：B站博主"设计师凯文CreativeKev"，下面每一节均放置学习视频链接。
Figma#6：Auto Layout自动布局
weixin_62428841的博客
01-22 3859
参考视频：【Figma教程】保姆级教程，全网最简单易学的Figma教程08-Auto Layout 自动布局 弹性布局_哔哩哔哩_bilibiliFigma 超级功能：Auto Layout 3.0 教学已就绪 大家随我冲！！！_哔哩哔哩_bilibili。
单元格自适应宽度_Figma进阶干货，从零构建自适应组件
weixin_36276175的博客
01-11 2249
2020年11月份，Figma发布了全新的自动布局功能，这个超级棒的功能大大提升了设计效率，特别是对于一些重复性的组件，尤其有用。团队最近正好在着手AI Design的更新，本文主要分享我们平时在项目中使用自动布局的一些经验和方法，从0-1结合案例，详细讲解我们是如何使用Figma自动布局搭建自适应组件，希望这篇文章能够在实际工作中帮助到大家。以下分五个章节来叙述：自动布局是什么自动布局...
Figma入门-自动布局
我码玄黄的博客
11-30 1936
Figma原型图制作内置组件友好，自动布局类似CSS flex，通过布局网格控制对齐、分布、换行等，前端熟悉的同学易上手，参数设置基本一致。
利用figma实现自动布局，提升设计效率
七小嗨少的博客
06-06 1181
在进行产品设计时，有许多软件工具可供使用。多年来，该行业的发展经历了许多软件的迭代，从最初的photoshop，到sketch，再到今天的figma。这些软件工具使我们的设计非常方便。今天，让我们与大家分享一下自动布局，这是最流行的产品设计工具figma的核心功能之一。1.自动布局是什么。在IOS规范中，Autolayout是一种开发工具，用于构建自适应界面。通过自动布局，您可以定义管理应用程序内容的规则（称为约束）。Figma中的自动布局是指在增加或减少子集元素时，当子集元素的大小发生变化时，子集元素可以
掌握 Figma 的自动布局，轻松设计 - 简化指南！
2301_79599164的博客
11-08 972
自推出以来，Figma的创新一直受到国内外众多UI设计师的关注，包括在推动设计团队开展高效设计工作方面，Figma推出了自动布局等创新功能。除此之外，即时设计还支持选中已设置自动布局的画板或分组，在右侧面板中，点击切换「纵向布局」或「横向布局」，手动修改【间距】【上下边距】【左右边距】的数值，让容器内所有小框按照你希望的间距排列。选中按钮画板，按快捷键Shift+A，或右键单击按钮，在下拉菜单选择添加Figma自动布局，或从设计面板中添加Figma自动布局，这样按钮的尺寸会随着文本的增减而扩展和收缩。
设计提效-Figma技巧篇
m0_73257876的博客
09-06 4586
触发器用于定义原型从一个框架到另一个框架的交互方式。你可以使用原型选项卡中的 Trigger 下拉列表进行设置。智能动画利用Figma内的智能动画，设计师可以轻松地做出丰富的动画效果，例如开关的切换、tab的平移、选择器的滑 动等。简单来说，设计师只需要制作开始帧和结束帧的设计稿，利用触发器将两者串联后，智能动画会帮助设计师补齐过程中发生的动画，你也可以在这个过程中选择 合适的动画曲线让你的动画更具表现力。弹性动画Config 2022的更新中，Figma为设计师专门提供了在原型转换中的弹性动画。
practice-figma-1:与Figma一起练习
03-09
1. **Figma基础操作**：了解界面布局，学习创建、编辑和组织图层，以及如何使用基本的形状工具和文本工具。 2. **协作功能**：掌握实时协作的技巧，与团队成员共享文件，评论和反馈，以及版本控制。 3. **组件和库...
15-Figma-布局约束和栅格
billycoder的专栏
01-21 5300
15-Figma-布局约束和栅格 约束操作 拖动Frame,子组件缩放,子组件的默认约束就是缩放 拖动Frame,子组件保持在中间,选中所有子组件,然后在属性面板修改 拖动Frame,子组件保持在左边,选中所有子组件,然后在属性面板修改 拖动Frame,子组件保持在其他位置,选中所有子组件,然后在属性面板修改 约束案列 案列1 效果 左右拉伸Frame，图片不动，标题不动，描述文字拉升 实现 图片 约束 左 标题 约束 左 描述 约束 左右拉伸 案例2 效果 左右拉伸Frame，图片缩放，标题不
com-order-2:基于Figma布局的自适应跨浏览器SPA布局
04-19
"自适应跨浏览器SPA布局"意味着这个应用程序是一个单页面应用（SPA），它能够根据用户设备的屏幕尺寸自动调整布局，并且可以在多种不同的浏览器上正常工作，而不必针对每个浏览器单独进行优化。这里的关键技术包括...
figma-proportional-scale:Figma插件可轻松按比例调整所有其他属性的大小来调整形状的大小
05-12
Figma比例尺 通过按比例调整所有其他属性，轻松调整形状的大小。 安装 下载资料库 将存储库解压缩到figma-proportional-scale文件夹 转到Figma中的插件 滚动到“开发”部分，然后单击+图标 点击添加manifest.json 从文件夹figma-proportional-scale选择manifest.json文件 用法 打开任何Figma文件 在画布上选择一个形状。 按command + /并搜索“比例比例” 运行插件 command + shift + p立即重新运行插件 安装和贡献 克隆存储库： git clone https://github.com/madebyankur/figma-proportional-scale.git 转到目录： cd figma-proportional-scale 安装figplug： npm i -g fig
qr-figma-plugin: Vue.js与Tailwind打造的Figma QR码生成插件
7. Tailwind CSS：Tailwind CSS是一个功能类优先的CSS框架，它提供了一系列基础的工具类（utilities），用于设计和布局。Tailwind CSS的哲学是通过这些工具类快速构建定制的设计，而不是从零开始编写CSS。 8. Node....
Figma Auto Layout（自动布局）内部元素单独自定义间距
Pinton_Tech的博客
06-15 9031
Figma自动布局是个非常好用的功能，但是它只能设定统一的
Figma插件开发-原图尺寸
hufang360的专栏
11-30 2995
figma里并没有图像对象，图像其实是各种形状和文字上的填充，默认情况下导入一张图片，会自动创建一个矩形形状，并填充图像以及缩放到对应尺寸。实际使用时，会需要类似将多张图片缩放至2倍大小的需求，而其中部分图片在这之前已经被缩放过了，此时就必须知道原图的大小了。 在figma中可以找到原图的链接，用浏览器访问该链接，链接的标题（浏览器tab页的标题）会有尺寸信息，亦或是你想把这张图下载重新处理，这种方法也是有效的。 最近在研究figma的插件开发，由于不懂前端技术，学习起来挺吃力的，但好歹是做出来了。 插件
figma下载_不用担心Figma中的间距
weixin_26732881的博客
08-03 1971
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怎么测元素与元素直接的间距
奇点的博客
09-27 1306
只需要选中元素后再把鼠标移到另一个元素再按住alt键即可。
Figma基本操作
cc蒲公英的博客
08-08 3645
Figma基本操作
Figma-ui设计学习APP Store
qq_48150274的博客
07-01 925
打开标尺，设置左右内边距参考线（左21 右356），win:按住ctrl放大标尺。shift+R 显示或隐藏标尺。点击圆形框右击-插件-avadar 会自动插入图片。头像创建-快捷键：O，大小为4的倍数，32/28。按L键画条直线，修改颜色：0、0、90；添加投影：模糊40，y轴8，透明度15。打开浏览器安装扩展，解压加载进去即可。设置蒙版 ctrl+Alt+M。按R键，创建一个矩形，添加圆角。选择Chorme汉化版离线包。去社区安装插件：avatar。添加蒙版去除不需要的部分。
figma 基础使用 —— 常用方法
tengyuxin的博客
11-28 4901
分成两种方式（1）离线的包导入（iOS 常用组件.fig 直接拖拽到figma最近网页（2）在插件市场下载。
figma自动布局
最新发布
07-29
Figma 的自动布局功能是一种能够帮助设计师快速创建动态、响应式界面的强大工具。它通过智能排列和调整元素的方式，大大简化了设计过程，尤其是在需要频繁调整布局的情况下，例如按钮、卡片、列表等组件的设计。以下是 Figma 自动布局功能的使用指南： ### 1. 创建自动布局框架 在 Figma 中，可以通过选择多个对象并点击右键菜单中的“自动布局”（Auto Layout）来创建一个自动布局框架。一旦创建完成，所选对象将被包裹在一个具有自动排列功能的容器中。容器会根据其子元素的大小和间距自动调整尺寸[^1]。 ### 2. 调整子元素的对齐方式 自动布局框架支持多种对齐选项，包括主轴对齐（Main Axis Alignment）和交叉轴对齐（Cross Axis Alignment）。这些选项决定了子元素在容器内的排列方式。例如，可以选择“左对齐”、“居中”、“右对齐”或“均匀分布”等。 ### 3. 设置子元素之间的间距 自动布局框架允许设置子元素之间的固定间距。这可以通过在属性面板中输入一个具体的数值来实现。此外，Figma 还支持“均匀分布”模式，使子元素之间的间距自动调整以填满整个容器[^1]。 ### 4. 嵌套自动布局 Figma 支持嵌套自动布局框架，这意味着可以在一个自动布局容器中嵌套另一个自动布局容器。这种功能特别适合构建复杂的 UI 组件，例如带有图标和文本的按钮，或者包含多个子元素的卡片布局[^1]。 ### 5. 响应式设计 结合 Figma 的响应式布局功能，自动布局框架可以根据不同的屏幕尺寸进行调整。设计师可以使用约束（Constraints）功能来定义框架的缩放行为，例如固定宽度、高度或按比例缩放。此外，Figma 提供了“变体”（Variants）功能，允许设计师创建多个不同状态的组件，并根据需要切换[^2]。 ### 6. 与设计系统结合 自动布局功能可以与 Figma 的设计系统功能结合使用。例如，设计师可以创建基于自动布局的可复用组件，并在整个项目中重复使用这些组件。当组件的样式或布局发生变化时，所有实例都可以自动更新，从而确保设计的一致性[^3]。 ### 7. 开发协作 Figma 的自动布局功能不仅对设计师有用，还对前端开发人员提供了便利。开发人员可以直接在 Figma 中查看自动布局的结构，并通过 Figma 的开发者工具获取相关的代码示例。例如，Figma 的“开发”（Dev) 选项卡提供了 CSS、React Native 和 Swift 代码片段，帮助开发人员快速实现设计效果[^4]。 ### 示例代码：CSS 实现自动布局 ```css .auto-layout-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; } ``` ### 示例代码：React Native 实现自动布局 ```javascript const AutoLayoutContainer = () => { return ( <View style={{ flexDirection: &#39;row&#39;, justifyContent: &#39;space-between&#39;, alignItems: &#39;center&#39;, gap: 16 }}> {/* 子元素 */} </View> ); }; ``` ### 示例代码：Swift 实现自动布局 ```swift let stackView = UIStackView() stackView.axis = .horizontal stackView.distribution = .fillEqually stackView.alignment = .center stackView.spacing = 16 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值