進入軟體開發的前置作業
- 確認需求(流程、畫面(功能性,無美觀、內容))
- 用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可養成使用者習慣