Adobeが公式公開しているXDの無料素材の「UI kits」がクオリティが物凄く高く、便利すぎるのでXDを使用しているユーザーは必ずダウンロードしておきましょう。また同URLではフォントとアイコンの素材もありますのでこれらも一緒にダウンロードしておきましょう。
AdobeXDの超便利な無料素材
いつから存在していたかは分からないが2019年11月頃に下記の「spectrum」との名のデザインシステムが一般公開されました。
Adobe spectrumはこちら
「spectrum」はAdobeのプロダクトデザインチームが効率よくデザイン出来る様に作成されたAdobe独自のデザインシステムです。 XDはもちろんFrescoやiPad向けPhotoshopもSpectrumからUIが構築されています。提供されているドキュメントとXDファイルを使ってAdobeのプラットフォームを独自に拡張する事が可能になっています。
具体的には「spectrum」は３つのセクションに分かれています。
- デザインシステムの根幹にあるデザイン思考、基礎などをまとめた「Principles」
- デザインシステム内で使用されている、UIキットやアイコン、フォントなどを使用できる形にしている「Resources」
- そのUIを実装する際に使える、オープンソースのCSSが用意されている「Implementations」
今回はこの３つのセクションのうち、無料素材が提供されている「Resources」の部分の紹介になります。
無料素材のダウンロード
「Resources」の無料素材は大きく分けて「UI kits」「フォント」「アイコン」に分けられています。
説明
各種UI kitsの説明は「spectrum」のWEBページの左側サイドバーにドキュメント形式で載っています。
基本英語ですが、非常に詳しく載っているので使い方に迷ったら読んでみましょう。
基本的にはコピペorコンポーネントをして一つ一つのパーツとして使っていくイメージです。
以上が「AdobeXDの超便利な無料素材「UI kits」は必須級！！」でした。
どれもクオリティが非常に高く自分なりのアセッツリンクを作成すれば作業が超効率化できWEB制作のワイヤー作成にはほぼ必須ツールです。
WEB製作者は必ずダウンロードしておきましょう。
