見出し画像

Adobe XDからFigmaへ乗り換えるべく、よく使う機能やTipsをまとめてみた

電通総研 UXデザインセンター

ISID UXデザインセンター Figma部のしぶやです。Adobe XDが単体で購入できなくなり、いよいよFigmaへの移行が本格化していますね。
Photoshop/Illustrator連携はXDが強いものの、チーム内のデザインデータ共有などはFigmaのほうが圧倒的に便利で、新規のプロジェクトでは極力Figmaを使うようにしています。

昨年、Figmaへの移行を進めるにあたって、
「XDのアレ、Figmaだとどうやるの？」
「Figmaだけの便利機能ってどんなものがあるの？」
などを、Figmaトライアルメンバーで部内向けにまとめておりました。

今回はその内容をを一部再編集して公開します。

Figma秘伝の書 | Figma
※ 作成当初は外部公開の予定がなく、レイアウトやレイヤーはとってもゆるゆるな作りです。ご了承ください🙏
※ 記事公開後にFigmaの大型アップデートがあり、オートレイアウトやバリアントに関する記載が一部陳腐化しています。その点割り引いてご覧ください。（2023/7/20追記）

Figmaコミュニティでなく、チームの中で共有しています


せっかくなので、特に重要と感じた4つのポイントを紹介します。

Figmaはリピートグリッドが無く、コンポーネント＆オートレイアウトで代替する

XDでもリピートグリッドを使わずにコンポーネントとスタックで作るほうが便利なケースが多いですが、Figmaではそもそもコンポーネントを使う方法のみに限定されます。
コンポーネント化(⌥+⌘+K) → 下か右にコピー(⌥+Shift+ドラッグ) → オートレイアウト(Shift+A) と操作すればサクサク複製できます。

レスポンシブ設定はオートレイアウト・コンテナに合わせて拡大など様々な機能に分散されている

XDのレスポンシブ設定は、要素のサイズを変えたときに、子要素の右寄せ・左寄せ・拡大縮小するための設定です。
Figmaだと実現手段が色々（制約、コンテナに合わせて拡大、オートレイアウトの位置揃え・間隔を空けて整列など）あり、どう整理するか今でも苦労しているポイントです。

弊社でレスポンシブ設定を使うときの多くは、余白を保ったまま中の要素を拡大縮小したいときなので、だいたいは「コンテナに合わせて拡大」に置き換えています。元の用途によってFigmaでの最適解が変わるポイントなので、Figmaの機能を色々触って確かめておくと良いと思います。

Figmaでは、メインコンポーネントにないレイヤーをインスタンスだけに追加することができない

XDから移行するメンバーが一番つまづくのがコレでした。XDではインスタンスへのレイヤー追加が自由にできますが、Figmaだとそうはいかず、メインコンポーネントにレイヤー追加してしておく必要があります。（メインで不要なレイヤーは非表示にしておく）

ですがこの制約のおかげで、A・B・Cすべて詰め込んだパターンを用意することになるので、AB, AC, BCなどの派生パターンが作りやすくなります。Figmaのやり方に慣れることでコンポーネント志向でのUI設計が自ずと染み付いていく感覚がありました。

幅に応じた要素の自動折り返しはできないけど、今まさに実装中らしい

Flexboxのような要素の折り返しは、まだ対応していないようです。XDでもFigmaでも実現できないこともいくつかあり、その代表例がこちらでした。なお、今まさに実装中のようです。リリースが待ち遠しいですね。

ちなみに、サンプルの入力フォームはSmartHRさんのUIコンポーネントを利用しています。メインコンポーネントの作りがきれいで非常に参考になります……！


以上、XDからFigmaに移行するために調べたいくつかの内容をご紹介しました。

日々新機能を実装中のようなので、今はできなくてもどんどんアップデートされそうです。（width/heightのmax/min指定や、component propertyを使ったリピードグリッド相当の機能なども実装中との噂）

つい先日新たなFigma本が出版され、現在3冊出ていますが、さらに別の本も制作中されているようです。2023年はさらにFigmaの利用が加速しそうですね。

それでは、みなさま良きFigmaライフを！

written by しぶたく
UXリサーチやフロントエンド開発を担当しています。


この記事が気に入ったらサポートをしてみませんか？