Figma

532 posts

figma2 min readCurated summary

The Best Advice to Bring to Work in 2025 | Figma Blog

The article gathers practical workplace advice from leaders at Ableton, Snapchat, Coda, and other companies. Their principles emphasize finding inspiration beyond familiar sources, automating low-value work, shortening users’ path to meaningful results, designing meetings around clear purposes, and maintaining momentum through difficult work. Together, they argue that effective work depends less on rigid formulas than on experience-based judgment. ## Look Beyond Design for Inspiration - Pablo Sánchez of Ableton recommends drawing ideas from emotions, memories, science, nature, and other fields—not just existing design conventions. - Designing for yourself first can produce work with genuine personal energy that resonates with users. - Ableton’s Note app borrowed from Brutalist architecture rather than traditional music software, creating a stripped-down experience focused on immediacy. ## Automate Work That Gets in the Way - Product managers should focus primarily on understanding customers, delivering value, and enabling sound decisions—not perfecting internal artifacts. - When documentation, reviews, or OKRs consume as much time as product development, teams should delegate or automate them. - Peter Yang uses AI to synthesize brainstorms, summarize customer feedback, and improve product requirement documents. ## Accelerate Users’ Time to “Magic” - Products should help new users reach their first meaningful “aha moment” quickly instead of overwhelming them with tutorials. - The goal is to move people from following instructions to confidently creating and sharing something of their own. - Snapchat’s Lens Studio team mapped the user journey and reduced the path from download to first submitted project from 19 steps to four milestones. ## Cultivate Different Types of Meetings - Coda’s Shishir Mehrotra distinguishes three meeting categories: - **Cadence meetings:** Regular staff meetings, standups, and syncs that track progress against goals. - **Catalyst meetings:** Decision-making forums, product reviews, and design critiques that resolve questions and drive change. - **Context meetings:** All-hands meetings, off-sites, and orientations that share information, establish context, and build connections. - Teams need a healthy balance, since too many catalyst meetings can cause burnout. ## Keep Moving Through Difficult Work - Dan Mall compares difficult progress to the tedious parts of training that are usually omitted from an exciting montage. - His advice is to build momentum to counteract the discouragement and monotony that can accompany worthwhile goals. The broader recommendation is to focus attention on meaningful outcomes: use unconventional sources of inspiration, remove unnecessary effort, guide users quickly toward value, give meetings a clear purpose, and keep building momentum when progress feels slow.

Read original(opens in new tab)
figma2 min readCurated summary

27 FigJam Activities to Spark Creativity in the Classroom | Figma Blog

FigJam’s collaborative canvas can make classroom participation more inclusive, creative, and engaging across subjects. The post presents 27 adaptable activities that use sticky notes, drawings, widgets, and shared templates to support community-building, discussion, problem-solving, creative breaks, and assessment. Its central conclusion is that familiar teaching activities become more interactive when students can contribute visually and collaboratively. ## Building Classroom Community - Icebreakers help students share interests, personalities, hobbies, dreams, and favorite subjects. - “Let me introduce myself” activities use sticky notes, stickers, and sketches. - Scavenger hunts prompt students to find classmates with shared experiences or interests. - A virtual “shoe rack” lets students express their individuality creatively. - FigJam tools such as drawing, voice recordings, and photobooths give students multiple ways to participate and connect. ## Making Language and History Come Alive - Shared canvases turn reading and historical analysis into group activities rather than isolated assignments. - Students can visualize character relationships, track plot developments, and discuss themes together. - Templates such as book chats support collaborative literary discussion. - History activities can encourage students to debate perspectives and investigate events collectively. ## Visualizing STEM Concepts - FigJam activities help students represent abstract scientific, mathematical, and technical ideas visually. - Collaborative diagrams, notes, and sketches can support group problem-solving. - The flexible canvas allows teachers to adapt activities for different subjects and grade levels. ## Taking Creative Brain Breaks - Short, playful FigJam exercises can reenergize students between lessons. - Drawing, visual prompts, and collaborative challenges provide a creative change of pace. - These breaks maintain engagement while still encouraging communication and imagination. ## Checking Understanding Together - Teachers can use shared templates to see how students are processing a lesson. - Students can contribute answers, questions, reflections, and visual explanations in one collaborative space. - Group responses make misconceptions easier to identify and create opportunities for peer discussion. Overall, the post recommends using FigJam as a flexible classroom workspace rather than limiting it to presentations. Its free education access and adaptable templates make it suitable for teachers who want more inclusive, participatory learning activities.

