Figma

736 posts

www.figma.com/blog/engineering

Filter by tag

Figma528 Design Systems246 User Experience140 Prototyping135 AI110 Figjam98 Product Design76 User Interface63 Generative AI47 Collaborative Design47 Accessibility41 React39+1265

figmaMar 29, 20212 min readCurated summary

Behind the scenes of creating the official Figma kit for Tailwind UI | Figma Blog

Tailwind Labs created an official Figma kit to meet strong customer demand for Tailwind UI designs. Building it required translating more than 400 responsive code components into over 1,400 Figma components and 10,000 elements, with the final code serving as the pixel-perfect reference. The project showed that a production design kit needs rigorous structure, naming, responsive modeling, and reusable variants—not just visual accuracy. ## Building a Design File as a Product - Unlike exploratory product files, a commercial design kit is itself the final deliverable. - Every decision affects usability, including: - Layer names - Component structure - Page organization - Variant behavior - The team used the finished HTML and Tailwind CSS components as the standard the Figma files needed to match. ## Consistent Layer Naming - Consistent names allow Figma overrides to persist when users swap component instances or variants. - For example, a button’s text layer was always named “Text,” allowing customized text to carry over when changing button sizes. - This becomes especially valuable in complex components containing icons, headings, paragraphs, and links. ## Mirroring HTML Structure in Figma - Auto Layout, layout grids, and constraints let Figma layers approximate HTML structure and browser layout behavior. - Matching design and code architecture helps designers and developers share an understanding of what layouts can support. - It also exposes recurring implementation patterns, such as responsive padding and centered max-width containers, which developers can turn into reusable layout utilities. ## Using Variants to Simplify Components - Instead of maintaining dozens of separate components, the team combined options into configurable variants. - A single Badge component could cover type, size, theme, and optional secondary elements. - Variant properties were named consistently with code component properties, using terms such as: - Type - Size - Theme - Position - Breakpoint - State - Variants made components more discoverable and reduced duplication. - The completed kit contained 1,430 components averaging seven variants each; without variants, it would have exceeded 10,000 components. ## Scale and Quality Control - Over several months, the team built and rebuilt more than 1,400 components and 10,000 distinct elements. - The project emphasized detailed auditing and pixel-level consistency, although the provided article excerpt ends before describing that process. The main recommendation is to treat a shared Figma kit like a carefully engineered product: align it closely with the codebase, establish naming and structural conventions early, and use variants to keep a large responsive system manageable.

Figma Design Systems CSS HTML+3

figmaMar 24, 20212 min readCurated summary

Completing a transit map | Figma Blog

Figma invites the community to help complete a digital transit map of the San Francisco Bay Area created in memory of transit advocate Courtney Garg Brousseau. After Courtney’s death, Figma employees recreated his unfinished project from limited reference images, with his family’s permission. The resulting Figma Community file is intentionally open for others to expand, correct, and remix. ## Courtney’s Transit Map Project - Courtney was a passionate public-transit advocate who was building a Bay Area transit map in Figma. - His design was inspired by iconic New York City subway maps. - After learning of his death, Figma worked with his family to preserve and continue the project. - Because the original Figma file was unavailable, Figma rebuilt the map from a small number of images. ## An Incomplete Community File - Figma published the recreated map as a Figma Community file with Courtney’s family’s permission. - The map still contains missing details because the reconstruction was based on limited source material. - The project reflects Figma Community’s collaborative model: people can share existing work and build upon it. - The map is intended for people interested in public transit, cartography, and design. ## How to Contribute Readers can help by: - Opening the transit map in Figma Community. - Clicking **Duplicate** to copy it into their drafts. - Adding to or refining the map. - Publishing their contribution back to the Figma Community. The article also directs readers to information about Courtney’s life, legacy, and nonprofit work. Ultimately, Figma presents the transit map as a collaborative memorial. Designers and transit enthusiasts are encouraged to complete and improve Courtney’s work while keeping his interest in accessible public transportation alive.

Figma Digital Design Figma Community Transit Mapping+1

figmaMar 17, 20212 min readCurated summary

