血泪教训,当自动布局遇上组件,一定别踩这个坑!!(建议收藏)

当前位置:首页>设计文章>UI>血泪教训,当自动布局遇上组件,一定别踩这个坑!!(建议收藏)

2021年的第 33篇原创文章

(figma系列第九篇)

距离2021年40篇原创目标还剩 7

搭建组件库的意义是帮你快速复用,而搭建自动布局化的组件库,就能完美结合组件和自动布局这两个功能的绝对优势,即能快速复用,又能大幅提升布局效率!

但是,要将这两个核心功能进行结合并去使用,并没有你想象得那么顺利。。
01一个可怕的误区
wuqv

先说一个90%以上的人都可能会存在的严重误区:单向不可逆误区
觉得要制作自动布局化的组件,必须先自动布局,再制作组件。
一旦先做了组件,如果后面要再自动布局,只能重新制作。
血泪教训,当自动布局遇上组件,一定别踩这个坑!!(建议收藏)
这是个非常、非常可怕的误区,因为一旦形成这样的认知,那么以往所有未进行自动布局的组件,你都需要重新花费第二份时间重新制作!!
我就是一个鲜活的例子。因为团队以往的组件库全部没有施加自动布局,我因为受制于这个错误认知,花了非常非常多的时间进行重新制作。
而当我发现组件和自动布局这两个步骤完全可逆时,我笑的像个傻子。
总之,要制作自动布局化的组件,并不需要遵循组件和自动布局的先后顺序。你既可以先自动布局再组件化,又可以先组件化再自动布局!!
那么问题来了。
02如何对组件创建自动布局?
auto layout in component

很简单,选中组件,直接shift+A就行了!
而且,如果你看过6000字超干干货】没搞定这个概念,figma就真的白用了!→,应该知道只有frame才能组件化或者自动布局。所以不论我们创建组件,还是创建自动布局,当前对象会全部加入frame这个父级进行包裹。
但是,如果当前对象已经拥有了frame这个父级,那么创建组件或自动布局时,将直接以这个frame父级为底,新加组件或自动布局的属性,而不会额外给你嵌套。
比如这个尚未进行组件化的按钮,制作组件后并没有额外新增嵌套的父级。
血泪教训,当自动布局遇上组件,一定别踩这个坑!!(建议收藏)
再比如这是个尚未进行自动布局的按钮组件,我们选中它施加一层自动布局。
你会发现组件同样没有被额外施加父级,而原父级也没有任何改变。但你瞅下右侧栏,就会看见多出来一块auto layout面板。
血泪教训,当自动布局遇上组件,一定别踩这个坑!!(建议收藏)
正是因为这样,所有自动布局后的组件,都能完美实现自动布局的所有功能。但,也仅限于「组件」而已。
03实例与自动布局
instance and auto layout

看过自动布局系列开启,先献上一套保姆级教学(建议收藏)的朋友,应该都了解,一旦设定好了自动布局规则,那么在进行增减、拉伸和调序这些操作时,父、子级都会基于规则进行帅到爆的自适应变化。
但是!!一旦自动布局好的元素做成了组件,由组件拷贝而来的实例在自动布局下会存在很多限制。
以这个自动布局化的卡片实例为例,我们看看它不能干啥?

1.实例无法调序

实例中无法实现顺序的调换。
血泪教训,当自动布局遇上组件,一定别踩这个坑!!(建议收藏)

2.实例无法增加对象

实例中无法拷贝或者新增对象,就算你强行这么做,你会发现新增的对象都会跑到实例父级的外部。
血泪教训,当自动布局遇上组件,一定别踩这个坑!!(建议收藏)

3.实例无法拉伸

比如头像、图片以及文本框,都是无法像之前那样自由拉伸的。
血泪教训,当自动布局遇上组件,一定别踩这个坑!!(建议收藏)
那么实例能干啥呢?

1.实例可以「删除」

任意的元素,都可以直接del「删除」。为什么标引号,是因为即便你del删掉了某个对象,但是实例中其实会以隐藏的形式来让它消失。这一点其实很友好,能避免我们误删了某个元素后无法恢复。
血泪教训,当自动布局遇上组件,一定别踩这个坑!!(建议收藏)

2.实例可以增减文本

即便是实例,自动布局的文本自适应规则依然适用,这一点很棒。
血泪教训,当自动布局遇上组件,一定别踩这个坑!!(建议收藏)
血泪教训,当自动布局遇上组件,一定别踩这个坑!!(建议收藏)

3.实例可以动态响应

上一篇文章已经讲过,只要对头像外的所有子级设置fill container剧本,子级就会跟随父级实现动态响应。在实例中,这个原则同样适用。
血泪教训,当自动布局遇上组件,一定别踩这个坑!!(建议收藏)
可以看到,figma为了保证主组件的绝对地位,因此在实例中杜绝了所有页面布局的改动(更改位置、增加对象、元素拉伸),但在布局固定的前提下允许内容的diy和整体布局的响应(隐藏对象、文本变更和动态响应)。
这允许我们在有限的组件数量之下,能通过多个不同的实例来覆盖多状态、多场景的情形。
比如,我们基于这个卡片组件,就能通过其实例延展出各个状态的情形,最后组合为一个更真实、合理的feed流视觉稿。
血泪教训,当自动布局遇上组件,一定别踩这个坑!!(建议收藏)

最后


我们再来总结下~
1.制作自动布局化的组件,并不需要遵循组件和自动布局的先后顺序。你既可以先自动布局再组件化,又可以先组件化再自动布局!
2.shift+A即可对组件创建自动布局,并且不会再新增一层父级
3.实例无法改动布局(更改位置、增加对象、元素拉伸),但在布局固定的前提下允许内容的diy和整体布局的响应(隐藏对象、文本变更和动态响应)

今天的分享就到这里。原创不易,如果这篇文章对你产生了些许帮助,欢迎点个「在看」,支持我原创的同时也让它帮助到更多的小伙伴。

我是Andrew,一个将写作当成事业的设计师。

下期见。


/ 我的其他文章,希望你能喜欢 /

 

 

 

血泪教训,当自动布局遇上组件,一定别踩这个坑!!(建议收藏)


今天,是我在设计日记的第589天,也是正式成为签约设计师的第21天。这将近1年半的时间,我收获到比我想象的要多得多。不论是学习方法、思维认知、副业变现还是晋升收入等等,都因为设计日记而获得了极大的突破成长。

如果你希望能有一群人陪着你一起学习,希望结交更多的人脉好友,希望认识本地的同行,希望能参与21天打卡,希望在明年实现撕裂式的突破成长,希望少走那些你本不应该走的弯路,那么欢迎加入设计日记和我做同学。扫我来了解这个宝藏社区~知无不言言无不尽——

血泪教训,当自动布局遇上组件,一定别踩这个坑!!(建议收藏)
温馨提示:

文章标题:血泪教训,当自动布局遇上组件,一定别踩这个坑!!(建议收藏)

文章链接:https://www.uied.cn/16245.html

更新时间:2023年04月19日

本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
平面设计干货

【粉丝福利】500组创意满满的圣诞节海报,一次性打包安排给你啦!

2023-4-18 14:35:51

UI效率工具设计干货

为什么你收藏的东西总是从来不看?(深度好文)

2023-4-18 14:36:12

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索