[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-categories-en-US":3,"categories-en-US":3,"resource-atlassian-design-system-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":44,"alternatives-atlassian-design-system-en-US":112,"related-resources-atlassian-design-system-en-US":173},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":9},436,"Atlassian Design System","atlassian-design-system","https:\u002F\u002Fwww.figma.com\u002F@atlassian",null,"comprehensive guidelines and Figma components for consistent, accessible product interfaces.","The Atlassian Design System (ADS) is Atlassian's official framework for building consistent, scalable, and accessible user experiences across products like Jira, Confluence, and Trello. It provides reusable UI components, design tokens, patterns, and guidelines to ensure brand alignment and developer-designer collaboration. The system is open-source with Figma libraries and documentation, regularly updated for modern standards.\nComponent Library: Reusable elements like buttons, forms, navigation, and data displays with variants and states.\nDesign Tokens: Semantic colors, typography, spacing, icons, and motion for theme consistency.\nFigma Kit: Official community file with auto-layout components for rapid prototyping.\nGuidelines: Accessibility, responsiveness, and best practices for inclusive design.",{"title":13,"description":10},"Atlassian Design System - comprehensive guidelines and Figma components for consistent, accessible product interfaces. | DesignToolMark",[15,16,17,18],"Component Library: Reusable elements like buttons, forms, navigation, and data displays with variants and states.","Design Tokens: Semantic colors, typography, spacing, icons, and motion for theme consistency.","Figma Kit: Official community file with auto-layout components for rapid prototyping.","Guidelines: Accessibility, responsiveness, and best practices for inclusive design.",[20,21,22,23],"Open source","Real-time collaboration","Extensive icon library","Color palette generation",[25,26],"Adoption requires team alignment","Customization can be complex","Design Tokens: Semantic colors, typography, spacing, icons, and motion for theme consistency. Figma Kit: Official community file with auto-layout components for rapid prototyping. Guidelines: Accessibility, responsiveness, and best practices for inclusive design.","7c4fca7f-1d04-4216-8c55-a68b69761003.png","6c31003e-ce95-42ad-940d-06a833d24ace.svg","free",[32],"Browser",{"free":3},0,[36],{"name":37,"slug":38,"sub_categories":39},"Design Systems","design-systems",[],[41,43],{"name":42,"slug":30},"Free",{"name":37,"slug":38},[45,64,80,98],{"id":46,"url":47,"icon":9,"name":48,"slug":49,"tags":50,"cover":60,"tagline":61,"is_featured":62,"date_created":63,"date_updated":9},670,"https:\u002F\u002Fattentioninsight.com","Attention Insight","attention-insight",[51,53,55,57],{"seo":9,"name":9,"slug":52},"wireframe",{"seo":9,"name":9,"slug":54},"user-research",{"seo":9,"name":9,"slug":56},"web-design",{"seo":9,"name":58,"slug":59},"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":65,"url":66,"icon":9,"name":67,"slug":68,"tags":69,"cover":77,"tagline":78,"is_featured":62,"date_created":79,"date_updated":9},669,"https:\u002F\u002Fwww.frontitude.com","Frontitude","frontitude",[70,71,72,74,76],{"seo":9,"name":9,"slug":52},{"seo":9,"name":9,"slug":54},{"seo":9,"name":9,"slug":73},"collaboration",{"seo":9,"name":9,"slug":75},"design-handoff",{"seo":9,"name":58,"slug":59},"5237122f-f736-4899-bd25-2002bf09dec2.webp","UX content management platform for multilingual products","2026-06-17T09:18:30.634258+00:00",{"id":81,"url":82,"icon":9,"name":83,"slug":84,"tags":85,"cover":95,"tagline":96,"is_featured":62,"date_created":97,"date_updated":9},668,"https:\u002F\u002Fwww.aura.build","Aura Build","aura-build",[86,87,89,90,92,94],{"seo":9,"name":9,"slug":52},{"seo":9,"name":9,"slug":88},"prototyping",{"seo":9,"name":9,"slug":56},{"seo":9,"name":9,"slug":91},"responsive",{"seo":9,"name":9,"slug":93},"icons",{"seo":9,"name":58,"slug":59},"be6ec3d1-5806-4cf8-bc58-5d536af6c04d.webp","AI-powered website builder and design assistant","2026-06-17T09:18:13.351637+00:00",{"id":99,"url":100,"icon":9,"name":101,"slug":102,"tags":103,"cover":109,"tagline":110,"is_featured":62,"date_created":111,"date_updated":9},667,"https:\u002F\u002Fwww.magicpatterns.com","Magic Patterns","magic-patterns",[104,105,106,107,108],{"seo":9,"name":9,"slug":52},{"seo":9,"name":9,"slug":88},{"seo":9,"name":9,"slug":73},{"seo":9,"name":9,"slug":75},{"seo":9,"name":58,"slug":59},"6d6649e5-e83d-44c6-bdf0-91d6cb530736.webp","AI prototype generator for product teams","2026-06-17T09:18:05.299046+00:00",[113,119,125,131,137,143,149,155,161,167],{"url":114,"name":115,"slug":116,"cover":117,"tagline":118},"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":120,"name":121,"slug":122,"cover":123,"tagline":124},"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":126,"name":127,"slug":128,"cover":129,"tagline":130},"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":132,"name":133,"slug":134,"cover":135,"tagline":136},"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":138,"name":139,"slug":140,"cover":141,"tagline":142},"https:\u002F\u002Fcarbondesignsystem.com\u002F","Carbon Design System","carbon-design-system","f057e46c-3403-4f79-b0fe-7234ab8eab99.webp","IBM's open-source UI framework for consistent, accessible enterprise products.",{"url":144,"name":145,"slug":146,"cover":147,"tagline":148},"https:\u002F\u002Fcloudscape.design\u002F","Cloudscape Design System","cloudscape-design-system","bc8d1889-c2d0-448f-9aaf-6344c3a09da6.webp","AWS open-source UI framework for consistent, accessible enterprise cloud applications.",{"url":150,"name":151,"slug":152,"cover":153,"tagline":154},"https:\u002F\u002Feui.elastic.co\u002F","Elastic UI","elastic-ui","39c58c5d-1fd8-4d1d-9e61-34a7e2cfcc5b.webp","open-source React framework for consistent, accessible enterprise interfaces.",{"url":156,"name":157,"slug":158,"cover":159,"tagline":160},"https:\u002F\u002Fevergreen.segment.com\u002F","Evergreen","evergreen","083326da-6b7a-4c88-996b-680c0d937ecd.webp","open-source React UI framework by Segment for consistent, accessible enterprise applications.",{"url":162,"name":163,"slug":164,"cover":165,"tagline":166},"https:\u002F\u002Fwww.sap.com\u002Fdesign-system\u002F","SAP Design System","sap-design-system","48829753-db3e-4292-bbf2-1d01f7a58cff.webp","open-source framework for consistent, accessible enterprise UI across SAP products.",{"url":168,"name":169,"slug":170,"cover":171,"tagline":172},"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.",[174,188,200],{"url":175,"icon":9,"name":176,"slug":177,"tags":178,"cover":185,"tagline":186,"is_featured":9,"date_created":187,"date_updated":9},"https:\u002F\u002Fzeroheight.com","Zeroheight","zeroheight",[179,180,181,182,183],{"seo":9,"name":9,"slug":38},{"seo":9,"name":9,"slug":73},{"seo":9,"name":9,"slug":88},{"seo":9,"name":9,"slug":75},{"seo":9,"name":9,"slug":184},"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":189,"icon":9,"name":190,"slug":191,"tags":192,"cover":197,"tagline":198,"is_featured":9,"date_created":199,"date_updated":9},"https:\u002F\u002Fspecifyapp.com","Specify","specify",[193,194,196],{"seo":9,"name":9,"slug":73},{"seo":9,"name":9,"slug":195},"version-control",{"seo":9,"name":9,"slug":75},"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":201,"icon":202,"name":203,"slug":204,"tags":205,"cover":207,"tagline":208,"is_featured":9,"date_created":209,"date_updated":210},"https:\u002F\u002Fvuetifyjs.com\u002F","bd46950f-9a47-4d81-95da-ed6467288051.svg","Vuetify","vuetify",[206],{"seo":9,"name":9,"slug":38},"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.","2025-10-15T08:20:56.561+00:00","2026-06-12T06:51:44.386368+00:00"]