# Figma Components 教學（一）

2025/04/23 完食 學習食記
課程內容
> Components 介紹與初步應用

## :memo: Component介紹

### Component
Component的特性：
>==1. 主組件改變，子組件跟著改變==
>==2. 子組件的樣式變更，不影響主組件==
>==3. 子組件變更的樣式，之後不再受到主組件的影響==

因此非常適合在需要==大量、重複==的情境使用

以我自己的想法，可以對像是按鈕、標題文字或者輸入框進行系統化的一種==類別==，進行命名設定為一種類別且可以統一快速進行調整。

但簡單講Component與Instance就是一種==屬性繼承==的概念！

:rocket:

>[!Note]優秀範例參考：
[material design kit component page](https://www.figma.com/community/file/1035203688168086460)

## Instance介紹

#### Instance
Instance就是建立在component底下的子組件
承上所述，Instance的屬性樣式會隨著Component調整而跟著改變
但如果Instance改變了某個樣式（像是背景顏色）就不再被影響了

## Component初步應用

Component可以在建立出Instance之後，將其不同的Instance再建立為==新的Component==！

以階層的概念來想像，其實跟前面的Component與Instance的繼承概念是一樣的。
另外組合出新的Component也是為了方便進行統一與調整。


## 總結心得

* 有繼承的概念就能夠比較快理解Component的原理
* 要把Component另外放一區，方便統一管理與瀏覽

## 問題
* 那會有一套自己的components基本樣板嗎？ 像是一套基本常用的Components工具，或者一套自己的設計風格Components？
> Ａ：可以有一套自己的設計習慣，不過通常依照不同的情況會有不同的設計。如果協作的話就需要視情況調整為團隊的風格。
* 畫面的layer階層清晰明瞭，是為了方便自己後續的整理以及修改，也有利於其他開發者瞭解，那Component的設計也會需要考慮這件事情嗎？
>Ａ：保持一貫的設計系統，以及使用像是`原子設計`[^原子設計]的理論來設計，可以讓其他的協作者清楚理解設計的邏輯及架構。

* 參考使用他人的模板與範例是很方便的事，那實務上自己設計跟直接使用模板的大概是什麼情況？
## 導覽
[ToC]

[^原子設計]:[原子設計 Atomic Design](https://medium.com/uxeastmeetswest/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88-atomic-design%E7%B0%A1%E4%BB%8B%E5%8F%8A%E5%B7%A5%E4%BD%9C%E5%AF%A6%E4%BE%8B-42e666358d52)