{"id":12457,"date":"2025-09-12T11:50:05","date_gmt":"2025-09-12T10:50:05","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=12457"},"modified":"2025-10-24T12:05:45","modified_gmt":"2025-10-24T11:05:45","slug":"accessible-design-figma-skills","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/accessible-design-figma-skills\/","title":{"rendered":"Accessible design in Figma: the top 5 skills for UX &#038; UI designers"},"content":{"rendered":"\n<p><span style=\"font-weight: 400;\">Accessibility is a major topic right now, and it\u2019s not just a passing trend. With regulations like the European Accessibility Act (EAA) coming into force, inclusive design is now a legal requirement.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">UX and UI designers are under mounting pressure to create digital products that work for everyone. For many, that means quickly getting to grips with an unfamiliar discipline and learning new skills.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">At the same time, AI is reshaping many aspects of the designer\u2019s work, including how we approach accessibility.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It feels like a lot to contend with. But actually, one of your go-to design tools is already built to support accessible design <\/span><i><span style=\"font-weight: 400;\">and <\/span><\/i><span style=\"font-weight: 400;\">help you leverage AI.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Yep, we\u2019re talking about Figma. If you know where to look, it\u2019s packed with tons of features, plugins and workflows that enable you to design inclusively by default.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this guide, we\u2019ll help you level up your Figma skills to become a more inclusive, accessibility-conscious designer. We\u2019ll highlight the most relevant skills to focus on, and show you how to use AI to boost your workflow.<\/span><\/p>\n<h2><strong>Designing for accessibility in the age of AI: what skills do you really need?<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">There are two major shifts taking place in the digital design industry right now: the rising demand for accessibility, and the growing influence of AI.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For UX and UI designers, this raises a big question: <\/span><b>which of my existing skills still matter, and what new skills do I need to learn?<\/b><\/p>\n<p><span style=\"font-weight: 400;\">We know that AI is great at speeding things up. It can generate layouts, components and microcopy in seconds. It can even flag accessibility issues like low contrast colour pairings or missing alt text.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But what AI <\/span><i><span style=\"font-weight: 400;\">can\u2019t <\/span><\/i><span style=\"font-weight: 400;\">do is think like a human.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It doesn\u2019t understand your users, their needs and emotions, or the context around what you\u2019re building. Nor can it account for social nuance or show cultural sensitivity. That\u2019s where your human touch is critical, especially when it comes to accessible design.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Today\u2019s UX and UI designers must learn how to use AI to move faster and streamline repetitive tasks, and they must also double down on the skills that machines can\u2019t replicate. That means understanding accessibility principles, thinking critically about inclusive design patterns, and making sure that every design decision is grounded in empathy and real user needs.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">And this is where the dots start to join. Accessibility and AI aren\u2019t opposing forces. In fact, they can and should work together.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">First, you need to build a strong foundation in accessible design. Then you can use AI to help scale it, creating <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-is-a-design-system\/\"><span style=\"font-weight: 400;\">design systems<\/span><\/a><span style=\"font-weight: 400;\"> and workflows that prioritise accessibility by default.\u00a0<\/span><\/p>\n<p><b>So here\u2019s the takeaway. <\/b><span style=\"font-weight: 400;\">The most successful designers will be skilled in using AI to accelerate their workflow, but they\u2019ll also know when to pause and think. They\u2019ll have the ability to leverage smart tools and features, and the knowledge to make informed, human-centred decisions.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s all about striking a balance, and one of the best tools to support that balance is Figma. In the next section, we\u2019ll take a closer look at why Figma has become the go-to platform for inclusive design.\u00a0<\/span><\/p>\n<p><i><span style=\"font-weight: 400;\">Read also: <\/span><\/i><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/will-ai-replace-ux-designers\/\"><i><span style=\"font-weight: 400;\">Will AI replace UX designers?<\/span><\/i><\/a><\/p>\n<h2><strong>Figma is your go-to tool for inclusive design: here\u2019s why<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">When it comes to building accessible digital products, Figma has become the go-to platform for most UX and UI designers.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Why? Because it\u2019s the same versatile, user-friendly tool we\u2019ve always known and loved, and now it\u2019s full of additional features and capabilities that support inclusive design.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s what makes Figma such a powerful tool for designing accessible, inclusive products:\u00a0<\/span><b><\/b><\/p>\n<ul>\n<li><b>It\u2019s built for collaboration. <\/b><span style=\"font-weight: 400;\">Figma is a space where designers, developers, <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-does-a-ux-writer-do\/\"><span style=\"font-weight: 400;\">UX writers<\/span><\/a><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"> and accessibility specialists can work together in real-time. This encourages and enables meaningful conversations about accessibility early in the process, rather than leaving them to the very end.<\/span><\/span><\/li>\n<li><b>A powerful plugin ecosystem. <\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">With tools like Stark, Able and Contrast Checker, you can bake accessibility into your Figma designs from the very start. These plugins help you check colour contrast as you go, annotate your work with accessibility notes and review designs for keyboard and screen reader navigation.<\/span><\/span><\/li>\n<li><b>An active community full of knowledge and resources. <\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Figma\u2019s user base is full of accessibility champions who have created templates, shared design systems and documented best practices for all to use.<\/span><\/span><\/li>\n<li><b>Real-time updates and component-based design. <\/b><span style=\"font-weight: 400;\">You only need to update a component once in Figma and every instance will follow. This makes it easy to scale accessibility across your product and maintain consistency. <\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Now add AI into the mix and you\u2019ve got a truly mighty tool at your fingertips.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Figma has a whole host of AI features and third-party tools that can identify accessibility issues, automate fixes and suggest improvements. You can get real-time feedback on your designs and use smart suggestions to refine things like alt text, heading structure or touch target sizes.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can learn more about <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/how-to-use-figma-ai\/\"><span style=\"font-weight: 400;\">how to make the most of Figma AI in this guide<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<h2><strong>How to create accessible designs in Figma: the top 5 skills for UX &amp; UI designers (plus how to leverage AI)<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Designing for accessibility means creating experiences that work for everyone, including people with disabilities. Master these five skills in Figma and you\u2019ll be well on your way to more accessible, inclusive design.\u00a0<\/span><\/p>\n<h3><strong>1. Auto layout and responsive design<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">With Figma\u2019s Auto Layout feature, you can create designs that automatically adjust to different screen sizes and content changes. This is especially important for accessibility as it ensures content doesn\u2019t get cut off, overlap, or become hidden on smaller screens or when users increase text size.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s say you\u2019re designing a <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/card-design-for-ui\/\"><span style=\"font-weight: 400;\">card layout<\/span><\/a><span style=\"font-weight: 400;\"> for a mobile app. With Auto Layout, you can make sure the text inside the card expands or wraps neatly, even if someone changes their font size settings or uses a smaller device. Without it, your content might overflow or disappear off screen, rendering it unreadable and therefore inaccessible.<\/span><\/p>\n<p><b>Here\u2019s how to get started:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Select your frame or component in Figma<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Click &#8220;+&#8221; next to Auto Layout in the right-hand panel<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Set padding, spacing and alignment to keep content structured<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Use Auto Layout in buttons, cards, modals and navbars; anywhere that content might expand or shift.\u00a0<\/span><\/p>\n<h3><strong>2. Advanced prototyping with accessible interactions<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Figma\u2019s prototyping tools aren\u2019t just for showing flows. They\u2019re also powerful for simulating accessibility features like keyboard navigation, focus order and interactive states (like hover or focus).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Why does that matter?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Well, many users rely on keyboards or assistive technology like screen readers. If your product doesn\u2019t support proper navigation or state cues, those people will struggle to use it.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So let\u2019s say you\u2019re designing a modal window. Try creating a prototype that allows users to tab through the close button, form fields and action buttons in the right order. And remember to add focus states to highlight where the user is.\u00a0<\/span><\/p>\n<p><b>Tips to try:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use the Prototype tab to define interactions and focus flow<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Include focus rings or visible cues for keyboard users<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Set appropriate animation delays and transitions to avoid disorientation\u00a0<\/span><\/li>\n<\/ul>\n<p><i><span style=\"font-weight: 400;\">Read also: <\/span><\/i><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/prototyping-guide\/\"><i><span style=\"font-weight: 400;\">A complete guide to prototyping<\/span><\/i><\/a><i><span style=\"font-weight: 400;\">.\u00a0<\/span><\/i><\/p>\n<h3><strong>3. Plugin-powered accessibility auditing<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Another critical skill is being able to spot accessibility issues early before they reach the end user. But don\u2019t worry: this doesn\u2019t need to be a purely manual effort.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Figma plugins like Stark, Able and A11y Annotations can check colour contrast, suggest improvements, and help you add semantic cues like alt text or roles. Alt text ensures that images can be interpreted by screen readers, while roles tell assistive technologies how an element behaves (e.g. whether it\u2019s a button, heading or image).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So if you\u2019re designing a sign-up form in Figma and you\u2019ve got the Stark plugin installed, it will alert you if your text and background colours don\u2019t meet <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-are-the-wcag-guidelines\/\"><span style=\"font-weight: 400;\">Web Content Accessibility Guidelines (WCAG)<\/span><\/a><span style=\"font-weight: 400;\">, and it\u2019ll automatically suggest more accessible combinations.<\/span><\/p>\n<p><b>Try this:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use Stark to run a colour contrast check on your latest design\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use A11y Annotations to add notes for developers about alt text and roles<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Try switching one of your colour choices to a WCAG-compliant option and note how it changes the overall visual hierarchy<\/span><\/li>\n<\/ul>\n<p><i><span style=\"font-weight: 400;\">Read also: <a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/figma-ai-plugins-you-need-in-2025\/\">The best Figma AI plugins for UI designers in 2025 (and how to use them)<\/a>.<\/span><\/i><\/p>\n<h3><strong>4. Using built-in tools to test and iterate<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Accessibility isn\u2019t a one-and-done checklist. It\u2019s something you need to keep testing and refining as your design evolves. Luckily, Figma includes several built-in features that can help you test how your design behaves for different users.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can use the Outline view in the Layers panel to check how your content is grouped and structured. This is especially important for users navigating with screen readers.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Then you\u2019ve got the Inspect panel which helps you verify spacing, font sizes and heading levels, ensuring your layout has a clear visual hierarchy.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re working with interactions, you can also use Prototype mode to preview animations and transitions, so you can assess whether they\u2019re too fast or disorienting for people with motion sensitivity.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s say you\u2019re designing a sign-up flow for a mobile app and you want to check how it performs for users with visual impairments or motion sensitivity. These tools can help you catch issues early and make informed design choices.<\/span><\/p>\n<p><b>Try this:<\/b><b><br \/>\n<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Open the Outline view to check the order and structure of your layers. Rename anything that isn\u2019t clearly labelled or logically grouped.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use the Inspect panel to review text size, contrast and spacing. Make sure your headings and body text are clearly distinguished.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">In Prototype mode, test any animations or transitions. If they move too quickly or are overly complex, slow them down or offer a reduced motion alternative.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Build these checks into your regular design workflow; don\u2019t wait until the handoff stage.<\/span><\/li>\n<\/ul>\n<h3><strong>5. Crafting effective prompts for AI<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Last but not least, here\u2019s a skill that will serve you both in and outside of Figma: the art of prompting.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">AI tools can be powerful helpers in your design process, whether you\u2019re generating ideas, copy or accessible elements. But to get the best results, you need to know how to ask the right questions. In other words, you need to master the art of prompt-writing (or prompt engineering).\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the context of accessible design, clear, specific prompts help AI understand your accessibility goals, like creating alt text, suggesting high-contrast colours or writing easy-to-understand microcopy.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For example, say you want AI to write alt text for the logo and hero image on your website header. A vague prompt like \u201cwrite alt text\u201d will likely yield generic results. But if you say, \u201cwrite clear, concise alt text describing the logo and hero image for users with visual impairments,\u201d you\u2019re more likely to get useful, accessible suggestions.<\/span><\/p>\n<p><b>Try this:<\/b><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Be specific about accessibility needs in your prompts. Mention things like contrast, font size or screen reader friendliness depending on the context.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ask AI to create accessible copy, like clear error messages or button labels that work well with screen readers.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use AI-generated alt text as a starting point, then review and tweak it to add context or personality.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Experiment with different prompt styles to discover what yields the best results.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">If you want to dive deeper into prompt engineering beyond Figma, check out <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/midjourney-ai-in-ui-design\/\"><span style=\"font-weight: 400;\">this guide on how to use Midjourney in UI design<\/span><\/a><span style=\"font-weight: 400;\">, complete with prompt examples and frameworks you can follow.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">With these five skills, designing accessibly and inclusively in Figma will start to become second nature. Next, we\u2019ll look at how to incorporate these practices into your everyday workflow for maximum impact.\u00a0<\/span><\/p>\n<h2><strong>Tying it all together: how to build accessibility into your Figma workflow<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">The skills and tools we\u2019ve covered so far each play an important role in accessible design. But the real impact comes when you combine them into a clear, repeatable process, or what\u2019s known as an accessibility workflow.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is essentially a well-defined \u2018routine\u2019 that helps you consistently prioritise accessibility and inclusion by default. It\u2019s a series of key steps that weave accessibility best practices into your design process, from the first wireframe to the final <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/design-handoff-developers\/\"><span style=\"font-weight: 400;\">designer\/developer handoff<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A strong accessibility workflow will save time and, most importantly, help to ensure that accessible design scales throughout the product. Here\u2019s how to get started.<\/span><\/p>\n<h3><strong>1. Define accessible foundations upfront<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Set up accessible colour palettes, <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/guide-to-typography-design\/\"><span style=\"font-weight: 400;\">typography<\/span><\/a><span style=\"font-weight: 400;\"> and spacing styles using shared styles and components. This ensures consistency and saves time later.<\/span><\/p>\n<p><b><i>AI tip:<\/i><\/b><i><span style=\"font-weight: 400;\"> Use AI-powered tools or plugins to help generate accessible colour combinations and font pairings based on WCAG guidelines.<\/span><\/i><\/p>\n<h3><strong>2. Design responsively and inclusively as you go<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Use Auto Layout to make components adapt to different screen sizes and user settings. Organise and label layers clearly to support screen readers and keyboard navigation.<\/span><\/p>\n<p><b><i>AI tip:<\/i><\/b><i><span style=\"font-weight: 400;\"> Leverage AI to auto-generate alt text for images and create clear, user-friendly microcopy.<\/span><\/i><\/p>\n<h3><strong>3. Conduct regular accessibility audits<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Run plugin audits with tools like Stark or Able at key design stages to check colour contrast, focus order, alt text and other accessibility factors.<\/span><\/p>\n<p><b><i>AI tip:<\/i><\/b><i><span style=\"font-weight: 400;\"> Use AI-enabled plugins that scan your designs and suggest improvements automatically.<\/span><\/i><\/p>\n<h3><strong>4. Test for assistive technology and motion preferences<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Simulate keyboard navigation flows in prototypes and preview animations with motion reduction to accommodate users with motion sensitivities.<\/span><\/p>\n<p><b><i>AI tip:<\/i><\/b><i><span style=\"font-weight: 400;\"> Use AI-driven tools to help generate diverse user scenarios, including those with disabilities, for thorough testing.<\/span><\/i><\/p>\n<h3><strong>5. Collaborate, document and hand off clearly<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Add accessibility annotations, ARIA roles and keyboard instructions directly in your Figma files. Share your work early with developers and accessibility experts to get feedback and ensure proper implementation.<\/span><\/p>\n<h3><strong>Final tips to embed accessibility in your workflow<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">And here are some final tips for building a robust and scalable workflow that prioritises accessibility:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Create reusable Figma templates with built-in accessible styles and components.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Schedule accessibility audits throughout your design process using plugins and AI tools.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Build keyboard navigation into your prototypes from the start.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use Figma\u2019s commenting and version history to track accessibility feedback.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Collaborate closely with developers to ensure your designs translate into accessible code.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Review all AI-generated suggestions carefully. AI is a helpful assistant, not a replacement for human judgement.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">By making accessibility an integral part of your Figma workflow and leveraging AI thoughtfully, you\u2019ll design more inclusive products and work more efficiently. Everyone\u2019s a winner!<\/span><\/p>\n<h2><strong>Final thoughts\u00a0<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Accessible and inclusive design is now a critical skill for every designer, and learning how to leverage tools like Figma is just the beginning. Truly inclusive design starts with an accessibility-first mindset grounded in a solid understanding of accessibility principles, real user needs and best practices that go beyond checklists.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re ready to level up your skills and get ahead of regulations like the <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/european-accessibility-act-ux\/\"><span style=\"font-weight: 400;\">European Accessibility Act (EAA)<\/span><\/a><span style=\"font-weight: 400;\">, consider the UX Design Institute\u2019s <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/courses\/designing-for-accessibility\"><span style=\"font-weight: 400;\">Professional Certificate in Designing for Accessibility<\/span><\/a><span style=\"font-weight: 400;\">. You\u2019ll go beyond the basics with practical exercises and an expert-led curriculum, equipping you with both the skills and confidence to design better, more inclusive products.\u00a0<\/span><\/p>\n<table class=\"wp-list-table widefat fixed striped table-view-list posts\">\n<tbody id=\"the-list\">\n<tr id=\"post-12454\" class=\"iedit author-other level-0 post-12454 type-uxdipromotedcontent status-publish hentry\">\n<td class=\"shortcode column-shortcode\" data-colname=\"Shortcode\"><code class=\"highlight-shortcode\"><section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_certificate-in-ai-fundamentals-for-uxp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ai-fundamentals-for-ux?utm_campaign=blog_promo&utm_source=blog&utm_medium=blog_panel_text&utm_content=inline\" style=\"\">\n                    <p>[GET CERTIFIED IN AI FUNDAMENTALS FOR UX]<\/p>\n                    <span>Take our Certificate in AI Fundamentals for UX<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-weight: 400;\">You\u2019ll also find plenty more guides and resources on the blog, including:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/accessibility-checklist-for-designers\/\"><span style=\"font-weight: 400;\">The ultimate UX accessibility checklist that every designer needs<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/accessible-design-heather-hepburn\/\"><span style=\"font-weight: 400;\">Making accessibility real: practical insights from Heather Hepburn, Head of Accessibility at Skyscanner<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/accessible_design-inclusive_design\/\"><span style=\"font-weight: 400;\">Accessible vs. inclusive vs. universal design: what\u2019s the difference?<\/span><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In this guide, we break down the top 5 Figma skills every UX and UI designer needs to master, from responsive layouts to plugin-powered audits. We show you how AI can supercharge your workflow to design inclusively by default. Read further to see how you can put these skills into action.<\/p>\n","protected":false},"author":22,"featured_media":12458,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[393],"tags":[],"class_list":["post-12457","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibility"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/12457","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=12457"}],"version-history":[{"count":6,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/12457\/revisions"}],"predecessor-version":[{"id":12648,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/12457\/revisions\/12648"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/12458"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=12457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=12457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=12457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}