By the numbers: one year of remote work | Figma Blog

Figma’s shift to remote work prompted an experiment to understand how teams collaborate when offline workflows move online. By introducing a template picker with remote-work-focused files, Figma increased collaboration and helped users discover more features and community resources. The findings suggest that curated templates can make remote collaboration easier and encourage broader cross-functional participation. ## Moving Offline Workflows Online - Figma increasingly used its platform for brainstorming, research, team building, and other activities previously handled in person. - The growth team hypothesized that templates designed for remote work could reduce collaboration challenges and increase activity beyond traditional design work. - Figma built a template picker offering blank presets and curated templates, then tested it with a portion of its existing user base. ## Results of the Template Experiment - Users who received the template picker had a **5% higher collaboration rate**, measured by edits or comments in shared files. - The picker improved feature discovery: - **10% more users** discovered frame presets. - **90% more users** used files from the Figma Community when creating files. - The benefits applied to both designers and cross-functional collaborators. - Popular templates covered design-specific activities, such as remote design sprints, as well as broader uses like whiteboarding and team-building. ## Collaboration Across Teams and Locations - After a year of remote work, Figma observed more collaboration across regions and time zones. - Designers worked more closely with cross-functional colleagues. - Teams began involving collaborators earlier in the design process. - User feedback on social media and requests for additional templates indicated that people valued and actively wanted these resources. Figma’s experience shows that thoughtfully curated templates can turn a collaboration tool into a broader virtual workspace, helping distributed teams work together more effectively.

Figma Remote Collaboration Data Science Figma Community+2

figmaMar 8, 20213 min readCurated summary

Behind the feature: comments, contextually | Figma Blog

Figma’s Community comments feature was designed to turn a mostly one-way publishing platform into a space for direct creator–audience communication. The team combined general feed comments with spatial, in-editor-style comments, while carefully adapting interactions to preserve the file-viewing experience. Technical constraints mattered, but the hardest work involved resolving subtle interaction and edge-case decisions. ## Why Community Comments Were Needed - Community users could browse, duplicate, and install resources, but had no straightforward way to contact creators. - Figma wanted the Community to support deeper engagement through questions, feedback, and discussion. - The feature introduced two comment types: - **General comments**, displayed in a feed beneath the file. - **Contextual comments**, attached to specific locations within the design. ## Adapting the Existing Commenting System - The team initially expected to reuse Figma’s existing in-editor comments with minor changes. - They replaced the previous iframe-based file preview to enable communication of viewport information. - They also had to consider performance when files contained many comments. - The larger challenge was interaction design: - Community files traditionally supported one-way creator-to-audience communication. - Comments created a two-way channel between audiences and creators. - Contextual comments required spatial navigation rather than a simple linear feed. - Users needed to inspect comment locations while still being able to pan across the canvas. - The team aimed to encourage commenting without diminishing the existing view-only experience. ## Exploring the User Experience - Engineering, design, and product worked in a close feedback loop. - Designers used animated prototypes and GIFs rather than only static wireframes because commenting depended heavily on interaction behavior. - Explorations considered: - Sidebar comment feeds. - Different ways to embed comments around the viewer. - Mini-viewers and canvas interactions for locating comments. - Prototypes helped the team evaluate ideas against technical feasibility, UI edge cases, and the launch schedule. ## Launch Priorities and Design Decisions The team prioritized three goals: - Make entering the commenting experience quick and intuitive. - Give contextual comments enough surrounding space to understand their position in the file. - Deliver a technically feasible, appropriately simple solution within the project timeline. As a result, contextual comments were limited to fullscreen view, where users had enough space to understand the design context. Clicking the minimized canvas expanded it into fullscreen mode, while clicking and panning were disabled in the smaller preview to avoid compromising the primary browsing experience. The feature ultimately required more than porting existing code: it demanded a new interaction model for combining comments, spatial context, and file browsing. Figma’s approach shows the importance of iterative cross-functional prototyping when adapting a familiar feature to a fundamentally different product environment.

Figma User Interface Interaction Design Iframe+2

