Design Systems

252 posts

figmaJun 23, 20202 min readCurated summary

How to evaluate design tools | Figma Blog

Choosing a design tool should be treated as a structured team project, not a simple feature comparison. The right choice depends on factors such as team size, remote distribution, workflow, collaboration needs, and existing pain points. Figma recommends a phased process that typically takes about a month and combines stakeholder input, defined criteria, hands-on testing, and documented feedback. ## Phase 0: Lay the Groundwork - Treat the evaluation like a product launch or design sprint and include it in the team’s quarterly planning. - Create a workback schedule, allowing roughly: - Two weeks for preparation - Two weeks to test tools on short-term projects - Set a firm decision deadline so the process can end early if one tool clearly stands out. - Identify stakeholders across design, product, development, marketing, and project approval teams. - Consider forming a cross-functional working group with regular check-ins and a shared communication channel. - Document milestones, formal feedback, and informal observations in a shared workspace. - Set expectations that adopting a new tool may require several weeks of ramp-up before productivity returns to normal. ## Phase 1: Define the Problem - Clarify what the team actually needs before comparing specific products. - Consider team characteristics such as: - Size and expected growth - Whether members work in one office or remotely - Onboarding and scalability requirements - Identify concrete pain points in the current workflow, including moments where collaboration breaks down. - Gather feedback from people outside the immediate design team, especially developers, product managers, and marketers. - Focus on specific scenarios such as developer handoff rather than vague dissatisfaction. ## Phase 2: Establish Evaluation Criteria - Convert the team’s needs and pain points into a small number of priority themes. - Productivity is one important theme, covering activities such as: - Individual design work - Sprint planning - Design critiques - Developer handoff - Match criteria to the team’s circumstances: - Large teams may prioritize consistency, shared libraries, and design-system support. - Fast-growing teams may emphasize onboarding and scalability. - Distributed teams may place greater weight on collaboration and communication. The practical recommendation is to invest in preparation before testing tools. A documented, stakeholder-informed evaluation helps teams choose software that fits their real workflows and reduces the disruption and cost of a poorly planned migration.

Design Systems Figma Collaboration Design Tools+2

figmaJun 15, 20202 min readCurated summary

Beyond mocks: co-designing journeys, diagrams, and more | Figma Blog

Design is more than producing interface mocks; it also involves shaping customer experiences, processes, culture, and community. Segment’s product design team demonstrates how designers can collaborate with researchers, product managers, engineers, and other colleagues using shared visual artifacts. These co-designing practices create organizational sources of truth, improve decision-making, and strengthen team connections. ## Mapping the Customer Journey with UX Research - A designer and UX researcher mapped Segment’s end-to-end customer experience, from discovery and sign-up through scaled implementation. - The journey was organized around different customer tiers and enriched with analytics. - An interactive prototype included clickable customer stories. - The resulting file became both a reference point for the company and an onboarding resource. ## Diagramming Data Architecture - Designers, researchers, customer success managers, and infrastructure engineers collaborated to visualize how data moves through Segment. - The diagram showed where data is transformed, enriched, and cleaned. - It helped the team identify existing strengths and areas needing improvement. - The artifact became foundational for planning future products and served as another organizational source of truth. ## Retrospecting on the Design System - Segment’s open-source Evergreen design system is used by teams beyond design, making cross-functional feedback especially important. - Designers and engineers held a remote retrospective in Figma using virtual sticky notes. - Participants documented pain points and identified opportunities for improvement. - The exercise informed the following quarter’s OKRs and helped the team co-design a roadmap for Evergreen. ## Building Community Through Collaboration - Co-designing can support social connection as well as product and process work. - For International Women’s Day, remote EPD teammates collaborated in Figma to create personalized appreciation notes for female-identifying colleagues. - The team also adapted the practice for virtual birthday cards and other celebrations. - These activities helped preserve meaningful workplace rituals while working remotely. The article encourages teams to expand co-design beyond product mocks. Shared journeys, diagrams, retrospectives, and collaborative community activities can make complex work visible, align diverse teammates, and create stronger connections.

