[B! XD] e_nagiのブックマーク

e_nagi id:e_nagi

XDに関するe_nagiのブックマーク (3)

Adobe XDでシンプルなワイヤーフレームを作ろう！便利なUIキットいろいろ
2018年7月2日 Webサイト制作, XD 新たなデザインツールとして浸透してきているAdobe XD。Webクリエイターボックスでも何度か紹介してきました。Adobe XDはデザインを作り込むだけではなく、その前段階であるワイヤーフレーム制作にもおすすめです。様々なUIキットと呼ばれるデザインテンプレートが配布されていますが、今回は凝ったデザインのものではない、シンプルなワイヤーフレーム向けのUIキットをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！シンプルなワイヤーフレーム制作向けのUIキット Wires jp Wires jpはAdobeが公開しているUIキット。これまでは後述する英語表記のもののみでしたが、この度日本語バージョンがリリースされました！日本のWebサイトでよく見かけるデザイン要素がつまっています。テキストも日本のものらしく変更されていますよ。 W
e_nagi 2020/11/01
XD

デザイン

ワイヤーフレーム
リンク
AdobeXD Bootstrap4のグリッドの作り方(レスポンシブ対応)
AdobeXDのアートボードに設定できるグリッドで、iPadやSurfaceなどのアートボードのプリセットを使ってBootstrap4のグリッドを作る方を紹介します。 XDでBootstrapを使ったレスポンシブ対応サイトを作成する場合に便利です。 XDでBootstrap4のグリッドを作る方法ここではXDのスタイルパネルにある「グリッド」設定を使ってBootstrap4のグリッドを作ってみます。やり方はアートボードを選択した状態で、右側のスタイルパネルの下にある「レイアウト」にチェックをつけます。あとは「列」を12に、「段間幅」を30にして、左右のマージンを画面幅ごとに設定すれば完了です。左右マージンの計算方法左右マージンの計算方法は次の通りです。container幅に-30pxしているのは内側のpaddingを引くためです。
e_nagi 2020/11/01
XD

レスポンシブ
リンク
Adobe XD でつくるアニメーション [ ホバー、タップ、ディレイ ] | 名古屋でホームページ制作、Web制作なら株式会社エッコ
ボタンのマウスオーバー、ナビゲーションの開閉、パララックス、スライダー、モーダル等、フォトショップやイラストレーターではできなかった動的なデザインの作成方法を見ていきます。ホバーデザイン一番最近追加されたホバー時のデザイン作成方法です。動画の以下のボタン部分の動きです。まずは、普通にボタンのデザインをつくります。次に、ボタンを選択した状態で、以下パネルの「コンポーネント」を追加していきます。コンポーネント右の（＋）ボタンをクリック初期設定のステートの右の（＋）ボタンをクリックホバーステートを選択して追加追加された「ホバーステート」を選択した状態で、ボタンのデザインを変更します。「初期設定のステート」を選択すると、デフォルトのデザインが残ってることが確認できると思います。アニメーションの設定は「プロトタイプ」のパネルで行えます。プロトタイプへ移動して、初期設定のステー
e_nagi 2020/03/17
XD
リンク
1