figmaMar 2, 20212 min readCurated summary

Inside Figma: tips from the team that builds Figma | Figma Blog

Figma’s team uses the product for far more than interface design, including brainstorming, branding, team activities, and remote research. The post presents practical methods and templates that make creative collaboration more approachable, regardless of design experience. Its central recommendation is to use Figma as an open, flexible space for exploration rather than focusing immediately on finding the “right” answer. ## Figma for More Than Product Design - Figmates across engineering, product, design, and research shared favorite workflows in a livestream. - Topics included: - Keyboard shortcuts and speed tips - Brainstorming exercises - Templates for different skill levels - Blend modes and easing curves - The team also uses Figma for team-building and remote user research. ## Brainstorming with Mind Maps Brand designer Remilla Ty recommends a “mind map sketchbook” for gathering inspiration and exploring creative directions. - **Prompt:** The project name or a statement describing the work. - **Image:** Visual references and sources of inspiration. - **Keywords:** Words connected to the images and the original prompt. - The framework helps teams identify themes and turn them into creative concepts. - Figma used this approach while developing branding directions for Figma Community. - The goal is open exploration rather than judging ideas as right or wrong. ## Lists and Mood Boards A second brainstorming method combines structured prompts with visual references. - **Prompt:** A literal description of the project. - **Beyond:** A more abstract interpretation of the project. - **Look and feel:** The emotions the finished work should create. - Teams extract recurring themes and keywords from the lists. - They then build mood boards using images and color palettes. - The resulting visual direction can be distilled into a concept statement and eventually a brand identity. - Figma used this process for its remote Maker Week branding. ## Creating a More Comfortable Research Environment Researcher Nannearl Brown describes using Figma to make participant activities feel less intimidating. - The research team prioritizes helping participants feel comfortable sharing information. - Participants may receive Figma trading cards as pre-work. - The cards encourage them to introduce themselves and prepare for the session. - Questions cover both Figma-related topics—such as favorite features and use cases—and personal information. The practical takeaway is to use Figma’s collaborative canvas not only for polished design work, but also for low-pressure ideation, visual thinking, and human-centered research.

Figma User Research Remote Collaboration Brainstorming+2

figmaDec 16, 20203 min readCurated summary

Inside Figma: a case study on strict null checks | Figma Blog

Figma enabled TypeScript’s `strictNullChecks` incrementally to eliminate null-related bugs without halting product development. The migration addressed more than 4,000 compiler errors across roughly 1,162 files and helped prevent a class of production incidents. Figma concluded that a progressive, allowlist-based rollout was more practical than either stopping all development or fixing errors indefinitely without enforcing the setting. ## What Strict Null Checks Provide - Without `strictNullChecks`, ordinary types such as `Vector` may also contain `null`, making unsafe property access possible. - With the option enabled: - Non-nullable types cannot be assigned `null`. - Nullable values must be explicitly declared, such as `Vector | null`. - TypeScript uses control-flow analysis to narrow types after null checks. - This prevents errors such as accessing `.name` on `undefined`. - The type system also documents important assumptions, such as whether data has been loaded, making code easier to maintain. - Figma’s historical incident data showed that strict null checks could have caught several high-severity production issues before release. ## Why the Migration Was Difficult - Figma adopted TypeScript before strict null checks existed and had accumulated code that did not satisfy the newer rules. - Enabling the option immediately produced more than 4,000 errors across approximately 1,162 frontend TypeScript files. - Fixing one error could expose additional errors. - Meanwhile, the codebase continued growing—from 376,000 to 464,000 lines during the migration—making a strategy that allowed progress to reverse particularly risky. ## Alternatives Figma Rejected ### Stop-the-World Migration - All engineers could have paused product work to fix the type errors. - Figma rejected this because: - The work was only partly parallelizable. - Product development was strategically important. - Coordinating a company-wide effort becomes increasingly difficult as organizations grow. ### Whack-a-Mole Error Fixing - Teams could fix strict-null errors over time while enforcing the checks only in CI. - This minimizes disruption but permits new code to introduce additional errors. - The approach is viable only if errors are fixed faster than they are added. - Figma found a continually moving progress target unattractive, especially given rapid codebase growth. ## Progressive Allowlisting - Figma chose to strict-null-check one file at a time by adding successfully migrated files to an allowlist. - The approach was inspired by the VS Code team’s strict-null migration. - The build compiles the codebase twice: - Once with strict null checks disabled for the general codebase. - Once with strict null checks enabled for files on the allowlist. - This allowed teams to migrate files incrementally while continuing normal development elsewhere. Figma’s experience recommends progressive enforcement for large, actively developed TypeScript codebases: isolate compliant files, enforce the stricter rules there, and expand the allowlist until the entire codebase is migrated.