Design Systems Figma User Experience Prototyping+3

figmaApr 21, 20202 min readCurated summary

The case for lightweight prototyping | Figma Blog

Lightweight prototypes do not need to be polished to be valuable. Figma argues that early, informal prototypes accelerate feedback, clarify communication, expose technical constraints, and reduce wasted effort. The best prototype is often the one shared early enough to influence the final product. ## Why Lightweight Prototypes Matter - Prototypes support more than formal usability testing: - They communicate a product vision. - They help collaborators and stakeholders respond to work in progress. - They encourage early course correction before changes become expensive. - High fidelity is not always necessary; an informal prototype can be more useful than a polished one if it prompts meaningful feedback. ## Testing Copy and Content - A prototype reveals whether headers, body text, and buttons work together coherently. - It helps identify: - Unclear calls to action - Inconsistent terminology - Mismatched writing styles or tone - Reviewing copy in context is especially useful when multiple people contribute UX writing or microcopy, even before a formal style guide exists. ## Adding Context for Developers - Sharing early prototypes with developers can expose: - Feasibility problems - Technical roadblocks - Areas requiring further exploration - Prototypes are blueprints rather than finished implementations, so additional context helps developers understand the intended experience and bring the design to life accurately. ## Communicating Interactions - Even simple prototypes should clearly map user paths and interactions. - Specifying behaviors such as **On Click**, **On Drag**, and **While Hovering** makes the intended experience easier to understand. - Explicit interactions lead to more accurate feedback and more effective testing. ## Using Figma for Internal Communication Figma also uses prototypes as a communication medium, particularly for remote collaboration. - **All-hands meetings:** Team members add presentation slides directly to a shared master Figma file. - **Information sharing:** Teams use Presentation View for quarterly plans, research findings, and remote-collaboration ideas. - **Customer conversations:** Sales teams send prototype URLs instead of static PDFs, enabling customers to click through presentations and view animated elements such as GIFs. - **Events:** Figma speakers use Figma files and Presentation View to build and deliver conference presentations. Lightweight prototyping is most effective when it is shared early, includes enough interaction detail to convey intent, and provides the surrounding context that collaborators need. Teams should treat prototypes as flexible communication tools—not merely as final-stage testing artifacts.

Design Systems Figma User Experience Prototyping+2

figmaMar 10, 20203 min readCurated summary

Extend what’s possible with plugins for you and your team | Figma Blog

Figma’s post argues that plugins can turn repetitive, team-specific design tasks into fast, reusable workflows. Examples from GitHub, Atlassian, and Uber show how teams use plugins for component management, theming, realistic content, critique, and collaboration. The conclusion is that when no public plugin fits a specialized need, teams should build bespoke tools—and potentially combine them into a unified plugin. ## Building a Unified Plugin at GitHub Brian Lovin began creating plugins at GitHub after noticing how much time designers spent on repetitive operations. - A **borders utility** toggled the visibility of divider layers within list-item components. - This allowed GitHub to maintain one flexible component instead of multiple components for every divider size and placement. - A **color-theming plugin** helped designers manage light, dark, and high-contrast themes. - It searched functionally named styles and quickly switched entire designs between themes. - A **data population plugin** pulled live API data into designs. - It mapped avatars, usernames, and names to appropriately named component layers. - These tools were consolidated into a single “mono plugin,” giving the team one interface for several workflow improvements. ## Product-Specific Content at Atlassian Atlassian created the **ADG Data Generator** to prevent designers from using generic or misleading placeholder content. - Designers can generate data appropriate to specific products: - Jira projects and ticket numbers - Bitbucket branches and commit messages - The plugin keeps related content logically connected, such as matching project names with project descriptions. - For user imagery, it generates realistic but entirely artificial faces instead of using stock photos of real people. - Atlassian shared the generator’s source code with the broader community. ## Collaboration and Critique at Uber Uber’s design team developed more than four plugins to improve collaboration, consistency, and speed. - A **mobile design critique plugin** creates a QR code and URL for the selected Figma frame. - Critique participants can open the design on their own phones and experience it at the intended mobile scale. - This gives each reviewer a better sense of how the design feels in-hand than viewing it on a shared large screen. ## A Pattern for Identifying Plugin Opportunities The examples show that useful plugins often emerge from recurring friction rather than from abstract experimentation. - Look for repetitive tasks that require many clicks. - Target workflows tied to a company’s own products, components, data, or design system. - Automate tasks involving large sets of styles, layers, or content. - Combine related utilities into one accessible team tool when multiple plugins begin to accumulate. Teams should start by identifying a specific, repeated workflow problem and build the smallest tool that removes it. Over time, those focused tools can become a broader internal plugin tailored to the team’s design system and processes.

