快速上手 Figma|100 種 Figma 設計的方法

林育正 Riven
4 min readSep 1, 2024

--

快速上手 Figma

你好,我是設計師 Riven

這個單元我們來快速認識一下

Figma 的軟體介面

Fimga 當中有三大區塊

分別為最左邊的圖層面板(Layers Panel )

中間的畫布(Canvas)

和最右邊的屬性面板(Properties Panel)

在 Layers Panel 圖層面板中

透過這個階層列表

你可以輕鬆地探索各種物件

發現它們之間的關係

還能輕鬆管理它們

而想要做更細節的設計管理時

我們也會使用這個 **Page**

方便我們將不同的頁面設計分別放置

保持工作區塊的乾淨對於設計師來說也是非常重要的

只需要點擊名稱後

就可以幫他們命名

利於我們未來尋找

若是圖層太多找不到想要的元件時

也只需要在畫板上點選元件

工具列就會自動選取該對應圖層

不再有找不到圖層元素的困擾

而 Canvas 畫布呢

Figma 主要的設計工作區

是一個可以無限放大延伸的空間

我們所有的設計內容都會在這裡完成

從這邊可以選擇 Zoom in 或是 Zoom out 放大

也可以按住鍵盤的中的 Command 加減(+-)鍵來縮放

Properties Panel 屬性面板

主要針對不同物件設定專屬的屬性

例如調整顏色、調整文字大小

設定陰影效果、排版對齊方式等等

會根據選取物件的不同有不同調整選項

例如像這個按鈕

希望它的圓角不要這麼圓潤

我們就可以透過個別區塊做調整

像這樣~

一個小小的 tips

當我們反悔的時候該怎麼辦呢

甭擔心,按下鍵盤中的 Commond+Z 就可以復原囉

恭喜大家已經小小地跨出學習 Figma 的第一步!

後面的單元會持續為大家講解工具的詳細介紹

讓大家可以更深入地了解如何使用 Figma~

一起製作出像是範例中精緻的 UI 設計⭐️

明天見啦!

100 種 Figma 設計的方法|UI/UX 線上課程

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

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

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

關於作者

設計師 Riven(資深數位產品設計師|虛擬 VTuber)

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

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

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

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

--

--

林育正 Riven

是數位遊牧型態的設計師💻 喜歡邊旅行邊工作的生活,逐網路、插座與咖啡而居。期待能夠將艱難的設計與開發技術,用麻瓜都能夠聽得懂的話,說給每一個人聽。更多關於我:riven.design