Figma］註冊與基本認識/ 基本功能介紹/ UI Mockup軟體介紹

Figma是線上介面設計工具，允許和團隊進行多人協同合作，在瀏覽器中進行設計，共同繪製使用者介面，UI、UX、網頁、App應用程式的介面原型，只要有一個成員變更內容，其他 ... 使用者介面設計講義 Userinterfacedesign，UI 首頁/使用者介面設計講義 Figma註冊與基本認識/基本功能介紹/UIMockup軟體介紹 註冊Figma Figma基本功能 UIMockup軟體 課後作業 註冊Figma 請觀賞上課註冊教學影片 或觀賞官方註冊影片，或依循以下部驟完成註冊程序，並開始使用Figma！ 點擊Figma主頁（https://www.figma.com/）上的Signup註冊按鈕。

我們可以選擇google帳戶登入，或填寫E-mail，接著填入暱稱及選擇常使用類別，建立Figma帳戶 進入Figma歡迎提示，後方畫面為Figma檔案列表畫面，並產生三個基本功能操作範例檔案。

建立團隊訊息提示，在同一團隊裡，可以建立專案並與團隊共同製作專案。

團隊命名 加入團隊成員的email 到信箱收認證信，並按Confirmyouremail，確認信件，以完成註冊。

選擇付費方案 1.初階方案：免費，可在同一團隊裡，最多兩個共同編輯者、建立三個專案、30天版本歷史紀錄，無限的雲端空間。

2.專業版:每位編輯者每月12美元、每年結算，或US$15/編輯/月，無限的項目，無限的版本歷史，自定義文件/用戶權限，僅邀請私人項目，共享團隊資料庫。

3.組織(企業)方案：每位編輯者每月$45美元/僅按年度計費，所有專業的一切，組織範圍的設計系統，私人插件，插件管理，共享字體，SSO+高級安全，設計系統分析。

建立專案，後方會自動建立內建的DesignSystem，可再自行修改內容。

建立專案名稱 完成專案建立 首次進入，出現建立框架提示 Figma初始空白操作頁面 進入Figma團隊專案列表頁面 內建的DesignSystem編輯頁面，色彩可自行修改，成為該專案的系統色彩 Figma基本功能說明 本單元將以Figma官方基礎功能文件，引導大家完成在Figma中開始設計的基礎知識。

並請參照經過整理翻譯的官方文件檔案『中文化｜官方基本功能說明中文化文件』進行製作，展開本單元的練習，帶領大家認識Figma中基本八大功能：1.Frame｜框架、2.Constraints｜約束條件、3.Components｜組件、4.Styles｜樣式、5.SmartSelection｜智能選擇、6.Exporting｜輸出、7.Commenting｜註解、評論、8.Sharing｜共享。

有關更多教程內容和功能概述，請訪問Help.figma.com。

請搭配觀賞本單元教學影片 Figma｜基本功能介紹 Frame｜框架 框架是設計的基礎元素，是在Figma中創建的大多數東西的頂層容器。

在Figma中有幾種不同的創建框架的方法，可以自訂尺寸，右側也提供了許多載具的框架預設尺寸供選擇，可直接拉取建立，非常方便。

Constraints｜約束條件 Constraints約束，可以將設計元素固定到其父框架的不同側。

可以構建流暢的佈局以支持同一組中的多個設備大小和斷點，可以幫助建構真正的了解規則的應用方法。

FigmaTutorial:Constraints Components｜組件 Components組件，可以重複利用設計中的現有部分，從而節省了其他重複而繁瑣的工作。

組件創建新物件而不是副本，從而使您可以直接在畫布上覆蓋屬性。

組件有兩個方面：1.『主組件』MasterComponent，它定義了組件的屬性。

2.『物件』Instance，它是可以在設計中重用的組件的副本。

『物件』鏈接到主組件，因此您對『主組件』所做的任何更改都將應用於『物件』。

FigmaTutorial:Components-TheBasics 延伸閱讀｜ 使用組件Components和實例Instance Styles｜樣式 樣式功能使您可以定義一組屬性，例如顏色，字體和對象的效果，這些屬性可以在團隊的設計中重複使用。

每當您更改樣式的屬性時，使用該樣式的所有對像都會立即更新。

FigmaTutorial:CreatingStyles GettingStarted-ColorStyles 延伸閱讀｜ 創建樣式 SmartSelection｜智能選擇 通過智能選擇，您可以快速調整對象之間的間距，通過選擇對象創建統一的網格以及在網格佈局內重新排列對象。