Design Systems Accessibility Figma Plugins Api Integration+3

figmaFeb 26, 20202 min readCurated summary

Reflections on Config, our first user conference | Figma Blog

Config, Figma’s first user conference, brought more than 1,000 participants together to learn, collaborate, and strengthen the design community. Rather than imposing a rigid agenda, Figma invited users to shape the event through workshops, talks, and roundtables. The conference highlighted open design, deeper community connection, and the importance of using technology to support—not replace—human relationships. ## A Conference Built by the Community - Figma created Config as a physical gathering where users and employees could exchange ideas directly. - Attendees discussed team culture, mentorship, design ethics, and other issues affecting the design industry. - Many sessions came from community submissions, encouraging participants to contribute rather than simply listen. - Sessions were also recorded for people who could not attend in person. ## Open Design and Shared Creativity - A central theme was “open design”: sharing, remixing, and building on one another’s work. - Devon Zuegel explored how open-source principles apply to urban planning and physical infrastructure. - Jason Kunesh described how Chicago students helped create a design system when the city’s design team lacked resources. - Miguel Solorio explained how Microsoft incorporated the broader community into its design process. ## Technology as a Tool for Connection - Craig Mod warned that technology can encourage isolation, even as it makes communication easier. - He argued that digital tools should help people connect more deeply with their surroundings rather than escape them. - May-Li Khoe discussed challenging established norms while supporting the communities she cares about. - Both talks encouraged attendees to consider their responsibility to build stronger, more inclusive communities. ## Continuing the Conversation - Figma presented Config as an ongoing community dialogue rather than a one-time event. - The company thanked attendees, speakers, and employees for making the conference possible. - Figma encouraged everyone to watch the recorded sessions and stay engaged with future discussions. Config’s main lesson was that design becomes more powerful when it is shared openly and grounded in community. Future conferences and design initiatives should prioritize participation, collaboration, and meaningful human connection.

Design Systems Figma Open Source Design Tools+2

figmaFeb 5, 20202 min readCurated summary

New ways to create, collaborate, and share more openly | Figma Blog

Figma’s 2020 product direction centers on three priorities: faster creation, more inclusive collaboration, and a broader design community. At Config 2020, the company announced seven features aimed at reducing repetitive work, preserving context across teams, and making design knowledge easier to share. These updates build on Figma’s focus on a reliable, high-performing platform. ## Focus for 2020: Creation, Collaboration, and Community - **Creation:** Automate repetitive design tasks and help users work faster. - **Collaboration:** Include everyone involved in the product process. - **Community:** Give designers more opportunities to publish, learn, and share. - Platform reliability and performance remain foundational investments. ## Faster Design Workflows - **Auto Layout improvements** - Components can stretch to fill their containers. - Buttons resize automatically with their text. - Lists can be rearranged more easily. - These capabilities support responsive designs across device types. - **Redesigned Font Picker** - Prioritizes frequently used fonts, organization fonts, and favorites. - Provides faster font search. - Identifies fonts already used in a file to improve consistency. - **Selection Colors** - Allows fills, strokes, and text colors to be updated together in one action. - Also supports changing these color categories independently. - **Expanded prototype interactions** - Adds triggers for keyboards, gamepads, and accessibility controllers. - Enables prototypes for keyboard shortcuts, game menus, and other device-specific interactions. ## Collaboration Across Product Teams - **Text hyperlinks** - Text can link to external web pages, pages within a Figma file, or frames in the Editor. - Useful for linking requirements documents and building navigable tables of contents. - **Plugin Inspector API** - Lets plugins display important information in Figma’s properties panel. - Can surface action items or identify plugin-generated content, such as maps, for easier updating. - **Prototype-only sharing** - A new permission allows users to share a prototype without exposing the underlying design file. - The feature was planned for Figma Professional and Organization plans. ## Sharing with the Design Community - Figma continued developing its Community platform as a public space for publishing live files. - Community files can be inspected, remixed, and used for learning. - Within its first months, more than 400 creators had published over 1,000 files, including wireframes, icon sets, design systems, device frames, slide templates, and illustrations. Together, these updates position Figma as more than a design editor: it aims to become a faster creation tool, a shared workspace for product teams, and an open learning platform for the broader design community.

