Figma Design Breakdown: Designing a Tool for Designers

Reviewed by Yusuf, Lead Designer at 925Studios

Designing a tool for designers is one of the hardest product challenges that exists. Your users notice every inconsistency, every misaligned pixel, every interaction that does not feel right. Figma has 13 million monthly active users and holds 40.65% of the collaborative design software market (Cropink, 2026), which means it has largely won the category while being judged daily by the most critical audience in software. Studying how Figma designs its own product reveals patterns that apply far beyond design tooling.

TL;DR:

• Figma's UI3 redesign moved the toolbar to the bottom of the screen to free up canvas space and unify muscle memory across all Figma products

• The multiplayer cursor system uses CRDTs and treats presence as a social feature, not a technical necessity

• The properties panel is now context-sensitive and resizable, showing only controls relevant to the current selection

• Two-thirds of Figma's 13 million users are non-designers, which shapes every onboarding and navigation decision

• Figma's floating panel experiment failed and was reversed, a transparency-about-product-decisions moment worth studying

Quick Answer: Figma's design excels at canvas clarity (toolbar moved to bottom in UI3, full panel collapse via Shift+\), real-time collaboration UI (named color-coded cursors built on CRDT technology), and context-sensitive panels that reduce noise. Their weakest decisions involve accessibility: UI3 shipped with typography many users called unreadably small, and Figma Sites launched without any accessibility tooling for the websites it produces. 90% of designers choose Figma (Electroiq, 2025), but the honest critique is that speed of shipping has occasionally outpaced polish.

What is Figma and why is it worth studying as a design case?

Figma launched in 2016 as a browser-based alternative to Sketch, with one defining bet: design tools should be collaborative by default, not collaborative as an add-on. That bet paid off. As of early 2025, Figma has 13 million monthly active users, with monthly web traffic growing from 4.68 million visits in January 2024 to 6.69 million in January 2025 (SQ Magazine, 2025). Adobe attempted to acquire Figma for $20 billion in 2022 before the deal collapsed under regulatory pressure in 2023, which is the clearest possible signal of how thoroughly Figma had redrawn the competitive landscape.

What makes Figma unusually interesting to study is who its users actually are. Two-thirds of its 13 million MAU are not designers. They are product managers, engineers, executives, and stakeholders who use Figma to review work, leave comments, inspect specs, and understand what is being built. Figma has to be simple enough for someone opening it for the first time to follow a link and leave a comment, while simultaneously being powerful enough for a professional designer who lives in it eight hours a day. That dual-audience constraint drives almost every major design decision the Figma product team makes.

At 925Studios, Figma is the primary tool across every client engagement. We have watched clients, from non-technical founders to senior engineers, navigate the same file. The patterns that confuse and the patterns that work are immediately visible when you watch diverse users in the same interface.

How does Figma reduce visual clutter on the canvas?

The canvas is Figma's core product surface. Every design decision that reduces chrome around the canvas directly increases the usable workspace and the designer's ability to focus. Figma's most significant canvas decision in recent years was moving the toolbar from the top of the screen to the bottom in the UI3 redesign, rolled out fully in October 2024.

The stated rationale from the Figma design team was threefold: free up vertical canvas space, standardize muscle memory across Figma Design, FigJam, and Figma Slides (all now share the bottom toolbar), and make the tool bar feel less like a traditional desktop application and more like a creative surface. Moving UI controls to the bottom is not a new pattern, mobile interfaces and video editors have used it for years, but it was a meaningful break from the desktop design tool convention that Sketch and Adobe XD established.

Beyond the toolbar position, Figma gives users complete panel collapse via Shift + backslash. Both the left navigation panel and the right properties panel disappear, leaving only the canvas. This is the "focus mode" that designers reaching for distraction-free work actually use, and it is a single keystroke rather than a buried menu setting. The decision to make it a keyboard shortcut rather than a UI toggle reflects Figma's assumption that the users who want this feature are power users who prefer keyboard-first interactions.

The layers panel uses hover-reveal for visibility and lock controls, a pattern worth noting. The controls exist but are invisible until you hover over a layer row. This reduces the visual density of the panel significantly, since most of the time those controls are not needed. The tradeoff is discoverability: new users do not know the controls are there until they accidentally hover in the right place. Figma accepts this tradeoff because the layers panel is primarily a power-user surface.

