UIデザイナーはダウンロードしておこう!iOS 14のデザインテンプレート・UI要素が揃ったAdobe XD用の素材がApple公式からリリース
Post on:2020年10月26日
先週リリースされたばかり、iPhoneやiPadに採用されているiOS 14のデザイン用のテンプレートやUI要素が揃ったAdobe XD用の素材を紹介します。
素材はAdobe XD用だけでなく、Photoshop用やSketch用も揃っており、9月に新しくなったSF Symbols 2もダウンロードできます。

UIデザイン素材は、ページのちょい下からダウンロードできます。
iOS 14のAdobe XD用の素材は先週リリースされたばかりで、Photoshop用とSketch用、そしてiOS 13もダウンロードできます。

Adobe XD用の素材のファイル構成は、下記の通りです。
デザインテンプレート・プロダクションテンプレートに分かれています。
ファイルの中身は、後述します。

ダウンロードしたiOS 14 for Adobe XDのファイル
新しくなったSF Symbols 2もダウンロードできます。
アプリで使用できる2,400個以上の一貫性のあるシンボルのセットです。

SF Symbolsは2になって視認性がかなりよくなりました。iOS 14やmacOS 11をはじめ、 watchOS 6に採用されています。詳しくは、下記をご覧ください。

macOSやwatchOSのUIデザイン素材も同じようにダウンロードできます。


iOS 14のUIデザイン素材を見てましょう。
iPhone用とiPad用が用意されており、下記はiPhone用です。

iOS 14 for Adobe XD
デザインテンプレートには、iOS 14で使用されているスタイルガイドが用意されています。

iOS 14 for Adobe XD
カラー・タイポグラフィのライトモードとダークモードのガイド、アクセシビリティを確保するサイズやコントラストなどが収録されています。

iOS 14 for Adobe XD
フルスクリーン・ナビゲーションバー有り・タブバー有りの状態で、セーフエリアがどうなるかも分かります。

iOS 14 for Adobe XD
デザインテンプレート、タブバー有りのアプリ用。

iOS 14 for Adobe XD
デザインテンプレート、システム用。
iOS 14のウィジェットも揃っています。

iOS 14 for Adobe XD
UI要素集。

iOS 14 for Adobe XD
ここに掲載しているのは、ほんの一部です。他にも豊富なUIデザイン素材が収録されています。
sponsors