Figma 教學：讓技術開發人員都能輕鬆實作畫面設計 - AppCoda

設定(Settings)：定義家裡的每一個地方，以及庫存物品的類別。

demo-app-figma. 線框圖(Wireframe). 設計線框圖是UI/UX 設計過程的第 ... Figma教學：讓技術開發人員都能輕鬆實作畫面設計 Figma是一個非常容易使用的UI/UX設計工具，不管是不是專業的UX/UI設計師，開發者都可以去使用和實作畫面設計。

在這篇文章中，Gavin將會和大家分享使用Figma設計UI/UX的經驗，讓你也可以發展在畫面設計領域的能力，不再只專注於編寫程式碼。

AppCoda編輯團隊 Sep24,2020 13分鐘閱讀時間 In: 分享 本篇原文（標題：Figma — HowTechDeveloperPickUptheSkillsofUX/UIDesign）刊登於作者Medium，由GavinFong所著，並授權翻譯及轉載。

全端開發者是否應該具備UI/UX設計的技能呢？這是十分有爭議性的問題，畢竟全端開發者技能沒有明確的定義。

不過無可否認的是，在整個開發週期當中，UI/UX設計是非常關鍵的一部分。

幸好，UI/UX設計工具加速了畫面設計(Screendesign)的開發速度，並縮短了設計審查的時間，讓生產力大大提升。

身為一個技術開發人員，我渴望能夠探索UI/UX設計的領域，並體驗各種畫面設計的組合。

在這篇文章中，我將會分享使用Figma為我的新app設計UI/UX的經驗。

UI/UX設計工具包 現在畫面設計的軟體都有非常複雜的功能，但同時也十分易於使用。

這些軟體都是使用向量圖(vectorgraphics)來進行繪圖，也就是說，我們可以使用支援各種解析度的線條和曲線，來設計並規劃圖形，同時不會失真。

市面上可用的工具很多，例如Sketch、AdobeXD、InVision、和Figma，這些工具功能上都非常相似。

Sketch是這個領域中最有名的工具，但是為了個人專案而使用99美元來購買永久憑證，真是太貴了。

相對來說，Figma就吸引到我的注意，因為它的個人帳號可以免費使用最多三個專案。

Figma這個設計工具非常棒，它支援在瀏覽器上進行畫面設計，同時也支援客戶端軟體，來存取線上儲存庫，絕對是初學者進行畫面設計的最佳選擇。

關於這個App 在這篇文章中，我將為一個家庭庫存小幫手(HouseholdInventoryHelper)App開發畫面設計，這個App是為了有效率地管理雜貨或其他家庭用品。

基於這個想法，我列出了以下主要功能： 搜尋物品(ItemFinder)：讓我們容易地透過關鍵字或類別來找到物品。

提醒(Reminder)：列出即將過期的物品，以及建議購買清單。

庫存管理(InventoryMaintenance)：管理庫存記錄。

設定(Settings)：定義家裡的每一個地方，以及庫存物品的類別。

線框圖(Wireframe) 設計線框圖是UI/UX設計過程的第一步，設計成果通常是使用灰色、黑色、和白色的畫面設計，當中沒有圖片跟內容。

重點主要放在重要的元件上：畫面佈局、畫面導航以及功能，而外觀設計以及色彩主題會在之後的階段再設定。

因為畫面設計在初始階段會經常更改，使用線框圖可以減少更改設計的步驟，讓我們可以更快地更改設計。

此外，這個方法也可以有效地讓我們專注在核心功能上，而不會被外觀或其他不這麼重要的東西分散了注意力。

以下是家庭庫存管理App的線框圖。

這個版本包含了詳細的UI元件，是經過檢視及微調之後的結果。

一步一步設計畫面 先來介紹一下Figma的功具： 框架(Frame)向量圖工具(VectorGraphicTools)圖標(Icons)可重用的UI元件(ReusableUIComponent) 框架 框架是UI元件的容器，我們可以將它當做一整個畫面或是彈出式對話框，並將UI元件放在其中。

因此，創建框架就是畫面設計的第一步。

Figma提供了一系列預設的框架大小，適用於各種裝置，包括iPhone、android、電腦、手錶等，讓我們可以方便地為目標裝置設置框架。

