書籍発売記念！XDUG広島スタッフによるリレーセッション！
〜オンラインハンズオン〜

2021/5/8に Adobe XD ユーザーグループ広島 vol.13 – online を開催しました。

Adobe XD ユーザーグループ広島　運営スタッフであるTantanこと田中由花さんが執筆に携わった 『豊富な作例で学ぶ Adobe XD Webデザイン入門』発売の記念もかねて、XDUGスタッフによるリレーセッションを行いました！

書籍の内容も絡めながら、スタック機能を利用した作例やコンポーネントを活用したリピートグリッドの便利な使い方など、運営スタッフがひとり1テーマでお伝えしていきます。

session1 パディングでテキストに追従する装飾を作ろう

Speaker：Tantan

枠や線がついた文字装飾を複数箇所で使用する場合、文字の変更に合わせて地道に変更する必要がありますよね。
パディング機能を使えば、テキストを変更しても位置や余白を維持してくれるから文字数を気にすることなくテキスト追従する装飾が作れます。
リボンなどの複雑な装飾はレスポンシブサイズ変更の設定にコツがいるので、オブジェクトごとの設定方法も含めて解説しました。

session2 スタックを使った互い違いレイアウト

Speaker：中井 誠也

ここでの互い違いレイアウトは、画像と文章などで左右に構成されたオブジェクトが連なって交互に左右に切り替わるレイアウトのことです。
作るのはそんなに難しくないですが、後から文章や順番の変更を依頼されるとレイアウトの組み替えがちょっと面倒ですよね。
そんな時はスタックやパディングを駆使するとコンテンツの増減に簡単に対応できます。
互い違いレイアウトのオブジェクトを作るところから、実際に変更を依頼された場面を想定してお伝えしました。

session3 スタックを使ったグローバルナビゲーションメニュー

Speaker：やんこ

スタックを使ったグローバルナビゲーション制作、文字を並べてスタック設定するというシンプルなものですが、実務ではテキストベースでメニュー名を用意されることも多いので、一つ一つテキストオブジェクトを作るのは大変です。
プラグイン「Split Rows」とスタック組み合わせれば、テキストの準備から横並びレイアウトにするのも爆速でできるので面倒な作業ともおさらばですね！
さらに、XDの特性を利用したメニュー装飾の解説もあって目から鱗のセッションでした。

session4 コンポーネント × リピートグリッド 活用アイデア集

Speaker：マスベサチ

Adobe XDといえばこれ！と言ってもいいくらい代表的な機能「リピートグリッド」 そのままでも強力な機能ですが、コンポーネントとスタック機能を組み込んで使うことでさらに柔軟な表現が可能になります。
よくあるカードレイアウトに増減可能なカテゴリーラベルや文章の長さに応じて広がるコンポーネントなど、リピートグリッドの可能性が広がるTipsやリピートグリッドのおともとして「Repeat Grid Fitter」というプラグインもご紹介しました。

イベント中に登場したプラグイン紹介

• Split Rows
  いわゆるテキストばらし。テキストエリアに流し込んだ文字列を改行区切りで単体のテキストに変換してくれます。
• Repeat Grid Fitter
  リピートグリッドを数値で制御できるプラグイン。手動で伸ばした時に出る中途半端な余白を出さずに、個数などを指定してリピートグリッドを増減できます。

まとめ

スタックやパディング、リピートグリッド、コンポーネント、それぞれ単体でも素晴らしい機能ですよね。
今回のイベントでは組み合わせ次第で更なる効率化や便利な使い方もできることをご紹介しました。
次回はアニメーション特集を行う予定。それでは次のイベントでお会いしましょう