---
# System prepended metadata

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

---

# (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
     ![](https://i.imgur.com/cjRmcOu.png)
   - 操作 Figma
     - ![](https://i.imgur.com/6LgZtqc.png)
     - Layout Grid, Rulers
     - ![](https://i.imgur.com/aTKdu8o.png)
     - 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
