AdobeXDのワークショップに参加してきた

今回は実際にAdobeXDで操作もしながら、最新アップデート機能についてキャッチアップしていく会でした。とても和やかな雰囲気で、分かりやすくて、ためになったし楽しかったです。(ありがとうございました!)

f:id:yuuri_03:20201127213628p:plain

参加したイベントはこちら↓

growgroup.doorkeeper.jp

内容

  • コンポーネントインスタンス
  • ステート機能
  • スタック機能
  • パディング機能(付随してレスポンシブサイズ変更機能)
  • その他アップデート
    • テキストボックス形式でテキストが増えると高さを自動調整してくれるようになった
    • 3D変形
    • 共同編集
    • ページ内にスクロールする箇所を設定できる
    • アンカーリンクが設定できる
    • CreativeCloudでデザインデータが管理、共有できる
    • VScodeで管理できる(コードが抽出できたりスニペット登録もできる)

などなど(私が追いつけて拾いきれてないかもですが)

学んだこと(忘れるので先に走り書き)

  • インスタンスをいじった後にメインコンポーネントを変更すると、インスタンスに反映されたりされなかったりする謎現象の真相が解明された
    インスタンス側で変更したプロパティ値はメインコンポーネント側から上書きすることができない、ということだった
  • メインコンポーネントからインスタンスへの反映の可否は、プロパティによる
  • メインコンポーネントを消してしまった場合はインスタンスを右クリック→メインコンポーネントを編集とすると復活する
  • インスタンスに大きな変更が発生する場合は、極力個別に変更しないように内容だけ差し替えるにとどめておくのがベスト
  • ステート機能がめっちゃ便利で驚愕した
    1つのコンポーネントにホバーステートを始め自分で登録することができ、ステートの切り替えでデザインを切り替えることができる
    なんならプロトタイプでのプレビューもホバーするとホバーステートがちゃんと動く(便利!!!!!!!)
    → ボタンのactive、disableやレスポンシブでPCとSPでデザインが違う場合等によい
  • パディング機能めっちゃ便利
    内側の要素にパディング機能を有効にしておくと、テキストが長くなっても親要素がパディングを保持して伸びる
    設定方法はテキストとその他、というレイヤーに分けてやる
  • どの方向にパディングを効かせるかは、レスポンシブサイズ変更の欄で変更(有効になった方向に伸縮した場合に親要素に合わせて変化する)
  • パディングを保ちたい内側の要素に設定する
  • テキストボックスの高さ自動調整とアンカーリンクの設定が地味にめちゃくちゃ便利

感想

ワーク用のXDデータや勉強会資料も配布して頂いて、お話を聞いたあとに自分で作業できる、という流れがとても分かりやすくて助かりました。所々に談笑が発生したり、チャットでのコメントもこまめに拾って頂けてとても楽しかったです。ありがとうございました!