Into Community，連結全世界的設計資源 | Proto Uncle #EP3

Aug 24th, 2020

Proto Uncle，給設計師、產品經理學習製作 UI Prototype 的系列分享活動。透過 Figma + Framer，將腦中所構思的想法、互動操作具體呈現出來。每週的 Proto Uncle 包含有實作練習、小撇步、以及額外讀物，期待暑假過後，完成系列分享的你將會對 Prototyping 更熟稔 🍺 。

嗨各位朋友，第二週的內容還跟得上嗎？ EP2 收到一位讀者 +0 的作品，安摳覺得他在 Dragging Animation 搭配 Smart Animate 的動畫很有感覺又流暢，還請各位動動手指玩看看:

EP1, EP2 從基本的點擊互動講起，再練習不同的手勢操作、模擬等待行為、以及不同的轉場 (蓋板、滑入...等等)，這週 EP3 我們會借用社群的力量，讓你獲得資源的管道、學習的效率提升數十倍！

今日目標: 融入 Figma Community 的生態系

首先各位讀者先從這裡 複製這次的範例設計稿 到自己的 Draft Folder，這週會著重介紹 Figma Community，實作部分的練習會較少，結束後各位讀者應該能妥善使用 Community & Plugins 功能，同時清楚其限制:

  1. 深入淺出 Plugin: 安裝、使用、限制

  2. Community (1/3): 用 hashtag 抓住潮流的趨勢

  3. Community (2/3): 用追蹤功能打造個人 Trending Feed

  4. Community (3/3): 是剽竊還是致敬？聊聊 license 這件事

📚 Lesson

在進入 Lesson 前請先看看自己的 Figma 目前長相是下列哪一種，上面一張是舊版，側邊欄有顯示 Plugins 的版本，在 EP1 如果你有填寫 Figma beta 表單你應該會在最近更新介面為下方截圖版本，側邊欄顯示 Community :

image
image

深入淺出 Plugin: 安裝、使用、限制

Plugin，一個讓全世界工程師或設計師協助一起打造更好工作流程的 Feature！

Figma Plugins 有很多種類型，有些會產出圖片、色票，有些則會幫忙複數圖層重命名，另外也有貼心幫你維護 Design Systems 的。這次的範例如下:

透過 Plugins 幫忙產出 Icon, Map, Chart, 精美圖片，我們可以製作較真實的活動路線規劃地圖 Prototype。首先請你先到 Community (或是舊版的 Plugins) 分頁搜尋下列四種套件: Feather Icons, Charts, Unsplash, Mapsicle，並按右上 Install 按鈕來安裝:

安裝好這四個套件後可以開啟這週的設計稿，切到 🍺 exercise 分頁，這裡我們先開啟 Feather Icons，第一次要開啟一個套件時，一定要從 Menu > Plugins > Feather Icons，如果要第二次打開上次使用套件，可以直接按熱鍵 command + option + p 來達成。

打開後可以練習放上 Wind, Temperature, Sun 相關的 Icon 在第一個 Frame 裡面，讓上半部的卡片都有符合文字意思的 Icon。


接下來可以試著自己摸索如何在下面放上人潮量長條圖表(人數對應一天24小時)，第二個 Frame 使用 Mapsicle 放上某山區的地圖，第三個 Frame 使用圖庫網站 Unsplash 製作的套件來放實際活動路線的照片。大部分的套件在安裝頁都會在放詳細的 Step by Step 或是注意事項，這邊安摳希望大家習慣去讀文件，畢竟每週 Figma 都會更新 5 - 10 個套件，學習如何看一個新套件怎麼使用也是一門學問～

小提醒: Figma 套件的使用限制目前有以下:

  1. 一次只能使用一個套件，無法做到套件之間的溝通

  2. 目前不支援客製化快捷鍵，唯一相關的指令僅有 command + option + p: 呼叫前次使用之套件

  3. 更多詳細的支援與限制可以看這裡

以上只是簡單帶過基本的 Plugins，有些較為進階的 Plugins 會需要照著套件說明去執行，譬如安摳有製作了一個 Context Switch，用來快速切換多國語系的小工具，這個就結合了 Airtable 來存放各國語系內容，要 Setup 並使用套件就需要額外 Airtable 上帳戶的資訊。