Read original(opens in new tab)
figma2 min readCurated summary

Updates to our pricing, seats, and billing experience | Figma Blog

Figma announced changes to pricing, seat types, and billing workflows taking effect March 11, 2025. The company is raising prices for Figma Design, consolidating seat management, and giving administrators advance approval over paid seat upgrades. The changes are intended to improve billing visibility while allowing users temporary access during approval. ## New Pricing and Seat Structure - Figma Design prices will increase, with changes applying to Full seats. - Existing plans will transition to four seat types: - Full - Dev - Collab - View - Paid seats will include access to FigJam and Figma Slides. - The free Starter plan will remain available. ## Admin Approval for Seat Upgrades - Previously, users could trigger seat upgrades and admins reviewed them afterward. - Under the new model, paid seat upgrades will require admin approval by default. - Admins will manage one seat per user rather than separate seats for each product. - Users can temporarily access the requested seat for up to three days while approval is pending. - During this period, they can create files and edit files where collaborators have granted edit access. - Approved seats will appear on the next invoice, prorated from the approval date through the end of the subscription period. ## Migration and Timing - Existing plans will migrate to the new seat structure and approval workflows beginning March 11, 2025. - Full-seat price increases and updated proration rules will apply at the first renewal on or after that date. - Figma says existing customers will receive additional details by email. ## Connected Projects for Freelancers and Agencies - The billing changes prepare the way for Connected Projects, planned for later in 2025. - Freelancers and agencies will be able to collaborate with clients using their existing seats. - This is intended to eliminate the need to purchase licenses across multiple plans for client collaboration. Organizations should review their seat assignments and establish an approval process before the March 2025 migration.

Read original(opens in new tab)
figma2 min readCurated summary

The Long and Short of It: Issue no.8 | Figma Blog

Figma’s Issue No. 8 reflects on how its community shaped the company’s 2024 releases and culture. The year included 180 product updates, a major Config conference, expanded tools for developers and product teams, and a refreshed brand identity. The central message is that Figma builds products through continuous dialogue with the people who use them. ## A Year Shaped by the Community - Figma published 180 new releases in 2024. - More than 10,000 people attended Config. - Over 220 Friends of Figma groups operated worldwide. - The company emphasizes that users do more than receive new features: they influence how those features evolve in practice. ## Expanding Figma’s Products - Figma refined its UI3 interface to give users more control. - AI tools were reworked with a more deliberate approach. - Dev Mode was enhanced to improve connections between design and code. - Figma Slides was launched to support presentations and give design work a broader stage. - The company highlights that the design process continues after launch, when users apply new tools to real workflows. ## Config and the Future of Product Building - Config 2024 was Figma’s largest conference yet, held in San Francisco with more than 10,000 attendees. - Figma points readers toward talks and advice from Config speakers. - Featured guidance focuses on creating memorable presentations and sessions that genuinely inspire audiences. - Early-bird tickets for Config 2025 were already available. ## A New Brand and Web System - As Figma expanded toward developers, marketers, and broader product teams, it updated its visual identity. - The redesign introduced a new typeface and a refreshed brand system. - Figma used its own tools to audit and rebuild its web system. - The process included streamlining components, improving workflows, refining variables and styles, and preparing the system for future growth. ## Design Inspiration and Cross-Functional Collaboration - Community templates for Figma Slides offer ways to create more engaging presentations. - Ableton Note designer Pablo Sánchez shares seven principles for designing surprising and memorable digital experiences. - One North’s Nick Villapiano argues that developers should participate actively in design rather than treating design as a handoff. - These examples reinforce Figma’s broader view that design is collaborative and extends across disciplines. Figma’s year-end message is ultimately a recommendation to keep building in conversation with users. Product launches, brand systems, developer workflows, and community events become more valuable when people actively shape how they are used.

Read original(opens in new tab)
figma4 min readCurated summary

Figma 2024: We shipped it, you shaped it | Figma Blog

