このページでは、当方が主に使用するFigmaとAdobeXDについて記載
補足で、Drama、Framerのことも少々
①特徴
Figma
Adobe XD
- ネイティブアプリ
- ネット環境に左右されない
- インターフェースが日本語対応可
- テーマが「デザインツール」
- Photoshop、Illustratorと連携作業可能
補足：FigmaとAdobeXDの互換性について、以下のサイトでわかりやすく説明されています
FigmaとXDの互換性は？FigmaとXDを相互にインポートする方法を紹介
②料金
Figma
- $12/month〜
- 3ページ使用まで無料
Adobe XD
- ¥1,298/month
- スタータープランであれば無料
- ただし、バージョンアップは不可
③使用感
Figma
Adobe XD
- レイヤー管理
- Photoshop、Illustratorに類似
- コピー＆ペースト
- アートボード基準
- 直感的
④機能
Figma
- サイズ表示
- オブジェクトにも表示
- 色補正
- 色調調整可
- キャンバスサイズ
- 130,000pix
- コンポーネント
- プロパティとバリアント作成
- オートレイアウト
- 二か所操作
- 動画、GIF
- 不可（GIFはOK）
- Effect効果
- 各要素1つに複数OK
- ドロップシャドウ
- インナーシャドウ
- ぼかし
- 背景のみのぼかし
- 各要素1つに複数OK
- モックアップ
- デバイスプレビューで可変
- 共同編集機能
- リアルタイムに反映
- 議論しながらの制作に強い
- プロトタイピング
- 可能
Adobe XD
- サイズ表示
- オブジェクトはサイドバー表示
- 色補正
- 色調整不可
- キャンバスサイズ
- 25,000pix
- コンポーネント
- 各パターンのステートを作成
- オートレイアウト
- 三か所操作
- 動画、GIF
- 15MBまで可能(mp4、GIF）
- Effect効果
- 各要素1つに1つまで
- ドロップシャドウ
- インナーシャドウ
- ぼかし
- 背景のみのぼかし
- 各要素1つに1つまで
- モックアップ
- アートボードで最初に設定
- 共同編集機能
- 管理者が更新後に反映
- 編集タイミングによっては競合
- プロトタイピング
- 可能
⑤ツール固有の機能
Figma
- タブで複数のファイルを開ける
- FigJamファイルが利用可能
- Versionhistoryが利用可能
- Resize to fit が利用可能
Adobe XD
- CCライブラリ使用可能
- リピートグリッド機能
- スクロールグループが簡単
- 3D変形で高度な表現が可能
⑥メリットまとめ
Figma
- ウェブ上で操作が可能
- アプリをダウンロードする必要がない
- 自分のパソコン以外でも使える
- 個人利用のみなら無料
- 有料プランではチームでシェア可能
- 動作が早い
- プラグインが豊富
- 画像の彩度・明るさ調整などができる
Adobe XD
- Adobeの他の製品と併用利用可能
- 「Illustrator」「Photoshop」を使用する場合、データ利用で非常に便利
- 操作、ショートカットキーなどが他Adobe製品と同じ
- プロトタイプが簡単
- 動作が早い
- チームでシェアしやすい
- 直感的操作で学習コストが低い
⑦デメリットまとめ
Figma
- チーム制作の場合、費用がかかる
- 個人利用、最小単位であれば無料
- 思わぬ課金が発生する場合がある
- アラートなしで簡単に編集権限を可能にできるため
Adobe XD
- 無料版は７日間のみ
- スタータープランなら無料
- 画像補正ができない
- PhotoshopやIllustratorと互換性あるため
⑧その他のデザインツール
Drama
アニメーション機能が非常に優秀。2019年ベータ版開発→現在も開発続行中
このツールの詳細は以下のサイトを参考 webdesign-trends.net
Framer
Reactのコードでコンポーネントを作ることが可能
他のツールでは不可能な動的表現（動画、ボタン）が可能
難点は、無料でできることがFigmaと比較して少ないこと
このツールの詳細は以下のサイトを参考
