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もダウンロードできます。
![iOS 14, macOS 11のAdobe XD用のUIデザイン素材](http://coliss.com/wp-content/uploads-202004/2020102401@2x.png)
UIデザイン素材は、ページのちょい下からダウンロードできます。
iOS 14のAdobe XD用の素材は先週リリースされたばかりで、Photoshop用とSketch用、そしてiOS 13もダウンロードできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202004/2020102402-01.png)
Adobe XD用の素材のファイル構成は、下記の通りです。
デザインテンプレート・プロダクションテンプレートに分かれています。
ファイルの中身は、後述します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202004/2020102403-00.png)
ダウンロードしたiOS 14 for Adobe XDのファイル
新しくなったSF Symbols 2もダウンロードできます。
アプリで使用できる2,400個以上の一貫性のあるシンボルのセットです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202004/2020102402-02.png)
SF Symbolsは2になって視認性がかなりよくなりました。iOS 14やmacOS 11をはじめ、 watchOS 6に採用されています。詳しくは、下記をご覧ください。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202004/2020102402-03.png)
macOSやwatchOSのUIデザイン素材も同じようにダウンロードできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202004/2020102402-04.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202004/2020102402-05.png)
iOS 14のUIデザイン素材を見てましょう。
iPhone用とiPad用が用意されており、下記はiPhone用です。
![Adobe XDのキャプチャ](http://coliss.com/wp-content/uploads-202004/2020102403-01.png)
iOS 14 for Adobe XD
デザインテンプレートには、iOS 14で使用されているスタイルガイドが用意されています。
![Adobe XDのキャプチャ](http://coliss.com/wp-content/uploads-202004/2020102403-02.png)
iOS 14 for Adobe XD
カラー・タイポグラフィのライトモードとダークモードのガイド、アクセシビリティを確保するサイズやコントラストなどが収録されています。
![Adobe XDのキャプチャ](http://coliss.com/wp-content/uploads-202004/2020102403-03.png)
iOS 14 for Adobe XD
フルスクリーン・ナビゲーションバー有り・タブバー有りの状態で、セーフエリアがどうなるかも分かります。
![Adobe XDのキャプチャ](http://coliss.com/wp-content/uploads-202004/2020102403-04.png)
iOS 14 for Adobe XD
デザインテンプレート、タブバー有りのアプリ用。
![Adobe XDのキャプチャ](http://coliss.com/wp-content/uploads-202004/2020102403-05.png)
iOS 14 for Adobe XD
デザインテンプレート、システム用。
iOS 14のウィジェットも揃っています。
![Adobe XDのキャプチャ](http://coliss.com/wp-content/uploads-202004/2020102403-06.png)
iOS 14 for Adobe XD
UI要素集。
![Adobe XDのキャプチャ](http://coliss.com/wp-content/uploads-202004/2020102403-07.png)
iOS 14 for Adobe XD
ここに掲載しているのは、ほんの一部です。他にも豊富なUIデザイン素材が収録されています。
sponsors