TypeScript JavaScript Code Migration Strict Null Checks+1

figmaDec 15, 20202 min readCurated summary

Redesigning Dropbox’s ways of working | Figma Blog

Dropbox’s shift to a virtual-first model required more than moving meetings online; it meant redesigning how teams collaborate and maintain creative energy. Having already adopted Figma, the design team expanded its use from design production to brainstorming, reviews, handoffs, and cross-functional communication. Figma ultimately became a shared visual workspace for teams across Dropbox, helping recreate some of the spontaneity and connection of the physical office. ## The Challenge of Virtual-First Work - Dropbox’s culture and workspaces had been designed around in-person collaboration across twelve global offices. - Design teams relied on physical workshops, post-its, whiteboards, and informal interactions to generate ideas. - Remote work made creative flow and team connection less automatic, requiring more intentional collaboration practices. ## Redesigning Collaboration with Figma - Dropbox’s design organization had migrated from Sketch to Figma in 2018 and already used it for: - Brainstorming - Wireframing - Prototyping - Commenting - During the pandemic, designers increased their reliance on Figma to reduce communication gaps. - Observation mode replaced some in-person design reviews, allowing participants to follow a presenter’s work directly. - Designers shared files for rapid iteration instead of pairing at a desk or brainstorming in a physical room. - Design sprints brought engineers and product managers directly into Figma, making participation easier for non-designers. - Teams also created asynchronous workflows, such as using checkmarks in an icon template to signal that assets were ready for inclusion in the master library. - These file-based processes reduced unnecessary communication and improved the efficiency of recurring library releases. ## Expanding Figma Across Dropbox - The design team became an example of how remote collaboration could work for the broader organization. - Cheechee Lin led workshops teaching cross-functional teams how to navigate Figma and use features such as commenting, exporting, viewing, and following. - More than 200 people from marketing, research, data science, and other teams attended the workshops. - Figma provided a shared visual space that compensated for the lack of physical whiteboards. - Teams beyond design began using Figma for test plans, research presentations, survey data, qualitative insights, and collaborative presentations. Dropbox’s experience suggests that successful virtual-first work depends on deliberately rebuilding collaborative habits, not simply adopting video calls. Making a shared, accessible workspace central to communication can help distributed teams preserve creativity, speed, and cross-functional involvement.

Figma Design Systems Prototyping Remote Collaboration+2

figmaDec 8, 20202 min readCurated summary

Meet us in the browser | Figma Blog