Design Systems Figma Prototyping Collaboration+3

figmaJan 27, 20202 min readCurated summary

Figma on Figma: How we built our website design system | Figma Blog

Figma built its website design system to address inconsistent pages, duplicated solutions, and a difficult maintenance process. By auditing existing patterns, consolidating visual styles, and creating reusable components in Figma and Contentful, the marketing team established a flexible system that supports consistency without limiting creativity. The result is faster production: teams can move from concept to a live page in as little as one day, often without writing new code. ## Taking Inventory - The team cataloged existing fonts, sizes, colors, layouts, column widths, and other visual patterns in a shared Figma file. - This revealed: - Repeated patterns that could be unified - One-off components that did not belong in the style guide - Large page elements that could be broken into smaller reusable parts - The team applied an atomic approach, combining small “atoms” and “molecules” into flexible page “organisms.” - Similar but inconsistent elements were standardized: - Twelve heading sizes became H1–H3 styles - Body and technical text received defined styles - Long-form content gained pull-quote and block-quote styles - The refined components were organized into a shared library so even people unfamiliar with Figma’s brand could create cohesive pages. ## A Simplified, Flexible Design System - In about a month, the team created a robust style guide and component library integrated with Contentful. - The system standardized: - Typography - Spacing and padding - Line heights - Colors - Grid behavior - Designers could assemble pages from ready-made building blocks rather than recreating common elements. - Frequently paired elements and complete sections were turned into larger reusable components called “FLEGOs,” combining Figma and LEGO. - These components were designed to work together in many combinations, supporting different content and page layouts. ## Faster Marketing Production - Most of Figma’s core marketing site now uses the design-system framework. - Contentful allows the team to build and publish pages without requiring new code for each page. - A product marketer and web producer created the “What’s New” page by: - Wireframing with FLEGOs - Collaborating on copy in Figma - Building the final page from CMS components - The page went from idea to launch in under 48 hours, demonstrating how reusable components accelerated the process. Figma’s experience shows that a website design system should be both standardized and flexible. Auditing existing work, consolidating repeated patterns, and making components accessible through design and content tools can improve consistency while significantly reducing production time.

Design Systems Figma Component Library Atomic Design+2

figmaJan 8, 20202 min readCurated summary

Bringing the community together in Figma | Figma Blog