Figma’s 2024 product work was driven by community feedback, spanning 180 releases, UI3, AI tools, performance improvements, and new workflows for moving from concept to delivery. The company’s central conclusion is that meaningful progress comes from reducing friction while preserving designers’ existing habits. Community input shaped both major launches and small refinements across Figma, FigJam, and Figma Slides. ## UI3: Putting the Work Front and Center - Figma redesigned its interface for the first time substantially since 2019, updating typography, layout, colors, icons, labeling, and panel behavior. - Early UI3 testing revealed that floating panels disrupted users’ speed and daily workflows. - Based on feedback, panels became docked and resizable, while users could hide panels to maximize canvas space. - The eyedropper was upgraded to reuse styles and variables, switch between color formats, and create new styles or variables. ## Improving Core Design Workflows - Multi-edit simplified making changes across multiple designs. - Typography improvements added support for italic, bold, underline, underline styling, mixed paragraph spacing, and better local-font detection. - File organization improved through pinning, enhanced search filters, page dividers, and split tabs. - Drafts, content transfers, and file-moving workflows became easier for teams working across organizations. - “Suggest Auto Layout” helped users make designs more responsive. - Figma also introduced playful retro cursors inspired by DOS, Y2K, skeuomorphism, and Windows Vista. ## Performance, Collaboration, and Administration - Dynamic page loading made large design files more manageable. - Memory optimization and a revamped memory-management system improved performance in large files. - Multiplayer collaboration became smoother and more reliable. - Admin tools received new sidebar navigation and a dedicated content-management tab. - Infrastructure improvements included EU-localized file hosting, better support for large asset libraries, and stronger Enterprise security controls. ## AI Features That Reduce Friction - Visual search lets users find designs by uploading an image or selecting part of the canvas. - Asset search understands context instead of relying only on exact component names. - AI-assisted layer renaming improves file organization. - Replace Text Content generates realistic copy, while Rewrite, Translate, and Shorten help revise text. - Make an Image enables image creation and editing directly on the canvas, and Remove Background isolates subjects without requiring another tool. - FigJam’s AI mindmaps became a popular way to explore ideas and visualize connections. - Figma AI can turn a FigJam board into a Figma Slides outline and generate presenter notes. - First Draft, formerly Make Designs, was redesigned to help users move from an idea to an initial design. It was in limited beta, with planned support for custom libraries and deeper integration with existing design systems. ## Moving from Work in Progress to Shipping - Figma continued expanding tools intended to connect design work with development and presentation. - Dev Mode and Code Connect aimed to reduce developer context switching by translating design components into code. - Figma Slides supported creating high-fidelity presentations, extending Figma’s workflow beyond interface design. - The broader goal was to help teams move more smoothly from early concepts to implementation and delivery. ## Community-Led Product Development - Figma reported 10,000 Config attendees and more than 220 Friends of Figma groups worldwide. - Product decisions were shaped through beta testing, user conversations, and feedback from individual designers and organizations. - The company emphasized thoughtful AI development: AI should help express ideas and remove tedious work without replacing designers’ judgment. - Community members influenced both flagship features such as UI3 and First Draft and smaller quality-of-life improvements. Figma’s 2024 updates show a strategy focused on practical acceleration rather than novelty alone: improve the fundamentals, apply AI where it removes real friction, and build stronger bridges between design, development, and presentation. For teams, the most valuable improvements are likely the cumulative ones—better organization, faster search, stronger performance, and workflows shaped directly by how people already work.

Read original(opens in new tab)
figma3 min readCurated summary

The Making of the Figma Pattern Library | Figma Blog

