# 2022-1 EP2

## 進入軟體開發的前置作業

1. 確認需求(流程、畫面(功能性，無美觀、內容))
- 用wireframe向客戶展示、確認功能
- draw.io
- balsamiq
- figma

wireframe工具=>draw.io,balsamiq,figma

UI圖工具 => Figma, Adobe XD, Sketch

## [Figma](https://www.figma.com/)
* brain storming
* 心智圖
* User flows
* ui design
* prototyping
* handoff
* design systems
* versioning
### 協作
可以與工程師以web的形式共用檔案，無須額外下載其他應用，並且使用tag功能可以在協作上可以更快得到回應。另外，sketch若是要與他人共用或合作，需要額外輸出成其他檔案。
### 註釋
使用sticker撰寫需要修改的部分，並可以使用tag功能標記關係人，最後可標記已完成sticker事件。
### plugin
Figma中可以安裝許多插件，包含去背，統一文字修改，可以到community中尋找plugin，以下列舉部分課程中提及的插件
* Lorem ipsum: 當客戶還沒想到文稿時使用，生成假文字
* remove BG : 移除背景
* Iconify : 插入icon
### [community](https://www.figma.com/community)
具有強大的community，有大神或官方的協作者製作UI，能夠直接複製貼上即開始實作，像是iphone瀏海、home。

### figmajam
整合brainstorms, meetings, diagramming等形成一整套，其中包含許多類別的template。

## 使用figma

### 建立Frame
- 點擊左上Frame可以新增一個畫面，或是右邊可以選擇iphone等預設畫面

### 方塊位置
- 在Frame中加入方塊，右邊十字方塊可以選擇物件定位(例如垂直置中、靠左)

### Component(右件物件，選Create Component)
如果有重複的物件建議使用Component，這樣只要修改母物件，子物件就能跟著修改，但母物件不會覆蓋已修改過的子物件。

### 快捷鍵
- alt +拖曳物件 可以複製

### fill
* 定義自己的style


### inspect
點擊右上角inspect會有頁面資料可以參考

### 輸出
design頁面 滑到最下面export

## 設計guideline
* android有其guideline，iOS有其guideline
* material UI
* guildline可養成使用者習慣

### [Material Design](https://material.io/)

### [Ant Design](https://ant.design/)

###### tags: `2022` `monosparta` `camp` `Feb` `Course`