Community (1/3): 用 hashtag 抓住潮流的趨勢

在 Community 裡面，hashtag 扮演搜尋裡面很重要的幫手，在首頁上方，你可以點下 Design Systems 的 tag，馬上就會有超過一百份的設計稿讓你直接觀摩、使用，這些檔案會持續更新，在內頁裡的 Details section 可以知道最後更新的日期。


在內頁可以直接點選其他 tag ，另外針對該 tag 做搜尋，這樣的 labeling 讓你在 Figma 裡面就能接觸到各式各樣的檔案，無需再開 Google 分頁找素材。

Community (2/3): 用追蹤功能打造個人 Trending Feed

你可以直接在 Community 首頁的 Search bar 搜尋 creator (譬如搜尋: lichin 😎 )，或是從 File, Plugin 內頁裡的 Publisher 連到帳戶的頁面，在你 Follow 了幾個帳號後，會自動建立起 Feed 這個資料源，裡面就是你 Follow 的設計師所上傳的集合。

以我的 Feed 來說，我就會看到 Spotify 團隊上傳有關工作流程的 Ways of Working in Figma、或是 Gitlab 給全員工 Figma Onboarding 的文件 Figma for GitLab，大約一週上來看一次，每次都會有不少驚喜跟收穫！

image

Community (3/3): 是剽竊還是致敬？聊聊 license 這件事

在 Community 找到合適的設計稿後只要按下 Duplicate 後，這份檔案就會直接被複製到你的 Draft Folder，一下子就有上千份設計稿 / 世界各地設計師的創作任你使用，但也請記得，這些設計稿在發佈到公開的 community 上時是有使用 license 的，使用設計稿的方式需要在規範範圍內。

目前 Figma 都使用相同的 (CC BY 4.0) license，它允許你分享、修改素材，包含商用性質之使用，換句話說基本上 Community 就是一塊寶地任你挖取了！當然有個小限制就是你需要給原作 Attribution，以及不能再另外新增別種 license。 你可以在每份檔案的右下角 Details section 看到 License 的資訊。

📌 Tips for you

怦然心動收納術: 快速收納全部圖層 + 隱藏左右兩側工具列

  • 隱藏左右兩側工具列: 想要 Demo 中間 Canvas 上的設計稿流程、想法，卻嫌畫面略擠嗎，按下 ⌘(command) + . 或是 ⌘ + \，左右兩邊工具列直接隱藏起來！

  • 快速收納全部圖層: 左手邊圖層有的開有的關，按下 option + L 可以直接將全部 layers 摺疊收起來，看得神清氣爽、井然有序！

生活駭客: 一次對物件移動 8 pixel
根據官方初始設定，按 Shift + 上下左右方向鍵，元件會一次移動 10px，你可以透過以下設定將移動單位改成 8px，( 8px grid system 是很多 design system 會使用的設定)

  1. 從左上角選單找到 Preferences > Nudge Amount

  2. 把 Big nudge 從 10 改成 8

🍜 Today's Special

Tom Lowry 跟上週的 Joey 一樣都是 Figma 社群的推廣者，除了設計分享外，他也在 Github (世界工程師交友平台，咦？) 上放了很多有趣的開源專案，在他的 Figma Profile 裡面安摳很喜歡下面兩種類型的分享:

  1. Journey to start building plugins: 以設計師角度出發踏上製作套件的旅程，從第一個套件上架後三番兩次更新，到後來製作了將近十個套件的心得分享，另外也很佛心做了一個 Plugin banner設計模板，讓其他人可以快速產出符合規格的設計。

  2. Plugins: Tom 製作的第一個套件Themer 讓設計師可以快速抽換整個 UI 的色系 (light ←→ Dark)，Status Annotations 則可以在設計稿上標注不同設計的進度狀態，讓其他 PM, 工程師可以清楚知道哪些元件可能還需要設計師趕工完成。

看完了 Tom 的 Profile，有讓你想繼續探索其他有趣的設計師的個人空間了嗎，花一點時間探索 Community，把你覺得有趣的人 / 設計稿送給安摳來看看 🤟

Back

Designtips.today

🕶