Spatial Commerce UI/UX Layout Frameworks — Figma Kit, AR Code & Accessibility Blueprint

Design and ship 3D shopping for headsets, glasses and the mobile web. A Figma spatial layout kit, native-AR "View in your room" code and a spatial accessibility blueprint, built on one unit system.

Headsets and smart glasses change three things at once. Shoppers point with their eyes, text floats at a distance that keeps changing, and products can sit in the shopper's room at full size. Flat-screen design systems don't cover any of this. Spatial Commerce Frameworks gives your team the layouts, the code and the accessibility rules to design for it now, and to ship a working AR experience on today's phones while you do.

Module 01 · Figma Spatial Layout Kit

A Figma plugin builds the whole kit natively in your file. Every component is wired to variables and has real variant properties.

• 3D bounding-box templates for five product size classes (XS–XL), with origin, label and ornament anchors and the viewing distance at which each product fits the comfortable field of view
• Gesture-responsive menus: radial (pinch & hold), palm menu, ornament toolbar, orbiter tab bar, plus an accessible linear context menu
• Floating product display cards in 3 densities × Rest / Gaze / Selected states
• 7 immersive templates: product page with window + volume (Light and Dark Glass), virtual showroom arc, room placement HUD, checkout with hold-to-confirm, colorway compare, mobile-web-to-AR flow
• 69 variables, 20 styles, 19 component sets with 115 variants, 32 glyphs including a gesture notation set
• Tokens for CSS, Swift (visionOS) and Kotlin (Android XR), plus SVG fallbacks and 33 preview boards

Module 02 · Interactive AR Trigger Assets

• <spatial-ar-trigger>: one zero-dependency HTML tag that opens a life-size product in the shopper's room from a mobile browser. AR Quick Look on iPhone (with an "Add to cart" banner), Scene Viewer on Android with true scale locked, and an accessible QR hand-off on desktop.
• Copy-paste snippets for HTML, React/Next.js, Vue, Shopify Liquid, WooCommerce, GA4/Shopify/Segment analytics and server config
• model-viewer commerce helpers: colorway swatches, dimension hotspots and AR analytics
• A WebXR placement module, a GLB validator, and a 3D asset spec, conversion guide and QA checklist
• 4 demo products × 3 colorways as true-scale GLB and USDZ files, plus a demo product page

Module 03 · Spatial Accessibility Blueprint

• A 37-page guide: eye-tracking interfaces (target sizes in degrees, dwell, protection against accidental selection), variable type for moving headsets, depth-perception layouts, ergonomic placement, motion comfort and accessible spatial checkout
• A 71-item audit checklist (PDF + CSV) mapped to WCAG 2.2 and EN 301 549, useful for European Accessibility Act readiness reviews
• An offline sizing calculator and the angular-type.js helper library

One unit system end to end: 1 px in Figma = 1 dmm = 1 mm seen from 1 m. Design once in angles and hand engineers numbers that work on visionOS, Android XR, Meta Horizon OS and WebXR.

How to use it

Download the ZIP, unzip it and open START-HERE.html in any web browser for a guided tour. Then:

1. Figma kit (needs the free Figma desktop app; Figma in a web browser can't import plugins)

1. Install and open the Figma desktop app, then create a new, empty design file.
2. Menu → Plugins → Development → Import plugin from manifest… and select 01_Figma-Spatial-Layout-Kit/figma-plugin/manifest.json.
3. Menu → Plugins → Development → Spatial Commerce Kit Generator → Generate kit. The whole kit appears in 10–40 seconds.

Don't double-click code.js or open ui.html yourself: they only run inside Figma. The same steps are in figma-plugin/HOW-TO-INSTALL.txt and the Figma-Kit-Guide PDF.

2. "View in your room" AR

1. To try it: upload the 02_AR-Trigger-Assets/demo folder to any HTTPS host (for example Netlify Drop), open the link on an iPhone or Android phone and tap "View in your room". AR needs HTTPS and a real phone.
2. To add it to your store: follow the 60-second quickstart in 02_AR-Trigger-Assets/README.md. Shopify stores use the ready-made section snippets/05-shopify-section-ar-trigger.liquid.

3. Accessibility Blueprint

1. Open Spatial-Accessibility-Blueprint.pdf and start with the one-page Quick Reference.
2. Check your designs with the audit checklist (PDF to print, CSV for Excel or Google Sheets) and size text and buttons with the offline calculator in tools/.

Everything included, one price

• Instant download of all three modules: one ZIP, about 25 MB. No build step, no npm install.
• Full commercial license: unlimited people in your organization, unlimited projects and any number of clients. No tiers, no seat limits, no upgrades.
• All 1.x updates included.

FAQ

Do I need a headset? No. Everything works in Figma and in a browser, and the AR trigger runs on ordinary iPhones and Android phones. A headset is useful for final testing.

Which Figma plan? Any plan, including the free Starter plan, using the Figma desktop app. On Starter (one variable mode, three pages per file) the generator builds Light Glass only and puts the later sections side by side on one page, and it tells you so. Dark Glass values are still in the CSS tokens. Publishing a shared team library requires a paid Figma plan.

Can I use it for client work? Yes. One purchase covers everyone in your organization, unlimited projects and any number of clients.

Does the AR work on Shopify? Yes. A Liquid section reads the product's 3D media and adds the "View in your room" button. Shopify already hosts GLB and USDZ product media.

Is this legal advice for the European Accessibility Act? No. The Blueprint gives design and testing guidance mapped to WCAG 2.2 and EN 301 549. Confirm compliance with counsel.

Apple Vision Pro, visionOS, Android XR, Meta Horizon OS, Figma and Shopify are trademarks of their owners, mentioned for compatibility only. Demo brand "Atelier Nord" is fictional.