Figma’s five-year journey demonstrates how browser-based software can transform design from a siloed, offline activity into an open, collaborative practice. Although this shift initially threatened designers’ sense of control and identity, the browser’s multiplayer, accessible nature encourages shared ownership and transparency. Field argues that this ethos should extend beyond design to all software and society. ## The Browser as a Radical Bet - Figma launched by betting on the browser rather than traditional desktop software. - The founders were drawn to browser-native values: - Collaboration - Transparency - Accessibility - Figma offered practical benefits such as cross-platform support, multiplayer editing, and a single source of truth for files. ## Why the Change Felt Threatening - Moving design from an offline, single-player experience into a shared browser environment challenged established workflows. - Designers worried that transparency could lead to: - Over-demystification of the creative process - Increased micromanagement - Tighter deadlines - Loss of control over their work - Broader access also raised an identity question: if anyone can design, what does it mean to be a professional designer? ## From “My Ideas” to “Our Ideas” - Collaborative digital spaces encourage teams to treat work as shared rather than individually owned. - This requires trust, transparency, and a willingness to let others modify or remix personal creative work. - Figma’s multiplayer environment makes collaboration part of the process, especially when people might otherwise hide unfinished or blocked work. ## Digital Spaces and Broader Access - The browser represents a larger transition from physical spaces to digital ones, accelerated by COVID-19. - Unlike physical spaces, digital spaces can be open by default and less hierarchical. - Browser-based tools reduce dependence on expensive hardware, specialized software, and restrictive titles or credentials. - Figma aims to make design accessible throughout the entire process, from ideation through production. ## A Broader Software Philosophy - Field sees the browser as more than a productivity improvement; it is a medium for cultural change. - Software makers have a responsibility to make platforms usable by more people, not fewer. - The ideal is to create environments where people can work together, embrace creative messiness, learn from failure, and leave ego aside. The article recommends building software around openness, accessibility, and collaboration. Figma’s experience suggests that browser-native tools can help replace siloed expertise with shared participation.

Figma Collaborative Design Multiplayer Editing Web Browser+1

figmaNov 30, 20202 min readCurated summary

Adding it all up: The math behind designing your career | Figma | Figma Blog

A career is less a predetermined trajectory than a collection of experiments, interests, and opportunities whose meaning becomes clearer in hindsight. Kylie Poppen argues that because work occupies roughly 90,000 hours of our lives, we should actively examine the patterns shaping our choices rather than assume a single “destiny.” Mathematical metaphors—scatterplots and Venn diagrams—offer tools for making more intentional career decisions. ## Careers as Scatterplots - People often describe careers as trend lines, connecting past experiences into a coherent narrative. - In reality, careers are lived as scatterplots: a series of moves between interests, jobs, and opportunities. - The next point cannot reliably be predicted from the current one; clarity usually comes only afterward. - Regularly reflecting on experiences can help reveal a more accurate career trajectory over time. - Work deserves careful consideration because it consumes about one-third of waking life and affects financial stability, purpose, frustration, pride, and identity. ## Finding Meaning Through Overlap - Venn diagrams illustrate how combining different interests can reveal unexpected possibilities and innovations. - Career choices do not need to force a decision between passion and practicality; meaningful work can emerge where hobbies, skills, and interests intersect. - Poppen’s childhood interest in designing posters with CorelDRAW, combined with her passions for storytelling, technology, and people, eventually pointed toward product design. - Her path was not direct: she explored recruiting, marketing, engineering, and project management before gaining the confidence to pursue design. - Mentorship and constructive feedback helped her see design as a craft developed through practice rather than an innate destiny. - Mapping personal interests can uncover overlooked career options and provide confidence to pursue a desired direction. A practical approach is to treat your career as an evolving set of data points, then look for recurring patterns and intersections among your interests, abilities, and experiences. This can lead to more fulfilling choices without requiring certainty about the final destination.

Product Design Data Visualization Human Computer Interaction Coreldraw+1

figmaNov 18, 20202 min readCurated summary

Behind the feature: the making of the new Auto Layout | Figma Blog

