100 種 Figma 設計的方法｜UI/UX 設計專欄

Figma 是一款 UI/UX 使用者介面與體驗設計軟體，專用於介面設計和原型製作，能讓多名設計師同時在同一專案上協作，這使得團隊合作變得更加簡單。Figma 支援向量圖形編輯，並提供各種設計元件庫和擴充套件，方便設計師快速建立和調整設計。

Figma 不僅適用於設計師，也對開發者友好。開發者可以直接查看設計的樣式、間距等細節，並導出設計資產和切圖標註，這極大地縮短了設計與開發之間的溝通時間。

我們可以直接註冊並下載軟體到 Windows, macOS 使用，並且 Figma 是網頁瀏覽器就能打開的軟體，因此就算不安裝也可以在任何設備上使用，包括 Linux 作業系統等。

很開心這次可以挑戰鐵人賽！接下來的 30 天我會每天發佈一則關於 Figma 的小教學，並且為了能夠有體驗更好地學習軟體操作，也會搭配一支螢幕錄影的影片，可以點進 YouTube 頻道觀看順便訂閱噢！🥸

https://youtu.be/K07VpVnjBYE?si=0GIi8p317_8Nk4M4

設計歷程與版本控制

你好，我是設計師 Riven

在 UI/UX 設計的過程中

版本控制是一個關鍵環節

它不僅有助於管理設計變更

還能確保團隊協作的順利進行

這個單元來講一下在 UI/UX 設計中如何進行版本的管理

以提高設計協作效率

什麼是版本控制？

版本控制是一種系統

它可以記錄檔案的變更

並允許設計師或開發人員回溯到特定版本

這對於 UI/UX 設計特別重要

因為設計通常會經歷多次迭代

並且需要在不同版本之間進行比較或恢復

舉個例子

通常我們在做設計的過程中

最怕的就是修改到最後時

覺得原來的那一個版本比較好

這邊我們用 3 個空狀態畫面來模擬情境

假設經過討論最後我們決定選擇 3

所以把 1 跟 2 都刪掉

然後這時老闆才突然說他還是比較喜歡 1

當然現在我們可以直接按下 Command + Z / Ctrl + Z 來復原

但假設我們這 3 版過程中經歷過太多操作已經無法快速復原了

要怎麼辦呢？

這時候就可以使用 Figma 的 設計歷程（Version History）

這個功能剛剛好可以派上用場

由於 Figma 本身是採用自動存檔的機制

所以也會自動將你的設計歷程儲存起來

要瀏覽這些紀錄只要到左上角的 Main Menu 中找到 File → Show version history

打開後右側的屬性面板會切換成設計歷程

設計稿的設計歷程將會按照時間排序

如果想回溯到某個時間的版本

只需點擊該版本後畫面就會開始切換

這時就能看到原本被刪掉的畫面啦

但要注意的是此時的內容都是不可編輯的

如果全部的內容你都希望回溯

那可以在列表右方「…」找到 Restore this version。

但通常我們只需要部分內容

所以只要選取並複製你需要的內容

關閉 Version History 後

再貼到目前的版本畫面中即可

這樣下次就不怕客戶或老闆回心轉意囉

設計歷程雖然很方便

但有個小缺點就是自動記錄的版本太多可能不方便搜尋

所以當你認為目前設計非常重要的時候也可以直接儲存目前的版本

並為這個版本命名與備註

這樣之後就比較好找到了

設計歷程的功能在大型專案和持續開發型的產品至關重要

版本控制在 UI/UX 設計中也是不可或缺

它不僅能幫助設計師追蹤變更

還能提高團隊協作效率和設計品質

選擇合適的版本控制工具

比如 Figma 有內建的

可以使設計過程更加有效率噢

關於作者

設計師 Riven

資深數位產品設計師｜虛擬 VTuber

社群傳送門 - https://portaly.cc/designer.riven

在 IT 和網路產業近十年的數位產品設計師，專注於 UI/UX 使用者介面與體驗設計領域，在全臺多間大專院校與社群機構擔任顧問及講師，並於國內外各大線上課程平台開立設計課程，目前已累積超過近萬名學員參與上課。

為 Adobe 官方合作的設計師兼 Insider，曾環島舉辦設計工作坊，並獲邀代表台灣飛往美國洛杉磯參加 Adobe MAX 設計師年會，並以設計師 KOL 角色與 Intel、微軟、華碩、微星等知名品牌合作推廣科技產品。

常在 Medium 寫作設計上的知識與觀察，並得到官方認證 #Design 領域 Top Writer，同時也會在 YouTube 上製作影片教學設計的方法，近期開始實驗使用 VTuber 技術在 IG 用 Reels 短影片分享設計技巧。

▌擅長利用淺顯易懂的內容，將艱難的設計與開發技術，用任何人都能夠聽得懂的語彙，說給每一個人聽。