どうしたの、急にデザインツールの話？

会社でFigmaを導入することになって、勉強しているところなんだ。今までは主にAdobe XDを使っていたんだけどね

FigmaとAdobe XD、今どういう関係にあるのか

会社でFigmaを使うようになった理由は、世界的なシェアの高さと使いやすさ、そしてAdobe XDと操作感が近く移行しやすかった点です。とはいえ、プロジェクトによってはAdobe XDも引き続き使う方針で、完全に置き換えたわけではありません。

ここで一つ整理しておきたいのが、AdobeとFigmaの関係です。以前、AdobeがFigmaを買収するという発表がありましたが、この買収は米国・英国などの規制当局の懸念により2023年末に正式に撤回されており、Figmaは現在も独立した企業として運営されています（参考：Adobe-Figma merger canceled – American Graphics Institute）。

一方でAdobe XDは、この買収話をきっかけに新機能の開発が停止され、現在は「メンテナンスモード」という位置づけになっています。既存ユーザー向けのサポートやCreative Cloudコンプリートプランでの提供は続いていますが、単体プランでの新規販売は終了しており、今後の大型アップデートは見込みにくい状況です（参考：Adobe公式コミュニティでのAdobeスタッフの回答）。

じゃあAdobe XDはもう終わったってこと？

完全終了とまでは言えないけど、新規プロジェクトで積極的に選ぶ理由は薄くなってきてる。実務ではFigma前提で考えた方が無難だと思う

Figmaのメリット1：共同編集・共有のしやすさ

Figmaはクラウドベースのデザインツールで、チームでの共同作業がしやすいのが大きな特徴です。複数人が同時に同じファイルをリアルタイムで編集できるため、多人数でのデザイン作業ではAdobe XDより効率が上がる場面が多いと感じています。仕組みの詳細はFigma公式ブログのマルチプレイヤー編集の解説記事が参考になります。

Figmaのメリット2：デバイス・OSを選ばない

Figmaはブラウザベースなので、インターネットがあればMac・Windows・Linux・iOS・Androidなど主要なOSからアクセスできます。Adobe XDはデスクトップアプリケーションのため、使いたい端末ごとにインストールが必要ですが、Figmaはその手間がありません。

Figmaのメリット3：オートレイアウトが便利

オートレイアウト機能を使うと、要素の配置やサイズ変更が自動で調整され、デザインの柔軟性が上がります。レイアウトは「親ボックス」と「子ボックス」という考え方で組み立てていくイメージです。基本的な使い方はFigma公式ヘルプセンターのオートレイアウトガイドにまとまっています。

親ボックスを伸縮させると、それに比例して子ボックスも伸縮していくため、レスポンシブデザインの検証がかなり楽になります。この感覚はコーディングでのFlexboxに近く、Webエンジニアとしては馴染みやすい概念だと感じました。

学習方法は動画からのインプットがおすすめ

Figmaの基本操作は、実際に手を動かしながら動画で学ぶのが効率的です。特におすすめなのが、Figma公式が提供している日本語版チュートリアル「Figma Basics」を実際に操作しながら解説している動画です。

公式チュートリアルのファイルを実際に複製して操作しながら進められるので、見るだけで終わらず手を動かして再現しやすいのが良いところです。動画でインプットしたら、実際に同じ操作を自分の手で再現してみるという流れが、一番身につくと感じています。

まとめ

• 共同編集・共有機能がしやすい
• インターネットさえあればどのデバイスからでもアクセス可能
• オートレイアウト機能でレスポンシブデザインの検証が楽になる
• 学習は動画でインプットしてから手を動かすのが効率的

Adobe XDが実質的に開発を止めている以上、これから新しくデザインツールを学ぶなら、Figmaを軸にするのが現実的な選択だと感じています。とはいえAdobe製品との連携が必要なプロジェクトも一定数残っているはずなので、両方の基本操作を知っておいて損はありません。