【教學】如何使用 Figma 進行設計項目創建與協作

在很短的時間內,Figma 已經成為全球最常用的設計工具之一,這背後有幾個原因。與需要購買和安裝在您機器上的 Adobe Illustrator 等工具不同,您可以在網頁瀏覽器中免費運行 Figma,而無需安裝任何東西。這也使其適用於運行 macOS、Linux 甚至 ChromeOS 的機器,以及 Windows。

此外,Figma 允許您與其他人實時協作同一個項目,這可以節省大量時間。最後,這個工具非常強大,適合行業專業人士和業餘愛好者。因此,如果您想學習如何使用這個奇妙的設計工具,請查看這本全面的指南。

Figma 是一個在線協作設計工具,讓您可以從瀏覽器設計應用程式、網站等。它主要用於用戶界面設計,但也可以用於其他用途。該程序可以在您的網頁瀏覽器或桌面上運行,甚至提供有限的離線功能。此外,當您設計完應用程式或網站後,您可以在程序中測試它並收集反饋,這得益於原型工具。Figma 的最佳之處在於您不需要任何編碼知識或技能即可使用它,這使其適合每個人。

步驟 1:設置您的 Figma 帳戶

  1. 在您的網頁瀏覽器中前往 figma.com,然後點擊「免費開始」按鈕。
  1. 然後,您可以使用 Google 帳戶或電子郵件登錄 Figma,點擊您首選的選項。
  1. 登錄 Figma 後,您將看到另一個頁面,您可以在此輸入一些詳細信息以設置您的帳戶。在這裡,您可以選擇計劃並為協作創建團隊名稱。完成後,您可以在 Figma 和 FigJam(Figma 的白板工具)之間選擇。點擊「我將自己開始」。

步驟 2:理解和導航界面

一旦您創建了帳戶並登錄,您將看到主 Figma 儀表板。

  1. 在左側,您將看到所有草稿、項目和垃圾桶。
  1. 您還將在中間看到選項,例如「新設計文件」和「新 FigJam 板」,這將讓您開始新項目。
  1. 您曾經工作過的項目和 Figma 社區的項目也會在這裡出現。您可以通過點擊它們來打開並繼續工作。
  1. 當您通過點擊選擇一個項目時,界面將會改變。左側將出現一個菜單,包括項目名稱、文件、頁面、圖層等選項。請記住,您只能在免費計劃中在一個項目中創建三個頁面。
  1. 您還可以點擊頂部的 Figma 按鈕以查看更多選項。
  1. 另一個菜單,稱為屬性面板,出現在右側。當您在項目中選擇一個對象時,所有屬性將在這裡顯示,讓您能夠輕鬆編輯和更改它們。
  1. 默認情況下,這個面板的「設計」標籤是活動的,讓您查看和更改您在項目中使用的元素的各種屬性。例如,您可以從設計標籤中更改對象的樣式和背景顏色。
  1. 一旦您完成網站或應用程式的設計,您可以點擊「原型」標籤以切換到它。這讓您可以創建和查看您正在設計的網站或應用程式的互動版本,幫助您更好地了解用戶的體驗。您可以鏈接應用程式的不同頁面,決定用戶如何從一頁移動到下一頁,點擊或點擊各種元素會發生什麼等等。
  1. 要與其他人合作項目,只需點擊右上角的「分享」按鈕。然後,您可以選擇是複製整個項目的鏈接、複製原型鏈接、複製開發模式鏈接,還是將項目發佈到 Figma 社區。
  1. 在底部,您將找到工具面板或工具欄,其中包含您在設計項目中使用的不同工具。
  1. 某些工具具有額外選項,您可以通過點擊下拉按鈕訪問。例如,第一個工具是「移動」工具,讓您在設計中移動不同元素。當您點擊它時,您還會看到「手」工具,用於平移,以及「縮放」工具,用於調整元素的大小。
  1. 接下來是「框架」工具,您將用來創建框架,其中所有其他對象將放置在設計中。這裡的其他工具包括「區域」工具,用於將畫布分為各個部分,以及「切片」工具,用於導出設計的特定部分。
  1. 然後是「鋼筆」工具,用於在您的項目中創建矢量設計。您還可以從這裡訪問「鉛筆」工具,讓您在畫布上進行草圖,這在您想要註解某些內容時非常方便。
  1. 最後三個選項工具沒有額外選項。有「文本」工具用於添加文本,「評論」工具用於評論,以及「操作」工具。操作工具讓您在完成設計階段後開始原型階段時定義各種步驟和操作。