Want to see how canvas-first design thinking applies to product dashboards and data-heavy interfaces? See how we apply these principles in our client work.

How does Figma design for real-time multiplayer collaboration?

Figma's multiplayer system is the product's most technically complex feature and, arguably, its most thoughtfully designed one. When multiple users are in the same file, each person gets a named, color-coded cursor that other users see moving across the canvas in real time. The cursor shows the user's name and follows their pointer with sub-second latency. This is the core of Figma's collaboration model: you can see exactly where your colleague is looking and what they are doing, without any explicit "share screen" action.

The underlying technology uses CRDTs (Conflict-Free Replicated Data Types) rather than Operational Transforms, a deliberate simplicity decision Figma documented on their engineering blog. The Figma team reasoned that because their users are not editing the same text character by character (as in Google Docs), the full complexity of OT was unnecessary. CRDTs allow each user's changes to be applied independently and then merged without conflicts, which keeps the system fast and predictable. Cursor positions are throttled and batched before broadcast to keep rendering smooth even with many simultaneous users.

The design decision worth studying is how presence is framed. Figma treats the visible cursors as a social feature, not just a technical one. Seeing colleagues' cursors moving is intentionally visible and warm, not noise to be minimized. Users can wave their cursor by moving it in rapid small circles to get a colleague's attention. Pointer position becomes a communication channel. This is a fundamentally different philosophy from tools that hide collaborative activity to avoid distraction. Figma's bet was that visible presence increases the feeling of working together, and the adoption data suggests it was right.

Figma's own blog noted that multiplayer "actually reduced overall complexity of Figma's UX" because it replaced the awkward file-locking and version-conflict workarounds that plagued earlier desktop design tools. By making simultaneous editing the default rather than an edge case, Figma eliminated an entire category of friction that its predecessors had to design around.

How does Figma's properties panel adapt to context?

The right panel in Figma is one of the more technically complex UI problems in the product: it needs to show relevant controls for any possible selection state, from a simple rectangle to a deeply nested component with dozens of overrides and variable bindings. UI3 introduced a context-sensitive approach where the panel groups properties by the current selection and shows a header row of contextual action buttons that change based on what is selected.

Variable access is a specific example worth noting. Before UI3, accessing variables required a specific flow inside the properties panel. After the redesign, variable access moved to the navigation bar, making it reachable at any time regardless of what is or is not selected on the canvas. This change reflects a broader principle: tools that are used constantly should not require a particular context to access. Elevating high-frequency actions out of modal or selection-dependent flows is one of the core patterns behind Figma's navigation overhaul.

The layers panel in the left sidebar operates on a similar hierarchy-with-hover-reveal pattern: the tree of objects is always visible, but destructive or mode-changing controls (lock, hide) only appear on hover. This keeps the panel scannable when you are just looking at structure, and actionable when you are making changes. The cost of this pattern is that the controls are not spatially stable, because they appear and disappear based on pointer position, which can feel imprecise on trackpads at small sizes.

How does Figma onboard 13 million users across two very different audiences?

Figma's onboarding challenge is unusual: it needs to work for a professional designer who has just switched from Sketch, a product manager who has never opened a design tool, and an engineer who needs to inspect specs for a component. These three users have completely different mental models and goals. A designer wants to know where their Sketch shortcuts map. A PM wants to know how to leave a comment. An engineer wants to find the CSS values for a button.

Figma's solution is an opt-in onboarding modal that focuses specifically on the product's differentiators. The tour does not try to explain every feature. It highlights the things Figma does differently: real-time collaboration, component libraries, and design system management. Each tooltip in the sequence pairs concise copy with an animation demonstrating the feature, a pattern from Appcues's Good UX analysis of Figma's onboarding. Where features are complex, the tooltip links to the Help Center rather than trying to explain inline. The philosophy is clear: keep the initial experience short and focused, let supplementary resources carry depth for users who want it.

