XDUF2023セッション資料配布

本日は、ご参加・ご視聴ありがとうございました！ 配布データセッションスライド ※個人のnoteのため、会社情報を削除しています Lottie作成用Figma 各種リンクLottieFiles LottieFilesの使い方は過去の記事をご確認ください LottieFiles Plugin（LottieFiles For Figma） LottieFiles Supported features ※登壇内容の復習以外の使用方法はお控えください

初心者のためのLottie&LottieFiles

このnoteでは「これからLottieをはじめてみよう」と思っている方や「名前は知っているけどLottieってなに？」という方に向けて、Lottieの基礎的な使用方法を紹介します。 LottieとはLottieというキーワードでGoogle検索したとき、LottieとLottieFilesの2つのワードがヒットします。ここではまず、2つの違いを紹介します。 Lottie LottieとはAirbnb（エアビーアンドビー）が開発したJSONベースのアニメーションファイル形

気になるNEWS 05/13→05/19

1. iDIDが話題をさらったサイトを発表2. FigmaからLottieが作成可能に3. ギンザ・グラフィック・ギャラリー企画展 横尾忠則 銀座番外地 Tadanori Yokoo My Black Holes4. ジェンダーレストイレのその後

サンプルデータ配布

久しぶりにデータを配布します。 デモ用に作成したものですが、よく使うであろうアニメーションをそこそこ盛り込んだデータになっています。 配布の予定がなかったので、レイヤーなど見にくいところや処理を間違っている部分があるかもしれません…あくまで参考としてご利用ください。 （私自身、もう中身を覚えていません笑） 参考としての利用以外で、データ内の写真・動画を使用することは禁止します。 ※KVにはXDで作成したアニメーションを録画したものを配置しています

AdobeXD マスクを使ったボタン(DLデータあり)

最近よくみるテキストが回転するようなボタンはマスクを使って作成します。 マスクを利用するとアニメーション表現の幅が広がります。 作り方テキストにマスクを適用します。 テキストを複製して片方をマスクの外へ移動します。 ホバーステートを作成してテキストの位置を変更します。

AdobeXD ホバーでラインがつくテキストのコツ(DLデータあり)

ホバーステートでラインが表示されるテキストリンクを作成することはよくあると思います。 そのとき、インスタンスのテキストを変更するたびにラインの長さを変更していませんか？ パディングを利用して、テキストに合わせて伸縮するラインを作成すれば効率的に作業ができます。 作り方テキストとラインがちょうど隠れるサイズの長方形を作成し「塗り」と「線」両方のチェックを外します。（透明になります） 長方形とラインをグループ化します。 作成したグループとテキストをコンポーネント化して、パデ

AdobeXD ホバーで拡大する画像(DLデータあり)

ホバーステートでの画像の拡大はマスクを使わずに直接行うこともできますが、拡大率を数値で管理できません。 コーディングのことを考えたり、自分のデータを統一するためにも数値で管理できる方法をお勧めします。コーダーさんに「ホバー時は〇〇％拡大です」と伝えてあげるとより親切です。 作り方画像と同じ大きさの長方形でマスクします コンポーネント化してホバーステートを追加します ホバーステートで画像のサイズを数値で調整します

AdobeXD コンポーネントでハンバーガーメニュー(DLデータあり)

オーバーフローを使わずコンポーネントで作成すると、ハンバーガーメニューにアニメーションをつけることができます。 作り方ハンバーガーメニューとメニューの中身を作成します コンポーネント化してメニューの中身は非表示にします 新規ステートを追加してメニューを表示し、ハンバーガーメニューを変形します プロトタイプモードで自動アニメーションを使ってステートが切り替わるように設定します

Adobe XDだけでできる「ホバーで色がつく画像」(DLデータあり)

作り方画像を複製して片方のブレンドモードを「輝度」に変更します ※「輝度」化したレイヤーの下に白い画像を敷くと、下の色に影響されないようになります コンポーネント化して初期設定のステートとホバーステートで、それぞれの画像の不透明度を変更して表現します

AdobeXD アニメーション付きチェックボックス(DLデータあり)

作り方チェックボックスをコンポーネント化してトグルステートを作成 ボックスとチェックの線を図のように設定

formの実験

Adobe XDデータをAeroでAR化

私は毎年XDUFの企画「XD challenge」に挑戦しています。今年のテーマは「旅」です。 昨年、犬が家族に加わったため一緒に出かけているのですが、愛犬を可愛く写真におさめたい欲も出てきました。 そこで、犬の撮影スポットがわかるAPPというテイでAdobe XDで作ったパーツをAR化してみました。 ※全行程、勘でやってます 作業工程は以下の通りです。 Adobe XDでプロトタイプを作る今回、Adobe Aeroの挙動がわからなかったので「これはできるだろ」程度のもの

tableの実験

パディングとスタックの設定（DLデータあり）

パディングとスタックを使ったデザインをすると、下の動画の右側のように、背景が正しく追従しないことがありませんか？ 左のように正しく設定するコツは以下の2つです。 1. パディングを適用したフォルダーの直下のレイヤーは2つまで 単一レイヤーでもグループでも構いません。 例えば以下のような形です。（divにパディングを適用しています） こうすることで、コンテンツと背景がわかりやすくなります。 2. コーディングを意識したレイヤー構成 パディングやスタックを使用する場合、特

部分的に要素を固定 sitcky表現をXDに取り入れる｜サンプルデータ配布

よくある相談に、XDでposition: sticky;のようなプロトタイプを作りたいと言うものがあります。 残念ながら2022.08.29現在、XDでそのようなプロトタイプを作ることはできません。 個人的には下の動画のように「スクロールグループで良いのでは？」という感じですが、きちんとページの上部で固定させたい方もいるようです。 ということで、無理矢理作ると以下のようになります。 手間の割にうまく動かないので、あまりお勧めできませんが一応データを置いておきます。 この

みんなで Adobe XD Trail 2022 #3 達人への道 おまけデータ

みんなで Adobe XD Trail 2022 #3 達人への道 質問コーナーにて使用したデモデータを配布します。 ※データや使用している素材の再配布は禁止しています ※ChromeからのDLでブラウザ側に破棄されてしまうことがあります。その場合は、お手数ですが、Safariなどの別ブラウザをご利用ください。2022.07.03時点