Figma’s 2020 priorities centered on strengthening its global community as the company and user base expanded. The company planned to connect users through in-person events, improved support, collaborative product features, and a richer platform for sharing design resources. Its broader goal was to make design more accessible and collaboration more effective for entire product teams. ## More Opportunities to Meet in Person - Figma launched Config, its first user conference, in San Francisco on February 6, 2020. - The event emphasized community-created programming, including talks on open-source design, developing future designers, design confidence, and redesigning Chicago.gov. - Figma also planned more local events and user groups in cities around the world. - Users were encouraged to participate either in person or online, and community leaders could help organize events in their cities. ## Expanded Global Customer Support - More than 80% of Figma’s active users were outside the United States, while its support team primarily covered North American and European business hours. - Figma moved its support technology to Zendesk to better serve customers globally. - Planned improvements included: - A new Help Center for self-service product information - Community forums for peer-to-peer support - Streamlined internal processes for faster responses ## Product Features for Entire Teams - After launching features such as Plugins, Auto Layout, Smart Animate, OpenType support, and Design System Analytics in 2019, Figma promised a larger 2020 product roadmap. - The company would continue reducing repetitive design work and improving creative productivity. - Figma also aimed to better support engineers, product managers, and other members of product teams—not just designers. - Files at larger organizations averaged six collaborators, highlighting the importance of team-based workflows. ## Building a More Open Design Community - Figma introduced the beta of Figma Community in October 2019 to let creators publish files for others to inspect, remix, and learn from. - More than 300 creators had already shared around 600 files, including templates, educational guides, and public libraries. - In 2020, Figma planned to expand the number of contributors and resources so both professional and aspiring designers could discover ideas and learn from shared work. Figma’s roadmap combined product development with community-building: expanding events, improving global support, enabling broader team collaboration, and making shared design resources easier to discover and reuse.

Design Systems Figma Auto Layout Plugins+4

figmaDec 18, 20192 min readCurated summary

Measuring the value of design systems | Figma Blog

Design systems can substantially reduce the time designers spend recreating assets, searching for references, and making repetitive visual decisions. Figma’s controlled experiment found that designers completed tasks **34% faster** when they had access to a relevant, up-to-date design system. The result represents an upper bound for real-world savings, since design systems are not always perfectly aligned with the work at hand. ## Why Design Systems Create Time Savings - Designers avoid recreating common elements from scratch. - Shared libraries reduce the need to search through old design files. - Predefined assets minimize small, repetitive decisions about: - Typography - Placement - Colors - Component structure - The accumulated savings can give designers more time for strategic and creative work. ## The Experiment - Designers were asked to complete two comparable tasks for a bank account aggregation app: - Designing a screen for viewing account transactions and trends. - Designing a flow for connecting a new account. - Each participant completed both tasks, but had access to a design system for only one. - For the task without the system, designers could reference older design files. - The tasks were balanced so each participant served as their own control. - Researchers alternated task order, allowed participants to familiarize themselves with the assets, and avoided prescribing specific design solutions. - Completion time was measured, while designers chose when their work was sufficiently complete. ## The 34% Improvement - Participants with access to the design system completed their objective **34% faster**. - The system was specifically relevant, current, and applicable to the assigned tasks. - Because of those ideal conditions, Figma considers 34% a likely maximum rather than an average real-world benefit. - Figma’s broader goal was to help design teams use analytics to keep libraries relevant and understand the value they provide. ## Maintaining the System’s Value - Design systems are most valuable when they reflect the work designers actually need to do. - Quantitative usage data can help teams identify which components are useful, compare libraries, and decide where maintenance is needed. - Figma introduced Design System Analytics to provide insight into library and component usage, supporting better decisions about shared assets. A design system should be treated as an actively maintained productivity tool, not merely a repository of reusable components. Teams can maximize its value by measuring adoption and keeping its assets current and relevant.

Design Systems Figma Data Science Design System Analytics+1

figmaDec 17, 20192 min readCurated summary

Made in Figma, 2019: Design by the numbers | Figma Blog

