UIデザイナーはダウンロードしておこう!iOS 14のデザインテンプレート・UI要素が揃ったAdobe XD用の素材がApple公式からリリース

先週リリースされたばかり、iPhoneやiPadに採用されているiOS 14のデザイン用のテンプレートやUI要素が揃ったAdobe XD用の素材を紹介します。

素材はAdobe XD用だけでなく、Photoshop用やSketch用も揃っており、9月に新しくなったSF Symbols 2もダウンロードできます。

iOS 14, macOS 11のAdobe XD用のUIデザイン素材

Apple Design Resources

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

サイトのキャプチャ

Apple Design Resources

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

サイトのキャプチャ

ダウンロードしたiOS 14 for Adobe XDのファイル

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

サイトのキャプチャ

Apple Design Resources

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

サイトのキャプチャ

SF Symbols

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

サイトのキャプチャ

Apple Design Resources

サイトのキャプチャ

Apple Design Resources

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

Adobe XDのキャプチャ

iOS 14 for Adobe XD

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

Adobe XDのキャプチャ

iOS 14 for Adobe XD

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

Adobe XDのキャプチャ

iOS 14 for Adobe XD

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

Adobe XDのキャプチャ

iOS 14 for Adobe XD

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

Adobe XDのキャプチャ

iOS 14 for Adobe XD

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

Adobe XDのキャプチャ

iOS 14 for Adobe XD

UI要素集。

Adobe XDのキャプチャ

iOS 14 for Adobe XD

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

sponsors

top of page

©2024 coliss