[Day04] 3. 認識 Figma 介面 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2024 iThome 鐵人賽

DAY 4

1

IT 管理

前端工程師＆UI 的30天約會：教會猴子用Figma！系列第 4 篇

[Day04] 3. 認識 Figma 介面

16th鐵人賽

團隊擁有夢想的鐵人猴子隊

2024-09-16 23:40:14

102 瀏覽

分享至

讓我們開始來認識 Figma 的介面吧！

介面認識

註冊完帳號後，便可以開始使用 Figma 了！，網頁版（圖一)和 App 版(圖二）長的基本一樣

（圖一：Figma 網頁版）

（圖二：Figma App 版）

＊以下將以 App 版的介面來介紹

整體使用介面可分為五個區域，如下圖

標籤區：顯示首頁（左上角的 Homepage icon）和同時開啟的不同檔案，可新增也可拖曳來調整排列順序
工具列：製圖所需的所有工作都放在這裡。
頁面選單和圖層區：此區可新增頁面（Pages）和圖層管理（Layers)，同時也可切換至資源庫（asset)
畫布區：進行設計和排版編輯之區域
屬性區：包含針對內容調整屬性、大小、色彩等的各種編輯（Design)，還有互動設計（Prototype）與數據檢視

詳細的各區域功能，將陸續在後面的章節一一介紹
另外，因為2024年6月舉辦的 Figma Config 已發佈改版，
工具列位置將調整至畫布區下方，
應該漸漸會更新至所有使用者。

[Day03] 2. 如何開始 Figma

[Day05] 4. Figma 首頁有些什麼？

系列文

前端工程師＆UI 的30天約會：教會猴子用Figma！共 30 篇

目錄

RSS系列文訂閱系列文

4 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22197 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