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

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

in 工具分享
by Lauren Lin
12 月 02,2020
4 min read

大家好!介紹完 Figma 之後接著換 Adobe XD ,因為前陣子發表了令人驚豔的 Auto Layout 的進階優化功能以及 Component Variant,最近聲勢勢如破竹,讓人很期待 Figma 未來的發展。

老牌的設計軟體 Adobe 在介面設計軟體 Adobe XD 上步調就比較慢了些,從我年初到現在再度碰到 XD 工作似乎沒有太大的差別,但是身為設計軟體的扛霸子品牌還是有它的優勢在,以下是我覺得好用的幾個特色功能:

Adobe XD

Component State

Resource: Adobe User Guide

第一個要介紹的是每個介面設計軟體最基本的 Component ,XD 比 Figma 多了一個 State 轉換功能,可以將一個元件的 Hover 、Click 、Tap 、以及其它和互動變化有關的功能做進一個 Component 中,並在 Prototype 中更真實的呈現元件在每個狀態下的變化。

比如說我最近在設計 App 的卡片展開收合功能很頻繁地使用這個功能,這可以讓工程師或客戶更好理解該元件動畫的轉換和樣式。但設定的時候會有點費勁,有些樣式是在其他 States 才有的,常常一不小心就做到 Default State 上,需要更細心的留意,希望可以優化這點 XD

Stack & Padding

Resource: Adobe User Guide

這算是今年比較新的功能了,XD 將網頁常見的 Padding 和 Stack 元素加進來了,方便我們更快速的完成設計稿,不用再重新調整元件間距。只要將物件 Group 起來就可以使用這兩個功能囉!

Padding 簡單來說就是設定元件的內距,讓同一系列的元件維持一致的規則,不用再手動調尺寸,整體的一致性也更高。

Stack 是個很方便的功能,例如以前做 Prototype 時,文字過多需要換行,往往需要手動調整背景高度,有了 Stack,就可以自動拉長元件高度,也會往垂直/水平方向自動排整齊,省時省力!

以上其實算是 Figma 的特色功能,現在 XD 也借鏡了這個功能(是嗎?),但 XD 在設定該功能時不會像 Figma 自動對齊裡面的子元件,還需手動調整,不知道是不是希望讓設計的自由度更高?

Adobe XD 系列軟體整合

Resource: Adobe XD USer Guide

不必多吹捧,肯定是 Adobe 在這領域的優勢了!網頁設計師在很多狀況下還是需要做圖, Adobe XD 支援直接將 PSD 檔置入 XD 中,只要在 Photoshop 修改檔案,最終確定後再輸出圖檔即可,非常便利又不用浪費電腦容量存一堆圖,在我心目中其他軟體比不上的強大功能,還不許其他家擁有!

另外 Adobe XD 可以將 Artboard 立即輸出成 After Effect 元件喔,不用辛苦的切圖,馬上就可以做成 UI 小動畫,很期待 Adobe 將自家一系列的產品完全整合成功的樣子!

Prototype 動畫精緻以及 Adobe XD App 擬真模擬

Resource: Adobe User Guide

在 Figma 和 Adobe XD 中我覺得 XD 可以做出更細緻的動畫,可能XD的開發角度是以設計師為出發點,更注重視覺上的效果,動畫的選擇上比Figma更多也可以設計出精采的轉場效果,但這可能是工程師的惡夢。順帶一提,聽說 Figma 在明年初就會推出 Prototype 的新Feature,到底會有什麼強大的新功能很值得期待。

另外非常推薦 Adobe XD App 的 Prototype 效果,是 App Designer 的福音,當你在電腦上設定好 Prototype 流程後,手機 USB 連接到電腦打開 App,就可以像使用真的 App 一樣測試你的流程以及樣式囉,因為在電腦看到的比例和手機實際看到的感覺不太一樣,在手機看可以更清楚哪些地方需要調整,也不會出現字體過大/小的問題。

該選擇 Figma or Adobe XD

繪圖工具的精細度

若是已經熟悉 Adobe 軟體的設計師,那 Adobe XD 入門的痛點可以說幾乎沒有,很輕易的就可以上手他的功能,錨點的精緻度和直覺度也比較高。

Figma 的繪圖工具相對就不是強項,我在畫較複雜的 Icon 等元件就覺得不太方便,常常跑回去使用 Adobe 的軟體做圖。

視覺優先還是流程優先

如果你的作品是以視覺導向的網頁設計為主,那我會推薦Adobe XD;若是產品導向的介面設計,那Figma會比較適合你。

Adobe XD 和其他的系列產品上整合度較高,因此可以使用其他軟體來完成你的需求,網頁設計經常需要做到 Banner 等複雜的主視覺以及小 Icon,這方面有 Photoshop 等設計軟體輔助會方便很多。

再加上 Adobe XD Prototype 的動畫呈現較精細,很適合視覺導向的網站 Prototype。

協作功能

承上一主題,若是你想成為產品導向的設計師,那就會常常和 PM 或是 RD 等其他專業領域的人協作一起完成產品。在協作功能上 Figma 的即時性以及 Code 的顯示大於 Adobe XD,Figma 是線上軟體,即時性高,修改完就可以馬上和夥伴確認,也不會有存多個版本變成檔案海找不到的狀況,或是你把檔案放在其他電腦,生不出來的狀況。

Adobe XD 需要上傳到雲端才有線上 Code Inspector 的功能和 Prototype 功能,若是在十分繁忙的工作下,一不小心就會出現少上傳新版本的狀況。

入門新手建議

最後的最後,如果像我一樣有選擇障礙無法做決定的話,兩種都試用看看之外,我建議可以先從 Adobe XD 開始上手喔,他的介面直覺性較高,不會有看了介面一頭霧水的狀況發生。

Figma 在最近幾次的更新感覺他們是想往更進階的網頁介面軟體發展,除了功能和 CSS 邏輯更為相似外,作圖的功能相對較弱,比較適合了解 Code 邏輯的設計師來使用!

以上就是這次的設計軟體比較,希望大家看了更瞭解自己的需求取向喔!

看上篇:

Figma V.S Adobe XD 比較心得 : (一) Figma 篇
Tags: Adobe XdFigma
ShareShareShare
Lauren Lin

Lauren Lin

初入職2B介面設計的菜鳥設計師

上一篇文章

一起來畫科技插畫吧!

下一篇文章

為網站內容選擇適合呈現方式

相關文章

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

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

by Debby
7 月 20,2022

之前 apo design 有分享過一篇 『幾個 Figma 實用的 Plugin 分享』這次要來分享第二篇!最近 Figma 從 5 月 Config 開始,...

無障礙網頁設計

漫談無障礙網頁設計-3

by Judy Shyu
9 月 01,2021

上一篇講了無障礙網頁在設計上的大方向,這一篇將從各種元件的細節來討論,從尺寸、色彩、文案、影音……究竟設計上還有什麼值得注意的地方? 

幾個 Figma 實用的 Plugin 分享

幾個 Figma 實用的 Plugin 分享

by Lauren Lin
4 月 28,2021

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

Back to List

一塊特別企劃

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

標籤

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

聯絡我們

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

  • 服務條款
  • 隱私權政策

Follow us

Copyright © 2020 apodesign.tw All Rights Reserved.

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