# (2/22 14:00) Figma 60 分鐘技術經驗分享

## Agenda
> Dashboard 1
> 活動方式: Developers Meeting

- 60分鐘就上手課程:
OA開發人員使用60分鐘講解Figma實作技巧，藉由最單純的元件繪製學會掌握基本Figma繪圖技巧。(細節課綱OA開發人員將補上。)

- 30分鐘認識UI與Figma元件關係:
Anny使用30分鐘分享使用Figma工作經驗。

- 120分鐘分析基本元件要素與製作:
所有開發人員一起整理出各種專案的基本元素，將元素彙整成共同元件資料，備齊待至Workshop時一同製作。(也請Edward分享工廠管理與系統設計關係知識經驗分享)

## Content

1. Figma 實作技巧：藉由最單純的元件繪製學會掌握基本Figma繪圖技巧
- 什麼是 [Figma](https://www.figma.com/)
- 可多人共用編輯
- 介紹 Page, Frame, Component(可以多個 Page 共同使用) 之間的關係
- Design-System
- 操作 Figma
- 
- Layout Grid, Rulers
- 
- Design: 對齊 / 大小 / 元件
- Prototype: 頁面切換 / 彈出視窗 / 下拉選單 / 捲軸
- Inspect:

3. Figma 相關資源 (我們發現了什麼好用的東西)
- [Community](https://www.figma.com/community): 拿現成的來用
- [Antd page template](https://www.figma.com/file/GRAavofRugg0RhOe88mfkN/)
- Plugin: HTML <-> Figma
- [教學影片](https://dev.azure.com/Kingstono365/Kingston%20PBIs/_wiki/wikis/Kingston-PBIs.wiki/1082/Figma%E8%AA%B2%E7%A8%8B%E5%BD%B1%E7%89%87)

2. Figma 實作成品分享 (介紹怎麼用, 這次怎麼做的)
- [訪客系統](https://www.figma.com/file/eeylGWQCRQJj7NuRCN8BaT/)

4. 使用 Figma 上的困難 (額外踩過的一些坑)
- 無法在同一個 action 裡做兩個以上的動作
- table layout 修改較不直覺
- 有些複製過來的元件需先解開 auto layout 才能做客製化變動
- connection 無法跨 page

5. Figma 實作步驟 (未來要怎麼做比較快):
[通用]
5.1 打開 Community，找到一個合用的下載
5.2 根據我們的 design guideline 調整得到 UI Kits
5.3 利用 UI Kits 並根據我們通用的 business request 調整得到 UI page templates
[特定 CR]
5.4 利用 UI Kits 及 UI page templates 調整得到該次 CR 的 UI pages
5.5 使用該次 CR 的 UI pages 組出 prototype

6. Figma 轉前端 Code (畫面排好了，要怎麼做出來)
- Antd (https://www.figma.com/file/V9UbsFUHgGr8MZzNLcfuja/Ant-Design-UI-Kit-1.2-ant.design-v4-update-Light-Theme)
- Antd-訪客
- Plugin: Figma 轉前端 Code