進入軟體開發的前置作業
- 確認需求(流程、畫面(功能性，無美觀、內容))
- 用wireframe向客戶展示、確認功能
- draw.io
- balsamiq
- figma
wireframe工具=>draw.io,balsamiq,figma
UI圖工具 => Figma, Adobe XD, Sketch
Figma
- 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
具有強大的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可養成使用者習慣