{"id":25236,"date":"2024-05-07T08:30:58","date_gmt":"2024-05-06T23:30:58","guid":{"rendered":"https:\/\/designcompass.org\/?p=25236"},"modified":"2024-05-07T08:30:59","modified_gmt":"2024-05-06T23:30:59","slug":"macos-sonoma-9","status":"publish","type":"post","link":"https:\/\/designcompass.org\/en\/2024\/05\/07\/apple-figma-template\/","title":{"rendered":"Apple Figma Template: How does Apple use Figma?"},"content":{"rendered":"

Apple has released a new template to the Figma community. Last June, iOS, iPadOS, macOS, and visionOS templates were released through Figma.<\/a>It's been a year since I did it. We created separate files for frequently used functions in iOS.<\/p>\n\n\n\n

\"\"
Figma component example \u24d2Apple<\/figcaption><\/figure>\n\n\n\n
\"\"
Figma Community Page \u24d2Apple<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

A live activity, tip kit, to convey information focusing on functions that run independently within the OS, anytime and anywhere. Apple Pay, Tap to Pay, Wallet for payments. Added Apple Login, Siri, and Messages for interaction.<\/p>\n\n\n\n

\"\"
Live Activity \u24d2Apple<\/figcaption><\/figure>\n\n\n\n
\"\"
Apple Pay \u24d2Apple<\/figcaption><\/figure>\n\n\n\n
\"\"
Apple Login \u24d2Apple<\/figcaption><\/figure>\n\n\n\n

The soft toned background color of the thumbnail is harmonious. There is an example when the component is applied to an actual device, so you can immediately understand what kind of file it is. <\/p>\n\n\n\n

On the Templates page, there is a link to Apple's Human Interface Guide document where you can learn how to use it. The Specifications page details the structure and dimensions of the element. The Components page provides ready-to-use symbols for Figma. Variants and Auto Layout were applied perfectly. The layer structure and names are also neatly organized. Apple decides to separate words with spaces. As Apple designs its machine boards beautifully, the figma files are also beautiful.<\/p>\n\n\n\n

\"\"
Developer Guide \u24d2Apple<\/figcaption><\/figure>\n\n\n\n
\"\"
Components \u24d2Apple<\/figcaption><\/figure>\n\n\n\n
\"\"
Specifications \u24d2Apple<\/figcaption><\/figure>\n\n\n\n
\"\"
Layer structure \u24d2Apple <\/figcaption><\/figure>\n\n\n\n

This is valuable information that gives you a glimpse into how Apple uses Figma. You can check how to express the color of the layer and detailed values used for shadows, roundness, etc. You can clone it from the Figma community and use it right away. You must install SF Symbol, which allows you to use Apple's various icons as fonts, to display them properly.<\/p>\n\n\n\n

<\/div>\n\n\n\n

More and Sources<\/h3>\n\n\n\n