The best Figma UI kits with variables for mobile apps in 2026

The best Figma UI kit with variables for a mobile app on iOS and Android is Appetite UI, because its brand, its light and dark appearance and the measures that differ between iOS and Android all live in variables, and the same values leave the file as tokens for SwiftUI, Jetpack Compose, Flutter and CSS. For an Android app on Google's baseline, Google's Material 3 Design Kit holds Material's roles in variables; for a web product, Untitled UI and AlignUI.

I design Appetite UI, so the first entry is my own product. It is first because this list is ranked for one case, an app on both phone platforms whose system lives in variables; where another kit does better, its section says so.

Prices as each maker's page printed them on October 30, 2026, the lowest tier first, with the page each was read on; “once” is a one-time payment. Check the page before you buy, prices move.

How this list was made.

• Who wrote it. Bob Poláček, who designs Appetite UI with the bpolacek.cz studio team and external collaborators. Appetite UI is the author's product, and this page says so before the list.
• What was checked. Five checks of what a kit keeps in variables and where the values go, below. Each one is a sentence a maker's public page either states or does not.
• When. Every page was read on October 30, 2026, prices included, and every quote was matched in the page's text that day. The pages are listed under Sources.
• The rules. Only a maker's own words; prices only as the maker's page printed them, with the day; where a page is silent the scorecard says Not stated, never No; and the variable test below works on any kit you can open in Figma.

The list is ranked for a system in variables on two phone platforms.

A variable is a named value: a color, a number, a string. A kit is built on variables when its components read those names instead of holding the values themselves, so an edit to one variable moves every screen that uses it. Three things decide how far that goes in a mobile kit. Which values are variables at all, often color only and sometimes type, spacing and radius too. Which modes the variables have, since a mode is a second value under the same name: Light and Dark, a brand, a platform. And whether the values leave the file, as tokens a developer uses.

For an app on iOS and Android the platform matters most: a 44 pt touch target on iOS is 48 dp on Android, and a kit that holds that as a mode switches a frame between the platforms without a second library. Apple's iOS and iPadOS 27 UI kit names color styles and no variables on its pages, and Setproduct Mobile X makes its dark theme with variants and names no variables, so neither is ranked here; the best-of list covers both.

Checked on October 30, 2026, against each maker's own public pages. Not stated means the page does not say it, which is not the same as the kit lacking it.

Appetite UI keeps brand, platform and appearance in variables.

This is the entry I make, so here is what it does and what it does not.

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.

The file runs on 589 variables in 6 collections. Foundations holds the palette, spacing and radius, 202 primitives with one mode. Color Tokens holds the 190 semantic roles in Light and Dark. Typography, 33 variables, and Motion, 31, carry the type scale and the durations and curves. The Platform collection holds 20 measures in five modes, ios-md, ios-lg, android, ios-duo-outer and ios-duo-inner, so a component reads a 44 pt touch target on iOS and 48 dp on Android (dimensions). And the Platform Bridge, 113 variables, lets Apple's and Material's own names read your tokens: in Brand mode iOS/tintColor and M3/sys/color/primary both end on brand/base, and in System mode they return Apple's and Google's published values.

That chain is what makes a rebrand one edit: repointing brand/base from blue to orange recolored 1,110 layers across components, app screens and charts, on both platforms and in both modes, counted in the file on October 8, 2026 (How to rebrand a mobile app in Figma with variables). The same values leave the file as one token source in the W3C Design Tokens format, with SwiftUI, Jetpack Compose, Flutter and CSS outputs in the file you buy; a mode is a second value on the same token there too (code output, tokens).

What it leaves out: no coded components, so the outputs are values for the components your developers build; nothing for the web; and only one brand at a time, since Brand mode points at one set of brand primitives. Its variable modes need a paid Figma plan.

Where other kits beat Appetite UI

• Components as code on the same tokens. Dynamic Layer's Flutter library and Untitled UI's and AlignUI's React libraries read their tokens in code; Appetite UI hands over the values only.
• Material's own theme generator. Material Theme Builder generates a full Material scheme from one color and exports it; Appetite UI's Material roles point at your tokens instead of being generated.
• The web. Untitled UI and AlignUI are built for web products, and Nucleus UI covers an app and its website on one library.
• Free to start. Google's kit prints no price, and Nucleus UI, Dynamic Layer and Untitled UI have free versions; Appetite UI is paid.

Pick it when the app ships on iOS and Android, the brand has to be one edit, and developers should receive the same names the file uses.

Google's Material 3 kit holds Material's roles in variables.

Use Google's kit if you ship an Android app on Material's roles.

The kit's changelog lists "Variables added: color, typography, and state layers", and the Material Theme Builder plugin will "generate a theme (material-theme) and Material Design tokens as Figma styles" from your color. The plugin exports the theme: "Click Export and select your desired code format." The latest changelog entry says "Material Android is Compose-first. Use this design kit for Jetpack Compose." Its pages name no iOS components. Side by side on Appetite UI vs the Material 3 Design Kit.

Dynamic Layer carries its tokens into Flutter.

Use Dynamic Layer if the app is built in Flutter and the tokens should reach coded components.

