[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en-US":3,"blog-categories-en-US":3,"resource-wix-design-system-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":51,"alternatives-wix-design-system-en-US":119,"related-resources-wix-design-system-en-US":180},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":9,"tagline":10,"description":11,"seo":12,"features":14,"pros":19,"cons":24,"best_for":27,"cover":28,"icon":29,"pricing":30,"platform":31,"github_url":9,"twitter_url":9,"discord_url":9,"dribbble_url":9,"pricing_tiers":33,"views_count":34,"featured_rank":9,"categories":35,"tags":40,"files":47},430,"Wix Design System","wix-design-system","https:\u002F\u002Fwww.wixdesignsystem.com\u002F",null,"comprehensive Figma library of UI components and guidelines for consistent Wix app designs.","Wix Design System (wixdesignsystem.com) is an official open-source design system from Wix, providing a unified set of UI components, patterns, and guidelines to ensure consistent, accessible, and scalable designs across Wix's ecosystem of apps and tools. It empowers designers and developers to build high-quality user experiences with reusable elements, focusing on modularity and collaboration. The system includes Figma files for prototyping and a comprehensive documentation site for implementation details.\nComponent Library: Over 100 reusable UI components like buttons, forms, navigation, and modals, with variants for states and accessibility.\nGuidelines: Detailed specs for colors (semantic palette), typography (font scales, hierarchy), icons (custom set with SVGs), spacing, and motion.\nFigma Integration: Downloadable Figma kit for rapid prototyping and design handoff.\nDocumentation: Interactive guides for usage, best practices, and code snippets in React.",{"title":13,"description":10},"Wix Design System - comprehensive Figma library of UI components and guidelines for consistent Wix app designs. | DesignToolMark",[15,16,17,18],"Component Library: Over 100 reusable UI components like buttons, forms, navigation, and modals, with variants for states and accessibility.","Guidelines: Detailed specs for colors (semantic palette), typography (font scales, hierarchy), icons (custom set with SVGs), spacing, and motion.","Figma Integration: Downloadable Figma kit for rapid prototyping and design handoff.","Documentation: Interactive guides for usage, best practices, and code snippets in React.",[20,21,22,23],"Open source","Real-time collaboration","Extensive icon library","Scalable vector formats",[25,26],"Adoption requires team alignment","Customization can be complex","Guidelines: Detailed specs for colors (semantic palette), typography (font scales, hierarchy), icons (custom set with SVGs), spacing, and motion. Figma Integration: Downloadable Figma kit for rapid prototyping and design handoff. Documentation: Interactive guides for usage, best practices, and code snippets in React.","1d3e413c-f60a-4a67-9e60-f2c2fbb3e383.webp","bda42072-af0b-47f6-8613-6a3fd4041827.svg","free",[32],"Browser",{"free":3},0,[36],{"name":37,"slug":38,"sub_categories":39},"Design Systems","design-systems",[],[41,43,44],{"name":42,"slug":30},"Free",{"name":37,"slug":38},{"name":45,"slug":46},"No Code","no-code",[48],{"url":49,"type":50},"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F1407387126965111708\u002Fwix-design-system","figma",[52,71,87,105],{"id":53,"url":54,"icon":9,"name":55,"slug":56,"tags":57,"cover":67,"tagline":68,"is_featured":69,"date_created":70,"date_updated":9},670,"https:\u002F\u002Fattentioninsight.com","Attention Insight","attention-insight",[58,60,62,64],{"seo":9,"name":9,"slug":59},"wireframe",{"seo":9,"name":9,"slug":61},"user-research",{"seo":9,"name":9,"slug":63},"web-design",{"seo":9,"name":65,"slug":66},"Freemium","freemium","ef36c4d0-cade-4956-a397-b7c4436ad473.webp","AI-powered attention prediction and visual analytics",false,"2026-06-17T09:18:38.384779+00:00",{"id":72,"url":73,"icon":9,"name":74,"slug":75,"tags":76,"cover":84,"tagline":85,"is_featured":69,"date_created":86,"date_updated":9},669,"https:\u002F\u002Fwww.frontitude.com","Frontitude","frontitude",[77,78,79,81,83],{"seo":9,"name":9,"slug":59},{"seo":9,"name":9,"slug":61},{"seo":9,"name":9,"slug":80},"collaboration",{"seo":9,"name":9,"slug":82},"design-handoff",{"seo":9,"name":65,"slug":66},"5237122f-f736-4899-bd25-2002bf09dec2.webp","UX content management platform for multilingual products","2026-06-17T09:18:30.634258+00:00",{"id":88,"url":89,"icon":9,"name":90,"slug":91,"tags":92,"cover":102,"tagline":103,"is_featured":69,"date_created":104,"date_updated":9},668,"https:\u002F\u002Fwww.aura.build","Aura Build","aura-build",[93,94,96,97,99,101],{"seo":9,"name":9,"slug":59},{"seo":9,"name":9,"slug":95},"prototyping",{"seo":9,"name":9,"slug":63},{"seo":9,"name":9,"slug":98},"responsive",{"seo":9,"name":9,"slug":100},"icons",{"seo":9,"name":65,"slug":66},"be6ec3d1-5806-4cf8-bc58-5d536af6c04d.webp","AI-powered website builder and design assistant","2026-06-17T09:18:13.351637+00:00",{"id":106,"url":107,"icon":9,"name":108,"slug":109,"tags":110,"cover":116,"tagline":117,"is_featured":69,"date_created":118,"date_updated":9},667,"https:\u002F\u002Fwww.magicpatterns.com","Magic Patterns","magic-patterns",[111,112,113,114,115],{"seo":9,"name":9,"slug":59},{"seo":9,"name":9,"slug":95},{"seo":9,"name":9,"slug":80},{"seo":9,"name":9,"slug":82},{"seo":9,"name":65,"slug":66},"6d6649e5-e83d-44c6-bdf0-91d6cb530736.webp","AI prototype generator for product teams","2026-06-17T09:18:05.299046+00:00",[120,126,132,138,144,150,156,162,168,174],{"url":121,"name":122,"slug":123,"cover":124,"tagline":125},"https:\u002F\u002Fvuetifyjs.com\u002F","Vuetify","vuetify","screenshots\u002Fvuetify.webp","Vuetify is a complete Vue.js UI framework that strictly adheres to Material Design guidelines, offering a rich set of components and powerful customization capabilities.",{"url":127,"name":128,"slug":129,"cover":130,"tagline":131},"https:\u002F\u002Fui.shadcn.com\u002F","shadcn\u002Fui","shadcn-ui","dd0a4029-629e-4e5d-9765-d33af6f31794.webp","shadcn\u002Fui is a unique collection of composable React UI components, offering copy-and-paste code that is highly customizable and seamlessly integrates with Tailwind CSS.",{"url":133,"name":134,"slug":135,"cover":136,"tagline":137},"https:\u002F\u002Fanimate-ui.com\u002F","Animate UI","animate-ui","51875bb1-cd07-4d4b-b76c-940dab1c9780.webp","Animate UI is a free open-source React component library with Tailwind and Framer Motion animations, inspired by shadcn\u002Fui, to effortlessly elevate web interfaces.",{"url":139,"name":140,"slug":141,"cover":142,"tagline":143},"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F1047600760128127424\u002Faws-amplify-ui-kit","AWS Amplify","aws-amplify","4ba08f58-1771-43c7-9b18-b3445362f384.webp","Figma components for building Amplify-powered apps with consistent AWS design language.",{"url":145,"name":146,"slug":147,"cover":148,"tagline":149},"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F862805330899066752","Airtable UI Kit","airtable-ui-kit","59462e6f-03cf-4786-878f-43147ddf2897.webp","Figma components for designing Airtable-integrated apps with consistent UI patterns.",{"url":151,"name":152,"slug":153,"cover":154,"tagline":155},"https:\u002F\u002Fwww.figma.com\u002F@backstage","Backstage Design System","backstage-design-system","2dc0463e-c5e0-4c7a-a1c8-618668bce9ae.webp","Figma kit for Backstage developer portals with UI components and guidelines.",{"url":157,"name":158,"slug":159,"cover":160,"tagline":161},"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F805195278314519508","Base Gallery","base-gallery","b74e1e61-d456-49db-80d4-662a31d51a4f.webp","Figma community file showcasing a collection of UI components for design inspiration and prototyping.",{"url":163,"name":164,"slug":165,"cover":166,"tagline":167},"https:\u002F\u002Fwww.naiveui.com\u002F","Naive UI","naive-ui","c0549a7c-6a36-442d-bc7c-986f1829b43e.webp","Naive UI is a Vue 3 component library recommended by Evan You, offering beautiful, high-performance, and highly customizable components, entirely written in TypeScript.",{"url":169,"name":170,"slug":171,"cover":172,"tagline":173},"https:\u002F\u002Fdoc.animaliads.io\u002F","Animalia DS","animalia-ds","27459ea0-63e7-4ca0-8224-14f3659e3932.webp","comprehensive design system for consistent UI components and guidelines in Animali apps.",{"url":175,"name":176,"slug":177,"cover":178,"tagline":179},"https:\u002F\u002Felement-plus.org\u002F","Element Plus","element-plus","0474b1f2-6bdb-4aa5-99ac-f72a69517f6f.webp","Element Plus is a desktop UI component library designed for Vue 3, offering rich, elegant enterprise-grade components to efficiently build management systems.",[181,195,207],{"url":182,"icon":9,"name":183,"slug":184,"tags":185,"cover":192,"tagline":193,"is_featured":9,"date_created":194,"date_updated":9},"https:\u002F\u002Fzeroheight.com","Zeroheight","zeroheight",[186,187,188,189,190],{"seo":9,"name":9,"slug":38},{"seo":9,"name":9,"slug":80},{"seo":9,"name":9,"slug":95},{"seo":9,"name":9,"slug":82},{"seo":9,"name":9,"slug":191},"figma-file","8f4828c0-3236-44df-9cce-4b74ad2700f7.webp","Living design system documentation — connect Figma to code with interactive docs","2026-06-16T07:16:42.647437+00:00",{"url":196,"icon":9,"name":197,"slug":198,"tags":199,"cover":204,"tagline":205,"is_featured":9,"date_created":206,"date_updated":9},"https:\u002F\u002Fspecifyapp.com","Specify","specify",[200,201,203],{"seo":9,"name":9,"slug":80},{"seo":9,"name":9,"slug":202},"version-control",{"seo":9,"name":9,"slug":82},"ac2bb029-95df-4617-97ca-6051f5dccfc1.webp","Design token platform that pushes your design decisions to code — automatically","2026-06-16T07:14:19.135613+00:00",{"url":121,"icon":208,"name":122,"slug":123,"tags":209,"cover":124,"tagline":125,"is_featured":9,"date_created":211,"date_updated":212},"bd46950f-9a47-4d81-95da-ed6467288051.svg",[210],{"seo":9,"name":9,"slug":38},"2025-10-15T08:20:56.561+00:00","2026-06-12T06:51:44.386368+00:00"]