FIgma介紹及好用插件分享，一個不容錯過的好工具

Figma

Figma 是一個多功能的應用程式，也是一個強大的網頁工具

不僅能離線作業也能線上同步工作，強調使用者介面與用戶體驗設計

有人會用 XD 排版，有人會用 PS 製圖，那這個可以裝載插件的工具，是一個你不容錯過的好軟體喔！

Figma - Download

Figma的起源

Figma 也許你不陌生，也許你從沒聽過，但如果只有耳聞卻還沒接觸的你，希望藉由這邊文章讓你更認識 Figma

Figma 的竄起在網頁設計產業中引起風潮，設計網頁的工具這麼多，為什麼唯獨 Figma 可以在 2020 年使用率突破 66%，甚至用途不止於在網頁設計的範疇上?

相信大家都有耳聞 Adobe 豪擲 200 億收購 Figma，但你們知道嗎?Figma 之所以被開發出來是為了挑戰 Adobe Photoshop 及 Adobe Fireworks 的難用困境，Dylan Field 及聯合創辦人 Evan Wallace 由 Google Docs 的線上團隊執行作為靈感，主要開發目的有兩點：

1.打造共享設計環境
  1. 在瀏覽器上輕量化設計的工具

因此他們打造決定用 Web GL 在瀏覽器中建立一個雲端設計工具，Figma 就此誕生…

Figma介紹

由於創辦初期是完全免費使用的，後為將使用者擴大市場而有其他的企業收費標準，可以針對團隊使用的目的及方便性選擇升級的版本

Figma 目前使用分為兩種使用版本，一種是桌面應用版，一種是網頁瀏覽器端

其實用戶介面很簡單，也非常好上手，因為 Dylan Field 為了減少在設計工具上的學習曲線，也減少設計苦手的挫折感，讓使用者在製作的時候可以輕易地操作介面，並且可以快速產生想要的內容

除了網頁 UI/UX 設計、動畫、UML、框架圖、流程圖你想應用的範圍都可以透過自己的創作或者內部的元件，甚至是其他人分享的範本或設計主題去做應用

最吸引人的特點，Figma 還有強大的插件，就像 VScode 一樣，透過插件工作可以讓你的設計時間減少、提升效率，也可以讓作品達到更好的效果！

Figma的優勢

1.及時協同開發
Figma在分享檔案連結給你的夥伴之後，可以像Google Doc一樣看到其他夥伴的滑鼠游標，就像大家在同一時間在一個畫布上共同畫作一樣，非常適合及時討論及團隊共同編修作品內容
2.線上修改展示
在Figma的共享優勢下，設計人員、專案管理以及客戶都可以在同一個畫面進行交流，提供互動良好的介面以及備註功能，減少轉檔編寫文件的時間，在專案的運行下可以更有效率
3.雲端自動儲存
設計最怕就是檔案沒儲存就頁面罷工，但是有自動儲存就不會再有這種問題，不用擔心忘記儲存、突然斷線，工作也變得好安心！

4.CSS檢索工具
現在Photoshop 也可以將CSS轉出了，但Figma可以輕易點擊就能看到編譯的CSS樣式內容，這樣的工具難道你捨得錯過嗎?

5.主題顏色管理
每個網站或設計都有主題顏色、也會有顏色配比，透過顏色管理可以快速地控制這些顏色項目，再某些需要快速轉換顏色的時刻，就不需要土法煉鋼一個一個去修正了
6.組件複用屬性
把可複用的項目設計成組件，這些組件會共通屬性，在專案的設計中，重複的樣式風格一定會有，透過組件設定可以一次修改所有複用的項目

Figma好用的插件介紹

像之前介紹的 最佳 Visual Studio Code (VSCode) 插件推薦：34 款必備工具提升工作效率， Figma 也有支援相當多民間高手的插件，讓我介紹好的工具帶你一起飛！

圖片編輯類別
這個圖庫相信大家都不陌生，透過插件，不用再去把圖庫的圖片一個個下載下來，直接搜尋關鍵字就能插入圖片
Unsplash

這個圖庫相信大家都不陌生，透過插件，不用再去把圖庫的圖片一個個下載下來，直接搜尋關鍵字就能插入圖片
創建任何形狀的傾斜陰影，讓物件變成3D吧！
oblique

創建任何形狀的傾斜陰影，讓物件變成3D吧！
平面的圖片可以透過一些視角傾斜達到特別的效果
Isometric

平面的圖片可以透過一些視角傾斜達到特別的效果
使用漸層色的工具，也可以將最近使用的漸層色存成色卡喔
Webgradients

使用漸層色的工具，也可以將最近使用的漸層色存成色卡喔
圖片壓縮匯出可以更輕量，支援多種圖片格式
TinyImage Compressor

圖片壓縮匯出可以更輕量，支援多種圖片格式
免費去背的功能插件
Icons8 Background Remover

免費去背的功能插件
網格底紋
Icon
其他類別

更多插件可以從這裡搜尋

Add a little magic to your files – Figma

，我們也將持續更新！