Figma 学习笔记 – 黑科技
Figma 其实有蛮多黑科技的, 因为需求真的太多了, 在还没有实现的期间就诞生了很多 hacking 的 way.
实现 min-height 通过 0px 黑科技
其实里面还有一个 Frame 只是 Width = 0.00001px (太小就会变成 0, 但你不能直接写 0 哦, 这个 Figma 的玩法)
解密:
Aspect Ratio When Resize
效果:
参考:
Auto Layout Fixed Aspect Ratio
Fixed aspect ratio in Figma Auto Layout
原理:
Auto Layout + z-index
需求是这样的
navigation bar 要浮在中间. 啥也不管一般上会做出这样的结果
navigation 被下面挡着了.
这个时候最好有一个 z-index 的方法.
Figma 目前 (28-12-2021) 是没有 build-in z-index 的, 但是它有 hacking 的 way (figma always can hack...)
参考:
Figma Auto layout + Z-order hack (思路看这里)
Feature Request Vote (投票)
Is there any way to change the “z-index” of an auto-layout child? (讨论看这里)
Easy Z <-- workaround plugin (目前的办法)
方案解析:
一开始有 3 个 frame, 中间里面有一个 black box, 希望可以盖着第 3 个 frame, 目前是不可以的, 因为下层盖上层是 Figma 的逻辑.
首先, 选择 Auto Layout 的 frame, 按 Shift + V, 做一个 Flip vertical
然后它会变成这样
然后去换位置, 把下面的往上移动, 上面移动来下面
然后选中红色和黄色的 frame, 再做一次 Flip Vertical (Shift + V)
很神奇的, 它就搞定了.
如果用 plugin 的话, 在第一个 step 直接选 plugin, 它就帮你弄好了全部.
Layout Grid + Auto Layout
参考:
默认情况下, 当一个 Frame 有了 Layout Grids 后, 再去添加 Auto Layout, Figma 会自动移除 Layout Grids.
如果想依然保留它的话, 就把 Layout Grids set 成 Style, 添加完 Auto Layout 在解除 Style.
建议直接使用 Plugin 来帮助完成上面的步骤.
