--- title: Figma sets you up for design excellence url: "https://b13.com/knowledge/an-ode-to-figma" description: Discover the power of Figma for UX design. Streamline projects with seamless collaboration, cross-platform accessibility, and innovative features. Elevate your project’s efficiency and transparency. image: "https://b13.com/fileadmin/_processed_/2/0/csm_FigmaFavourites_Sharing_b31523baf6.png" date: 2024-01-19 modified: 2026-08-19 lastUpdated: 2026-08-19 --- # Figma sets you up for design excellence [ UX/UI-Design ](https://b13.com/knowledge/uxui-design) [ Tool-Tip ](https://b13.com/knowledge/tool-tip) An ode to Figma ================= ![](https://b13.com/fileadmin/_processed_/1/a/csm_stefanie_9492752ded.jpg)Stefanie Kreuzer 13 February 2024 [ RSS Feed ](https://b13.com/rss.xml) ![Figma logo centered on a grid background, surrounded by various design elements including arrows and rectangular shapes, suggesting a focus on digital design and prototyping tools.](https://b13.com/fileadmin/_processed_/8/2/csm_FigmaFavourites_Headerbild_02ba5c66f5.webp) **Why this collaborative software takes the UX process to the next level** The UX design process is a complex dance, an ongoing, visual communication between designers, project managers, developers, and C-level execs. Open dialogue and collaboration among all stakeholders is key for this dance to harmonize and for the project to flourish. Not all design tools are made to facilitate this recipe for success. Some tools focus mainly on creating, and fumble when it comes to sharing the design or inviting input from team members other than designers. Figma’s features and functionalities are built so designers can do what they do best: design. But it also enables easy collaboration and feedback from all team members for a more efficient, up-to-date, and informed UX design process that can help take your projects to the next level. Figma is the complete package ------------------------------- Figma has the interests, issues, and challenges of modern designers at its heart. It cuts a ton of manual labor out of the UX design process while at the same time giving you the fine control you need. Design system libraries, platform independence, a collaborative interface, and a healthy ecosystem of plug-ins make it your best friend and all-in-one tool. - Set up **local variables** and **local styles** to create an efficient and consistent single source of truth. - With the help of “**frames**“, workspaces can be created in different screen sizes. Constraints are used to define the behavior of layouts depending on the screen or frame size. - Elements such as **frames, texts, and images** can be bundled in “components” to be copied and reused as “instances”. Changes to the master component are automatically passed on to the child components. - **Automatic layouts** help organize elements on the screen and ensure a consistent layout when content changes. - The **versioning** feature allows you to track the design progress. This is particularly useful if you need to track changes or revert to a previous version. - The CSS properties of the objects are displayed in the “**Inspect**“ section - Drafts can be shared with others for coordination and direct further processing, no copies need to be sent. ![A design software interface displays a dialog box for library updates, featuring various components and options to add or manage design elements. The background is a grid pattern in teal.](https://b13.com/fileadmin/_processed_/d/8/csm_FigmaFavourites_Library_6ac3feb1fa.webp) Create and share design systems --------------------------------- Design systems ensure consistency in your designs, and in Figma they are easy to create, share, and update. Once you set up a design system library with components, styles, and typography, you can share it with your team so everyone can access the latest assets. Figma Libraries allow you to sync design assets across multiple projects, so if you change a component in one project, those changes automatically propagate to others using the same library. This functionality ensures brand consistency and saves time on updates; it’s particularly beneficial for large teams or projects with multiple contributors. ![Two text boxes labeled "Marco @813" and "Laura @813" are displayed on a design interface, with options for joining, sharing, and layout settings visible on the side. The background features a grid pattern.](https://b13.com/fileadmin/_processed_/3/c/csm_FigmaFavourites_Collaboration_9a547cc4fd.webp) Collaborate effectively ------------------------- Figma’s real-time collaboration is one of its standout features. You can collaborate with team members, share feedback, and make edits simultaneously. This functionality ensures everyone—designers, project managers, C-level execs—is on the same page and reduces the need for endless back-and-forth emails. This seamless collaboration is particularly valuable for distributed or remote teams, as it decreases the need for file sharing and version control issues. - **Prototyping:** With Figma, not only can you create static designs, you can also create prototypes. Interactive prototypes help to better understand and refine the user experience. Users or clients can test the interactivity of their designs by linking elements together and playing back the interaction in presentation mode. Project managers, developers, and CEOs can review these prototypes to provide feedback and ensure alignment with project goals. - **Cross-platform availability:** Since Figma is a web-based application, it can be used on different operating systems and devices without requiring software installations. This helps eliminate technical barriers, and it means designs are easily accessible via mobile if you’re on the run. - **Development handoff:** Figma makes it easier for developers to access design specs, CSS code, and images, making the development process and designer-developer coordination more seamless. Bridging this gap between design and development helps reduce misinterpretations and accelerate the implementation process. Platform independence ----------------------- The versatility of Figma arises from its cloud-based infrastructure, rendering it independent of specific platforms. Your designs are accessible from any device equipped with a web browser, providing seamless functionality, and ensuring that the most up-to-date version of the design is always available. Whether you prefer macOS, Windows, or Linux, Figma guarantees a compatible working experience, allowing you to focus on your creative process without the constraints of platform limitations. ![A user interface displaying a list of plugins, including names, descriptions, and options to open each one. The layout features a dark theme with a grid background.](https://b13.com/fileadmin/_processed_/e/3/csm_FigmaFavourites_Plugins_a8083fb637.webp) Keep your plugins handy ------------------------- Figma has a vibrant plugin ecosystem that makes it easy to explore and install plugins that can streamline your tasks. Whether it’s automating repetitive actions or generating design assets, there’s likely a plugin for it. This flexibility allows teams to connect Figma with other tools they may already use, enhancing collaboration and workflow efficiency. Here’s a sampling of ones we like to use. - [Iconify](https://www.figma.com/community/plugin/735098390272716381/iconify) — Contains over 100 open source icon sets with 100,000+ icons. - [Unsplash](https://www.figma.com/community/plugin/738454987945972471/unsplash) — Free-to-use images for both commercial and personal projects. - [EightShapes Specs](https://www.figma.com/community/plugin/1205622541257680763/eightshapes-specs) — Automates production of page and component design specs of selected components, instances and frames. - [Stark Accessibility Tools](https://www.figma.com/community/plugin/732603254453395948/stark-contrast-accessibility-tools) — A combo of integrated tools like Contrast Checker, Focus Order, Alt-Text Annotations, Vision Simulator help you find accessibility issues in pre-production and live designs. - [Content Reel](https://www.figma.com/community/plugin/731627216655469013/content-reel) — Rapidly pull in placeholder images, text, and icons to more easily visualize your design. Using Figma in your projects ------------------------------ The modern-day challenges inherent in the UX design process are real and varied. Figma not only offers a comprehensive set of design tools that will make any designer’s life easier, it also fosters a collaborative work environment. This centralized, team-oriented approach provides more transparent, accessible communication at each design stage, helping all teammates work together more efficiently for the good of the project. Connect with us to make your project’s design even stronger. [ Let’s connect. ](https://b13.com/lets-connect) ### Written by: ![Bild von Stefanie Kreuzer](https://b13.com/fileadmin/_processed_/1/a/csm_stefanie_5a7d55f637.webp) UX and interface designer, Stefanie, has a special quality we call “seeing the work.” She instantly understands what needs to be done for any given project, and gets on with it. Her essential tool: Maultaschen Stefanie Kreuzer UX Design [ more from Stefanie Kreuzer ](https://b13.com/team/stefanie-kreuzer) Related Articles ------------------ - ![A robotic hand holds a paintbrush, creating a purple swirl against a light blue background with circular patterns.](https://b13.com/fileadmin/_processed_/b/d/csm_DesignAndKI_Headerbild_bd966b1d32.webp) ### Designing Responsibly in the Age of AI: What We’re Learning as We Go 17 July 2026 | Laura Heine Laura Heine shares what she learned at the Design Leadership Meetup about responsibility, documentation, and treating AI fairly as a team. [ Read more: Designing Responsibly in the Age of AI: What We’re Learning as We Go ](https://b13.com/knowledge/designing-responsibly-in-the-age-of-ai-what-were-learning-as-we-go) - ![Four file folders displaying a bar graph with orange bars, set against a light blue background with abstract document outlines.](https://b13.com/fileadmin/_processed_/7/2/csm_PageInfoTabs_Headerbild_1e3eda44e5.webp) ### Taming the Page Module Header—Why We Built EXT:page\_info\_tabs 31 March 2026 | David Steeb When multiple TYPO3 extensions add content to the page module header, things quickly become messy. EXT:page\_info\_tabs structures everything into clean Bootstrap tabs, with zero… [ Read more: Taming the Page Module Header—Why We Built EXT:page\_info\_tabs ](https://b13.com/knowledge/taming-the-page-module-header-why-we-built-extpage-info-tabs) - ![A hand holding a magnifying glass over a laptop screen displaying a webpage with an image and text elements.](https://b13.com/fileadmin/_processed_/e/5/csm_BackendUserSection_Headerbild_6093c842fd.webp) ### Unlocking TYPO3’s Hidden Gem: The Backend User Section (Doktype 6) 05 March 2026 | David Steeb Discover TYPO3’s underrated doktype 6 (Backend User Section) for secure internal previews, editor training, and prototyping. Learn real use cases, common pitfalls like 403 errors… [ Read more: Unlocking TYPO3’s Hidden Gem: The Backend User Section (Doktype 6) ](https://b13.com/knowledge/backend-user-section-in-typo3-uses-pitfalls-helper) - ![A human hand shakes a robotic hand against a purple background with heart patterns, symbolizing collaboration between humans and technology.](https://b13.com/fileadmin/_processed_/6/2/csm_AIbotsLoveMarkdown_Headerbild_72fe5820d6.webp) ### The Internet Is No Longer Just for Humans—AI Bots Love Markdown 28 January 2026 | Benni Mack Discover why most web traffic is now automated and how TYPO3’s structured content model prepares websites for humans, editors, and AI systems. [ Read more: The Internet Is No Longer Just for Humans—AI Bots Love Markdown ](https://b13.com/knowledge/the-internet-is-no-longer-just-for-humans-ai-bots-love-markdown) - ![Several colorful web page mockups stacked together, showcasing different layouts and design elements against a purple background.](https://b13.com/fileadmin/_processed_/e/3/csm_CaminoTheme_Headerbild_d082598009.webp) ### Camino—The Need for a Default Theme in TYPO3 Is Real 27 January 2026 | Benni Mack With TYPO3 v14, Camino introduces a default theme that removes friction from first installs. Why this matters—and how TYPO3 laid the groundwork. [ Read more: Camino—The Need for a Default Theme in TYPO3 Is Real ](https://b13.com/core-insights/blog/camino-the-need-for-a-default-theme-in-typo3-is-real) - ![Two interlocking gears with a disconnected electrical plug and a tag labeled "v13" on a purple background.](https://b13.com/fileadmin/_processed_/0/7/csm_TYPO3v13_Headerbild_14eb602ce4.webp) ### What’s New in TYPO3 v13? 20 January 2026 | Desirée Lochner TYPO3 v13 marks the beginning of a new era of user-friendliness. The version impresses with a modern, fresh, and incredibly high-performance user interface—developed for anyone who… [ Read more: What’s New in TYPO3 v13? ](https://b13.com/solutions/typo3/whats-new-in-typo3-v13) - ![User interface design featuring a dark sidebar with navigation options and a central content area with placeholder text.](https://b13.com/fileadmin/_processed_/6/6/csm_V14BackendUX_Headerbild_6dcecb335f.webp) ### Designing TYPO3 14’s Backend: Our Vision for a Modern, Expandable Foundation 12 January 2026 | Laura Heine b13 is redesigning TYPO3’s backend for version 14 to feel modern, work faster, maintain user context, and create an expandable foundation that can evolve for years to come. [ Read more: Designing TYPO3 14’s Backend: Our Vision for a Modern, Expandable Foundation ](https://b13.com/knowledge/designing-typo3-14s-backend-our-vision-for-a-modern-expandable-foundation) - ![User interface elements including text fields, checkboxes, and buttons, connected by arrows on a purple background.](https://b13.com/fileadmin/_processed_/f/7/csm_EffectiveWebForms_Headerbild_2c906e6176.webp) ### Best Practices for Effective Web Forms 18 August 2025 | David Steeb Effective web form design is a critical component of user engagement and conversion. By focusing on clarity, simplicity, and user experience, businesses can create web forms that… [ Read more: Best Practices for Effective Web Forms ](https://b13.com/knowledge/creating-effective-web-forms) - ![A purple folder is centrally placed, surrounded by red and blue rectangular elements connected by lines on a grid background.](https://b13.com/fileadmin/_processed_/1/5/csm_EffectiveInformationArchitecture_Headerbild_c5bbf51bfe.webp) ### Designing an Effective Information Architecture: Best Practices 30 July 2025 | David Steeb Dive into our latest article exploring the world of information architecture and its profound impact on user experience. Learn key strategies and best practices for designing… [ Read more: Designing an Effective Information Architecture: Best Practices ](https://b13.com/knowledge/designing-an-effective-information-architecture-best-practices) - ![Two robotic arms are positioned around a magnifying glass, focusing on the letter "g" in a stylized font. The background features a grid pattern with repeated "Ag" symbols.](https://b13.com/fileadmin/_processed_/1/8/csm_FontGuidelines_Headerbild_6f3f5a0baa.webp) ### Designing with Type: A Guide to UI Font Size Guidelines 03 June 2025 | David Steeb Discover the importance of UI font size guidelines for creating accessible and visually appealing UI designs. Learn the best practices for typography in UI, including consistency,… [ Read more: Designing with Type: A Guide to UI Font Size Guidelines ](https://b13.com/knowledge/designing-with-type-a-guide-to-ui-font-size-guidelines)