{"product_id":"spatial-commerce-ui-ux-layout-frameworks-figma-kit-ar-code-accessibility-blueprint","title":"Spatial Commerce UI\/UX Layout Frameworks — Figma Kit, AR Code \u0026 Accessibility Blueprint","description":"\u003cp\u003e\u003cstrong\u003eDesign and ship 3D shopping for headsets, glasses and the mobile web.\u003c\/strong\u003e A Figma spatial layout kit, native-AR \"View in your room\" code and a spatial accessibility blueprint, built on one unit system.\u003c\/p\u003e\n\u003cp\u003eHeadsets 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.\u003c\/p\u003e\n\u003ch3\u003eModule 01 · Figma Spatial Layout Kit\u003c\/h3\u003e\n\u003cp\u003eA Figma plugin builds the whole kit natively in your file. Every component is wired to variables and has real variant properties.\u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003e3D 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\u003c\/li\u003e\n\u003cli\u003eGesture-responsive menus: radial (pinch \u0026amp; hold), palm menu, ornament toolbar, orbiter tab bar, plus an accessible linear context menu\u003c\/li\u003e\n\u003cli\u003eFloating product display cards in 3 densities × Rest \/ Gaze \/ Selected states\u003c\/li\u003e\n\u003cli\u003e7 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\u003c\/li\u003e\n\u003cli\u003e69 variables, 20 styles, 19 component sets with 115 variants, 32 glyphs including a gesture notation set\u003c\/li\u003e\n\u003cli\u003eTokens for CSS, Swift (visionOS) and Kotlin (Android XR), plus SVG fallbacks and 33 preview boards\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch3\u003eModule 02 · Interactive AR Trigger Assets\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003ccode\u003e\u0026lt;spatial-ar-trigger\u0026gt;\u003c\/code\u003e: 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.\u003c\/li\u003e\n\u003cli\u003eCopy-paste snippets for HTML, React\/Next.js, Vue, Shopify Liquid, WooCommerce, GA4\/Shopify\/Segment analytics and server config\u003c\/li\u003e\n\u003cli\u003emodel-viewer commerce helpers: colorway swatches, dimension hotspots and AR analytics\u003c\/li\u003e\n\u003cli\u003eA WebXR placement module, a GLB validator, and a 3D asset spec, conversion guide and QA checklist\u003c\/li\u003e\n\u003cli\u003e4 demo products × 3 colorways as true-scale GLB and USDZ files, plus a demo product page\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch3\u003eModule 03 · Spatial Accessibility Blueprint\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003eA 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\u003c\/li\u003e\n\u003cli\u003eA 71-item audit checklist (PDF + CSV) mapped to WCAG 2.2 and EN 301 549, useful for European Accessibility Act readiness reviews\u003c\/li\u003e\n\u003cli\u003eAn offline sizing calculator and the \u003ccode\u003eangular-type.js\u003c\/code\u003e helper library\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cstrong\u003eOne unit system end to end:\u003c\/strong\u003e 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.\u003c\/p\u003e\n\u003ch3\u003eHow to use it\u003c\/h3\u003e\n\u003cp\u003eDownload the ZIP, unzip it and open \u003cstrong\u003eSTART-HERE.html\u003c\/strong\u003e in any web browser for a guided tour. Then:\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e1. Figma kit\u003c\/strong\u003e (needs the free Figma desktop app; Figma in a web browser can't import plugins)\u003c\/p\u003e\n\u003col\u003e\n\u003cli\u003eInstall and open the Figma desktop app, then create a new, empty design file.\u003c\/li\u003e\n\u003cli\u003eMenu → Plugins → Development → Import plugin from manifest… and select \u003ccode\u003e01_Figma-Spatial-Layout-Kit\/figma-plugin\/manifest.json\u003c\/code\u003e.\u003c\/li\u003e\n\u003cli\u003eMenu → Plugins → Development → Spatial Commerce Kit Generator → \u003cstrong\u003eGenerate kit\u003c\/strong\u003e. The whole kit appears in 10–40 seconds.\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003cp\u003eDon't double-click \u003ccode\u003ecode.js\u003c\/code\u003e or open \u003ccode\u003eui.html\u003c\/code\u003e yourself: they only run inside Figma. The same steps are in \u003ccode\u003efigma-plugin\/HOW-TO-INSTALL.txt\u003c\/code\u003e and the Figma-Kit-Guide PDF.\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e2. \"View in your room\" AR\u003c\/strong\u003e\u003c\/p\u003e\n\u003col\u003e\n\u003cli\u003eTo try it: upload the \u003ccode\u003e02_AR-Trigger-Assets\/demo\u003c\/code\u003e 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.\u003c\/li\u003e\n\u003cli\u003eTo add it to your store: follow the 60-second quickstart in \u003ccode\u003e02_AR-Trigger-Assets\/README.md\u003c\/code\u003e. Shopify stores use the ready-made section \u003ccode\u003esnippets\/05-shopify-section-ar-trigger.liquid\u003c\/code\u003e.\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003cp\u003e\u003cstrong\u003e3. Accessibility Blueprint\u003c\/strong\u003e\u003c\/p\u003e\n\u003col\u003e\n\u003cli\u003eOpen \u003ccode\u003eSpatial-Accessibility-Blueprint.pdf\u003c\/code\u003e and start with the one-page Quick Reference.\u003c\/li\u003e\n\u003cli\u003eCheck 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 \u003ccode\u003etools\/\u003c\/code\u003e.\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003ch3\u003eEverything included, one price\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003eInstant download of all three modules: one ZIP, about 25 MB. No build step, no npm install.\u003c\/li\u003e\n\u003cli\u003eFull commercial license: unlimited people in your organization, unlimited projects and any number of clients. No tiers, no seat limits, no upgrades.\u003c\/li\u003e\n\u003cli\u003eAll 1.x updates included.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch3\u003eFAQ\u003c\/h3\u003e\n\u003cp\u003e\u003cstrong\u003eDo I need a headset?\u003c\/strong\u003e 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.\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003eWhich Figma plan?\u003c\/strong\u003e 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.\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003eCan I use it for client work?\u003c\/strong\u003e Yes. One purchase covers everyone in your organization, unlimited projects and any number of clients.\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003eDoes the AR work on Shopify?\u003c\/strong\u003e 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.\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003eIs this legal advice for the European Accessibility Act?\u003c\/strong\u003e No. The Blueprint gives design and testing guidance mapped to WCAG 2.2 and EN 301 549. Confirm compliance with counsel.\u003c\/p\u003e\n\u003cp\u003e\u003csmall\u003eApple 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.\u003c\/small\u003e\u003c\/p\u003e","brand":"Isendiworld❣️","offers":[{"title":"Default Title","offer_id":58303930958206,"sku":"SCF-V1","price":490.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1027\/9098\/8158\/files\/22881_429ca1eb-e736-4b53-9fd7-5336423f5c58.png?v=1792865147","url":"https:\/\/isendi.eu\/products\/spatial-commerce-ui-ux-layout-frameworks-figma-kit-ar-code-accessibility-blueprint","provider":"Isendi","version":"1.0","type":"link"}