Adobe XD

今日も引き続きAdobeXDの学習。 実践学習で、仮想カフェのHPを作成するというもの。 プロトタイプにリンクの移動先を直感的に矢印で決めたり、 なかなか自由度が高いソフトだ。 自分でも簡単にHPが作成できるような気がしてきた。 実践学習が始まると、一つ一つの課題が長くなり、子供も飽きて 部屋に遊びにきてしまうので、途中で終了。

今日からAdobe XDの学習を開始。 普段見ているサイトはどうやって作っているのか疑問に思っていたので、 なるほどという感じだった。 意外と楽しく学習できそうな課題だ。 ツールも少なく、覚えるのが早そうで、俄然やる気が出てきた。

数多くあるAdobe製品の中から主要なものについて、簡単にご紹介します。中には似たものもあるので、その違いについても書きます。私自身は、PhotoshopとIllustrator、Dreamweaverの3つしか使ったことがありません。他のアプリケーションにも興味があるので、今後使う機会があればと思っています。 Photoshop Illustrator InDesign Premiere Pro After Effects Adobe XD Dreamweaver まとめ Photoshop 画像編集、イラスト作成、Webデザインができます。特徴は、ラスター画像を扱うことです。用途は、以下の…

初めに お疲れ様です。rymです。 週一投稿を初回から無視する計画性の無さに驚きを隠せません。 最近はVue.js + TypeScriptにはまっており、何かアプリ作りたいな～とか考えています。 といった訳で画面設計していくため、今回は表題の通り、Adobe XDでVuetifyのUIキットを使う方法を書こうと思います。 Vuetify UIキットをローカルへダウンロード Vuetifyの公式サイトが準備してくれているUIキットをダウンロードします。zip形式ですので解凍をお忘れなく。 Vuetify 公式 adobe XDで開く XD起動 > 「ファイル」 > 「コンピュータから開く」 >…

confettiってのは紙吹雪って意味らしいです。 その名の通りこのプラグインでは紙吹雪が舞ったように図形を散りばめることができます。 まず適当なサイズのアートボードを作って その上に適当な図形を1個配置し、その図形を選択します。 アートボード上でしかできないみたいですね。 いろいろなパラメータがあり便利ですね。 ランダムで使う色を入力するところはプラグインのタブを広くしないと見えないので注意です！ カラーコードは多分手打ちでやるしかないので少し不便かも ランダムなシェイプを生成することはできなそう。 こんな感じにできます↓ たまに使えるプラグインなんじゃないでしょうか？ Connfettiの…

XDのコンポーネントをインスタンス化後にリサイズするとインスタンスも連動してリサイズされる ただ、すでにリサイズ済みのインスタンスは連動しない複数のステートがあるとそれぞれ独立にリサイズされる インスタンス側をリサイズしても、別のステートのサイズは元のままなので、ステートによって表示を変えるコンポーネントを作っても インスタンス側でリサイズするときに各ステートごとリサイズしなおさなきゃいけなくてとても不便な仕様になっている

XDで Hover State で色を暗くするようにしたコンポーネントを作り 同じ挙動のコンポーネントの中に上記のコンポーネントを含ませる試したところ、子コンポーネントや孫コンポーネントでも マウスカーソルがコンポーネントの上に乗ると色が暗くなるただし、重なっている場合はいずれかのコンポーネントしか Hover State に移行しないので注意が必要