血泪教训，当自动布局遇上组件，一定别踩这个坑！！（建议收藏）
Andrew?
一位乐于学习和分享的设计师丨公众号：Andrew的设计笔记2023-04-18浏览 4191,785 字 · 约 6 分钟
…
2021年的第 33篇原创文章
（figma系列第九篇）
距离2021年40篇原创目标还剩 7篇
搭建组件库的意义是帮你快速复用，而搭建自动布局化的组件库，就能完美结合组件和自动布局这两个功能的绝对优势，即能快速复用，又能大幅提升布局效率！
但是，要将这两个核心功能进行结合并去使用，并没有你想象得那么顺利。。 01一个可怕的误区 wuqv先说一个90%以上的人都可能会存在的严重误区：单向不可逆误区。 觉得要制作自动布局化的组件，必须先自动布局，再制作组件。 一旦先做了组件，如果后面要再自动布局，只能重新制作。
很简单，选中组件，直接shift+A就行了！ 而且，如果你看过【6000字超干干货】没搞定这个概念，figma就真的白用了！→，应该知道只有frame才能组件化或者自动布局。所以不论我们创建组件，还是创建自动布局，当前对象会全部加入frame这个父级进行包裹。 但是，如果当前对象已经拥有了frame这个父级，那么创建组件或自动布局时，将直接以这个frame父级为底，新加组件或自动布局的属性，而不会额外给你嵌套。 比如这个尚未进行组件化的按钮，制作组件后并没有额外新增嵌套的父级。
看过自动布局系列开启，先献上一套保姆级教学（建议收藏）的朋友，应该都了解，一旦设定好了自动布局规则，那么在进行增减、拉伸和调序这些操作时，父、子级都会基于规则进行帅到爆的自适应变化。 但是！！一旦自动布局好的元素做成了组件，由组件拷贝而来的实例在自动布局下会存在很多限制。 以这个自动布局化的卡片实例为例，我们看看它不能干啥？
1.实例无法调序
实例中无法实现顺序的调换。
2.实例无法增加对象
实例中无法拷贝或者新增对象，就算你强行这么做，你会发现新增的对象都会跑到实例父级的外部。
3.实例无法拉伸
比如头像、图片以及文本框，都是无法像之前那样自由拉伸的。
1.实例可以「删除」
任意的元素，都可以直接del「删除」。为什么标引号，是因为即便你del删掉了某个对象，但是实例中其实会以隐藏的形式来让它消失。这一点其实很友好，能避免我们误删了某个元素后无法恢复。
2.实例可以增减文本
即便是实例，自动布局的文本自适应规则依然适用，这一点很棒。
3.实例可以动态响应
上一篇文章已经讲过，只要对头像外的所有子级设置fill container剧本，子级就会跟随父级实现动态响应。在实例中，这个原则同样适用。
最后
我们再来总结下~ 1.制作自动布局化的组件，并不需要遵循组件和自动布局的先后顺序。你既可以先自动布局再组件化，又可以先组件化再自动布局！ 2.shift+A即可对组件创建自动布局，并且不会再新增一层父级 3.实例无法改动布局（更改位置、增加对象、元素拉伸），但在布局固定的前提下允许内容的diy和整体布局的响应（隐藏对象、文本变更和动态响应）
今天的分享就到这里。原创不易，如果这篇文章对你产生了些许帮助，欢迎点个「在看」，支持我原创的同时也让它帮助到更多的小伙伴。
我是Andrew，一个将写作当成事业的设计师。
下期见。
/ 我的其他文章，希望你能喜欢 /
今天，是我在设计日记的第589天，也是正式成为签约设计师的第21天。这将近1年半的时间，我收获到比我想象的要多得多。不论是学习方法、思维认知、副业变现还是晋升收入等等，都因为设计日记而获得了极大的突破成长。
如果你希望能有一群人陪着你一起学习，希望结交更多的人脉好友，希望认识本地的同行，希望能参与21天打卡，希望在明年实现撕裂式的突破成长，希望少走那些你本不应该走的弯路，那么欢迎加入设计日记和我做同学。扫我来了解这个宝藏社区~知无不言言无不尽——
声明：本站所有文章，如无特殊说明或标注，均为本站作者原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。本文来自作者自媒体，不代表UIED观点和立场。 如若本站内容侵犯了原著者的合法权益，可联系我们进行处理以减少您的损失。
标签
评论 0
最新评论登录后发布评论并参与互动。
暂无评论，欢迎抢沙发。