2021年2月5日（金）にAdobe XDユーザーグループ大阪vol.10を開催しました。
今回も前回に引き続き、Zoomでのオンライン開催でした！
Session1 「XD Pick up」~2021年1月 新機能~ / 松下 絵梨
登壇者：松下 絵梨（@matsu_eri ）さん
アーカイブ動画
コンテンツ内容
今回紹介した1月の新しい機能は3つです。
⑴「CCライブラリの機能改善」
主なバグが修正されパフォーマンスが改善されました！
⑵「XDモバイルアプリケーションの新しい表示オプション」
Adobe XDではモバイルアプリが提供されていますが、モバイルアプリでの表示機能がアップデートされました。
①デバイスごとの縦横比の違いに対応出るように！
例えばiPhone11のアートボードサイズで作ったものを、iPhone7のモバイルアプリを使ってみた場合、縦横比が異なるため、左右に黒い帯が発生していました。
今回のアップデートでは、この左右の黒い帯がを消すことができるようになりました！操作方法は、プレビュー画面を3回タップし、メニューを表示します。オプションメニューから「表示オプション＞100%表示」の順に選択します。
②モバイルアプリケーション でプレビューした際に、拡大・縮小することが可能に！
操作方法は、同じようにメニューの中から「表示オプション＞フリーフォーム」の順に選択することで、2本指を使ってズームイン・ズームアウトができます。
⑶「波線の自動アニメーション」
波線の線分と間隔に対し、アニメーションを作成できるようになりました！
松下さんの作り方デモを見ながら、テキストアニメーションを各自作ってもらいました。
波線は、線分と間隔からできています。そして、「線分が短く、間隔が広い」波線と、「線分が長く、間隔が狭い」波線の2つを繋げアニメーションを作ります。つまり、「線分を伸ばして、間隔を縮める」という動きを作ります。
波線アニメーションの作り方はこちです！！
波線の設定はこの通りです。1枚目は間隔、2枚目は線分に同じ値を任意で設定します。
参加者の方の波線アニメーションはこちらです。
皆さんも作ったらぜひツイートで教えてください！（ #xdug_osaka をお忘れなく。）
まつえり先生のセッションを聞きながら作りました(笑)#xdug_osaka #xdug pic.twitter.com/FWwo2tLnrH
— ミケ🐈デザイナー🐾MiyakeAya (@nyanchoco666) February 5, 2021
#xdug_osaka 破線アニメーション全然触ってなかったけど、まつえりさんのセッション聞いて、この機会にやってみた〜！
できるようになったら実戦投入したくなるけど、CSSで実装できるかは、よくよく注意しないとな😅 pic.twitter.com/RSJnSQ2Y3H
— Tantan / Webデザイン修行中 (@shamojiko) February 5, 2021
LT 〜Adobe XD でオリジナルの応募書類を作った話〜 / 山中 麻里菜
登壇者：山中 麻里菜（@mrn_web0216 ）さん
アーカイブ動画
コンテンツ内容
山中さんは、今回が初のLTということでしたが、とても素敵なスライドと発表でした！
山中さんは、「Adobe XDでオリジナルの応募書類を作った」話をご自身の転職活動の経験も踏まえ話してくださいました。
こちらが、山中さんがXDで作ったオリジナルの応募書類！
ライトピンクとライトブルーで統一されていてとても素敵。
XDで作ってよかったこと
アセットカラー・文字スタイル・コンポーネントを登録できる！
カラーや文字を変えたい時に手間なく変更ができたり、コンポーネントを利用していろんなデザインを試すことができます。
XD上ではこのように見えてます。
オリジナルの応募書類を作った結果
①他者との差別化ができ、書類選考の通過率がUP！
②1つの作品となり、面接時の話題になる！
今回、XDでオリジナル書類を作り、応募先の反応を受け、「意外なところに一手間加えると案外印象に残りやすい」ということに山中さんは気づいたみたいです。
今後、就職や転職の機会がある方は、XDでオリジナルの応募書類を作成してみてはいかがでしょうか。
Session2「地味だけど大事な、XDドキュメントの管理とコーディング補助について語ろう」 / 森 和恵
登壇者：森 和恵（＠r360studio ）さん
アーカイブ動画
コンテンツ内容
今回はドキュメント管理とコーディングについて解説していただきました！
- クラウド（Adobe Creative Cloud）を利用したデザイン管理とプロトタイプ共有
（クラウドドキュメント、CCライブラリ、Creative Cloud Desktop、マルチフロー、共有リンク、共有編集、バージョン管理） - コーディングの補助となる機能
（デザインスペック／デザイントークン（CSS変数））
XD ドキュメントの管理
ドキュメントの保存方法には複数あります。
- 名前を付ける前から、自動保存
- ファイル名をクリックし、名前変更
- ファイル＞別名保存
- ファイル＞ローカルドキュメントとして保存
Creative Cloud デスクトップとは別に、Creative Cloud サイト（assets.adobe.com）というものがあります。
クラウドドキュメントでは、とても便利な機能がいくつかあります！
- クラウドドキュメント履歴が残る
- オフライン編集が有効に
- クラウドドキュメントの共有ができる
他のAdobe IDユーザーとひとつのドキュメントを編集できる
ドキュメントアセットを「CCライブラリで公開」
XD内部にあるアセットのことをドキュメントアセットと呼び、このドキュメントアセットをCCライブラリ化して、他の人と共有できる機能があります！
CCライブラリーにデータが多くなりすぎたら、PhotoshopやIllustratorのCCライブラリパネルを用いて、ローカルにファイル保存するのがおすすめです！
プロトタイプ共有のための「共有リンク」
XDで作ったデータをプロトタイプとして他の人と共有したい場合は、クラウドドキュメントとしての「共有リンク」を用います。
VS CodeのAdobe XD用拡張機能
VS CodeにAdobe XDよう拡張機能が登場しました！
デザインスペックをコピペするしかなかったCSS変数のコードをVS Code中に直接ダウンロードすることができるようになりました！
次の勉強会予定
Adobe XD ユーザーグループ大阪vol.11
2021年4月10日（水）13:00〜15:00
みなさんのご参加をお待ちしています！
report by おさわ