Figma’s new Auto Layout evolved from a long-standing idea into a more flexible system for creating responsive designs. The team sought to combine flexbox-inspired power with an approachable interface, defining Auto Layout as “a thoughtful subset of flexbox.” The result was a feature designed to reduce manual resizing while preserving usability for designers who may not know CSS deeply. ## The Need for Automatic Resizing - Before Auto Layout, designers had to manually resize buttons, reposition neighboring elements, and adjust containers whenever content changed. - This repetitive work made responsive design systems difficult to build and maintain. - Figma had considered automatic layout since its early designs, but the concept remained unimplemented until Maker Week in 2018. - During Maker Week, product director Sho reimagined the feature in prototypes, eventually leading to a dedicated team focused on making Auto Layout real. ## Designing a Thoughtful Subset of Flexbox - The team drew inspiration from CSS flexbox because it could help align design workflows with implementation in code. - They intentionally avoided reproducing all of flexbox’s complexity. - Their guiding principle was to create “a thoughtful subset of flexbox” that remained easy to learn and use. - Core capabilities included: - Enabling vertical or horizontal layout on a frame. - Setting spacing between items. - Automatically sizing frames to hug their contents along the main axis. - Allowing fixed or content-based sizing on the counter axis. - Giving individual components independent alignment within their container. ## Prototyping and Team Alignment - The designer, Marcin, built an early prototype entirely in HTML. - The prototype helped the team experience the feature early and resolve interaction details before implementation. - It informed decisions about frame-handle decoration, dragging behavior, and visual outlines. - This shared prototype helped product, design, and engineering align around both the feature’s behavior and its usability. Figma’s approach shows that a successful layout tool does not need to duplicate the full complexity of web technologies. By selecting the most useful flexbox concepts and presenting them through an intuitive editor, Auto Layout made responsive design more practical while keeping the experience accessible.

Figma Design Systems CSS HTML+3

figmaOct 27, 20203 min readCurated summary

Bridging design and code with Variants | Figma Blog

Figma’s Variants feature was created to bring component organization closer to how developers structure reusable code. It combines related component versions into component sets, supports multiple property dimensions, and simplifies switching between variations. The feature’s design was shaped through user research and usability testing, which refined both its interface and its name. ## Bridging Design and Code - Designers need freedom to iterate, while developers prioritize rigor, reuse, and scalability. - Figma identified component management as a major opportunity to connect these workflows. - Existing components were difficult to find, switch between, and organize, especially when systems contained many variations. - Variants was designed to make design-system components resemble their code counterparts more closely. ## Aligning Component Organization with Code - Teams often used forward-slash names such as `default/primary/large/icon` to represent component states and properties. - Variants replaced this workaround with key-value properties, such as: - `state="hover"` - `style="secondary"` - The system supports both simple components and components with multiple dimensions, including state, type, color, and size. - Research showed that design-system managers commonly arranged component variations in grids to compare and maintain them. - Figma therefore allows all variations of a component to be displayed side by side. - Existing component variations can be selected and converted into a component set using “Combine Variants.” ## Refining the Interface Through Usability Testing - Figma built a working prototype and conducted four rounds of usability testing over six weeks. - The initial interface displayed all property values as pills, but users found this confusing because pills typically represent multiple tags or attributes. - Figma changed the interaction to: - Use dropdowns and simple input fields when editing a selected variant. - Retain pills when viewing all properties and values in a component set. - Generic default labels such as “Property 1” and “Property 2” proved clearer than predefined labels like “State” and “Style,” because users understood they should customize them. ## Choosing the Name “Variants” - The feature was initially called “States,” reflecting its early focus on interactive states such as hover, active, and disabled. - User feedback showed that “States” understated the feature’s broader capabilities. - Variants can represent any component property, including type, color, and size—not just interaction states. - Testing confirmed that “Variants” better communicated the feature’s flexibility and scope. Variants, combined with updates to Auto Layout and the Inspect panel, is intended to make design systems easier to organize and easier for developers to interpret. Teams should use component properties and sets to model reusable UI elements in a way that matches both design workflows and code structures.

Figma Design Systems User Experience Auto Layout+2

figmaOct 26, 20202 min readCurated summary

Behind the feature: the hidden challenges of autosave | Figma Blog