如果找不到你想要的裝置，你也可以自行設定框架大小。

強大的向量圖工具 創建了框架之後，讓我們來建立一個頁面標題欄。

你可以畫一個灰色背景的長方形。

如你所見，Figma提供了一系列的向量圖繪圖工具，像是四邊形、線條、箭頭、橢圓形等。

如果你使用過MicrosoftOffice來處理圖形，一定能夠很快上手這些工具。

這個繪圖工具看似簡單，但是卻非常強大。

我們可以透過這些工具自由地創造各種圖形。

另外，Figma的輔助(assistance)功能也非常強大，可以顯示物件的大小、所有相鄰物件的間隔資訊、以及對齊的建議，讓我們可以快速地將物件調整到對的位置。

圖標 圖標是一個好用且重要的元件，可以豐富畫面設計，並增強使用者體驗。

你可以在這裡找到許多可用的圖標。

如果你已經在網頁上登入了Figma，這些圖標就會自動複製到你帳號下的草稿區。

這樣，你就可以在Assets中輸入關鍵字來搜尋想要的圖標。

例如，我可以透過關鍵字“menu”來找到導航選單的圖標。

太棒了！現在，頁面標題欄上已經有了一個導航選單的圖標。

你可以在左邊的操作面板上看到兩個物件，一個四邊形和一個圖標。

文字標籤(TextLabel) 另一個Figma的基本功能，就是加入文字標籤。

在右邊的操作面板上，有許多可以調整的參數，包含字體、大小、對齊方式、以及字體顏色等。

可重用的UI元件 與Photoshop這種傳統的繪圖軟體相比，UX/UI設計工具的競爭優勢就是其生產率和效率。

設計師可以定義自己的UI組件，並將其放入資料庫中，以在多個框架以及專案之間重複使用。

建立可重用的UI元件 以類別卡片來當做例子，我們可以把UI元件建立出來的文字標籤和勾選方格設定成一個群組。

接著，我們就可以在任何框架中，隨意從Asset中取出並重用這個元件。

使用UI元件修改畫面設計 我們從Asset中創造出一個UI元件的實例後，實例會保留它與原始元件的關連。

看看下面的例子，我們有三個框架，標記為紅色的標題欄是主要元件，而其他頁面的元件則是實體。

使用UI元件的話，在對畫面設計作出更改時，我們就可以節省很多時間。

如果使用者想在標題欄上新增一個按鈕，我們需要對每個頁面標題欄作出更改嗎？Figma提供了一個很有用的功能，我們只需要在主要UI元件（以紅色框標記）加上新的按鈕，這樣在其他頁面的實例（以綠色框標記）就會出現新的按鈕了。

雛形(Prototype) UX/UI設計工具支援雛形設計，改變了整個市場的遊戲規則，因為這個功能讓終端使用者可以在開發的早期階段，來測試畫面流程及評估使用者體驗。

與單調的2D圖案不同，雛形可以生動地呈現設計和互動。

終端使用者越早提供設計的意見，我們就可以更快確定使用者的需求。

這樣一來，就可以降低在後期需要重新設計或是大幅改動設計、而導致延誤的可能性。

這些雛形的設置不需要任何程式碼，只需要直接在Figma的畫面上作一些簡單配置就可以了。

畫面流程(ScreenFlow) 我挑選了一個畫面流程作例子，來示範如何建立一個App的雛形。

以下是一個典型的功能，可以觸發「添加一個新物件到庫存」的行為。

點擊選單圖標，並顯示側邊選單。

選擇選單的一個選項，並且跳轉至新增物件的畫面。

點擊AddUnit按鈕，並彈出一個對話框。

互動設定(InteractionSettings) 互動設定是要告訴Figma，在特定事件發生時，要執行什麼動作。

舉例來說，我們可以告訴Figma，當選單的圖標被點擊時，就顯示側邊的選單。

看看下面的螢幕截圖，我們在Prototype頁籤內作設定，點擊選單圖標後，就要在左上角疊加顯示側邊選單。

完成互動設定後，藍色箭頭就會指示出畫面流程。

