Apple’s Figma Design Kit

What it is and why it matters

Business Breakthrough
5 min readJun 9, 2023

If you’re a designer who loves Apple and Figma, you’re in for a treat.

Apple has finally decided to join the Figma community and release its own design kit with iOS 17 and iPadOS 17 resources.

This is huge news for several reasons.

Let me tell you why.

Why is this a big deal?

First of all, it shows that Apple knows how awesome Figma is and wants to make its users happy with the best possible resources.

Figma is a web-based platform that lets you design and prototype user interfaces with your team or clients in real-time.

You can also use plugins, extensions, and community files to make your work easier and more fun.

Figma has been super popular and loved by designers who create for Apple’s platforms, but they had to use unofficial or third-party design kits that often sucked or were outdated.

That’s why many designers were super excited when Apple announced at its Worldwide Developers Conference (WWDC) 2023 that it has officially joined the Figma community and released its own design kit with iOS 17 and iPadOS 17 resources.

Second of all, it gives you access to a ton of components, views, system interfaces, text styles, color styles, materials, and layout guides that you can use to quickly create super realistic iOS and iPadOS apps designs.

You don’t have to waste time recreating assets or guessing how things should look or behave.

You can just use what Apple provides and focus on your creativity.

Third of all, it makes sure that you always have the most up-to-date and accurate representation of Apple’s platforms and technologies in Figma.

You don’t have to worry about missing out on new features or changes that Apple introduces.

You can always trust that Apple will keep the design kit updated and consistent.

What’s in the design kit?

Apple’s design kit for Figma has everything you need to design apps for iOS 17 and iPadOS 17. Some of the cool things you can find are:

  • A bunch of components, from Alerts to Widgets and everything in between
  • Home Screen and Lock Screen widget templates
  • Notification design templates
  • Templates for tabbed apps, parent / child apps, split views, and sheets
  • A full dynamic type chart with accessibility sizes
  • Built-in iOS system colors, materials, text styles and vibrancy effects

The design kit also follows Figma’s best practices for organizing and naming layers, groups, components, variants, styles, and auto-layout settings.

This makes it easy to find what you need, customize it to your needs, and keep it consistent across your designs.

Apple also says that they will add more stuff to the design kit soon.

They will include components for Apple Pay, App Clips, Shortcuts, and more.

They will also add libraries for other Apple platforms like macOS Sonoma, watchOS 10, tvOS 17, and visionOS.

How to use the design kit?

To use the design kit, you need to have a Figma account and install the latest versions of SF Symbols and SF Pro fonts on your computer.

Then, you need to open the Figma file from this link.

You can browse through the different pages of the file to see what’s available.

You can also use the Assets panel on the left side of the screen to access all the components and styles.

To use any component or style in your own project, you can just drag it from the Assets panel or copy it from the file and paste it into your canvas.

You can then edit its properties using the right sidebar or by double-clicking on it.

You can also create your own components or styles based on the ones provided by Apple.

For example, you can create a custom button component by duplicating an existing one and changing its label or color. You can then publish it to your own team library or share it with others.

What does this mean for designers?

Apple’s official design kit for Figma is a game-changer for designers who create for Apple’s platforms.

It means that you can now work faster and more efficiently with Figma without compromising on quality or fidelity.

It also means that you can collaborate more easily with other designers or developers who use Figma or other tools that support importing from Figma.

Plus, it shows that Apple cares about design and wants to empower its users with the best tools and resources.

This could lead to more innovation and creativity in the Apple ecosystem, as well as more learning and sharing among the Figma community.

Apple’s entry into the Figma community is a welcome and exciting development for designers.

If you are a designer who creates for Apple’s platforms, or if you are curious about it, you should definitely check out Apple’s design kit for Figma and see how it can help you create amazing iOS and iPadOS apps.

That’s it for this article.

I hope you enjoyed learning about Apple’s design kit for Figma and how it can help you create stunning iOS and iPadOS apps.

I think this is a great move by Apple and Figma and I can’t wait to see what they will come up with next.

  • Now I want to hear from you. Have you tried Apple’s design kit for Figma? What do you think of it?
  • How do you use Figma to design for Apple’s platforms? Do you have any tips or tricks to share?
  • What are some of the features or components that you would like to see in Apple’s design kit in the future?
  • How do you think Apple’s entry into the Figma community will affect the design industry and culture?

Let me know your thoughts in the comments below. And if you liked this article, please share it with your friends and colleagues.

Thanks for reading and happy designing!

Best,

BB

--

--