VS CodeのAdobe XD用拡張機能が登場！ デザインシステムにもとづきコード出力と補完が可能に Microsoftが開発を行っている無償のエディター「VS Code」にAdobe XD用の拡張機能「Adobe XD extension」が登場しました。 この拡張機能を使うことで、Adobe XD上で作成したデザインアセットをVS Code上で参照・編集できるようになります。デザイナーとエンジニア間の溝を埋めることができ、デザインシステム構築のハードルが下がるでしょう。 今回の記事では、「Adobe XD extension」の活用方法を紹介します。コーディングの際に活躍する拡張機能ではありますが、Adobe XDを使ったデザイン段階でのひと工夫も必要になりますので、デザイナーの方も理解しておくとプロジェクトの進行がスムーズになるでしょう。 「Adobe XD extension」と
今回の記事は先日のXDUFes2020で登壇させて頂いた内容を文字起こししたものになります。 オンラインの勉強会だったので、アーカイブも公開予定です。公開され次第更新します。 是非、YouTubeのチャンネルを登録してお待ちください。 早速、発表の内容に入ります！ その1 Webデザインだけじゃないスライド作成にも使える! Adobe XDといえば、Webデザインやアプリデザインなどのイメージが強いかと思います。 しかし、実はスライド作成にも向いています！今回、制作したスライドもAdobe XDで作っています。 なぜ、Adobe XDがスライド作成に向いているのでしょうか？ Adobe XDにはプロトタイプ機能という、Webサイトデザインにページ遷移などの動きを付けることができる機能です。 これを応用することで、ページ遷移＝スライドのページめくり、のように使えます。 プロトタイプ機能の中で
Adobe XDでグリッドシステムのレイアウト枠を作る - グリッドシステムを使ったレイアウトとレスポンシブWebデザインについて この記事では非コーダー向けに、グリッドシステムを使ったレイアウトとレスポンシブWebデザインの考え方、AdobeXDでレイアウトグリッドを作る時の操作方法について書きます。 AdobeXDの内容は初見で触ってみて自分なりに模索した方法なので、他に良いやり方があればご教授ください。 グリッドシステムとはWebデザインに於いて、横並びの要素を配置する時「要素の幅はどれくらいか？」「要素同士の隙間はどれくらいか？」を決定するときのガイドラインになる枠組みのことです。 スマートフォンの登場以来、様々なデバイスの画面サイズへの対応が求められる現在のWebデザインでは、この枠組みを基準にデザインされていることが多いです。 実例例えば↓こんなデザインがあったとして、 これに
上の表で示した例の値で数値を調整すると、上図のようなレイアウトになります。 列以外の数値について、例えば段間幅の数値を変更した場合は、その値に応じて列の幅や左右の余白の数値も自動的に調整されます。レイアウト感覚を探りながらデザインする際には便利な仕様ですが、あらかじめ意図している幅に設定しようとする際にはちょとしたコツが必要です。 レイアウトグリッドの調整方法 私は普段このような手順で調整しています。 列（カラム数）を指定する レイアウト数値表を使ってレイアウト幅のあたりをつける 左右余白を指定する 段間幅（ガター幅）を指定する/自動的に列の幅（カラム幅）が設定される 左右余白を指定する前にガター幅などを入力すると、対になっているカラム幅なども自動指定されてしまい、双方の値を追いかけっこしつつ入力する…というような遠回りをすることにもなりかねません。そのため、基本的には他の値に影響しない項
上の表で示した例の値で数値を調整すると、上図のようなレイアウトになります。 列以外の数値について、例えば段間幅の数値を変更した場合は、その値に応じて列の幅や左右の余白の数値も自動的に調整されます。レイアウト感覚を探りながらデザインする際には便利な仕様ですが、あらかじめ意図している幅に設定しようとする際にはちょとしたコツが必要です。 レイアウトグリッドの調整方法 私は普段このような手順で調整しています。 列（カラム数）を指定する レイアウト数値表を使ってレイアウト幅のあたりをつける 左右余白を指定する 段間幅（ガター幅）を指定する/自動的に列の幅（カラム幅）が設定される 左右余白を指定する前にガター幅などを入力すると、対になっているカラム幅なども自動指定されてしまい、双方の値を追いかけっこしつつ入力する…というような遠回りをすることにもなりかねません。そのため、基本的には他の値に影響しない項
Adobe XD CC2019を利用して、使い方を体感していただきたいと思います。 Adobe XDの名前だけは聞いたことある、使ったことはないけど興味がある、また便利そうだけどソフトの使い方を覚えるのが大変そうという方もいらっしゃるかもしれません。 そうした方のために、Adobe XDでは、これまでPhotoshopやIllustratorで起こしていたWEBサイトのデザインカンプでできなかったことが、簡単にできるようになります。Adobe XDの魅力をぜひ楽んでみてくださいね。 AdobeXDとは 従来、WEBデザインを起こす際は、一般的な手法として PhotoshopやIllustratorが使われてきました。 しかし、PhotoshopやIllustoratorで製作したデザインは、１枚の絵として見ることはできても、 ページのつながりや操作感を確かめることができませんでした。 その
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