Figma’s 2019 usage data shows design becoming more collaborative, measurable, and broadly practiced. Anonymized data reveals strong preferences for cool colors, widely available sans-serif fonts, bold typography, and desktop and mobile frame presets. It also shows that design files increasingly serve as shared spaces for cross-functional teams rather than isolated work by individual designers. ## Color and Typography Trends - The most popular non-gray color was teal `#009688`, followed by dark blue-gray `#455A64` and `#263238`. - These cool tones contrasted with Pantone’s 2019 Color of the Year, Living Coral (`#FF6F61`). - Montserrat, Open Sans, and Lato were the three most-used fonts. - Google Fonts accounted for six of the top ten fonts, largely because they are readily available in Figma. - SF Pro Text, SF Pro Display, Proxima Nova, and Arial also ranked highly; notably, Arial surpassed Helvetica among system fonts. - Roboto, Figma’s default font, was excluded from the rankings. - Font usage was highly concentrated: 90% of usage came from the top 11 fonts, including Roboto. - Font Awesome ranked 31st, while Times New Roman ranked 55th. The first serif font, Playfair Display, appeared at number 22. - Designers were 13 times more likely to adjust font weight than italicize text, and one-third of files used bold or heavy styles. ## Frame and Device Preferences - Figma offered 36 preset frame options, and 33% of files began with one of them. - The 1440 × 1024 desktop frame was the most popular preset. - iPhone X and iPhone 8 frames followed closely, showing strong interest in both desktop and mobile design. - The ordering was notable given that Windows has much greater global usage than macOS. ## Collaboration Across Teams - Figma’s data reflects its goal of making design an open, collaborative process. - In larger organizations, files averaged six collaborators. - Collaborators could include designers, developers, product managers, writers, and other stakeholders. - A file typically began with one person working independently. - After an average of 19 days, the first collaborator was invited to review, comment, or contribute. ## Overall Direction The data suggests that 2019 design work was shaped by accessible tools, reusable conventions, and increasing teamwork. While designers favored familiar fonts, cool color palettes, and strong type weights, Figma files were also becoming shared product-development spaces involving people beyond design.

Design Systems Figma Prototyping Collaborative Design+2

figmaDec 4, 20192 min readCurated summary

Design more, resize less, with Auto Layout | Figma Blog

Figma’s Auto Layout brings structural concepts from CSS flexbox into a free-form design environment. It reduces repetitive resizing and repositioning by making frames respond automatically to their content, while preserving designers’ ability to explore layouts freely. The result is a workflow that feels closer to production code without sacrificing visual experimentation. ## Bridging Design and Development - Traditional Figma designs require manual updates when content changes, such as resizing a button and repositioning neighboring elements. - HTML/CSS and SwiftUI handle these relationships automatically, but are less suited to rapid, free-form design exploration. - Auto Layout combines both approaches by adding flexible, code-inspired layout behavior as a property of any Figma frame. ## How Auto Layout Works - Items inside an Auto Layout frame are arranged vertically or horizontally. - The frame automatically sizes itself based on its contents. - Frames can include padding, fills, strokes, and corner radii, allowing designers to create buttons without extra layers. - Changing button text automatically resizes the button and adjusts surrounding elements. - Spacing is controlled at the container level rather than independently between every pair of items. ## Lists, Menus, and Design Systems - Auto Layout simplifies repeated interface elements such as lists and menus. - Items can be reordered through drag and drop instead of manually repositioning them. - Existing components and design-system elements can be converted using **Shift + A** or the Option menu. - The feature supports more generic components that adapt to different content instead of requiring separate variants. ## Nested Frames and Safeguards - Auto Layout frames can be nested to build complex interfaces, similar to nested HTML `div` elements. - Designers can edit content or move elements in and out of layout frames. - Figma includes safeguards against unintended actions, such as placing a large image inside a button. - Holding **Command** on macOS or **Ctrl** on Windows overrides these safeguards when needed. Figma recommends trying Auto Layout through its playground file, video, and documentation. The initial release was presented as a starting point, with further improvements expected based on user feedback.

Design Systems Figma HTML Responsive Design+3

figmaNov 21, 20192 min readCurated summary

Humanity at work: Gusto brings a new brand to life with Figma | Figma Blog