步驟 2:創建新的設計項目

您可以從 Figma 的儀表板開始一個新項目。

  1. 點擊左側的「團隊項目」。
  1. 然後點擊頂部的「創建」按鈕,並在下拉菜單中選擇「設計文件」。
  1. 一個新的設計項目將在您的屏幕上打開。您可以通過在左上角的文本框中輸入名稱來給它命名。
  1. 灰色區域是畫布,將作為您項目的背景。您可以使用鉛筆工具在上面繪製,導入圖片,添加形狀和框架等等。
  2. 在 Figma 中,您需要使用「框架」,它們作為您在設計項目中使用的所有其他元素的容器。框架的功能就像其他設計應用程序(如 Illustrator 和 Sketch)中的畫板。點擊工具面板上的框架工具或使用 F 鍵選擇它。您也可以使用 A 鍵達到同樣的目的。
  1. 要創建框架,請在畫布上單擊並拖動,或從右側的任何預設框架大小中選擇。
  1. 當您創建框架時,您將在右側看到其各種屬性。更改這些屬性將讓您控制框架的顯示方式。
  1. 項目可以有多個框架,因此您可能在工作時需要經常放大和縮小。您可以使用 Shift + + 快捷鍵放大,使用 Shift + - 快捷鍵縮小。
  2. 您可以使用手工具移動畫布,這在處理大型文件時非常方便。按住 空格鍵,您將看到光標變為手工具。或者,點擊底部工具欄上的光標圖標,選擇手工具。然後,您可以通過點擊和拖動來移動畫布。在 macOS 上,您可以使用兩根手指在觸控板上拖動。
  1. 要在項目中添加文本,按 T 鍵或點擊工具欄中的「T」圖標以選擇文本工具,然後在框架內單擊。接著輸入您想要添加的文本。按 Esc 鍵退出文本工具。
  1. 您可以使用 R 鍵或點擊「形狀」工具並選擇「矩形」選項來創建按鈕的矩形。然後在框架上拖動以創建矩形。
  1. 當您創建一個矩形時,它會隱藏下面的文本。您創建的所有對象將作為單獨的圖層顯示在左側。右鍵單擊文本圖層或在 Mac 上 Ctrl 單擊,然後點擊「置於最上層」將其移至頂部。
  1. Figma 還允許您使用各種「對齊」命令對不同對象進行對齊。為此,在按下 VEscape 鍵後,拖動並選擇各種對象,例如文本框和矩形。對齊命令出現在右側;點擊任何選項,例如「對齊水平中心」或「對齊垂直中心」。
  1. 要更改文本顏色,請向下滾動右側的屬性面板,然後點擊「填充」下方的顏色樣本。然後,您可以從彈出窗口中選擇任何顏色。
  1. 您還可以從屬性面板中更改字體、字體大小、添加字體效果等,以便為您在項目中使用的不同元素設置樣式。一旦您熟悉這些基礎知識,就可以開始實際項目,如應用程式和網站設計。

注意事項

  • 雖然 Figma 是一個在線協作設計工具,您也可以在瀏覽器和桌面應用中離線使用它。在使用 Figma 離線時對項目所做的任何更改都將存儲在本地,並在您重新連接到互聯網時生效。
  • 您可以通過使用插件來擴展 Figma 作為設計程序的功能。Figma 支持許多插件,您可以從插件庫中查看和安裝。
  • 要在項目上進行協作,您只需使用「分享」按鈕與其他人共享即可。Figma 不僅讓您複製項目的鏈接,還可以共享原型鏈接、開發模式鏈接,並將您的項目發佈到社區。
  • 您可以在 Figma 社區中找到多個項目,與其他 Figma 用戶互動和學習。社區設計對所有用戶免費開放,您還可以獲取其他資源,如庫、插件、圖標集等。

“`

日本電話卡推介 / 台灣電話卡推介

更多儲值卡評測請即睇:SIM Card 大全
https://www.techritual.com/category/sim-card-review/