The non-designer audience is served primarily through the comment mode and the inspection panel. Comment mode is accessible without any design training, it works like leaving a note on a Google Doc. The inspection panel shows CSS values and design tokens in engineering-readable format. These two surfaces are essentially separate product experiences layered over the same file, designed to make non-designers feel capable without overwhelming them with editor controls they do not need.

What does Figma's floating panel reversal teach us about product decisions?

The UI3 story is one of the most instructive product decision sequences in recent software history. Figma shipped the UI3 redesign in open beta with floating panels, meaning both the layers panel and the properties panel were detached from the edges and could be repositioned freely on the canvas. The intent was to give designers more control over their workspace layout.

Users reported two specific problems: on smaller screens, the floating panels cramped the canvas and reduced usable workspace. And because panels floated in front of the canvas, rulers (which appear at the canvas edges) became visually disconnected from the designs they were measuring. A member of the Figma design team documented the reversal decision directly: "The nail in the coffin was learning that they slowed people down." For the full rollout, panels reverted to fixed docked positions, though they are now resizable to allow some degree of workspace customization.

The lesson is not that floating panels are wrong as a pattern. It is that flexibility at the cost of speed is a bad trade for professional-use tools. Figma's users are not casual visitors. They are in the tool for hours at a time, and any interaction that adds even a small amount of friction to a high-frequency task compounds into significant frustration over a week. The Figma team's stated principle, "Speed is a feature" - reflects an understanding that performance, both technical and interaction-level, is a design decision, not an engineering detail.

Yusuf breaks down how this speed-first design principle applies to SaaS dashboard and editor interfaces on the 925Studios YouTube channel, with examples from tools outside the design space.

What can you borrow from Figma's design for your own product?

Hover-reveal for low-frequency controls: If your product has action controls (delete, archive, configure) that are used occasionally but not constantly, hiding them behind hover reduces visual noise significantly without hiding functionality. The layers panel pattern works because users who want the control know to look for it.

Presence as a social signal: If your product involves any collaborative or shared-state interaction, making user presence visible, who is viewing what, who is working where, can increase the feeling of working together rather than working in parallel. This is why products like Notion, Linear, and Loom have adopted similar presence indicators.

Opt-in onboarding focused on differentiators: Figma's tour does not explain everything. It explains what makes Figma different from what the user probably used before. If your product has a clear incumbent it replaces or improves on, build onboarding around the moments of difference, not the full feature map.

Keyboard shortcuts for power-user flows: Shift + backslash for panel collapse is not discoverable for new users. It does not need to be. It exists for the users who will find it, and finding it feels like a reward. Build discoverability layers for new users, but do not sacrifice the power-user experience to make every feature equally obvious to everyone.

Test interactions at high-frequency scale: The floating panel reversal happened because the panels slowed users down. The slowdown was small per interaction but catastrophic at professional-use frequency. Any interaction your power users perform dozens of times per session deserves disproportionate optimization attention.

When we design product tools and SaaS dashboards for clients at 925Studios, these are the patterns we reach for first: presence systems, context-sensitive controls, and hover-reveal for secondary actions. They consistently reduce cognitive load without reducing capability.

What did Figma get wrong?

UI3 typography accessibility: The UI3 redesign shipped with significantly smaller and thinner typography than UI2. Forum threads titled "Forcing UI3 on us is a HUGE mistake" accumulated hundreds of responses, with the most consistent complaint being readability, specifically that the interface was difficult to use for designers with any degree of visual impairment or for extended work sessions. A tool used by 13 million people needs to meet baseline accessibility standards in its own interface. Shipping with typography that generates this volume of accessibility complaints, before a mandatory migration deadline, is a meaningful oversight from a team that should understand this better than most.

Figma Sites launched without accessibility tooling: When Figma Sites launched in 2025, it let users publish websites directly from Figma files. The announcement did not mention accessibility once. There was no mechanism to give accessible names to icon buttons or images, no alert about untagged elements, no semantic HTML output guarantees, and no pre-publish checklist for content accessibility. A UX Collective analysis documented this in detail, noting the specific gaps: missing alt text workflows, no heading structure verification, no ARIA label support for interactive elements. A tool that publishes production websites and is used by professional designers has a responsibility to surface accessibility requirements at publish time, not leave them invisible. This was a shipping decision that prioritized the headline feature over the standards the design community itself advocates for.

