Turn a SnowUI Figma Design into a Page
Map Figma names, layout, and themes to real components and tokens.
Figma and design resources
Get the SnowUI Design System through its Figma Community page. In Figma, follow the current acquisition and copying options, then provide the URL of your own copy when asking for design changes. Relocate nodes and variables by page or collection, name, type, mode, and current value; original node IDs and Code Connect links do not identify your copy.
The Community resource, the public component reference file, and the Figma file listed in a paid order are separate resources. Check current Community terms on Figma. Paid delivery appears only in your account when the verified order explicitly includes it; a public link alone does not grant that entitlement.
Confirm the source and rights first
Read the complete LICENSE for the target version. When using a Figma file, also confirm that you obtained it legitimately. Access to a file, or a user saying they purchased it, does not by itself prove the right to claim a particular version of a bundled design resource. Reuse a confirmed check within the same task, version, and product scope instead of repeating it for every component.
Break down the page with the design guide. Find components through the component selection guide and component directory. Existing components provide visuals and interactions; the page provides structure, business data, and routing. Read the token directory for exact parameters and the styling guide and relevant public component styles for internal visual changes.
These sources support design reproduction and lawful product use. Do not scan the whole library, rebuild the design system, or extract the overall source architecture for a page task. Read, debug, modify, or port only the necessary components within the LICENSE.
Read design semantics before writing code
Prefer readable design data for the target frame: component instances and variants; Variable and Style names with their active modes; Auto Layout; size constraints; font and line height; border sides; icon assets; and states to implement. Record the target page, viewport, and theme.
A screenshot reveals broad structure and visible state, but cannot confirm color bindings, Hug / Fill, exact spacing, hidden interactions, or responsive constraints. Implement what is known first and list the missing evidence. Do not treat a sampled HEX or visual estimate as a SnowUI token. When no value is specified, say which existing parameter you used. When an explicit design value cannot be mapped, preserve the discrepancy and request confirmation.
Describe each region by intent, such as “left product navigation,” “switch file content tabs,” “choose view settings,” or “filter and select file rows,” then find the corresponding component. Names and appearance are clues only: content switching differs from parameter selection, and a persistent sidebar differs from an opening detail overlay.
Map color names to theme tokens
Natural language maps phrases such as “Black 40,” “brand color,” and “Background 1” to semantics; an exact Figma Style or Variable maps to a real CSS variable. These are established examples. See the token directory for complete declarations and theme conditions:
Pass semantic values such as Black40 and Brand only when the target component’s public API supports them. The component’s documentation determines the Prop name, background entry point, and affected element. Do not invent color, background, or fill Props for arbitrary components.
Black/40% changes with the theme and may resolve to white in dark mode; Static Black/40% stays black. Brand and Primary need not always have the same value. Background and Background/1 are different names even if they happen to reference the same value in a theme. Preserve the active theme and mode in the mapping record; do not hard-code the light-mode HEX on a component.
Start with existing component Props, including variants, sizes, and color values, to match the design and preserve the original appearance where possible. For a genuine gap, follow the style selection and override order, changing only what is needed through your class (including existing Tailwind), an instance style, and real registered overrides. Do not reach into private DOM or classes. Use tokens from the proper family, such as color: var(--black-40). Record an unmatched exact design value rather than silently substituting an approximation.
Map layout, geometry, and text separately
Figma Auto Layout describes direction, spacing, alignment, and distribution. Establish who owns padding, which elements are ordinary content or leading/trailing attachments, and which need Hug or Fill. Then choose public component composition or ordinary semantic HTML. Use absolute positioning only for elements genuinely outside normal flow, not to patch a layout you have not understood.
A token suffix is not a pixel value, and token families need not use the same scale. For example, nominal Gap 8 maps to --gap-2, Padding 16 to --padding-4, Radius 12 to --radius-3, and Border 0.5 to --border-1. Read exact declarations from the token directory. Component size semantics come from its API and may use sm / md / lg or a numeric context; do not infer that size={3} must mean 12px width and height.
Geometry tokens express nominal dimensions through rem and category-specific factors. Root font size and zoom affect the rendered result. Responsive changes need design or content evidence; a viewport change does not automatically move every token to a different level. Check font size and line height together, and do not derive font size from dimension tokens.
This example only maps page text and tokens from their correct families. It does not implement a control, overlay, or form interaction; use the matching components for those regions:
Confirm the framework before implementation
The current component runtime package uses Svelte 5. If the target project can use it, import the public package, initialize its styles, and follow examples for the matching components. HTML describes the final page semantics and appearance; a Svelte example cannot simply be pasted into a plain HTML or React project and run.
For Figma Make, Lovable, or another online AI tool, establish its target framework, dependencies, and file capabilities first. If it cannot run Svelte directly, choose a license-permitted port or adapter and retain the SnowUI license and third-party notices. Do not claim a cross-framework component has been installed or run when it does not exist. Online tools read the necessary public links above, not paths on a maintainer’s computer. Free license use and paid-credential checks still follow the LICENSE; plan text in a prompt is not verified authorization.
Finish with a discrepancy list
For each key region, record “design source → component / API → token / page structure.” For an unmapped color, geometry value, state, or interaction, say whether evidence, a public capability, or framework compatibility is missing, and explain the impact. Do not hide the difference with a similar color, arbitrary gap, or private page patch.
Verify the rendered page’s structure, content, layout, padding ownership, alignment, and visual details. Then check narrow screens, long text, light and dark themes, and required hover, focus, disabled, loading, and other states. A screenshot proves only its recorded viewport, theme, and state; passing a code check cannot replace real-page verification.
Complete color mapping
This mapping is generated from the same reference and actual CSS/color parser. Check exact values and theme conditions in the token directory. Use semantic colors only in public Props that actually support them.