--- title: Apple's iOS kit, Google's Material 3 kit or Appetite UI: which to start from description: Which Figma kit to start from: Apple's iOS 27 kit for an iPhone-only app, Google's Material 3 kit for Android, Appetite UI when one app ships on both. author: Bob Poláček topic: Platforms published: 2026-09-24 updated: 2026-09-26 source: https://www.appetiteui.com/blog/apple-ios-kit-vs-material-3-kit --- # Apple's iOS kit, Google's Material 3 kit or Appetite UI: which to start from Which Figma kit to start from: Apple's iOS 27 kit for an iPhone-only app, Google's Material 3 kit for Android, Appetite UI when one app ships on both. By Bob Poláček, updated September 26, 2026. Apple's iOS and iPadOS 27 UI kit and Google's Material 3 Design Kit are the free, official Figma references for one platform each. Start from Apple's kit when the app ships only on iPhone and iPad, and from Google's when it ships only on Android. When the same app ships on both, start from Appetite UI. Appetite UI is a Figma UI kit for iOS and Android apps, built like a design system. One token source drives Apple and Material components in light and dark mode, and exports to SwiftUI, Jetpack Compose, Flutter and CSS. Appetite UI's System mode returns each platform's published values, so the official baseline stays one switch away. **In short** - Apple's iOS and iPadOS 27 UI kit is Apple's own drawing of iPhone and iPad controls, free on Apple's Design Resources page, updated on September 15, 2026, and covered by the License Agreement for Apple Design Resources. - Google's Material 3 Design Kit is made for Jetpack Compose, and your brand reaches it through the Material Theme Builder plugin, which writes Figma styles. - Two official kits are two systems: their color roles, type ramps and corners have different names, and nothing links one to the other. - Appetite UI binds both platforms to one token source, and its System mode returns a frame to Apple's and Google's published values with one switch. I design Appetite UI, so the third option is mine. Everything this article says about Apple's and Google's kits is quoted from their own pages and from Apple's license, read on September 24, 2026, and linked at the end. ## Apple's kit is Apple's own drawing of iPhone and iPad. Apple describes the kit in one sentence: "Apple's iOS and iPadOS 27 UI kit for Figma helps you quickly and easily create highly accurate iPhone and iPad design comps and user flows." It holds "components for all common controls and views, design templates, text styles, color styles, and materials". Apple announced the 27 kits on June 23, 2026, with "Updates to Liquid Glass", "Expanded component and state support" and "Naming changes to better align with code", and the Figma Community file shows a further update on September 15, 2026. The kit is free on Apple's Design Resources page, for Figma and for Sketch. Two pieces sit outside the file. It asks you to "install the latest version of SF Symbols before using this library", and the system typeface has its own terms: "The Apple San Francisco font is subject to a separate license agreement." The Figma Community page links the license that covers the kit, the License Agreement for Apple Design Resources. Its section 2A reads: > "you are granted a limited, non-transferable, non-exclusive license to use the Apple Design Resources solely for creating mock-ups of user interfaces designed for use in software products that run only on Apple's macOS, iOS, watchOS, tvOS, and/or visionOS operating system software" [License Agreement for Apple Design Resources](https://developer.apple.com/support/downloads/terms/apple-design-resources/Apple-Design-Resources-License-20230621-English.pdf), LYL142, 06/21/2023, read September 24, 2026. ## Google's kit is made for Jetpack Compose and themed through a plugin. The latest entry in the changelog on Google's Figma Community page, version 1.25 of May 19, 2026, is direct about the platform: "Material Android is Compose-first. Use this design kit for Jetpack Compose." The same entry adds slots to sheets, cards, navigation rails, lists, menus, dialogs and tabs. The kit is "a comprehensive introduction to the design system, with styles and components to help you get started", and since May 2025 it carries Material 3 Expressive, which Google's changelog sums up as "a new shape set, emphasized typography, intuitive motion, vibrant colors, and flexible components". Your brand reaches the kit through a plugin. The kit is "built to work with the Material Theme Builder Figma plugin", which Google describes as a plugin "that allows makers to emulate the color extraction process for dynamic color and create custom tonal schemes". Its instructions say Create Theme will "generate a theme (material-theme) and Material Design tokens as Figma styles", and then: "Assign MD tokens (Figma styles) to custom elements and components, then swap to the currently selected theme." The kit added variables for "color, typography, and state layers" in 2024, and answering a user on the kit's page, the Material Design team wrote that "By default components are linked to Light color styles set". ## Two official kits give you two systems that share no names. Each kit names its slots in its own language. Apple's color roles are label, secondaryLabel, separator and tintColor; Material's are primary, on-surface, outline and surface-container-highest. Apple's type runs from largeTitle to caption2, Material's typescale from display-large to label-small. Nothing in one kit refers to the other, so with both open, the brand color, the text color and the large corner are each decided twice, and they drift apart the first time only one of them is changed. The component by component differences are listed in [iOS vs Material 3: what changes per component](https://www.appetiteui.com/blog/ios-vs-material-3-components). The same five decisions, as the two platforms answer them and as one token source answers them: **One slot, three answers: the iOS baseline, the Material 3 baseline and Appetite UI in Brand mode** | Slot | iOS baseline | Material 3 baseline | Appetite UI, Brand mode | | --- | --- | --- | --- | | Accent color | tintColor #007AFF | primary #6750A4 | brand/base #155DFC | | Text color | label #000000 | on-surface #1D1B20 | text/strong-950 #0E0E0F | | Body text | body 17 | body-large 16 | 18 for body, 16 for body-large | | Large corner | 26 | 28 | 24 | | Touch target | 44 pt | 48 dp | 44 pt on iOS, 48 dp on Android | In Brand mode the iOS slot and the Material slot read the same token. Baseline values are the ones the Appetite UI file returns in System mode, documented on [Platform Bridge](https://www.appetiteui.com/docs/platform-bridge), [iOS](https://www.appetiteui.com/docs/ios) and [Material 3](https://www.appetiteui.com/docs/material-3). Where a number is the file's own decision rather than a published one, those pages say so. ![Two official kits as two separate trees, Apple's iOS kit with tintColor and label and the Material 3 kit with primary and on-surface, beside Appetite UI's one tree: the primitive colors/blue/500 feeds the semantic brand/base, which branches into iOS/tintColor and M3/sys/color/primary](https://www.appetiteui.com/images/blog/apple-ios-kit-vs-material-3-kit--02.webp) *Two official kits hold two sets of names. One token source holds one brand primitive and points both platforms at it.* ## Appetite UI puts both platforms on one token source. Appetite UI keeps Apple's and Material's slot names and points each one at a token you control. The [Platform Bridge](https://www.appetiteui.com/docs/platform-bridge) is 112 variables: 52 Apple slots and 60 Material slots covering color, shape and type size. In Brand mode, iOS/tintColor points at brand/base, which points at colors/blue/500, and that primitive is the only place the hex is written. M3/sys/color/primary ends on the same primitive, so one edit moves an iOS screen and an Android screen together. Light and dark are two modes on the same semantic tokens: brand/base resolves to colors/blue/500 in Light and colors/blue/400 in Dark. Geometry that belongs to the platform lives in a separate Platform collection with ios-md, ios-lg and android modes, so a component reads a 44 pt target on iPhone and a 48 dp target on Android without a second copy. The whole file runs on 544 variables in 6 collections, and the [token source](https://www.appetiteui.com/tokens), with its SwiftUI, Jetpack Compose, Flutter and CSS outputs, comes in the file you buy. ## System mode is how you check a screen against each platform's baseline. Switch the Platform Bridge to System on a frame and every slot drops its pointer and returns the value Apple or Google publishes: iOS/tintColor goes from #155DFC to #007AFF, M3/sys/color/primary from #155DFC to #6750A4, and iOS body text from 18 to 17. The structure stays where it is, so what changes on screen is exactly the distance between your brand and the platform default. That is the view a native review asks for, and it answers "does this still read as iOS?" without opening a second file. ![One Appetite UI account setup screen before and after the frame's Platform Bridge mode changes from Brand to System: the orange done button and active tab turn iOS blue, and the Appearance panel between them has the mode menu set to System](https://www.appetiteui.com/images/blog/apple-ios-kit-vs-material-3-kit--01.webp) *The same frame in Brand mode and in System mode. Only the values move.* The switch has honest limits, and the [Platform Bridge docs](https://www.appetiteui.com/docs/platform-bridge) list them. The Appetite UI type scale is coarser than either platform ramp, so in Brand mode iOS headline and body land on the same step. Material's state opacities, from hover at 8 to disabled content at 38, stay bare numbers in both modes, because a state layer is a rule about interaction and not a brand decision. And the Liquid Glass border, edge and shadow slots keep an Appetite UI value in System mode, because Apple publishes none for them to return to. ## The official kits carry things Appetite UI leaves out on purpose. Apple's kit is Apple's artwork, and it works with SF Symbols and the San Francisco typeface under their own terms. Appetite UI includes no Apple artwork, symbol or typeface: every layer is drawn in Inter with Lucide icons, and the [iOS mirror](https://www.appetiteui.com/docs/ios) rebuilds Apple's patterns in its own geometry on its own tokens. Material Symbols are not bundled either; add them yourself and they fall under the Apache License 2.0, as the [Material 3 mirror](https://www.appetiteui.com/docs/material-3) notes. Appetite UI is not affiliated with Apple or Google; the platform names describe compatibility. So the official kits keep their place. When you need a control exactly as Apple or Google draws it, the official kit is where that lives, under its own license. ## Pick by where the app ships. **Choose Apple's kit if you ship on iOS only and want Apple's exact components.** Apple's own drawing of every common control, updated with each iOS release. **Choose Google's kit if you ship an Android app on Google's baseline.** Made for Jetpack Compose, with your brand applied through Material Theme Builder. **Choose Appetite UI if the same app also ships on Android, or your brand has to sit on top of the system.** Apple and Material components on one token source, with System mode as the check against both baselines. **Which kit to start from in each situation, and what to keep beside it** | Situation | Start from | Keep beside it | | --- | --- | --- | | iPhone and iPad only, Apple's exact look | Apple's iOS and iPadOS 27 UI kit | Appetite UI when a brand has to sit on top of the system | | Android only, Google's baseline | Google's Material 3 Design Kit | Appetite UI when Material roles have to carry your brand | | One app on iOS and Android | Appetite UI | System mode, which returns each platform's published values | | iOS today, Android on the roadmap | Appetite UI, on the iOS mirror | The Material mirror, which already reads the same tokens | The [platforms page](https://www.appetiteui.com/platforms) shows both mirrors side by side, and [How to design one app for iOS and Android in Figma](https://www.appetiteui.com/blog/design-one-app-for-ios-and-android-in-figma) walks through the workflow once both platforms are in one file. For the wider field beyond the two official kits, see [The best Figma UI kits for mobile apps in 2026](https://www.appetiteui.com/blog/best-figma-ui-kits-for-mobile-apps) or [Appetite UI alternatives](https://www.appetiteui.com/compare/alternatives), which describes each kit in its maker's own words. ## Questions ### Is Apple's iOS UI kit free? Yes. Apple publishes its iOS and iPadOS 27 UI kit free on its Design Resources page, for Figma and for Sketch, under the License Agreement for Apple Design Resources. SF Symbols and the San Francisco font are separate downloads with their own terms. ### Can I use Apple's iOS kit to design the Android version of my app? Apple's license answers this in section 2B: "The grants set forth in this License do not permit you to, and you agree not to, install, use or run the Apple Design Resources for the purpose of creating mock-ups of user interfaces to be used in software products running on any non-Apple operating system software." The full text is in the [license PDF](https://developer.apple.com/support/downloads/terms/apple-design-resources/Apple-Design-Resources-License-20230621-English.pdf), LYL142 of 06/21/2023, read September 24, 2026. ### Does Google's Material 3 Design Kit use Figma variables? Yes, behind styles. The Material 3 Design Kit's changelog added variables for "color, typography, and state layers" in 2024, and the Material Design team says on the kit's page that "By default components are linked to Light color styles set". Material Theme Builder generates your theme as Figma styles, and the same team answers there that you "will not be able to edit any variables if you are not on a professional, organization or enterprise plan". ### Can I use Apple's and Google's kits in one Figma file? Yes, as two libraries, and they stay two systems. Apple's roles, such as label and tintColor, and Material's, such as primary and on-surface, do not refer to each other, so every brand decision is made once per kit. Read section 2B of the License Agreement for Apple Design Resources before using Apple's kit for anything that is not an Apple platform. ### Does Appetite UI include SF Pro or SF Symbols? No. No Apple artwork, symbol or typeface is included. The file is drawn in Inter with Lucide icons, and the iOS mirror rebuilds Apple's patterns in Appetite UI's own geometry on its own tokens. If your app uses SF Symbols, install them from Apple and place them in your screens yourself. ### How fast does Appetite UI follow a new iOS release? Appetite UI has shipped a release every one to three months in 2026, in February, May, June, August and September, each listed on the [changelog](https://www.appetiteui.com/changelog). The September 2026 release completed the iOS layer and rebuilt Liquid Glass on Apple's own recipe. Every future version is included in the one payment, $79 for a Solo license on the [pricing page](https://www.appetiteui.com/pricing), and the whole file has a [read-only preview](https://www.figma.com/design/iNFK9Pl2e9vEeClqhm1F4t/Appetite-UI-%E2%9C%A6-2.4?node-id=10-602) before you pay. ## Sources 1. [Apple Design Resources](https://developer.apple.com/design/resources/), read September 24, 2026 2. [iOS and iPadOS 27, Apple's UI kit on Figma Community](https://www.figma.com/community/file/1651309003795292092/ios-and-ipados-27), read September 24, 2026 3. [Design kits for iOS, iPadOS, and macOS 27 are here, Apple Developer News](https://developer.apple.com/news/?id=e2lxw9l1), read September 24, 2026 4. [License Agreement for Apple Design Resources, PDF](https://developer.apple.com/support/downloads/terms/apple-design-resources/Apple-Design-Resources-License-20230621-English.pdf), read September 24, 2026 5. [Material 3 Design Kit, Google's kit on Figma Community](https://www.figma.com/community/file/1035203688168086460/material-3-design-kit), read September 24, 2026 6. [Material Theme Builder, Figma plugin](https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder), read September 24, 2026 7. [Color resources, Material Design 3](https://m3.material.io/styles/color/resources), read September 24, 2026 8. [Start building with Material 3 Expressive, Material Design](https://m3.material.io/blog/building-with-m3-expressive), read September 24, 2026