Dynamic Layer's Figma page says "Scale your Design System with Tokens", and "No matter whether colors, spacing, font styles or radius. Everything is scalable in just a few seconds." Its docs call the Flutter library "token-driven", with "Token-based foundations (colors, spacing, radius, typography)", and its dark mode switches by a mode. Its pages offer iOS and Android screen templates and name no switch between the two platforms. Side by side on Appetite UI vs Dynamic Layer.

Nucleus UI puts its library on variables, with no export named.

Use Nucleus UI if one Figma kit has to cover an app and its website on one library.

Nucleus UI names variables for "colors, typography, effects styles, spacing, and radius", says "Built-in variables make switching between light and dark mode easy", and puts the edit in one line: "Tweak your design system-wide in seconds with global styles or variables". Its templates run "From mobile apps to web UI kits for dashboards, e-commerce, and marketing pages". The page names no token export and no iOS or Android conventions.

Untitled UI pairs Figma variables with CSS variables, for the web.

Use Untitled UI if you ship a web app, a dashboard or a marketing site.

Untitled UI lists "Figma variables" with "Advanced color, spacing and radius variables", in its PRO VARIABLES version, and its React library, "built with Tailwind CSS and React Aria", keeps dark mode styles in "design tokens and CSS variables, not hardcoded in components". It is built for the web; its pages do not name iOS or Android. More in Appetite UI vs Untitled UI for a mobile app, screen by screen.

AlignUI matches its Figma tokens to React, for the web.

Use AlignUI if you build a web product in React and Tailwind CSS.

AlignUI's Figma page lists "Styles, Variable & Tokens", "Tokens & Variables" and "Color Variables", and its homepage describes an "Up-to-date Figma file synced with code library", "Built for React" and "Styled with TailwindCSS". Its pricing page sells the Figma file and the code library apart; its pages name no iOS or Android components.

The variable test shows what a kit holds in five minutes.

The scorecard reads the makers' pages. This test reads the file, and it works on any kit you can open in Figma's editor.

1. Open the variables panel

   Count the collections and read their modes. Color only, with Light and Dark, is a theme; color, type, spacing and radius with more modes is a system.

2. Follow one brand color down

   Select a primary button and follow its fill through the aliases to a value. The number of hops does not matter; ending on one variable that every button shares does.

3. Change a spacing or radius variable

   Edit one and watch the screens. If cards and buttons move, the kit binds more than color; if nothing moves, the numbers are held in the components.

4. Look for the export

   Find the token file or the export the kit names, and open it. Names that match the variables are what developers will use; a file of hex values is a palette.

Pick by the app you are shipping.

Answer three questions and the picker names the kit to start with and two more to look at. Appetite UI comes up only where its traits answer: it has no coded components and nothing for the web.

This page is one of three rankings for one case. The best Figma UI kits with dark mode for mobile apps in 2026 ranks the kits by how dark mode is built, and The best Figma UI kits for AI coding agents in 2026 by what an AI agent gets to build from. For every kit against the checks for one app on iOS and Android, see The best Figma UI kits for mobile apps in 2026, and for the same decision on one page, Appetite UI alternatives. How one token reaches each platform's code is in How one Figma token becomes SwiftUI, Compose, Flutter and CSS.

Questions

Which Figma UI kit has the best variables for an iOS and Android app?

Appetite UI. Its brand, its Light and Dark appearance and the measures that differ between iOS and Android are variables, in 6 collections, and Apple's and Material's components read the same tokens through the Platform Bridge. The values leave the file as one token source with SwiftUI, Jetpack Compose, Flutter and CSS outputs.

What is 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.

What is the difference between Figma variables and design tokens?

A Figma variable is a named value inside a Figma file that layers and components bind to. A design token is the same named value outside the file, in a format code reads, such as a JSON file in the W3C Design Tokens format. A kit with both keeps one name from the variables panel to the code.

Can Figma variables switch between iOS and Android?

Yes, with a mode. In Appetite UI the Platform collection has five modes, ios-md, ios-lg, android, ios-duo-outer and ios-duo-inner, so a frame changes platform with one dropdown and a component reads 44 pt on iOS and 48 dp on Android. The bars, sheets and primary action are still drawn once per platform.

Do Figma variables work on the free plan?

Variables do, modes do not. Figma's help says "Anyone on Education, Professional, Organization, and Enterprise plans can create and use modes for variables." Light and Dark, Brand and System, and platform modes all need one of those plans.

Can one Figma UI kit hold several brands at once?

Appetite UI holds one brand at a time: Brand mode points at one set of brand primitives, and a rebrand repoints them. A product with several brands live at the same time needs a mode per brand, which Figma's paid plans allow and which you would add to the file yourself.

Sources

1. read October 30, 2026Modes for variables, Figma Learn
2. read October 30, 2026Material 3 Design Kit, Google's kit on Figma Community
3. read October 30, 2026Material Theme Builder, Figma plugin
4. read October 30, 2026Dynamic Layer for Figma
5. read October 30, 2026Dynamic Layer docs, introduction
6. read October 30, 2026Dynamic Layer pricing
7. read October 30, 2026Nucleus UI
8. read October 30, 2026Nucleus UI pricing
9. read October 30, 2026Untitled UI
10. read October 30, 2026Untitled UI pricing
11. read October 30, 2026AlignUI
12. read October 30, 2026AlignUI for Figma
13. read October 30, 2026AlignUI Figma pricing
14. read October 30, 2026Apple Design Resources
15. read October 30, 2026Figma Mobile X UI kit, Setproduct