Adobe XD用UIキット(無料)をダウンロードすれば、デザイン作業をすぐに開始できます。最新のApple、Google、Microsoftデバイス用UIリソースを使えば、複数のデバイスのインターフェイスとプラットフォーム向けデザインの時間を短縮できます。UIキットとワイヤーフレームは、アイコン、キーボードレイアウト、ナビゲーションバー、入力部品、ボタンなど、共通のデザイン要素を含むXDファイルです。
design-app-ui-resource-kit1800x1012

UIキットのダウンロード
 

スタートアップスクリーンのUIキットセクションにあるリンクをクリックするか、ファイル(または設定)メニューから使用するUIキットをダウンロードします。ダウンロードファイルのファイル形式は、リソースに応じて.xdまたは.zipのいずれかです。.zipファイルの場合は、圧縮を解除すれば.xdファイルにアクセスできます。

design-app-ui-resource-kitimage-1

UIキットを開く

ダウンロードした.xdファイルを開きます(「ファイル/開く」)。環境に無いフォントがドキュメントに存在することを示すメッセージが表示されることがあります。その場合は、.zipファイル内のフォントをインストールしてデザインを更新してください。Windowsの場合は、いったんXDを閉じてからフォントをインストールする必要があります。

design-app-ui-resource-kitimage-2

様々なデバイスに対応したデザイン

UIキットは、デザイン内での再利用が可能なUI要素を配置したアートボードで構成されます。ファイル名を変更し、そのままデザインを完成させることも、自分で作成したデザインにデザイン要素のみをUIキットからコピー&ペーストすることも可能です。必要に応じて、カラーやデザイン要素を更新します。左下のアセットアイコンをクリックしてアセットパネルを開けば、カラースウォッチ、文字スタイル、コンポーネントをすぐに再利用できるため、作業が効率化します。

design-app-ui-resource-kit_step3-v3

Adobe XDでアセットパネルやUIキットを使い、デザインを更新する方法について詳しくは、アプリまたはwebサイトのレイアウトとデザインをご覧ください。

 

XDの基本を学ぶコース

前:レビュー用にプロトタイプを共有

 

07/30/2019
このページは役に立ちましたか。