Gusto used Figma to turn a brand refresh into a company-wide effort centered on the human experience of work. The collaboration brought marketing, brand, product, and non-design teams into the same workspace, helping them align on the new identity and apply it consistently across Gusto’s platform. Figma’s real-time collaboration, commenting, libraries, and components helped translate the brand into a scalable product system. ## Why Gusto Rebranded - Formerly ZenPayroll, Gusto serves more than 100,000 small businesses with payroll, benefits, and HR tools. - Although customers valued the product, Gusto felt its existing brand did not reflect the human way it served them. - The refresh aimed to unify brand awareness, product development, and customer experience. - Gusto viewed its brand as the sum of every user interaction, not something owned solely by marketing or brand design. ## Bringing the Whole Company Into the Process - A major challenge was aligning roughly 1,000 employees around the new brand. - Gusto chose Figma as a shared workspace where employees could: - See work develop in real time - Communicate and share ideas - Comment directly on designs - Take ownership of the rebrand - Figma also helped non-designers understand the design process and appreciate design decisions. ## Connecting Brand and Product Teams - Brand and product design teams worked as equal partners through brainstorming sessions and workshops. - They jointly developed: - Color palettes - Typography - Brand starter templates - Product applications of the new identity - In collaborative sessions such as “Refresca,” designers applied the new brand to different product areas together in Figma. - Early collaboration made it easier to carry the brand consistently through the entire product experience while highlighting meaningful moments in distinctive ways. ## Building a Scalable Design System - Gusto wanted a reliable “system of record” for how its products should look. - The product design team created a UI kit using Figma libraries and components. - The kit was based on the brand team’s guidelines and provided reusable foundations for multiple products. - This system helped designers work consistently and scale the new brand as Gusto grew. Gusto’s experience shows that a successful rebrand requires more than new visual guidelines. Shared tools and close collaboration can align an entire company, connect brand strategy to product design, and create a cohesive customer experience.

Design Systems Figma Collaborative Design User Interface Design+2

figmaNov 19, 20192 min readCurated summary

Opening up the data behind your design systems | Figma Blog

Figma introduced Design System Analytics to help organizations understand how their libraries and components are used across teams. The feature provides usage trends, library comparisons, and component-level data so design system teams can improve what they maintain, guide migrations, and measure adoption without monitoring individual designers. Customer examples show analytics turning usage data into practical design system decisions. ## Improving Components Through Usage Data - Teams can identify components that are widely used, rarely used, or frequently detached. - Microsoft uses this information to determine which Fluent components need maintenance or may no longer be important. - Google found that its button component was detached more than any other component, revealing that the master component was too complex. - The Material Design team responded by creating a simpler button option while preserving flexibility for designers. ## Tracking Library Adoption and Migration - Design System Analytics compares usage trends between libraries over time. - Squarespace planned to replace an older shared library with a new version using Auto Layout. - Analytics helps the team: - Monitor adoption of the new library across teams - Identify which teams are using it - Ensure the old library is gradually deprecated - Reports include component insertions, active teams, total instances, and detachments. ## Understanding Component Usage Across Teams - Analytics allows teams to examine how individual shared components are being used. - Pluralsight planned to use the reports to understand how designers work with components from its design system. - Because reports are available to anyone within an organization, designers and managers can independently investigate usage patterns and learn from other teams’ examples. ## Measuring Design System Impact Earlier - Figma positions analytics as a way to measure design system adoption earlier in the product development process, rather than waiting until implementation. - The article introduces Bukalapak as an example of a company that had previously measured adoption during development, though the provided text ends before describing the full outcome. ## Expanded Capabilities - The original 2019 feature focused primarily on components and library usage. - As of February 2025, Figma Library Analytics also includes styles and variables for Organization and Enterprise customers. - Enterprise customers can access expanded functionality through the Library Analytics API. Design System Analytics is intended to provide feedback for improving and evolving design systems, not to police individual designers. Teams can use the data to prioritize maintenance, simplify components, track migrations, and make adoption measurable.

Design Systems Figma Auto Layout Component Libraries+1

figmaOct 21, 20192 min readCurated summary

Beyond multiplayer: Building community together in Figma | Figma Blog

