Figma 学习笔记 – Component

参考

Guide to Components in Figma

Figma Tutorial: Components - The Basics (Youtube)

 

定义与用途

Figma 的 Component 有点 Class 和 Instance 的关系. Component 就是 Class, 通过 copy paste from Component 就得到了 Component 的 Instance.

当修改 Component 样式时, 所有的 Instance 都会同步. 这就是它的主要作用了. 

 

创建与使用

创建 Component 的方式是在一个元素上按 Ctrl + Alt + K, 或者点击中上方的菱形 icon

完成后，原本的元素就变成了 Component, 它的框会变成紫色的, 还有一个菱形 icon

要创建 Component 的 Instance 只需要 copy paste 或者 Alt + 拖拉就可以了.

Instance 也是紫色的边框但是它没有菱形 icon, 从右边的 Layer 可以看到, Instance 是空心的菱形 icon. 我们可以用这些特性快速区分 Component 和 Instance.

 

同步效果

 

Instance Override 样式

如果说所以 Isntance 都必须完全和 Component 一模一样, 那么它的复用范围就很小了, 因为绝大多数情况不会出现 100% 一样的元素.

所以 Figma 允许我们做一定程度的 Override. 但是要记住哦, Override 是矛盾的, 因为元素之所以被转换成 Component 是因为它们有共同特性，如果 Override 过多则表示它们其实并没有那么多共同特性, 也许根本不应该使用 Component 做管理.

不是所有的样式都可以 Override 的. 

可修改的样式

不可修改的样式

涉及到 Layout 的基本上都是不可以改的, 能改的都是一些 Paint 的东西.

如果某一个 Instance 的某个样式被 override 以后, 这个 Instance 的那个样式就不再和 Component 保持同步了. (其它 Instance, 其它样式一样会被同步)

 

Reset Override 样式

Figma 会记入 Instance 修改过那些样式, 我们也可以通过右侧的工具栏快速 reset 掉这些 override 的样式. 这样它就会恢复和 Component 的同步了.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

标签：样式,Figma,Component,笔记,Instance,Override,icon
来源： https://www.cnblogs.com/keatkeat/p/15371049.html