免費版figma
- 團隊(不限)-專案(最多3個)-檔案(不限)
- 免費版本控制只保留30天
- 方法一：匯出檔案再匯入
- 點選左上角-檔案-儲存並下載-儲存.fig檔在本地端
- 回到控制台的專案，選擇匯入
- 方法二：儲存歷史並回朔紀錄(30天)
- 點選左上角-檔案-儲存版控
- 點選左上角-檔案-顯示版控
- 方法一：匯出檔案再匯入
工具
- 元件
- 群組(group)縮放內容變形
- 框架(frame)縮放會被constraints固定
- 重疊時會自動包覆
- 按著滑鼠移動frame+空白鍵不會被包覆
- 文字
- 行高建議1.4~1.6倍(140%~160%)
- 點選文字控制區右上角(四個點)可建立文字樣版(命名：種類/樣式名稱)
- 載入本地端字型：點擊頭像-setting-font
- 文字底線可用陰影代替
- 圖片
- 進行遮罩時，形狀需放在圖片下層，先群組再遮罩
- 顏色
- 在滴管吸取時，滑鼠按著不放可瀏覽變色
- 全選物件後，可在右邊顏色選擇器針對特定顏色選取
常用快捷鍵
| 功能 | 快捷鍵 |
|---|---|
| 游標 | V |
| 文字 | T |
| 滴管 | I |
| 打開格線系統 | control+G |
| 框架 | command+G |
| 群組 | command+option+G |
| 解散框架/群組 | command+shift+G |
| 合併形狀 | command+E |
| 命名多個圖層 | 左側選取圖層command+R |
| 文字新增連結 | command+K |
| 簡報模式 | command+\ |
| 插入圖片 | command+shift+K |
| 圖片遮罩 | command+control+M |
| 複製樣式 | command+option+C |
| 貼上樣式 | command+option+V |
| 製作元件 | command+option+K |
| 查看邊距 | option+游標移動 |
| 剪裁圖片 | option+點兩下圖片 |
| 完整顯示 | shift+1 |
| 顯示尺標 | shift+R |
| Auto Layout | shift+A |
| 筆畫/填色反轉 | shift+X |
| 垂直/水平反轉 | shift+H/V |
| 調整透明度 | 點一下圖形+數字鍵 |
| 調整尺寸 | 點一下圖形+方向鍵 |
元件(Component)
- 元件本體(main component)
- 元件分身(instance)
- 元件建立
- 繪製樣式
shift+A建立Auto layoutcommand+option+K製作元件- 給元件命名或賦予關鍵字
- 在資源可用文字搜尋
- 修改樣式時統一使用元件本體
若在instance上修改樣式，main component修改就不再同步
變體(Variants)
- 將元件集合(component set)
- 每個元件可以有多個屬性，每個屬性對應到一個值
- 建立變體
- 繪製樣式
command+option+K製作元件- 製作不同樣式(樣式名稱)
- 進行群組命名(property)
- 群組複製再次進行修改
- 檢查元件是否可以用分類選擇到
只有元件才能進行變體
格線系統(grid system)
- 建立frame
- 啟用layout grid
- 選擇columns，count：12
- 決定主要內容寬度(自訂)
- margin：將裝置寬度-內容寬度/2
- gutter：16(自訂)
- 8網格間距(8 point grids)能夠更有效率、達成一致性
- 4、8、12、16、20、24、28、32、40、48、56、64…
斷點(break point)建議參考主流框架
建立核心樣式
- 顏色(預設/深色/淺色)
- 主要色(Primary)品牌色、重要文字、按鈕
- 次要色(Secondary)提示訊息、次要文字按鈕
- 警告色(Alert)錯誤訊息、警告
- 輔助色(Complementary)其他更多輔助介面
- 強調色(Accent)強調特定資訊
- 灰階(Gray scale)分隔線、外框線、內容文字
- 文字
- 選定字型(1~2種)
- 定義H1~H6、主標、副標、內容文字、輔助文字
- H1(40px)(125%)
- H2(32px)(125%)
- H3(24px)(125%)
- H4(20px)(140%)
- H5(18px)(140%)
- Title(16px)(140%)
- P(12px)(140%)
- small(11px)(140%)
- 粗細度(2~3種)
- 階層不同、深淺度可調整
- 行高1.4%~1.6%，大於24px建議1.25%
- 間距(8 point grids)
- input 文字跟輸入框上下12px 左右16px
建立完整按鈕樣式
- 元件名稱btn/form/nav
- 狀態default/hover/foucs/disabled
- icon有無true/false
- name / state / icon
- btn / dafault / text