Figma rebuilt its internal design system during the UI3 redesign after years of growth had produced inconsistent components, detached instances, and a fragmented workflow. The resulting Figma Pattern Library (FPL) was created through close designer-engineer collaboration and uses variables, APIs, and shared standards to keep design intent aligned with shipped code. Its goal is to provide both a reliable source of truth and a flexible foundation for building consistent, accessible products across Figma’s product suite. ## Why Figma rebuilt its design system - Figma’s internal system had become increasingly fragmented as the company and product portfolio expanded. - Components that were intended to be identical had accumulated subtle but important differences. - Detached component instances made consistency difficult to maintain. - The upcoming UI3 rollout made these problems impossible to ignore. - The team needed a foundation that could support consistent, efficient development across all Figma products. ## A paired design-and-engineering approach - A five-person team of designers and engineers led the rebuild. - The team modeled its workflow on pair programming: - One discipline would actively build. - The other would review and provide immediate feedback. - This collaboration helped bridge the gap between design intent and technical implementation. - The system was designed to be both: - A source of truth for shared UI decisions. - A springboard for future product development. - The effort resulted in the new Figma Pattern Library, or FPL. ## Using variables as a shared language - The previous system relied on Figma styles for designers and a separate Google Sheet for engineers’ color tokens. - Because the spreadsheet often lagged behind product changes, designs and production code diverged. - FPL replaced this disconnected process with Figma variables and the Figma REST API. - Typography variables were introduced and aliased through existing typography styles. - Color styles were migrated to color variables as a centralized source of truth. - CSS definitions were added to color variables so Dev Mode could display the correct variable names during inspection. ## Primitive and semantic color systems - FPL organized colors into two main variable collections: - **Primitive variables:** Color ramps organized by hue and numbered from 100 to 1000. - **Semantic variables:** Contextual names based on Figma’s dark-mode schema. - Semantic variables support multiple themes and products, including: - Light and dark modes. - Figma Design. - FigJam. - Slides. - Dev Mode. - Semantic variables alias primitive variables, allowing colors to be changed across themes and products without manually updating every component. - This structure enables shared components to adapt to different contexts while preserving visual consistency. The practical lesson is that a scalable design system requires more than a component library: it needs shared ownership, synchronized design and engineering tokens, and variable-based foundations that can support multiple products and themes.

Read original(opens in new tab)
figma2 min readCurated summary

Why Devs Should Play an Active Role in Design | Figma Blog

Developers should participate actively in design rather than treating design files as read-only specifications. Nicholas Villapiano argues that Figma’s Dev Mode reduces friction, improves confidence, and creates a shared workflow between designers and developers. Teams should advocate for these tools because they understand day-to-day collaboration problems better than management often does. ## Shared Tools Create a Common Language - Dev Mode gives developers a dedicated space within Figma instead of forcing them to work cautiously in designer-oriented files. - It treats developers as contributors to the product process, not merely implementers of finished designs. - Figma’s Auto Layout offered an early example of shared understanding by resembling CSS Flexbox and making designs behave more like responsive web layouts. - Dev Mode extends that connection into a broader framework for collaboration between design and engineering. ## Developers Should Advocate for Better Workflows - Managers may not see the practical pain points developers encounter when translating designs into code. - Developers already advocate for change through GitHub issues, pull requests, and technical discussions, so they should apply the same behavior to design and collaboration tools. - Useful opportunities to raise these needs include one-on-ones, sprint retrospectives, and team meetings. ## Exploring Designs Without Fear - Dev Mode is read-only by default, preventing accidental edits or deleted work. - This works much like branch protection on `main`: developers can investigate freely without risking the source file. - Greater confidence encourages developers to explore designs instead of avoiding or cautiously navigating them. ## Comparing Design Changes Clearly - Dev Mode provides version history and visual comparisons similar to Git commit history and pull requests. - Developers can see what changed, when it changed, and who made the change. - Differences become an actionable checklist, such as updating copy, adjusting margins, or adding a component variant. ## Reducing Context Switching - Developers often lose time switching between design files, documentation, and code. - Dev Mode and related tools such as Code Connect aim to bring implementation details closer to the design workflow. - Centralizing relevant information can reduce the “tab-switching tax” and make design-to-code work more efficient. ## Practical Recommendation Developers should actively evaluate and promote shared design-development tools like Dev Mode. By creating safer exploration, clearer change tracking, and a common language around implementation, teams can improve productivity, collaboration, and morale.

Read original(opens in new tab)
figma2 min readCurated summary

8 Ways to Craft an Unforgettable Config Talk | Figma Blog

