Environment Setup Notes for Designing visionOS Apps in Figma
While developing an app for visionOS, I ended up wanting to design it in Figma after all. So I am writing down these environment setup notes for designing visionOS apps in Figma.
Before starting anything in Figma, first check the following link.
The linked page is not very long, but it is useful for quickly getting the overall picture. After that, follow the links on the page and check the details carefully.
Then access the following page.
This page provides Sketch libraries and templates in addition to Figma. Since I am using Figma this time, I selected the Figma option. Once you open it, there is an "Open in Figma" button, and pressing it lets you use the file in your own Figma account.
When you open the design file in Figma, you may see a font warning. I think this may happen if you have not been designing for iOS apps. It happened to me, of course. In that case, you need to make the SF Pro font available in Figma. First, download and install the font from Apple's site.
Figma has the following documentation for adding fonts, so follow the instructions and install the font installer on your Mac.
With this, you can freely edit the design file used for visionOS Window apps. It is quite close to the real thing, so it may be good enough for discussion at the presentation stage. However, be careful: unless you also understand SwiftUI's rules, Figma lets you lay things out much more freely than the actual implementation allows.