思考收件箱界面，新聞源和照片畫廊的網格佈局。

HowtoUseSmartSelectionandTidyUp|FigmaTutorial 延伸閱讀｜ ArrangeobjectswithSmartSelection｜使用智能選擇排列對象 Exporting｜輸出 Figma支援PNG，JPG，SVG和PDF輸出格式。

在瀏覽器中使用Figma時，導出內容將自動保存到您的默認下載文件夾中。

嘗試使用Figma桌面應用程序導出以選擇保存位置。

Commenting｜註解、評論 註釋在Figma中增加了另一層協作。

您可以在畫布上的任何位置添加評論。

註釋可以添加到設計文件和原型中。

Sharing｜共享 在Figma中共享文件很簡單。

打開共享對話框以設置特定權限或始用鏈接訪問。

使用鏈接訪問後，共享文件就像共享其URL一樣容易。

UIMockup軟體 早年製作介面精稿（Mockup），多使用photoshop或Illustrator來製作，但這兩個軟體功能強大，但並不是為了介面設計而開發的軟體，因此在使用上較為複雜，開發方式及過程較不直覺，而近年來，UI設計師開始使用專為網頁（web）及行動應用程式（APP）開發的UI設計工具來設計介面精稿。

以下介紹三個目前最夯的UI設計工具：Sketch是業界最愛用的介面設計軟體，但僅限於MACOS系統使用。

還有Adobe開發的介面設計軟體XD，以及異軍突起的新星Figma，無論PCMAC皆可使用，並且只要在瀏覽器上即可操作，使用非常便利。

FIGMA介紹 Figma是可直接在瀏覽器上操作的的UI設計工具，只需網路即可，因此不限系統類型，不佔電腦空間，可多位設計師共同編輯設計檔，版本歷史功能更直覺切換。

Figma是線上介面設計工具，允許和團隊進行多人協同合作，在瀏覽器中進行設計，共同繪製使用者介面，UI、UX、網頁、App應用程式的介面原型，只要有一個成員變更內容，其他使用者都能同步查看變更和加入編輯，讓團隊可以共同討論，創作出最有共識的產品。

Figma=Sketch（UI設計）+InVision（原型設計）+Zeplin（標註）+Dropbox（雲端同步）+Abstract（版本歷史）+Craft-Freehand（實時討論）+Liveshare（實時分享）+TeamLibrary（團隊組件庫）+WebAPI（第三方接入）+… 延伸閱讀｜ Figma官網連結 學習Figma,從這裡開始-最新的Figma中文文檔和優質原創教程 深入了解Figma：UI設計神器 Figma—異軍突起的設計協作神器 Figma免費線上協同設計工具，和團隊一起編輯＆繪製UI、UX介面原型。

Sketch Sketch只支援MACOS，是業界主要慣用軟體，直觀的介面，沒有任何軟體基礎的人都容易上手，門檻不會太高。

有豐富強大套件資源，Toolbox有豐富的套件、模板、外掛等資源，加速設計流程。

延伸閱讀｜ Sketch官網連結 Sketch學習筆記（一）-基礎介面與工具 自學介面設計及Sketch資源分享 SKETCH初心者在設計UI前要做的五件事！ Sketch3很高興認識你 UI/UX設計師必備！五大實用Sketch外掛程式推薦 AdobeXD AdobeXD是Adobe系列的UI設計工具，支援MacOS、Windows，因為是Adobe開發的軟體，操作簡單，類似Illustrator介面。

能整合AI與PS，可以能整合Illustrator文件。

能在CreativeCloud做儲存與共用。

延伸閱讀｜ AdobeXD官網連結 AdobeXd軟體新手詳解圖文教學 AdobeXD推出免費方案，這將會是你學習UI設計的入門磚？ AdobeXD專為Prototype原型設計而生，UX操作設計工具 欸你覺得Sketch還是AdobeXD哪個比較好用? 課後作業 第二週作業： 註冊Figm｜FIGMA 確實練習｜『中文化｜官方基本功能說明文件』中的基本八大功能：1.Frame｜框架、2.Constraints｜約束條件、3.Components｜組件、4.Styles｜樣式、5.SmartSelection｜智能選擇、6.Exporting｜輸出、7.Commenting｜註解、評論、8.Sharing｜共享 開始了解不同的UI軟體｜閱讀相關文章並實際操作看看 尋找欲修改的主題，並搜尋相關ReDesign案例