SDDL & MTS

by Nic Cheung | Aug 20, 2022 | Uncategorized

Shop-e-e Distributed Data Layer & Marketplace Tech Service

Why Autolayout in Figma？

by Nic Cheung | Apr 20, 2020 | Uncategorized

除非你拥有前端知识，否则Autolayout是迄今为止设计师离前端开发者思维最接近的一次机会

除非你拥有前端知识，否则Autolayout是迄今为止设计师离前端开发者思维最接近

1，“autolayout，我为什么要用这个新功能呢，之前的component和group已经能满足我的需要了”“
因为他能为你节省2/3的时间，如果你认真实践一下他的话，当然你可以保持现状就像一年前你使用sketch那样使用figma，这真的只是各人的选择，
但只有用过的人才明白的道理，这就是个邪教，不信也不会怎样”，这会是个难忘的经历，就像换了新车，就像从雾霾的城市来到新加坡，当然这也不容易，万事开头难，n
、那就让我们从容易的开始吧。
2，“autolayout”的核心是auto，举个例子给我吧！给你一个按钮，这个很容易啊，好，那再给你一个呢？再多一个，多10个呢，自己创建那种恐怕就有点为难你了吧我觉得早就受够了每次手动摆放按钮，在每次修改文字内容的时候。比如像这个step by step的4 step。别好了伤疤忘了痛哦。
3，看来你的意思是说对于内容宽度不相同的部件，autolayout能完美准确的推开彼此，这真的是很不错，但是对于table这种复杂的庞然大物呢，他也能圣人吗？
“对，table这种物件就像是动物园里的大象，结构复杂，体型庞大，还经常被修改，你完全没法忽视它的存在，但是每次搬运它又要很小心，如果你想改变它一些内容，或者惹到她，那后果一定不是你想看到的”，那autolayout是个了解大象的驯兽师吗，他能灵巧不费力的改变这位重要的巨兽吗，。当然可以，请看，我们使用了component 复合体来制作了一个全新的table，关于更加厉害的table on autolayout，比如加上filter和漏斗的 title，我们可能需要下次单独聊聊。
4，说到component，现在它还是那么重要吗，我看到你的figma文件里面，并没大面积出现component啊，之前你可以是很爱她们的啊，到处都能看到紫色的component，现在怎么啦？这是为什么呢？
这是因为我是个很健忘的人，我用component做了一个tab button group，或者一个作为title的一大篇信息框，为了方便我把它做成了component，可过了3个星期，这个项目有重大更新，我在面对一个类似的页面，但内容不同的时候，我不记得当时这个component是否能再一次复用了，或者说我不知道原来的master object的改变是否要能影响到现在的这个新物件，或者只是个简单的clone体就够了，
你不能去通过那个蓝色link去看看他的parent master在哪儿，并进一步检查吗？当然可以，可那就像是个警察👮‍♀️追寻罪案的过程，我可不想去面对那个过程，项目可不等人啊，我们可不是来办案的！
嗯，是的，所以呢？。。。
所以我现在不用担心这个事情了，我搞清楚真相了。
什么真相，
我自己想要得到什么从component功能身上，那就是便捷。如果component让我的便捷降低了或者有所迟疑，那我就勇敢的打散component，顺便说一下，打散的快捷键是crt+ shift+G，因为我们有autolayout，即时打散，他也是其容易控制的，因为他还是在autolayer的框架中组织在一起的。
让我们把这件事讲清楚一些，component解决的痛点是，当一群类似的东西需要调整内部的margin，font size，padding时，为了快速统一而产生的功能，打到“动一发二系全身的效果”但是副作用是，把很多并不想成为“一家人”或者哪些“只是临时在一起的人”永远绑在了一起，她们变得不自由了，而且，你不敢让他自由，master object你再也不敢触碰，生怕“私自修改”了一个pixel，他就无法和其他同伴同统一，或者影响到哪个在未知领域甚至是引用了这个component不见的其他项目的无辜设计师。它就像小王子的那朵玫瑰，骄傲，却全无用处，你还不能把它怎么样呢？
这听起来真的很泄气，所以你最后怎样对待那朵玫瑰呢，啊，我是说对component？
嗯，是，方案很简单，我和小王子一样，依然珍视它，但是也没有把它当做唯一，我离开他，我把他留在那个小小星球上，我去了其他的星球，因为我们有了autolayout，在多选的情况下，改变公用的参数框就能很快的改变margin，color，font，padding，但为了世界的自由和平，我把结构紧密死板容易忘记的东西，击碎了，虽然离开，但心里还一直有他，只有在原子级现在她们只存在在icon里面，或者一些更古不变的大title，left side bar， table，里面了，之后呢，我仿佛看到一个全新世界。。。。
别再啰嗦了，这个话题我们也说的太久了，下一个吧。
额·“好！你说的很对啊。。。。。。

