ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Figma 学习笔记 – Component

2021-10-06 13:01:03  阅读:464  来源: 互联网

标签:样式 Figma Component 笔记 Instance Override icon


参考

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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有