The post presents memorable Config talks as a source of inspiration and a practical rubric for future speakers. Its central lesson is that standout presentations challenge conventional thinking, tell a personal story, and show genuine care for the people affected by the work. The excerpt focuses on taking creative risks rather than blindly following industry best practices. ## Taking Risks and Rejecting Convention - Josh Wardle’s talk, **“Opting for the opposite,”** explains how he created Wordle by deliberately ignoring common growth tactics. - Wordle: - Could be played only once per day. - Did not link back to the game when shared. - Was built as a personal gift for Wardle’s partner, not as a viral product. - The talk resonated with Config speakers because it demonstrates that: - Simplicity can outperform metrics-driven optimization. - Conventional wisdom is not always appropriate for a specific audience. - Building with deep care for users can matter more than maximizing engagement. - The broader message is to show how a meaningful product decision emerged from a willingness to do things differently. ## Creating an Inspirational Presentation - The article frames memorable talks as more than informational sessions: they should change assumptions and leave audiences thinking differently. - Other referenced Config sessions include: - **“An Infinite Canvas,”** by Linda Dong and Mike Stern, about spatial-computing design. - A discussion between George Kedenburg III and Humane co-founder Imran Chaudhri about the development and vision of the Ai Pin. - These examples suggest that strong talks combine: - A distinctive perspective. - A compelling story about the work. - Clear attention to users and real-world impact. When preparing a Config talk—or any presentation—focus on a genuine insight or unconventional decision, explain the reasoning behind it, and connect it to the people you are building for.

Read original(opens in new tab)
figma2 min readCurated summary

Updating Our Web System For A New Era | Figma Blog

Figma refreshed its web design system to support the company’s evolution from a single design tool into a broader platform for product teams. The previous system had accumulated overly similar components, inflexible colors, and typography that no longer suited its content. By auditing real-world usage and simplifying its component library, Figma created a more focused, flexible foundation aligned with its new brand. ## Why the Web System Needed to Change - Figma’s 2020 website was designed primarily to introduce a new design tool. - By 2024, Figma had expanded into a platform serving many kinds of product teams. - The existing system had begun to create friction: - Many components differed only slightly, making selection difficult. - The color system could not accommodate the evolving brand palette. - Typography was not flexible enough for the range of content Figma now produced. - The brand refresh—including Figma Sans, a new color palette, and a revised illustration style—created an opportunity to update the website system as well. ## Auditing and Simplifying Components - The Web Experience team created a script to measure: - Which components were being used - How frequently they appeared - Which pages used them - The audit exposed unnecessary complexity and opportunities to consolidate similar options. - The “Flex” component had grown to 48 variants over time. - After reviewing actual usage, Figma reduced it to 24 variants while preserving its essential functionality. - The team removed centered text as an option and established left alignment as the default across the web system. - The resulting property panel was more focused, easier to navigate, and better aligned with the refreshed visual language. ## Building a More Flexible System - Simplifying the library gave designers and content builders a smaller set of stronger, more purposeful choices. - Figma created templates for common page layouts. - New “building block” components can be combined in different ways to produce on-brand pages. - The system’s atomic elements include inputs, primitives, icons, and navigation components. Figma’s approach demonstrates the value of auditing how a design system is actually used before expanding it further. Removing redundant variants, establishing consistent defaults, and providing reusable templates can make a system easier to use while keeping it flexible enough for future growth.

Read original(opens in new tab)
figma3 min readCurated summary

Made in Figma: The National Park Service Goes From Paper to Pixels | Figma Blog

The National Park Service turned decades of printed visitor guides into a unified digital app serving 431 parks and monuments. GuideOne and Twohy Design Works drew on Massimo Vignelli’s 1977 Unigrid system to create a flexible interface that could accommodate diverse park data, long-term government use, and varied accessibility needs. Figma helped the NPS, designers, and developers collaborate on a practical design system that works for both visitors and park staff. ## A Digital System for 431 Parks - The NPS manages an unusually diverse collection of sites, ranging from major national parks to small historic memorials. - Each park controls much of its own data and writes its own content, making consolidation difficult. - The app needed to bring inconsistent information into one reliable system. - It includes: - Interactive maps - Self-guided tours - Essential visitor information - Content useful to both the public and NPS employees - The app launched in 2021 after the NPS moved from separate apps for individual parks to a single consolidated experience. ## Designing for Durability and Accessibility - Government software must remain useful for many years rather than follow short-lived product trends. - The app serves people with widely different accessibility requirements. - Designers had to balance a consistent national system with the individual character and needs of each park. - Collaboration between the NPS, GuideOne’s developers, and designers helped ensure concepts were feasible with the available data and engineering resources. ## Adapting the Unigrid - Before 1977, NPS brochures varied widely in format and visual style. - Massimo Vignelli’s Unigrid standardized: - Graphic components - Layout structures - Typography and visual hierarchy - Print-production methods - The system gave the NPS a recognizable identity while allowing individual parks to present their own stories. - GuideOne and Twohy Design Works treated Unigrid as a foundation for the app rather than copying the brochures directly. - The challenge was translating a print-based grid and editorial system into interactive screens, maps, and digital navigation. ## Figma as a Collaboration Tool - Figma made it easy to circulate designs among the NPS, designers, and engineering teams. - Shared prototypes exposed practical constraints around park data and implementation. - The workflow supported ongoing feedback instead of separating design from development. - This helped turn a historical visual system into a robust digital product. The project demonstrates how a well-established design system can be modernized without losing its identity. For complex public platforms, combining strong historical principles with collaborative prototyping, flexible data structures, and accessibility-focused design can produce a product that remains useful across many users and locations.

