AdobeXDの超便利な無料素材「UI kits」は必須級!!

WEB

Adobeが公式公開しているXDの無料素材の「UI kits」がクオリティが物凄く高く、便利すぎるのでXDを使用しているユーザーは必ずダウンロードしておきましょう。また同URLではフォントとアイコンの素材もありますのでこれらも一緒にダウンロードしておきましょう。

AdobeXDの超便利な無料素材

いつから存在していたかは分からないが2019年11月頃に下記の「spectrum」との名のデザインシステムが一般公開されました。

Adobe spectrumはこちら

「spectrum」はAdobeのプロダクトデザインチームが効率よくデザイン出来る様に作成されたAdobe独自のデザインシステムです。 XDはもちろんFrescoやiPad向けPhotoshopもSpectrumからUIが構築されています。提供されているドキュメントとXDファイルを使ってAdobeのプラットフォームを独自に拡張する事が可能になっています。

具体的には「spectrum」は3つのセクションに分かれています。

  1. デザインシステムの根幹にあるデザイン思考、基礎などをまとめた「Principles」
  2. デザインシステム内で使用されている、UIキットやアイコン、フォントなどを使用できる形にしている「Resources」
  3. そのUIを実装する際に使える、オープンソースのCSSが用意されている「Implementations」

今回はこの3つのセクションのうち、無料素材が提供されている「Resources」の部分の紹介になります。

無料素材のダウンロード

「Resources」の無料素材は大きく分けて「UI kits」「フォント」「アイコン」に分けられています。

UI kits

「UI kits」はXDで作成されたパーツ群のイメージで、表やボタンなどのアセッツが大量に同梱されています。

Download UI kits ←ここからダウンロード出来ます。

フォント

フォントはそのまんまです。XDで使用可能なフォントが無料ダウンロード出来ます。

Download fonts ←ここからダウンロード出来ます。

アイコン

数百ものアイコンがSVGデータとしてダウンロード出来ます。そのままXDで使っても良し、何かのイメージに使っても良し。

Download icons ←ここからダウンロード出来ます。

説明

各種UI kitsの説明は「spectrum」のWEBページの左側サイドバーにドキュメント形式で載っています。
基本英語ですが、非常に詳しく載っているので使い方に迷ったら読んでみましょう。

基本的にはコピペorコンポーネントをして一つ一つのパーツとして使っていくイメージです。


以上が「AdobeXDの超便利な無料素材「UI kits」は必須級!!」でした。

どれもクオリティが非常に高く自分なりのアセッツリンクを作成すれば作業が超効率化できWEB制作のワイヤー作成にはほぼ必須ツールです。

WEB製作者は必ずダウンロードしておきましょう。

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

WEB
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました