FigmaでiOS 17・iPadOS 17のUIキットを利用する方法
今回はFigmaでAppleのiOS 17、iPadOS 17のデザインリソースを利用する方法の紹介です。リソースはFigma Community上で公開されており、Apple製品のUIモックアップでプロトタイピングを作成し、UIの検証を行う際に有用です。
この記事のターゲット
Apple Design Resources – iOS 17 and iPadOS 17の概要が知りたい方
FigmaでApple iOS 17、iPadOS 17のUIモックアップを使用方法が知りたい方
「Apple Design Resources – iOS 17 and iPadOS 17」の概要
iOS 17、iPadOS 17のリソースは、「Apple Design Resources – iOS 17 and iPadOS 17」という名称で、Apple公式アカウントからFigmaファイルとして公開されています。
Figmaではこれまで、Apple製品のUIリソースは有志が非公式サンプルソースとして作成・公開されている状態でしたが、今回からAppleが公式でFigma Community上でサポートするようになったようです。
The official @Apple iOS 17 and iPadOS 17 Kit, now on Figma Community. https://t.co/UiIYWwaeh7 pic.twitter.com/EawRyMAtr9
— Figma (@figma) June 7, 2023
リソースはFigma Community上で公開されていますが、ライセンスはFigma Communityの標準ではなく、独自の「Apple Design Resource License」に準拠するようです。利用される場合は内容をよく確認してください。
ライセンスの一部をかいつまむと、Apple製品のOS上で動くソフトウェアのUIのモックアップとして使用することが可能で、AppleのOS以外で動くソフトウェアのモックアップとして利用することや、リソースをそのまま制作物のコンテンツ素材として利用することなどは禁止されているようです。
リソースの利用方法
「Apple Design Resources – iOS 17 and iPadOS 17」のサイトにアクセスし、右上の「Open in Figma（Figmaで開く）」ボタンを押します。
ボタンを押すと、「Appleデザインリソースの使用許諾契約」というダイアログが表示されるので、内容をよく確認して問題なければ「同意する」を押します。
すると、ログインしているFigmaアカウントのDraft（下書き）に「Apple Design Resources – iOS 17 and iPadOS 17 (Community)」という名前のファイルが作成されます。
左ペインで見たいページを選択すると、そのページ内に存在するコンテンツが中央の描画領域に表示されます。
記事公開時点のファイル内のページ構成は以下の通りです。
Cover：カバー画像
Getting started：このリソースの概要、バグのフィードバック方法、必要なフォントのインストール方法などの説明
——————————————————：区切り用の空ページ
Components：UIコンポーネントのコレクション
Example components：UIコンポーネントのレイアウトや使用例のサンプル
Templates - iPhone：iPhoneのディスプレイに最適化された画面レイアウトの テンプレート
Templates - iPad：iPadのディスプレイに最適化された画面レイアウトのテンプレート
——————————————————：区切り用の空ページ
Colors：カラートークン（色スタイル）の標本
Materials：視覚的なレイヤー表現の標本
Text styles and dynamic type：タイポグラフィの標本（Dynamic TypeはユーザーがOSごとに画面上のテキストサイズを可変できる機能に対応したスタイル）
Safe areas：セーフエリアのガイドの標本（ディスプレイ上の標準的なビューでナビゲーションなどのUIで覆われることのない領域）
——————————————————：区切り用の空ページ
License：ライセンスの全文
各ページの各コンポーネントやトークンにはApple公式の「ヒューマンインターフェイスガイドライン」へのリンクがついており、使用方法やガイドラインを確認できるようになっています。
この記事を読んだ方におすすめの記事
Figmaのコンポーネント機能の基本的な使い方
今回は、Figmaの最も基本的な機能の一つであるコンポーネント（Component）の使い方を解説します。コンポーネントの使い方を知っているのといない のとでは、デザイン作業の効率が数十〜数百倍変わってくるほど非常に重要な機能です。 ...