Read original(opens in new tab)
figma2 min readCurated summary

The Long and Short of It: Issue no.7 | Figma Blog

Figma’s “Building better” issue argues that developer experience depends on more than tools or individual teams. Strong cross-functional culture, clear processes, and intentional product principles help engineers stay productive and create better outcomes. The issue highlights approaches from VS Code, Atlassian, Linear, Decathlon, and Crunchyroll. ## Protecting the Developer’s Inner Loop - VS Code distinguishes between: - The **inner loop**: focused coding and heads-down work. - The **outer loop**: bug tracking, support tickets, meetings, and collaboration. - Frequent context switching disrupts productivity. - Teams can improve developer experience by protecting uninterrupted editor time and reducing unnecessary transitions between tools and tasks. ## Measuring Developer Joy - Atlassian extends the idea of developer experience into **“developer joy.”** - The concept emphasizes: - Pride in craft. - Foundational engineering values. - Operational practices that make work satisfying. - Atlassian treats developer joy as a guiding metric and explores how to connect it to business impact and scale it across the organization. ## Building Opinionated Software - Linear believes effective software should have a clear point of view. - Strong product opinions establish default workflows and reduce decision-making for users. - The company deliberately goes against conventional expectations when its principles lead to a better experience. - These opinions influence both Linear’s product design and internal processes. ## Integrating Design and Development with Dev Mode - Decathlon’s engineering team shares lessons from a year of using Figma Dev Mode. - A central recommendation is to start small and pursue quick wins rather than attempting a complete workflow transformation immediately. - Dev Mode can help align design-system work, engineering implementation, and collaboration between designers and developers. ## Managing Complexity with a Universal Design System - Crunchyroll operates across 15 platforms and 12 languages, making consistency difficult. - Its Universal Design System supports: - More consistent experiences across web, mobile, consoles, and other touchpoints. - Greater design-system adoption. - Clearer handoff and implementation workflows in Dev Mode. - A shared system helps teams navigate complexity without sacrificing consistency. ## Bridging Design and Code - Figma’s Toronto meetup featured Simple Design System, a UI kit backed by realistic code. - The project demonstrates how design systems can connect visual components with their implementation. - The discussion also raises a broader concern: bridging the design-development gap is not enough; teams must also maintain implementation quality. Organizations seeking better developer outcomes should treat developer experience as a company-wide practice: protect focus time, establish thoughtful defaults, invest in shared systems, and measure whether tools and processes genuinely improve engineers’ work.

Read original(opens in new tab)
figma3 min readCurated summary

Figma on Figma: Our Approach to Designing UI3 | Figma Blog