5，autolayout，我遇到个问题，左对齐，右对齐，
这很难吗？直接用居左居右，
我说的是左边的向左👈，右边的向右👉
这也不难，
当我拉伸的时候呢？我还要保持，同时，左边对其和右边对其，同时自适应宽度？
这个。。。好像就不行了，可是这有什么用呢？
看来你不知道最近发布的自动适应高度宽度这个功能吧。
知道，这和autolayout有什么联系呢，

我就不卖关子了，看我的，比如这个pagination，
还有这个title加上右边按钮，
还有这个所有+右边的按钮，
哦，😯原来还能这样子用，他是怎样实现的。
等等，其实说实话，这还只是个原型demo，因为figma不支持负数，所以我是用group来实现，这样group里面的两个autolay就不会相互干扰了，但如果autolayout支持负数，相adobeXD那样，就不再需要这样干了，所以，这是个很临时的做法哟，你知道是怎么回事就行了
6，autolayout宗旨是auto，可以可以关掉吗，
autolayout一旦使用，就会一直在那里了，
就像打开的灯，可以我不能关掉它，这可不是很友好啊，
听起来是个理儿，但却是是这样，一旦用了autolay，你就很难回去了，你不能drag你的icon在autolay里面“自由”的按照pixel去游走了，所有的都被锁定住，
不过这个情况下，你能做一些变通，而且就是利用autolay本身，比如这个page要适用不同高度的图片，但是却还要保持他自己的高度，你失去了用鼠标拖动像素记得自由，因为你把这种自由交给了autolayout，他会是你城堡里的那个忠于职守的好管家，相信我，他绝大时间都是极忠诚的。

看到了吧，成功了！图片size变了，但是layer的高度一致保持居中，完美！

类似的例子我想你在table的example中也看到了，如果你仔细研究过的话，
我们使用了在包裹一层“看似无用”的“横竖相反切换”的autolayer，并且手动fix固定它的width/high来做到这点，这很管用，你不想试一试吗，
恩，好吧，有需要的时候我我要去尝试一下，
祝你好运！

7其他的小tip
关于透明，还是用关闭眼睛，
这个是个很有趣的话题，是关灯，还是把灯泡拿走，
嗯，你太喜欢举例子了，我不明白！

如果你只是把opacity弄成0，那这个element还是在那里的，进入autolayout的排版计算，我常把他们弄成opacity=1，这样就能用鼠标选中了，这个你可以试一试，很有意思哦！
另一种就相反，如果你把左边layer的眼睛直接关闭，autolayout会认为你不需要在ui中计算这个element和其他部件的位置，所以，其他的element会“一拥而上”，迅速填补上这个位置的，比如这样一群按钮，我想很多人知道这点了，

别在一段字里面做不同样式，这个有两个缺点：他无法被复制样式
对，明白，这太糟糕了，不能服饰样式，
你反应很快啊！
那我们该怎样，比如这个搜索的结果，我们怎么做，
很简单，用好几段不同textfield来制作啊，像这样
如果你希望增加一段新的类似内容，ctrl+D就搞定了，改一些文字就好了，多选+font属性，其实是很快的，
对，我感受到了，完全用不到component，而且切割的很清晰，因为可以copy style，我感觉我又可以回到可以4点可以喝咖啡的时光了。

不过，这没什么啊，我们都知道这个功能，一点也不稀奇啊，你不会觉得饿我那么没有学习能力吧，我感觉被你小看了。（不高兴！）

你开始有点飘飘然了，别忘了，autolayout小王子的我，可不是浪得虚名
我当然相信大家都很熟悉这个特性，所以我很相信你在看看这个table的title如何做到主物体和子物体长得不一样，但依然可以同步这件事的时候，就会明白的更快乐吧？！
嗯，很有意思，我明白了，你就是把主物体中事先添加了粗体的title，然后隐藏它，在子物体title中再把title显示出来，然后把content内容隐藏，就达到了目的了，对吧
bingo，很好，小魔术被你看穿了，恭喜！看来我已经没什么可以教你了。哈哈
拭目以待，让我们看看figma会有什么可以更新的吧，如果有什么好的更新功能，记得告诉我哦！
没问题！

哦对了，告别之前，有2个小忠告。
对了这点蛮重要的，
1，别把autolay的做的过于复杂，比如这样：你看到千层饼，
恩，这太让人难堪了，我会注意的！
因为还会有更好的技术更新出现，我们还要面对下一次类似sketch 转移 figma的更新，如果你的autolay走的过于复杂，那转移时也许就是梦魇的开始哦。

哎，那是希望我还是个设计师。看

有了这些介绍，你总该知道为什么我总有更多的时间做项目或者学习的时间了吧，快加入我们auto邪教吧。

2，记住现在应该把component的地位放低，放细，让他休息休息，让autolayout加入处理layout的工作，来承担更加灵活易变的制作环境吧！
希望你们喜欢今天的故事，再见朋友们。