Figma’s expanded autosave protects offline edits by persisting pending changes even if the browser tab closes. The feature was difficult because Figma combines large, mutable documents with browser performance limits and real-time multiplayer editing. Rather than repeatedly serializing entire files, Figma chose to store and later replay only the changes made while disconnected. ## Why Whole-File Autosave Was impractical - Figma documents are scenegraphs—trees of layers that can reach tens of megabytes compressed and hundreds of megabytes in memory. - Serializing a large document can take seconds; even an optimized 100 ms operation would cause noticeable stutters because JavaScript and WebAssembly are generally single-threaded. - Splitting serialization across browser frames could reduce blocking, but introduces consistency problems if users edit the document while it is being serialized. - Reading from an immutable scenegraph would solve consistency issues, but adopting immutable data structures would require a major rewrite and could increase memory usage and slow writes. - Replacing a cloud file with an offline backup could overwrite newer edits from collaborators. Keeping the backup as a separate copy would also be problematic for files that act as shared sources of truth, such as design-system component libraries. ## Saving Changes as a Delta - Figma already tracks unsent edits as “deltas” for its multiplayer editing system. - When a document goes offline: - User edits accumulate in an in-memory pending-changes buffer. - The buffer is periodically written to disk. - If the document closes, the changes remain available. - On reload, the changes are applied to the latest document version and uploaded to the server. - This approach avoids serializing the entire scenegraph and naturally preserves newer server-side changes. ## Browser Storage and Granularity - Figma uses IndexedDB because it supports: - Large amounts of browser-side data - Storage in smaller chunks - Database indexes - Transactional operations for data integrity - Pending changes are stored per file and per node or layer as property changes. - This granularity balances storage overhead against redundant disk I/O: finer-grained records reduce unnecessary writes but require more metadata and rows. Figma’s autosave demonstrates that reliable offline persistence is not simply a matter of writing files to disk. For large, collaborative applications, storing incremental changes provides better performance and safer reconciliation than saving and restoring complete document snapshots.

JavaScript Webassembly Autosave Indexeddb+3

figmaOct 19, 20202 min readCurated summary

How Kimberly-Clark brings your favorite paper products into your home | Figma Blog

Kimberly-Clark responded to slowing growth, competition, and rising costs by prioritizing its digital presence. By adopting Figma as a collaborative, browser-based design platform, the company replaced fragmented workflows with a shared source of truth and faster stakeholder feedback. This collaboration produced measurable results, including a 71% increase in signups after redesigning a form. ## Digital transformation at global scale - Kimberly-Clark manages more than 400 consumer websites across 175 countries. - Its digital systems support pricing, manufacturing, distribution, merchandising, sales, and operations. - The company needed a more efficient way to create and localize consistent digital experiences for brands such as Kleenex, Scott, and Huggies. ## Problems with the previous design workflow - Designers spent weeks working individually in proprietary Mac applications. - Files had to be uploaded to separate cloud prototyping tools for review. - Stakeholder feedback created repeated edit-and-review cycles. - Developer handoff was difficult when developers did not use Macs. - These delays slowed the launch of new products and digital experiences. ## Figma as a collaborative design platform - Figma consolidated design, prototyping, feedback, and editing in one browser-based tool. - Files were no longer stored locally, and invited stakeholders could view or edit them easily. - Feedback meetings became real-time working sessions rather than discussions held after designs were completed. - Brand, marketing, design, and other teams could participate directly and see changes immediately. - The approach created a shared “single source of truth” and improved alignment. ## Redesigning for measurable user impact - The UX team tracked metrics such as bounce rates, returning visitors, time on site, and signup rates. - One website’s signup form contained 13 fields because marketing wanted extensive information upfront. - The teams collaborated in Figma to reduce the form to five fields. - After launch, signups increased by 71%. - Faster collaboration helped the company resolve design problems quickly and move products to market sooner. ## Next steps - Kimberly-Clark planned a design system connected across Figma, Storybook, and its code repository. - The company viewed its digital transformation as the beginning of a more design-led phase ahead of its 150th anniversary. The case suggests that collaborative design tools are most valuable when paired with user-focused metrics: they can improve internal workflows while directly increasing customer engagement.

Figma Design Systems User Experience Prototyping+3

figmaOct 14, 20202 min readCurated summary

Learning and failing as a team | Figma Blog