UI3 is Figma’s two-year effort to make the interface less distracting and keep designers focused on their work. The redesign explored bold changes, including floating panels and a new way to minimize interface elements, but user feedback and performance data led Figma to reverse some decisions. The result balances a long-term vision for a cleaner canvas with practical adjustments based on how people actually work. ## Designing Around Focus and Flow - Figma’s central goal was to put users’ creative work “center stage” and minimize distractions. - The team relied on craft, intuition, feature-adoption data, performance metrics, and extensive user feedback. - Figma emphasizes that redesigning for designers requires establishing a clear destination while bringing users along through iteration. - UI3 was scheduled for general availability on October 10, 2024. ## Docked Panels: Experimentation and Reversal - The team explored unconventional navigation and properties-panel designs: - Panels appearing only on hover - Panels floating above the canvas - A simplified floating-panel system shared across Figma products - Floating panels initially seemed promising but created practical problems for frequent users: - Reduced available canvas space, especially on smaller screens - Made designs appear to sit behind the panels - Increased distraction - Made rulers less useful by moving them farther from the design - Slowed users down, conflicting with Figma’s goal that “speed is a feature” - For the full UI3 rollout, Figma reattached the navigation and properties panels in Figma Design. - The panels remain resizable for flexibility. - Floating UI continues in specific contexts, including: - Minimize UI mode in Figma Design - Grid view in Figma Slides - Default views in FigJam - Bottom toolbars across Figma products ## Minimize UI: Making the Canvas the Center - Figma’s redesign was guided by the belief that work should remain the primary focus of the canvas, even as interface conventions evolve. - The existing Hide UI feature was considered too rigid and “blunt.” - Minimize UI offers a more flexible alternative: - Collapses side panels for distraction-free work - Keeps tools readily accessible - Works better in small windows and split-screen setups - The interface hierarchy was reorganized to accommodate future features more cleanly. - The navigation panel now follows a linear structure: - File name - Branch name - Project name - Pages - Layers - This structure gives future navigation capabilities a logical place without requiring disruptive layout compromises. ## Updating Familiar Interface Conventions - UI3 also examines established interaction patterns, such as keyboard shortcuts, scrollbars, and blend modes. - Figma describes these as “training wheels” or conventions that may no longer match how modern interfaces are used. - The redesign aimed to balance newer interaction trends with users’ existing habits and expectations. UI3 demonstrates that successful redesign is not simply about pursuing a cleaner or more ambitious vision. Figma’s experience suggests that bold experiments should be tested in real workflows, with usability and performance data ultimately determining which ideas remain.

Read original(opens in new tab)
figma3 min readCurated summary

The VS Code Method: Tightening a developer’s inner loop | Figma Blog

The post argues that developers are most productive when they can sustain the “inner loop”: writing, compiling, debugging, and iterating without disruptive context switching. VS Code’s approach is to bring more outer-loop activities—collaboration, project management, design inspection, and AI assistance—into the editor. The result is not only faster development, but better code quality, greater energy, and improved developer satisfaction. ## The Inner Loop and Flow - The inner loop is the repeated cycle of writing code, compiling, debugging, and continuing in the code editor. - The outer loop includes activities outside the editor, such as: - Checking bug trackers - Updating tickets - Responding in Slack or Teams - Reviewing documentation - Switching between projects and terminals - Staying in the inner loop builds “inertia,” increasing speed and productivity over time. - Interruptions also cause developers to lose mentally loaded context, including edge cases and future plans for the code. ## Reducing Distractions in VS Code - VS Code uses features and extensions to help developers remain focused inside the editor. - Zen Mode hides interface elements and creates a distraction-free workspace. - Even small UI changes, such as collapsing a sidebar, can interrupt concentration as the brain recalibrates. - Developers can customize VS Code with extensions that match their preferred workflows. ## Bringing Outer-Loop Work into the Editor - The broader goal is to move as many tasks as possible into the developer’s existing workflow. - Integrations can reduce switching between: - VS Code and GitHub - Code and project-management tools - Development tools and design platforms - The Figma for VS Code extension lets developers access and inspect designs without leaving the editor. - AI tools such as GitHub Copilot provide proactive, non-intrusive code suggestions. - GitHub reports that Copilot increases coding speed by 55%, while 75% of AI-using developers report greater fulfillment. ## Collaboration Without Breaking Focus - Collaboration is essential but often disruptive when it requires meetings or prolonged chat exchanges. - VS Code integrates GitHub features so developers can manage issues, review code, and submit pull requests from the editor. - The ideal collaboration model lets multiple people remain in their own inner loops rather than requiring constant synchronous interaction. - Direct comments and embedded collaboration can preserve focus while keeping teams connected. ## A More Connected Developer Workflow The VS Code team envisions an inner loop that eventually includes all the tools developers need. Until then, teams should prioritize integrations that eliminate unnecessary switching and tedious manual work. Keeping developers in flow improves productivity, code quality, energy, and overall happiness.

Read original(opens in new tab)
figma2 min readCurated summary

