###### tags: `網頁讀書會`

# 04/01 共筆：Figma more...

### 大綱
1. 設計觀念
- 顏色
- 漸層
- 定義 Color Library
- Container
- grid system 網格系統
- padding, margin
- size
- icon
2. 把上次的東西架構加強一下
3. **複製貼上！！**
- UI Library
- Ant Design
- Chakra UI
- Bootstrap
- Element Plus
- ...
4. Variable, Library
- variable: 最常應用在不同元件但是顏色相同的狀況
- 好處：可以統一修改所有的不同元件但是有相同顏色變數的顏色
5. Prototype
- 目的：做預想操作的動畫，減少前端工程師的認知偏差

------
example:
重新規劃這個網頁的手機版：
https://gacha.gamelab.com.tw/petition

https://www.figma.com/file/Jd3NxmaD0kNhZTexvJYLmi/layout---https%3A%2F%2Fgacha.gamelab.com.tw%2F?node-id=1%3A1754&t=X1dWsNdOOrETKf4d-1

------
template:
https://www.figma.com/file/GhDCAEJ2scEIKsrLyb6J8E/project-management?t=uj1SJSAPvAZxWQTu-1

https://www.figma.com/file/c5VzZYBx7eBHYnmPHTL9iS/Cryptocurrency-Mobile-App-Template?t=uj1SJSAPvAZxWQTu-1

https://www.figma.com/file/j6Re9CbELIYEfXefH2tN0D/Job_Search_App_No_Image?t=uj1SJSAPvAZxWQTu-1

https://www.figma.com/file/Drh4p33xoSXWS5h3HPRsKp/Stoks?node-id=0%3A1&t=XfYUb2Xy0yPdp9Kt-1

https://www.figma.com/file/iz7r7sA99aEDWdYC2riL2w/liga-soccer?node-id=0%3A1&t=TcV1f59rik2M1mPu-1

-----

### 大家的 figma 連結
[王正宏](https://www.figma.com/file/3Uy156OSTesry8QePbLdfG/course-pro-for-NTUST?node-id=870%3A27990&t=ZlI6FxSkax0iiRDV-1)

[楊芷安](https://www.figma.com/file/wsPx7qJJ9sjUCs7XCbo1f5/Untitled?node-id=0%3A1&t=gzVBsakR0nh6OtBB-1)

[吳宇凡](https://www.figma.com/file/eGXXFdjYO2NxSTmV2s2VQA/Untitled?node-id=0%3A1&t=JrQxYcoF56dOiBwt-1)

[張睿麟](https://www.figma.com/file/scvZjlW5Bty9gqljeW8RXu/%E7%B6%B2%E9%A0%81%E8%AE%80%E6%9B%B8%E6%9C%83-%E5%AF%A6%E4%BD%9C%E7%B7%B4%E7%BF%92?node-id=0%3A1&t=fdcOcToW82IknJ74-1)

[林宇星](https://www.figma.com/file/lDOLVgg5FWyUyfl9W5gCxG/Untitled?node-id=0%3A1&t=JpUVjGVg3ExY1NiY-1)

[黃雅筠](https://www.figma.com/file/S0aPZq9StO6BhfoMacwTjN/Untitled?node-id=0%3A1&t=GBx4WWGg2QWTCFdM-1)