要將畫面導航至NewItem畫面，也可以利用這個方式來完成，不過這次我們要在互動設定中選擇“NavigateTo”的動作，並且設定目標為“NewItem”框架。

交付雛形(PrototypeDelivery) 如果你想要在app雛形檢查畫面流程，可以點擊在右上角的“play”按鈕（下圖以紅色方框標記），來啟動你的app雛形。

透過超連結，我們可以方便地交付雛形給終端使用者或是團隊內的其他人使用，不用安裝任何東西，雛形都在瀏覽器中執行。

你可能會擔心有不明人士取得你的連結，但其實不必擔心這類安全性的問題，因為你可以管理存取權限，只允許被授權的人觀看這個雛形。

你可以前往這個網站來嘗試我的範例雛形，這個雛形跟下面的gif動畫流程相同。

色彩主題(ColorTheme) 要創造一個強大、有活力的App，色彩主題非常重要。

色彩可以加強App的表達能力，以透過不同的色彩表達訊息，像是綠色代表自然、紅色代表熱情等。

對於色彩主題的新手來說，MaterialDesign是一個很好的入門工具。

Google創造了這個系統，來建構高品質的數位體驗。

MaterialDesign提供了色彩工具，讓我們可以實驗不同的色彩組合。

這裡我選定了紫色為主題色，淡藍色為副主題色。

將這個色彩主題套用到線框稿之後，畫面設計看起來好多了，不再是灰階(grayscale)的畫面。

程式碼開發 如何根據畫面設計來建立一個圓角按鈕呢？如果你對CSS很熟悉的話，或許你可以透過HTML加上CSS來快速建立一個按鈕。

Figma提供了一個方便的工具來產生CSS程式碼，讓我們可以根據畫面設計來精準地建立UI元件。

看看以下的螢幕截圖，當選擇一個長方形按鈕和文字時，Code頁籤說會顯示相對的CSS程式碼。

除了CSS之外，你也可以獲得iOS和AndroidUI樣式的原始碼。

總結 像Figma這種UI/UX設計工具非常容易使用，不管是不是專業的UX/UI設計師，開發者都可以去使用和實作畫面設計。

開發者不僅可以發展在畫面設計領域的能力，更能夠享受在完整開發流程的成就感，而不是單單專注於編寫程式碼。

我們要變得多才多藝、且可敏捷變化，才可以在這個快速且競爭激烈的環境中成功，多探索並獲得不同領域的新技能對專業的開發者絕對有益。

本篇原文（標題：Figma — HowTechDeveloperPickUptheSkillsofUX/UIDesign）刊登於作者Medium，由GavinFong所著，並授權翻譯及轉載。

作者簡介：GavinFong，軟體開發及系統實作的IT專業人員，熱衷於科技，不斷追尋生命的意義。

譯者簡介：周竑翊–只待過新創公司的iOS開發者，本職是兩個兒子的爸。

有空的時間喜歡看看新的技術跟科技時事。

用Playground寫寫Swift，但是sideproject仍然難產。

其他興趣喜歡攝影、運動及看電影。

歡迎寄信與我聯絡：[email protected] 作者 AppCoda編輯團隊 此文章為客座或轉載文章，由作者授權刊登，AppCoda編輯團隊編輯。

有關文章詳情，請參考文首或文末的簡介。

查看全部文章 評論 載入評論 精選文章 在SwiftUI使用Markdown輕鬆格式化文本 30Mar2022 透過SwiftPlaygrounds4直接在iPad構建一個文字轉語音App 12Jan2022 在SwiftUI中設置漸變動畫(animatedgradient)的3個方法 29Sep2021 最新文章 在SwiftUI利用LiveTextAPI　從圖片中擷取文本 29Jun2022 善用Swift的嵌套物件功能　編寫出更清晰的程式碼 22Jun2022 WWDC22的重點更新：SwiftUI4.0新功能一覽 14Jun2022 很好！你已成功註冊。

歡迎回來！你已成功登入。

你已成功訂閱AppCoda中文版電子報。

你的連結已失效。

成功！請檢查你的電子郵件以獲取用於登入的連結。

好！你的付費資料已更新。

你的付費方式並未更新。