Figma on Figma: Our Latest Brand Refresh | Figma Blog

Figma refreshed its visual identity to reflect its evolution from a designer-focused tool into a collaborative platform for entire product teams. The new language moves beyond static cursors and heavy outlines, using flexible primitives, dynamic compositions, broader color, custom typography, and motion. Its central idea is to portray Figma as a shared space where people from different roles create together. ## Expanding Beyond a Designer-Centric Identity - Figma’s earlier branding was rooted in “vector vernacular,” including static cursors and bold black outlines. - As developers, product managers, and other contributors became part of the platform, the brand needed to represent more than traditional design work. - The refresh emphasizes the many people involved in turning ideas into finished products. ## Four Foundations of the New Visual Language - **Versatile primitives:** Visual building blocks represent the diverse individuals involved in co-creation. - **Dynamic compositions:** Layouts reflect different ways of making, experimenting, and building. - **Expanded color palette:** Color variables make the system easier to adapt across contexts. - **Integrated motion:** Animation expresses actions and flows within the creative process. ## Typography and Custom Fonts - Figma partnered with Grilli Type to create **Figma Sans**, described as an opinionated grotesque. - The broader type system includes: - Figma Sans - Figma Condensed - Figma Mono - Figma Hand, created with OH no Type - Together, the fonts support different modes of communication, from product design and engineering to brainstorming and collaboration. ## Starting in the Sandbox - Brand Studio began by studying how people use Figma across the entire process: - Brainstorming and ideation - Inspecting elements - Refining and polishing work - The team explored the idea of activities happening simultaneously in a shared environment, similar to “parallel play.” - Playgrounds designed by Isamu Noguchi and Mitsuru Senda inspired the concept of the Figma canvas as a place where people gather, experiment, and create. - Other references included carefully crafted tile work and infrastructure, suggesting a visual system that could combine playfulness with structure. Figma’s new identity is designed to make collaboration visible: a flexible, colorful, and animated system that reflects both the individuality of contributors and the shared space where product ideas take shape.

Read original(opens in new tab)
figma2 min readCurated summary

Just Our Type: The Story of Creating Figma Sans | Figma Blog

Figma created Figma Sans as part of a broader brand refresh responding to its expanding audience and product ecosystem. Replacing Whyte, the new typeface was designed with Grilli Type to combine a distinctive, opinionated character with flexibility, legibility, and performance across many contexts. The process favored a bespoke solution over existing fonts and used exploratory concepts to define the final direction. ## A Typeface for an Expanding Brand - Figma’s visual identity was evolving across color, illustration, pattern, motion, and typography. - Its previous typeface, Whyte—with its distinctive inktrap variation—had served the brand since 2019. - The broader audience now included designers, developers, product managers, and newcomers, requiring a typeface that could communicate widely. - Figma sought a contemporary grotesque: a sans serif style that could support varied weights, optical sizes, and applications. ## Finding a Fresh Approach - The Brand Studio prioritized: - Flexibility across display and text use - Strong legibility - Effective performance in places such as the Help Center - A visual personality aligned with Figma’s new, more complex brand language - The team evaluated existing typefaces, including Marr Sans and Agipo, but found that none fully met the brief. - They chose to commission a custom typeface so the collaboration itself could help clarify Figma’s typographic needs. - Grilli Type was selected for its design expertise, narrative focus, and willingness to develop a concept rather than follow current trends or historical models. ## Defining an “Opinionated” Typeface - Grilli Type began by creating a mood board to identify the central tension in the brief. - “Opinionated” became a guiding idea: the typeface should feel confident, purposeful, and free of unnecessary decoration. - The design team explored references including: - Karl Gerstner’s work - 1920s German typography - Bell Centennial, designed for phone books by Matthew Carter - Two initial directions were presented: - A more straightforward approach with simplified forms - A more unconventional and expressive direction - Rather than choosing one option outright, Figma used the concepts to discuss the desired design space. - Feedback favored the simpler shapes of the first direction while incorporating some of the distinctive character of the second. Figma Sans emerged from treating typography as a central part of Figma’s evolving brand—not merely as a replacement font. Its recommended role is both expressive and practical: a recognizable voice for brand communication that remains readable and versatile throughout Figma’s products and content.

Read original(opens in new tab)