Figma 学习笔记 – 黑科技

Figma 其实有蛮多黑科技的, 因为需求真的太多了, 在还没有实现的期间就诞生了很多 hacking 的 way.

Feature Issue

实现 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

参考:

Layout grids for autolayout?

Auto Layout Grids Plugin

默认情况下, 当一个 Frame 有了 Layout Grids 后, 再去添加 Auto Layout, Figma 会自动移除 Layout Grids.

如果想依然保留它的话, 就把 Layout Grids set 成 Style, 添加完 Auto Layout 在解除 Style.

建议直接使用 Plugin 来帮助完成上面的步骤.