Figma argues that design is becoming more open, collaborative, and community-driven beyond real-time multiplayer editing. It introduces the Figma Community, where people can publish live files for others to inspect, remix, and learn from, alongside a redesigned workspace focused on team collaboration. The beta is intended to evolve through feedback from companies, educators, governments, and independent designers. ## From Multiplayer Collaboration to Public Sharing - Figma’s multiplayer features helped normalize co-editing and involving non-designers in the design process. - The company now wants to make it easier for designers to share not only finished work, but also the underlying process and methods. - The Figma Community beta provides a public space for publishing files that anyone can inspect, remix, and learn from. ## A Community Built with Customers - Users choose which files to publish on their public profiles. - The initial licensing option is Creative Commons Attribution 4.0 International, with more restrictive licenses potentially added later. - Figma describes the release as a multi-month beta designed to gather feedback and discover how organizations will use the platform. ## Use Cases Across Organizations - **Slack:** Publishing UI kits to help partners build better Slack applications. - **Dropbox:** Sharing culture kits for design managers. - **Unsplash:** Providing avatars and visual assets for designers. - **VMware:** Making its Clarity public design system easier to use. - **City of Chicago:** Offering a public design system that citizens can remix with their own identity. - **Lambda School and Stanford d.school:** Publishing free educational templates. - **Independent designers:** Sharing presentation templates, portfolios, tutorials, and source files. - **Square Crypto:** Exploring transparent, cross-company design collaboration inspired by the openness of the Bitcoin community. ## Learning Through Inspectable Files - Designers can publish editable source files rather than only screenshots or finished exports. - David Kulakevich’s Figma artwork demonstrates how viewers can inspect individual layers and learn the techniques behind a finished piece. - This turns community sharing into both a portfolio platform and an educational resource. ## Communities Inside the Workspace - Figma is also redesigning workspaces around the people on a team. - The goal is to make important files and projects easier for team members to discover. - This reflects Figma’s broader view that design files should be organized around collaboration and community, not treated as isolated artifacts. Figma’s recommendation is effectively to treat design as an open, reusable medium: publish useful files, learn from others’ source material, and build shared systems across organizational boundaries.

Design Systems Figma Real Time Collaboration Plugins+2

figmaAug 27, 20192 min readCurated summary

How Microsoft built plugins to improve their workflow | Figma Blog

Microsoft uses private and community Figma plugins to integrate its Fluent design system into everyday design work. These tools reduce repetitive tasks, provide approved content, and make it easier to manage hundreds of product-specific libraries. The broader conclusion is that customized tooling helps large design organizations improve consistency, accessibility, and efficiency while giving designers more time for creative work. ## Integrating Approved Design Content - Microsoft created an internal version of **Content Reel**, a plugin that inserts approved text strings, avatars, and icons into designs. - This replaces generic placeholder content and reduces the need for designers to search for or request approval of assets. - The approach can be adapted by other organizations to provide company-specific, reusable content. ## Switching Between Product Libraries - Microsoft maintains hundreds of Figma libraries, with different products requiring distinct themes and styles. - Jackie Chui built **Themer** to let designers quickly switch between product themes such as Work and Outlook. - The publicly available version swaps published styles from different libraries, reducing the manual effort required to adapt designs across products. ## Automating Repetitive Design Tasks Microsoft designers built plugins to eliminate routine work and support more creative problem-solving: - **Find and Replace** searches for text on a page and replaces it like a standard text editor. - **Paste to Fill** turns a copied image or image URL into a fill for selected layers. - **Button Resizer** adjusts button dimensions to fit their labels. - These tools reflect Microsoft’s broader investment in the Figma platform as a foundation for extending its design workflow. ## Making Accessibility Part of the Workflow - Tiffany Chen, part of Microsoft’s Modern Input and Accessibility team, develops tools intended to make accessibility more visible during design. - Her work challenges the common practice of treating accessibility as a final-stage addition. - Embedding accessibility support into design tooling can help teams identify and address inclusive-design concerns earlier. Microsoft’s example shows that plugins are most valuable when they are tailored to an organization’s real processes. Teams can improve consistency and productivity by connecting Figma to approved assets, design systems, automation, and accessibility checks.

Design Systems Figma Accessibility Figma Plugins+2