###### tags: `網頁讀書會`
# 03/25 共筆：Figma 初體驗
### 大綱
1. UI/UX Intro
2. Figma 講解 (講解做好的 Figma 檔案)
3. 熟悉 Figma 操作
- 畫布、畫面拖曳與放大、多重選取
- 對齊工具
- Component
- 圓角、陰影效果
4. 共同實作
5. 總結 + Q&A
[UI/UX跟PM還有程式設計師的關係](https://youtube.com/shorts/a5e-4Bw4g5g?feature=share)
[當你不會用UI/UX設計軟體](https://www.carce.cc/goodcar#img1)
[course pro 設計稿](https://www.figma.com/file/3Uy156OSTesry8QePbLdfG/course-pro-for-NTUST?node-id=11%3A23048&t=Zlh7mM6ICM6sPfaq-1)
[介紹](https://hackmd.io/@cJ6It8dzQM-AxvJdVHHRpA/H12bf-w13)
[講師的第一個figma作品](https://www.figma.com/file/Jd3NxmaD0kNhZTexvJYLmi/layout---https%3A%2F%2Fgacha.gamelab.com.tw%2F?node-id=1%3A971&t=s6pnCCgq5JvNLH4Q-1)
### 好用的連結
#### 半成品模板
[gift4designer](https://gift4designer.net/)
#### iconhttps://hackmd.io/5MlpIgOfRBmjiPeENjh92Q?both#
[icons8](https://igoutu.cn/)
#### 好香而且用了前端工程師會感謝你的 Component
[Element-Plus](https://www.figma.com/community/file/1021254029764378306)
[Element-Plus(Dark Theme)](https://www.figma.com/community/file/1089069713696062831)
[Bootstrap 5 UI-Kit](https://www.figma.com/community/file/876022745968684318/Bootstrap-UI-Kit)
#### 其實有現成的，這個部分你應該複製貼上
[iPhone Safari Mockup](https://www.figma.com/community/file/1026820294225992294/iOS-15-Safari-Template)
[整套 iOS 15 UI-Kit](https://www.figma.com/community/file/984106517828363349/iOS-15-UI-Kit-for-Figma)
... 還有很多，趕快到 [figma 社群](https://www.figma.com/community) 一探究竟
### 今天的課堂實作作業：
<img src="https://i.imgur.com/DeX4eic.png" width="220" />
至少先畫出這個鬼東西吧
{"metaMigratedAt":"2023-06-18T00:13:06.691Z","metaMigratedFrom":"Content","title":"03/25 共筆：Figma 初體驗","breaks":true,"contributors":"[{\"id\":\"709e88b7-c773-40cf-80c6-f25d5471d1a4\",\"add\":1746,\"del\":390},{\"id\":\"9311c835-54f0-4dec-908a-bc621136772e\",\"add\":143,\"del\":21}]"}