Figma で visionOS 向けアプリのデザインをするための環境設定メモ
visionOS 向けにアプリを開発していて、やっぱり Figma でデザインしたいなってなった。ということで、Figma で visionOS 向けアプリのデザインをするための環境設定メモを書いておく。
まず、Figma で何か始める前に一旦以下のリンクをチェックしておく。
リンク先のページはそんなに長いページではないが、簡潔に全体像を掴むに便利。その上で、ページ内の各リンクへ飛ぶと細かいことが書かれているので、くまなくチェックする。
その上で、以下のページにアクセスする。
このページには Figma のほかに Sketch のライブラリやテンプレートが用意されている。今回は Figma を使うのでそちらを選択。アクセスすると「Figma で開く」ボタンがあるので、そちらを押すことで自分の Figma アカウント内で利用することができる。
さて Figma でデザインファイルを開くとフォントの警告が出る場合がある。 iOS アプリ向けにデザインとかをしてきていない人とかは出るのではないかと思う。もちろん僕の場合は出た。この場合、 SF Pro というフォントを Figma 内で使えるようにする必要がある。まずは、 Apple のサイトよりフォントをダウンロードしてインストールする。
Figma へのフォントの追加については以下のドキュメントがあるので、指示に従ってフォントインストーラーを Mac に入れる。
これで visionOS の Window アプリで使うデザインファイルを自由自在に編集できる。かなり実物に近いのでプレゼンの段階ではこれで検討してもいいかもしれない。ただし、SwiftUI のルールも理解した上でやらないと Figma 上では自由自在にレイアウトできてしまうので要注意。
