Figma component and variable mapping
Find components, variables, and tokens from the reviewed original Figma mapping.
Read the complete LICENSE. Source: the reviewed public-map section of FigmaComponentMap; fingerprint: bb1afc337ca397c2. Component source baseline: 0.3.0-alpha.11. Regenerate and check mappings and download links when the component package version changes. The original file IDs identify only the original design file; use the user-provided copy URL and relocate by page or collection, name, type, mode, and current value. Similar names do not prove identical variants or Code Connect inheritance.
Get the SnowUI Design System on Figma Community · Detailed Chinese source mapping · Machine-readable mapping. Check current Community acquisition and copying terms there. The order-specific paid Figma file is a separate account resource.
Variables to tokens
| Collection and variable | Original ID | Modes or values | Current code mapping |
|---|---|---|---|
| Colors / Background/1 | 63800:86877 | Same resolved value in all four modes | --background-1 |
| Colors / Background/2 | 10796:1292 | Same resolved value in all four modes | --background-2 |
| Colors / Background/3 | 77680:18100 | Same resolved value in all four modes | --background-3 |
| Colors / Black/4% | 10788:1272 | Same resolved value in all four modes | --black-4 |
| Colors / Black/10% | 10788:1271 | Same resolved value in all four modes | --black-10 |
| Colors / Black/20% | 10788:1270 | Same resolved value in all four modes | --black-20 |
| Colors / Black/40% | 10788:1269 | Same resolved value in all four modes | --black-40 |
| Colors / Black/80% | 10788:1268 | Same resolved value in all four modes | --black-80 |
| Colors / Black/100% | 10788:1260 | Same resolved value in all four modes | --black-100 |
| Colors / Brand | 12686:22005 | Same resolved value in all four modes | --brand |
| Colors / Color 1 | 11033:14845 | Same resolved value in all four modes | --color-1 |
| Colors / Color 2 | 11033:14844 | Same resolved value in all four modes | --color-2 |
| Colors / Primary | 10790:1273 | Figma aliases to --black-100, --black-40, or --brand by mode | --primary |
| Colors / Secondary/Blue | 11033:14852 | Alias to Brand in all four modes | --secondary-blue |
| Colors / Secondary/Cyan | 11033:14851 | Same resolved value in all four modes | --secondary-cyan |
| Colors / Secondary/Green | 11033:14853 | Same resolved value in all four modes | --secondary-green |
| Colors / Secondary/Indigo | 11033:14849 | Same resolved value in all four modes | --secondary-indigo |
| Colors / Secondary/Mint | 11033:14854 | Same resolved value in all four modes | --secondary-mint |
| Colors / Secondary/Orange | 19302:59416 | Same resolved value in all four modes | --secondary-orange |
| Colors / Secondary/Purple | 11033:14850 | Same resolved value in all four modes | --secondary-purple |
| Colors / Secondary/Red | 11033:14856 | Same resolved value in all four modes | --secondary-red |
| Colors / Secondary/Yellow | 11033:14855 | Same resolved value in all four modes | --secondary-yellow |
| Colors / Surface/1 | 79311:2892 | Same resolved value in all four modes | --surface-1 |
| Colors / Surface/2 | 79311:2893 | Same resolved value in all four modes | --surface-2 |
| Colors / Surface/3 | 79314:2894 | Same resolved value in all four modes | --surface-3 |
| Colors / White/4% | 10788:1265 | Same resolved value in all four modes | --white-4 |
| Colors / White/10% | 10788:1264 | Same resolved value in all four modes | --white-10 |
| Colors / White/20% | 10788:1263 | Same resolved value in all four modes | --white-20 |
| Colors / White/40% | 10788:1262 | Same resolved value in all four modes | --white-40 |
| Colors / White/80% | 10788:1261 | Same resolved value in all four modes | --white-80 |
| Colors / White/100% | 10788:1253 | Same resolved value in all four modes | --white-100 |
| Corner Radius / 0 | 12345:4045 | 0 / 0 / 0 / 0 | --radius-0 |
| Corner Radius / 4 | 11828:14224 | 4 / 8 / 12 / 0 | --radius-1 |
| Corner Radius / 8 | 11828:14225 | 8 / 12 / 16 / 4 | --radius-2 |
| Corner Radius / 12 | 11828:14226 | 12 / 16 / 20 / 8 | --radius-3 |
| Corner Radius / 16 | 11828:14227 | 16 / 20 / 24 / 12 | --radius-4 |
| Corner Radius / 20 | 14836:69678 | 20 / 24 / 28 / 16 | --radius-5 |
| Corner Radius / 24 | 11828:14228 | 24 / 28 / 32 / 20 | --radius-6 |
| Corner Radius / 28 | 67317:1368 | 28 / 32 / 36 / 24 | --radius-7 |
| Corner Radius / 32 | 11828:14229 | 32 / 36 / 40 / 28 | --radius-8 |
| Corner Radius / 40 | 67317:1369 | 40 / 44 / 48 / 36 | --radius-10 |
| Corner Radius / 48 | 67317:1370 | 48 / 52 / 56 / 44 | --radius-12 |
| Corner Radius / 80 | 11828:14230 | 80 / 84 / 88 / 76 | --radius-20 |
| Size / 12 | 79163:5439 | 12 / 16 / 20 / 8 | --size-3 |
| Size / 16 | 11828:14211 | 16 / 20 / 24 / 12 | --size-4 |
| Size / 20 | 11828:14214 | 20 / 24 / 28 / 16 | --size-5 |
| Size / 24 | 11828:14215 | 24 / 28 / 32 / 20 | --size-6 |
| Size / 28 | 11828:14216 | 28 / 32 / 36 / 24 | --size-7 |
| Size / 32 | 11828:14217 | 32 / 36 / 40 / 28 | --size-8 |
| Size / 40 | 12527:4478 | 40 / 44 / 48 / 36 | --size-10 |
| Size / 48 | 11828:14218 | 48 / 52 / 56 / 44 | --size-12 |
| Size / 56 | 63299:2592 | 56 / 60 / 64 / 52 | --size-14 |
| Size / 64 | 63299:2591 | 64 / 68 / 72 / 60 | --size-16 |
| Size / 72 | 63299:2590 | 72 / 76 / 80 / 68 | --size-18 |
| Size / 80 | 11828:14219 | 80 / 84 / 88 / 76 | --size-20 |
| Spacing / 0 | 59658:4923 | 0 / 0 / 0 / 0 | --gap-0 |
| Spacing / 4 | 10800:7051 | 4 / 8 / 12 / 0 | --gap-1 |
| Spacing / 8 | 10800:7052 | 8 / 12 / 16 / 4 | --gap-2 |
| Spacing / 12 | 10896:7735 | 12 / 16 / 20 / 8 | --gap-3 |
| Spacing / 16 | 10800:7053 | 16 / 20 / 24 / 12 | --gap-4 |
| Spacing / 20 | 10800:7054 | 20 / 24 / 28 / 16 | --gap-5 |
| Spacing / 24 | 10800:7055 | 24 / 28 / 32 / 20 | --gap-6 |
| Spacing / 28 | 10800:7056 | 28 / 32 / 36 / 24 | --gap-7 |
| Spacing / 40 | 10838:1251 | 40 / 44 / 48 / 36 | --gap-10 |
| Spacing / 48 | 10838:1252 | 48 / 52 / 56 / 44 | --gap-12 |
| Font / Font | 71877:1650 | Inter / SF Pro / Bai Jamjuree / Space Grotesk | --font-family |
| Font / Letter spacing | 71889:30921 | 0 in all four modes | No direct token |
| Font Weight / Regular | 60927:208 | Regular / Semi Bold: 400 / 600 | .font-normal |
| Font Weight / Semibold | 60927:209 | Regular / Semi Bold: 600 / 400 | .font-semibold |
| Paragraph Spacing / 8 | 71877:1655 | Text=0 / Paragraph=8 | .text-12.paragraph |
| Paragraph Spacing / 10 | 71877:1656 | Text=0 / Paragraph=10 | .text-14.paragraph |
| Paragraph Spacing / 12 | 71877:1657 | Text=0 / Paragraph=12 | .text-16.paragraph |
| Paragraph Spacing / 14 | 71877:1658 | Text=0 / Paragraph=14 | .text-18.paragraph |
| Paragraph Spacing / 18 | 71877:1659 | Text=0 / Paragraph=18 | .text-24.paragraph |
| Paragraph Spacing / 24 | 71877:1660 | Text=0 / Paragraph=24 | .text-32.paragraph |
| Paragraph Spacing / 36 | 71877:1661 | Text=0 / Paragraph=36 | .text-48.paragraph |
| Paragraph Spacing / 48 | 71877:1662 | Text=0 / Paragraph=48 | .text-64.paragraph |
| Visibility 1 / Visibility 1 | 12118:13616 | True=true / False=false | No direct token |
| Visibility 2 / Visibility 2 | 15803:57048 | True=true / False=false | No direct token |
Figma components to public pages
The 115 original top-level components and component sets are mapped by role. Variants and API details have not all been verified. A missing code page means no verified independent component, not that composition is impossible.
| Figma page | Original design node | Public SnowUI page |
|---|---|---|
| Base | Text | text |
| Base | Icon | icon |
| Base | IconText | icon, text |
| Base | Frame | frame |
| Base | Frame/GroupText | frame |
| Base | Frame/TextIcon-Text | frame |
| Base | Frame/IconText-Text | frame |
| Base | Frame/Text | frame |
| Base | Frame/Icon | frame |
| Base | Frame/TextIcon-Icon | frame |
| Base | Frame/IconText-Icon | frame |
| Base | Group | No verified independent component |
| Base | Button | button |
| Base | Button/Active | button |
| Base | Button/Disabled | button |
| Base | Image | image |
| Base | Link | link |
| Base | Strip | No verified independent component |
| Base | Line | No verified independent component |
| Base | Tag | tag |
| Base | Badge | badge |
| Base | Chip | chip |
| Base | Separator | separator |
| Base | ButtonGroup | button-group |
| Common | Mask | No verified independent component |
| Common | Search | search-box |
| Common | Toast | toast |
| Common | Tab | tab |
| Common | DatePicker | No verified independent component |
| Common | Scrollbar | No verified independent component |
| Common | SearchPopup | search-popup |
| Common | Slider/Solid | slider |
| Common | SliderBar | slider |
| Common | Tooltip/Interaction | tooltip |
| Common | Notifications | No verified independent component |
| Common | Contacts | No verified independent component |
| Common | Activities | No verified independent component |
| Common | Notifications/Interaction | No verified independent component |
| Common | Card | card |
| Common | Popover | popover |
| Common | Popover/Medium | popover |
| Common | Popover/Large | popover |
| Common | Listbox | listbox |
| Common | Input | input |
| Common | Field/Address | field |
| Common | Field/CreditCard | field |
| Common | Popover/Interaction | popover |
| Common | Field/TwoInputs | field |
| Common | Field/ThreeInputs | field |
| Common | Tooltip | tooltip |
| Common | Kbd | kbd |
| Common | CodeBlock | code-block |
| Common | Breadcrumb | breadcrumb |
| Common | Pagination | pagination |
| Common | Textarea | textarea |
| Common | Accordion | accordion |
| Common | DataTable | data-table |
| Common | Progress | progress |
| Common | Slider | slider |
| Common | Dialog | dialog |
| Mobile | Phone | No verified independent component |
| Mobile | NavigationBar | No verified independent component |
| Mobile | TabBar | No verified independent component |
| Brand | SocialMedia | No verified independent component |
| Brand | Copyright | No verified independent component |
| Brand | MadeWithSnowUI | No verified independent component |
| Brand | SnowUI Library | No verified independent component |
| Brand | Navigation | No verified independent component |
| Brand | SnowUI Logo | snow-ui-logo |
| Brand | Documentation | No verified independent component |
| Hello | About me | No verified independent component |
| Design system | SnowUI Design System | No verified independent component |
| Design system | Contents of Design System | No verified independent component |
| Design system | 90% Principle | No verified independent component |
| Design system | Variables | No verified independent component |
| Design system | Spacing, Size, Corner Radius | No verified independent component |
| Design system | Colors | No verified independent component |
| Design system | Text Styles | No verified independent component |
| Design system | Effect Styles | No verified independent component |
| Design system | Components | No verified independent component |
| Design system | Design Resources | No verified independent component |
| Dashboard | Footer | No verified independent component |
| Dashboard | RightSidebar | No verified independent component |
| Dashboard | TabBar | No verified independent component |
| Dashboard | Header | No verified independent component |
| Dashboard | Sidebar | No verified independent component |
| Dashboard | Pagination | No verified independent component |
| Dashboard | TextStrip | No verified independent component |
| Settings | ThemeSelection | No verified independent component |
| Settings | SettingsNav | No verified independent component |
| Settings | FontSizeSetting | No verified independent component |
| Settings | SettingsPopoverTitle | No verified independent component |
| ChatGPT | ChatGPTLogo | No verified independent component |
| ChatGPT | ChatGPTSettingsSidebar | No verified independent component |
| ChatGPT | ChatGPTSideFreme | No verified independent component |
| ChatGPT | ChatGPTChatInput2 | No verified independent component |
| ChatGPT | ChatGPTChatAssets | No verified independent component |
| ChatGPT | ChatGPTChatInput/Assets | No verified independent component |
| ChatGPT | ChatGPTChatInput | No verified independent component |
| ChatGPT | ChatGPTTopBar | No verified independent component |
| ChatGPT | ChatGPTTopBar/Assets | No verified independent component |
| ChatGPT | ChatGPTSidebar | No verified independent component |
| AI Chat | AIChatCard | No verified independent component |
| AI Chat | AIChatNav | No verified independent component |
| AI Chat | AIChatBottomNav | No verified independent component |
| AI Chat | AIChatSidebar | No verified independent component |
| AI Chat | AIChatContent | No verified independent component |
| AI Chat | AIChatInput | No verified independent component |
| Authentication | reCAPTCHA | No verified independent component |
| Authentication | SignInWithGoogle | No verified independent component |
| Archive | Button/Interaction | No verified independent component |
| Archive | Interaction/Hover | No verified independent component |
| Archive | Interaction/Click | No verified independent component |
| Archive | Item | No verified independent component |
| License | SnowUI License Agreement | No verified independent component |