Config Europe highlighted how better products emerge from better teamwork. Figma argues that inclusive processes, cross-functional collaboration, and a willingness to fail openly help teams build more human-centered experiences. The success of its Variants feature demonstrates that iterative testing and diverse perspectives can turn early shortcomings into meaningful improvements. ## Learning Through Collaboration - Figma’s virtual Config Europe conference explored both product craft and team culture. - Sessions covered: - Accessibility-first design - Keeping design aligned with code - Technology ethics - Collaboration and shared failure - The central theme was balancing product function with human feeling while working more effectively together. ## Expanding the Team - UX designer Declan Talbert presents design systems as services for entire product teams, not merely pattern libraries for designers. - An inclusive design system can contain: - UI components - Accessibility guidance - Data resources - Project-management tools - Designers, developers, product managers, and other contributors should all be able to participate. - Broader collaboration and diverse skills lead to more human-centered products and services. ## Failing Together on Variants - Product Manager Kelsey Whelan and Product Designer Nikolas Klein describe shared failure as a major factor in the development of Figma’s Variants feature. - Early testing showed that the feature was powerful but difficult to approach, contradicting the team’s initial assumptions. - Usability testing expanded from a planned couple of weeks into four rounds over six weeks. - Figma invited employees from different roles—including design advocates, product educators, and engineering managers—to participate remotely through Zoom. - Participants identified usability problems and bugs, while a dedicated Slack channel helped coordinate fixes. - Repeated testing made the feature more intuitive and reinforced the idea of “failing forward”: using visible mistakes to improve the product and strengthen team culture. Figma’s practical recommendation is to open product development to more people, test ideas early, and treat failure as shared information rather than individual blame.

Figma Design Systems Accessibility Remote Collaboration+3

figmaOct 12, 20203 min readCurated summary

Reflections on Figma’s inaugural Student Fellowship | Figma Blog

Figma’s inaugural Student Fellowship was created in response to the disruption caused by the COVID-19 pandemic and the shift away from campus-based education. Rather than organizing local meetups, Figma worked with students to build accessible resources, communities, and programs for remote learning and collaboration. Over 10 weeks, the fellowship successfully produced classroom tools, student-focused content, and virtual community experiences while establishing a model for future student programs. ## Rethinking the Student Program - Figma originally planned to make on-campus meetups central to its education efforts. - As students faced remote semesters and uncertain campus plans, the team reconsidered how to support them beyond physical classrooms. - Student conversations focused on: - Recreating classroom and campus collaboration online - Supporting extracurricular projects - Helping educators adapt to new teaching environments - Understanding students’ changing needs - The program centered on classroom resources, student stories, the Virtual Campus Slack Community, and hackathons. ## Setting a Broader Vision - The fellowship aimed not only to ship content but also to establish a foundation for future fellowship programs. - Figma considered how the program could complement: - On-campus student ambassadors - The Friends of Figma community - The broader design ecosystem - The group prioritized resources that were both accessible to students and aspirational. - Although fellows worked across separate workstreams, they operated as a cohesive team and intended their work to reach Figma employees and professional designers as well as students. ## Classroom Resources - The fellows created six classroom templates usable both online and in person. - Examples included: - A research-project toolbox - A playground file for learning Figma’s editor - An assignment-creation template - They also curated a broader collection of community resources to help teachers and students learn, create, and use Figma effectively. ## Student Stories and Career Questions - Conversations with students revealed widespread uncertainty about whether to take a gap year. - Figma responded with a “Back To School?” interview series featuring: - Dylan Field - Marc Andreessen - May-Li Khoe - Karlie Kloss - John Maeda - Laura Deming - The interviews explored gap years, education, and alternative paths through higher education. - Fellow Abigail Africa also published guidance on pitching and presenting, emphasizing audience awareness, confidence, and storytelling. ## Virtual Campus and Camp Figma - More than 1,000 students joined Figma’s Virtual Campus Slack Community during the summer. - The community enabled students to connect, teach, learn, and socialize remotely. - Figma also hosted Camp Figma, a two-day virtual make-a-thon involving hundreds of students across dozens of time zones. - Featured winning projects included FigmAdventure and Slice. ## Overall Impact - The fellowship demonstrated that student programming could extend beyond campus events through digital communities and reusable resources. - Its success gave Figma a practical foundation for developing future fellowships and strengthening its broader education initiatives. - The program also showed the value of involving students directly in designing services intended for their own community.

Figma Prototyping Collaborative Design Slack+2