great-good-loading-dog

鬼谷設計

GREAT GOOD DESIGN

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

1年前

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

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

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

Figma - Download

    目錄

  1. 1. Figma的起源
  2. 2. Figma介紹
  3. 3. Figma的優勢
  4. 4. Figma好用的插件介紹
    1. 4-1. 圖片編輯類別
    2. 4-2. 網格底紋
    3. 4-3. Icon
    4. 4-4. 其他類別

Figma的起源

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

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

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

  • 1. 打造共享設計環境

  • 2. 在瀏覽器上輕量化設計的工具

因此他們打造決定用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外掛插件到底哪個好用? 34個插件推薦,從主題到撰寫工具滿足你不同需求, Figma也有支援相當多民間高手的插件,讓我介紹好的工具帶你一起飛!

圖片編輯類別

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

創建任何形狀的傾斜陰影,讓物件變成3D吧!

平面的圖片可以透過一些視角傾斜達到特別的效果

使用漸層色的工具,也可以將最近使用的漸層色存成色卡喔

圖片壓縮匯出可以更輕量,支援多種圖片格式

免費去背的功能插件

網格底紋

重複底紋在純色上透過紋路的改變,改變視覺的感受

透過行列調整的方式建立重複的網格底圖

Icon

Google fonts 團隊提供的icon 插件提供所有人免費使用

Hero icon 也是MIT授權免費開源的icon

這邊上述的icon 在這個插件內都可以快速找到,不用整理真的太棒了

其他類別

網頁初次架構框架討論時,這是非常好用的架構插件

拖曳物件轉換成Gif檔案,讓你的設計更加生動

除了原生CSS ,Tailwind 官方也有製作CSS插件,讓工程師與設計師可以快速相容編譯內容

建立資料庫內容跟規劃內容的圖表非常實用

建立團隊時程表跟Todo是一個非常清楚的小工具喔

更多插件可以從這裡搜尋 Add a little magic to your files – Figma,我們也將持續更新!