一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
沒有結果
檢視所有結果
一塊設計 | apo design - 設計共筆部落格
沒有結果
檢視所有結果
Home 工具分享

5 個 Figma 實用小工具與技巧分享!

in 工具分享
by Debby
7 月 20,2022
6 min read

Table of Contents

Toggle
  • 選取小幫手! Similayer &  A Selector
    • Similayer
    • A Selector
  • Replace 好方法! – Paste to replace
  • Sort Layers
  • GRAMMAR
  • A11y – Color Contrast Checker

之前 apo design 有分享過一篇 『幾個 Figma 實用的 Plugin 分享』這次要來分享第二篇!
最近 Figma 從 5 月 Config 開始,優化和新增了許多功能、 6 月甚至推出 Widgets 讓使用者在 Figma 上方的工具列就能夠選到 Component, Plugins , Widgets !

看起來會有越來越多有趣的 Plugins 和 Widgets 被開發!

而在眾多的 Plugins 中,筆者這次分享的是近期較常使用的。

比較著重在檔案整理、建立 Design System 或是要製作大量設計稿時會使用的工具。
如果你也正在進行類似的工作,希望以下介紹的 Plugins 可以幫助到你~!

選取小幫手! Similayer &  A Selector

當圖層越來越多、頁面內容越來越多時,有時困擾哪些部分使用了統一的樣式、又有哪些內容是沒選到的漏網之魚(ex.圓角、顏色、線條樣式等),此時可以用 Similayer 或 A Selector 選擇相同的樣式,然後一次修改!

Similayer

Similayer 選取方式:

A Selector

A Selector 選取的方式:

Replace 好方法! – Paste to replace

當我在設計介面,前期還未決定 Component 樣式時,會有一段視覺測試的階段,此時可能會試排版、試顏色、試字體等,會排好幾個版之後決定其中一個樣式後建立 Component ,接著會將舊的 Component 或是正式版的設計替換成新設計,此時就能先複製新樣式,然後逐一使用 Paste to replace 替換內容。
這部分適用改動幅度較小、或是如果有預留 WIP 或 Pending 的區域。像是 Model 外框確定但內容排版尚未訂定時,此時預留空白一塊灰色區塊或是突兀的顏色來提醒自己更新內容時一併替換。

Sort Layers

如果你有圖層與畫面的控制欲或是希望交付一個從圖層命名就能找到設計稿的畫布位置時,就能夠使用 Sort Layers!
想像當你在一個 page 內放入 10 張左右的畫布表示一個流程順序(ex. 由左至右表示步驟由 1 ~ 4 等),當工程師或接收到的設計師可以透過圖層順序對應到畫布排列。 例如以下示範:

GRAMMAR

接著分享的是 Spelling , Grammar 檢查工具。他可以選擇其中一個 Frame 或 Page 檢查。

檢查後也能在建議修改的文字上選擇跳到那個 Layer 去確認是否要修改。

此一個 Plugin 是要收費的,有提供 5 天試用。

另外一個類似的工具 SPELLL 我也有用過,但我單純只是因為 GRAMMAR 可以一次看多個內容,同時可以跳到那個元件。
如果你也有推薦的類似工具,也歡迎分享給我!

A11y – Color Contrast Checker

在做介面設計或 Design System 時,需要確認字體與底色對比度、大小等,以便適用於視障或更多身份者。

而這個 Plugin 可以同時選取多個圖層確認;在未通過的選項也可以調整文字或底色的亮度。


關於無障礙網站的介紹歡迎查閱: 漫談無障礙網頁設計 系列文章

我通常會設計多種樣式、嘗試不同的淺深底色,接著再一次選取後確認:

了以上的 Plugins 外,還有更多實用的工具像是插入 Icon 神器 – Iconify 、畫流程圖的工具 – Autoflow、快速插入使用者頭像素材圖的 User Profile 等等這些工具也推薦讀者裝來玩玩看!


如果有其他有趣的 Plugins 下次也可以一併分享。🤓

Tags: Figma
ShareShareShare
Debby

Debby

Web designer. CSS / Figma Lover. 🍹

上一篇文章

接案設計師的常見盲點

下一篇文章

漫談無障礙網頁設計-4

相關文章

幾個 Figma 實用的 Plugin 分享

幾個 Figma 實用的 Plugin 分享

by Lauren Lin
4 月 28,2021

又是 Figma 的推薦文,這次要來分享最近用過覺得很實用的 Figma plugins,可以在工作中有效地增加工作效率、或是讓設計看起來更加真實。 Unspl...

Figma V.S Adobe XD 比較心得 : (一) Figma 篇

Figma V.S Adobe XD 比較心得 : (二) Adobe XD 篇

by Lauren Lin
12 月 02,2020

大家好!介紹完 Figma 之後接著換 Adobe XD ,因為前陣子發表了令人驚豔的 Auto Layout 的進階優化功能以及 Component Vari...

Figma V.S Adobe XD 比較心得 : (一) Figma 篇

Figma V.S Adobe XD 比較心得 : (一) Figma 篇

by Lauren Lin
10 月 14,2020

近期公司的設計軟體轉換到 Figma 了,原本是 Adobe XD 重度使用者的我,也得開始熟悉 Figma,使用了一段時間後,分享這兩個設計軟體使用後的心得供...

Back to List

一塊特別企劃

一塊特別企劃|設計師問與答 Part2

一塊特別企劃|設計師問與答
連結至一塊設計 facebook 專頁

標籤

Adobe Xd (3) AI (1) B2B (1) COVID19 (1) designer (2) design tool (3) Figma (4) functional map (1) HTML (2) illustrator (1) UI (27) UX (19) web design (1) Wordpress (2) 一塊特別企劃 (8) 字體 (7) 專案管理 (1) 無障礙網站 (5) 產品設計 (2) 筆記 (4) 經驗分享 (31) 網頁設計 (21) 設計問答 Part 2 (10) 設計師問答 (1) 設計選書 (2) 課程心得 (1) 講座 (2) 購物流程 (1) 週年企劃 (5) 遠端工作 (2) 電子報 (1) 靈感 (6)
一塊設計 a piece of design

聯絡我們

任何合作或問題請洽:
info@apodesign.tw

  • 服務條款
  • 隱私權政策

Follow us

Copyright © 2020 apodesign.tw All Rights Reserved.

沒有結果
檢視所有結果
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書