Properties panel spatial instability: A documented complaint from the UI3 forum is that property inputs appear selected when they have not been interacted with, creating ambiguity about current state. Panel layout also shifts depending on component complexity, so the spatial position of controls changes between different selection types. When professional designers build spatial memory around a tool's interface, layout instability in a high-frequency panel is a real productivity cost. This is an ongoing area of refinement, but worth naming honestly.

Frequently Asked Questions

Why did Figma move the toolbar to the bottom in UI3?

Figma moved the toolbar to the bottom of the screen to free up vertical canvas real estate and to unify muscle memory across all Figma surfaces: Figma Design, FigJam, and Figma Slides now share the same bottom toolbar position. The move also visually positions tools closer to where designers typically work on the canvas, reducing the distance the eye travels between the toolset and the work.

How does Figma's multiplayer system handle conflicts when two users edit the same element?

Figma uses CRDTs (Conflict-Free Replicated Data Types) to handle simultaneous edits. Because Figma is not a text editor, it does not need the full complexity of Operational Transforms (used in Google Docs). CRDT allows each user's changes to be applied independently and merged without conflicts. For true simultaneous edits to the same property by two users, the last write typically wins, with the change reflected immediately across all connected clients.

What percentage of Figma users are designers?

Only about one-third of Figma's 13 million monthly active users are professional designers. The remaining two-thirds are product managers, engineers, executives, and other stakeholders who use Figma primarily for review, comment, and inspection rather than creation. This shapes Figma's product priorities significantly, including the decision to keep comment mode simple and the investment in the developer-facing inspection panel.

What is the Figma UI3 redesign and what changed?

UI3 is Figma's major interface redesign rolled out fully in late 2024. Key changes: the toolbar moved from the top to the bottom of the screen, the properties panel became context-sensitive and resizable, variables moved to the main navigation bar for constant accessibility, and the assets, plugins, and find-and-replace tools were consolidated into the left nav rather than scattered across modals. Floating panels were tested in beta but reverted before full launch due to performance concerns.

Is Figma accessible for designers with visual impairments?

This is an area where Figma has received legitimate criticism. The UI3 redesign shipped with smaller, thinner typography that many users reported as difficult to read, particularly for extended work sessions or for users with any degree of visual impairment. Figma has continued iterating on this, but the initial rollout generated significant accessibility feedback that the team acknowledged. The tool also lacks some accessibility workflow support for the websites produced by Figma Sites.

How does Figma onboard non-designer users effectively?

Figma's onboarding for non-designers relies primarily on two surfaces: comment mode, which works like leaving notes on a Google Doc and requires no design training, and the inspect panel, which shows CSS values and design tokens in engineering-readable format. The initial product tour focuses on differentiating features rather than comprehensive training, with each tooltip pairing concise copy with an animation and linking to Help Center articles for users who want more depth.

What design patterns does Figma use in its own interface?

Key patterns: hover-reveal for secondary controls (visibility and lock icons in the layers panel only appear on hover), context-sensitive right panel (controls change based on current selection type), keyboard-first power-user features (Shift+backslash for panel collapse), presence as a social signal (named colored cursors visible to all collaborators), and progressive disclosure in onboarding (short tour that links out rather than explaining everything inline).

What can SaaS products learn from Figma's floating panel reversal?

The floating panel experiment failed because flexibility added friction at professional-use frequency. The lesson is that for tools used intensively by power users, interaction speed and spatial predictability outweigh customization options. Small friction per interaction multiplies into significant productivity loss over a work day. When Figma's team measured the impact and found floating panels slowed users down, they reversed the decision publicly and explained why, a model for how product teams should handle reversals.

If you are designing a product tool, a dashboard, or any interface where professional users spend hours daily, reach out to 925Studios. We design for power-user performance, not just first-impression clarity.

If you're building a product and want a second opinion on your UX, talk to 925Studios. We work with SaaS, fintech, healthtech, web3, and AI startups.

See our work or book a free 30-minute call.

Follow us on Instagram and YouTube for design breakdowns and case studies.