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

figmaJul 20, 20252 min readCurated summary

Figma Deepens Roots in Australia with Local Data Hosting | Figma Blog

Figma is expanding its investment in Australia by introducing enterprise governance features and local hosting for Figma file data. Starting in Q4 2025, Australian customers will be able to store data locally, supporting organizations with strict security and compliance requirements. The move strengthens Figma’s position among regulated industries and marks its first data-residency offering in Asia Pacific. ## Local Data Hosting in Australia - Figma will host file data locally in Australia, including content from: - Figma - FigJam - Make - Sites - Buzz - Slides - Local hosting is intended for industries such as: - Government and the public sector - Healthcare - Financial services - The option provides greater control over data location while preserving Figma’s platform capabilities and scalability. - Australia is Figma’s first local data-hosting market in Asia Pacific, extending similar enterprise offerings already available in Europe and the United States. - Figma opened its Sydney office in November 2024 and serves customers including NAB, Safety Culture, and Atlassian. ## Governance+ for Enterprise Customers Governance+ gives enterprises more control over how employees access and use Figma. - **Centralized controls** - Enforce use of approved Figma instances and networks. - Use IP Allowlisting and Network Access Restrictions to prevent data from moving into unauthorized spaces. - **Account security** - Require two-factor authentication. - Extend idle session timeouts. - Support for multiple SSO configurations is planned. - **Data governance** - Monitor Figma activity through tools such as the Discovery Pipeline. - Support electronic communications retention and legal discovery requirements. ## Existing Enterprise Security Features Governance+ builds on existing enterprise capabilities, including: - Action logs - SAML single sign-on - Role assignments connected to identity-management systems - Restrictions on external collaborators joining an organization Governance+ is available now to customers on Figma’s Enterprise plan. Figma’s Australian data residency option will be particularly useful for organizations that must meet local storage, privacy, and regulatory obligations. Enterprise customers can adopt Governance+ immediately and register interest in local hosting ahead of its planned Q4 2025 launch.

Figma Governance Identity Management Data Residency+4

figmaJul 20, 20252 min readCurated summary

Mike Krieger and Luis von Ahn join Figma’s Board of Directors | Figma Blog

Figma announced that Mike Krieger, Anthropic’s Chief Product Officer and Instagram co-founder, and Luis von Ahn, Duolingo’s co-founder and CEO, have joined its Board of Directors. Both bring experience scaling widely used products and championing strong design, product quality, and innovation. Figma expects their perspectives to support its evolution into an AI-powered platform for collaborative product development. ## Mike Krieger’s Product and Infrastructure Experience - Krieger oversees product engineering, management, and design at Anthropic. - As Instagram’s co-founder and CTO, he scaled its infrastructure from a few million users to more than 1 billion monthly active users. - He later co-founded Artifact, a personalized news app acquired by Yahoo. - Figma CEO Dylan Field praised Krieger’s combination of broad product vision and meticulous execution. - Krieger was also an early angel investor in Figma. ## Luis von Ahn’s Design and Growth Expertise - Von Ahn co-founded Duolingo in 2011 and has led its growth to more than 100 million monthly active users. - Duolingo provides language education in over 40 languages and is known for its approachable, engaging design. - Before Duolingo, von Ahn co-created CAPTCHA and reCAPTCHA, including a crowdsourced approach to internet security. - Field highlighted von Ahn’s close collaboration with Duolingo’s design team and his advocacy for design despite his computer science background. ## Figma’s Expanding Board - Krieger and von Ahn join existing directors including Dylan Field, Mamoon Hamid, Kelly Kramer, John Lilly, Bill McDermott, Andrew Reed, Danny Rimer, and Lynn Vojvodich Radakovich. - The appointments add expertise in AI, consumer products, education, infrastructure, enterprise software, and design-led growth. - Figma describes itself as an AI-powered platform supporting the full process from ideation and design through development and shipping. Figma’s board additions reinforce its focus on product craft, design, AI, and large-scale user growth as it expands beyond design tooling into a broader product-development platform.

Figma AI Product Design Anthropic+4

figmaJul 14, 20252 min readCurated summary

Why development leaders are investing in design | Figma Blog

Design has become a strategic driver of software success, not merely a visual layer added at the end of development. An IDC study of more than 500 development leaders found that teams prioritizing design report stronger business outcomes, faster delivery, and better collaboration. The research also shows that human design expertise is increasingly important as AI accelerates product creation. ## The Business Case for Design - 75% of development leaders consider design “very” or “extremely important” to modern software development. - Leaders who rated design as “extremely important” were five times more likely to say their last project far exceeded expectations. - The main business benefits associated with design investment were: - Improved customer retention - Higher customer engagement - Increased product innovation - Design now influences customer satisfaction, employee productivity, accessibility, and data-driven decision-making. ## Designer–Developer Collaboration - 52% of leaders said their organizations have increased software output over the past two years. - Collaboration between design and development from the beginning of a project helps teams: - Align on scope and trade-offs earlier - Reduce rework and friction - Iterate in real time - Improve morale and time to market - Among respondents, stronger design collaboration led to: - More innovation for 54% - Better customer experiences for 47% - Faster time to market for 43% - Effective collaboration was described as synchronized, structured, and mutually supportive rather than divided into isolated handoffs. ## Design Expertise in AI-Driven Development - AI makes it easier to create initial concepts, but generated outputs still require substantial human refinement. - Designers provide essential oversight in: - Quality control - User experience - Brand consistency - Cross-functional review - 80% of development leaders said design has become more important to the success of AI-powered products than it was two years ago. - The strongest teams treat AI output as a starting point, not a finished product. Human judgment is needed to turn fast-generated concepts into usable, user-centered experiences. Organizations seeking an advantage should treat design as a business priority, integrate designers and developers throughout the development process, establish scalable design practices, and preserve human oversight of AI-generated work.

AI User Experience Product Development Software Engineering+3

figmaJul 10, 20252 min readCurated summary

In Good Company: How Retailers Use Figma to Elevate E-commerce | Figma Blog

The article argues that successful e-commerce depends on cohesive, trustworthy digital experiences that connect customer needs, operational systems, and brand values. It highlights how Nuuly, Ruggable, and GitHub use Figma to improve collaboration, maintain consistency, and create more engaging shopping experiences. Nuuly’s example shows how thoughtful design systems can simplify highly complex business processes for customers and employees alike. ## Nuuly: Simplifying Clothing Rental - Nuuly aims to make clothing rental an everyday habit, giving subscribers flexibility to experiment with their style. - Its business requires complex behind-the-scenes systems for: - Circular inventory management - Cleaning and repairs - Rental logistics - Nuuly built two separate design systems: - One for the customer-facing experience - One for internal rental-management tools - Both systems use flexible color and typography tokens so the brand can evolve seasonally. - The “My Nuuly” feature makes more than 26 rental statuses understandable by showing customers what is happening now and what to expect next. - In 2023, Nuuly migrated to Figma and consolidated 16 fragmented design files into two shared libraries. - Figma’s prototyping and collaboration tools helped the team: - Work faster - Communicate interaction details more clearly to developers - Stay aligned across departments - Content, photography, and other teams also adopted Figma, FigJam, and Figma Slides for brainstorming, reviews, and customer-journey improvements. ## Ruggable: Creating Consistent Digital Experiences - Ruggable’s UX leadership encountered siloed workflows across social advertising, the homepage, and product-detail pages. - These disconnected processes produced inconsistent digital experiences. - The article presents Ruggable as an example of how shared design practices can connect marketing and e-commerce touchpoints, though the supplied text ends before describing its specific solutions. ## GitHub and Design Business Company: Designing for Developers - The article also introduces a collaboration between GitHub and Design Business Company. - Their goal was to create a storefront specifically tailored to developers. - The partnership illustrates how brands can use design to add personality and delight while remaining aligned with their audience’s expectations. By combining scalable design systems with cross-functional collaboration, retailers can make complicated services feel simple, improve internal efficiency, and deliver a more consistent brand experience across every digital surface.

Figma Design Systems User Experience Prototyping+2

figmaJul 2, 20252 min readCurated summary

How We Shaped the Visual Identity for Config 2025 | Figma Blog

Figma’s Brand Studio spent 10 months developing Config 2025’s visual identity for a large, global audience and a wide range of physical and digital formats. The team centered the system on expressive animated glyphs made from basic shapes, creating an identity that could adapt as the event evolved. By combining conceptual flexibility, component-based design, motion, and Figma’s refreshed brand language, they made Config feel tactile, dynamic, and distinctly connected to the spirit of making. ## Building a Flexible Visual Concept - The creative process began with broad exploration rather than fixed moodboards or a narrowly defined style. - The team focused on a concept that could support varied execution: - Social media content - Main-stage screens - Physical installations - Attendee badges and merchandise - Spatial experiences - Creative Director Damien Correll emphasized constraining the concept without constraining execution, allowing the identity to remain adaptable. - Because event plans and requirements change, the visual system needed “wiggle room” and the ability to evolve over time. ## Glyphs as a Language of Making - The visual identity revolved around animated glyphs built from simple shapes, or primitives. - Each glyph combined inner and outer elements that interacted with one another. - Their shifting forms represented: - Dynamism - Change - Adaptability - The unpredictable nature of creative work - Motion allowed a single glyph to trigger ripples and transform an entire composition. - The concept aligned with Config’s product announcements, including Figma Draw and Figma Sites, which focused on helping users express themselves in new ways. ## A Component-Based Toolkit - The team created a glyph library directly in Figma. - Glyphs were built as reusable components, making it easy for partners and vendors to: - Swap variations - Customize compositions - Adapt assets to different surfaces - This approach helped maintain consistency while supporting many applications and production constraints. ## Extending Figma’s Refreshed Brand - Config’s identity built on Figma’s recently updated visual language. - The team adapted the refreshed: - Color palette - Typeface, Figma Sans - Playful primitive-based design approach - This connection allowed Config to feel like an extension of Figma’s broader brand while still having its own expressive event personality. Figma’s approach demonstrates how a strong event identity can combine a clear conceptual foundation with modular, adaptable assets. Designing the system as reusable components—and allowing motion and variation to carry meaning—enabled Config 2025 to remain cohesive across thousands of touchpoints without becoming rigid.

Figma Typography Motion Design Figma Draw+3

figmaJul 1, 20253 min readCurated summary

Rolling Out Santa Without Freezing Productivity: Tips from Securing Figma’s Fleet | Figma Blog

Figma rolled out Santa, an open-source macOS binary authorization tool, across its laptop fleet without significantly disrupting employees. The company combined file access controls, monitoring mode, data-driven allowlists, and a staged deployment strategy to improve endpoint security while preserving productivity. Its experience shows that binary authorization works best as one layer of a broader, user-conscious security program. ## Binary Authorization as Part of Endpoint Security - Binary authorization limits devices to running approved applications, reducing the attack surface for malware-based attacks. - It does not control scripts, extensions, plugins, or other non-binary code, so it cannot replace layered endpoint defenses. - Santa supports: - **Binary rules** based on SHA-256 hashes for precise integrity checks. - **TeamID rules** for all applications signed by an Apple developer team. - **SigningID rules** for a specific developer identity and application. - **Compiler/transitive rules** for binaries produced by approved compilers. - **PathRegex rules**, which should be used cautiously because paths can be bypassed. - Santa also provides file access authorization, allowing organizations to restrict which applications can access sensitive files. ## Securing Browser Cookies First - Figma initially used Santa’s file access authorization to protect browser cookies. - Access was restricted to the browser application, reducing the risk of credential theft by malicious scripts or unauthorized processes. - Because this protection had almost no effect on employee workflows, it provided a low-risk early success before introducing binary execution controls. ## Building an Allowlist with Monitoring Mode - Figma deployed Santa in monitoring mode across its fleet before blocking anything. - Monitoring recorded binary executions and exposed how employees actually used software. - The security team began with **TeamID** and **SigningID** rules for approved applications such as Zoom, Slack, Chrome, Notion, and GitHub. - These broad signing-based rules covered most executions while allowing Figma to investigate exceptions and refine its policies before enabling lockdown mode. - The collected data helped the team prepare for blocking unapproved binaries with minimal disruption. ## Balancing TeamID and SigningID Rules - Figma’s allowlist design required weighing broader publisher-based trust against more narrowly scoped application identities. - TeamID rules can efficiently authorize applications from a trusted developer, while SigningID rules provide tighter control over specific products or signing identities. - Choosing the appropriate rule type was an important part of creating a secure allowlist that would not unnecessarily block legitimate work. Figma’s approach recommends starting with protections that are nearly invisible to users, gathering real execution data in monitoring mode, and only then progressing toward lockdown with carefully scoped rules and staged rollout controls.

Macos Endpoint Security Santa Binary Authorization+2

figmaJul 1, 20252 min readCurated summary

Figma Launches Latin American Spanish Localization | Figma Blog

Figma has launched Latin American Spanish localization for its product and support services, strengthening its presence across the region. The update reflects growing demand from Latin American designers, developers, startups, and enterprises, where more than 10 million Figma files were created in the past year. It is Figma’s fifth product localization and supports the company’s broader expansion beyond the United States. ## Expanding in Latin America - Figma already serves major regional companies including iFood, Itaú Unibanco, Mercado Libre, Nubank, Sicredi, TOTVS, and Quinto Andar. - The company says design is becoming an increasingly important business differentiator across Latin America. - Latin American Spanish is available starting July 2. ## What the Localization Includes - Spanish language support tailored specifically to Latin American users. - Culturally adapted product interfaces. - Dedicated customer support for the region. - The release follows Figma’s Brazilian Portuguese localization. ## Growing Regional Adoption - More than 10 million Figma files were created across Latin America in the previous year. - Companies such as iFood and Itaú Unibanco use Figma to coordinate design, product, and engineering workflows. - Leaders at these companies say localization will make collaboration and product development more natural and efficient. ## Figma’s Global Expansion - Latin American Spanish is Figma’s fifth localization, following Japanese, European Spanish, Korean, and Brazilian Portuguese. - Approximately 85% of Figma’s monthly active users were outside the United States in Q4 2024. - More than half of Figma’s 2024 revenue came from non-U.S. markets. - About two-thirds of monthly active users work outside traditional design roles, including roughly 30% who identify as developers. Figma’s Latin American Spanish release is intended to deepen its relationship with the region’s growing design and development community while making collaboration more accessible to local teams.

Figma Design Systems Product Design User Interface+2

figmaJun 30, 20252 min readCurated summary

Figma Files Registration Statement for Proposed IPO | Figma Blog

Figma announced on July 1, 2025, that it publicly filed an S-1 registration statement with the SEC for a proposed initial public offering. The company plans to list its Class A common stock on the New York Stock Exchange under the symbol “FIG,” though the offering size, share price, and timing remain undecided. The IPO is subject to SEC review and market conditions. ## Public Filing and Proposed Listing - Figma’s filing follows its confidential submission of a draft S-1 in April 2025. - The proposed offering covers Figma’s Class A common stock. - The company has applied to list on the NYSE under the ticker **FIG**. - No share count or price range has been announced. - Figma cautions that the IPO may be delayed, changed, or not completed. ## Underwriters and Offering Restrictions - Morgan Stanley, Goldman Sachs, Allen & Company, and J.P. Morgan will serve as joint lead book-running managers. - BofA Securities, Wells Fargo Securities, and RBC Capital Markets will act as book-running managers. - William Blair and Wolfe | Nomura Alliance will be co-managers. - Shares may only be offered through a prospectus after the registration statement becomes effective. - The announcement itself is not an offer to sell or a solicitation to buy securities. ## Figma’s Business Positioning - Founded in 2012, Figma describes itself as a collaborative platform for digital product development. - The company has expanded beyond design software into an AI-powered platform. - Its tools support ideation, design, development, and product shipping. - Figma emphasizes collaboration, efficiency, and keeping product teams aligned. The announcement marks a significant step toward Figma becoming publicly traded, but investors must wait for the finalized prospectus and effective registration statement for details about valuation, financial performance, pricing, and the IPO timetable.

Figma AI Prototyping Product Development+1

figmaJun 30, 20252 min readCurated summary

Bill McDermott joins Figma’s Board of Directors | Figma Blog

Bill McDermott, ServiceNow’s Chairman and CEO, has joined Figma’s Board of Directors. Figma says his experience scaling enterprise companies and building global business ecosystems will support its continued growth. The appointment reflects Figma’s ambition to expand from a design tool into a broader, AI-powered platform for product development. ## McDermott’s Leadership Experience - McDermott has led major technology companies, including: - ServiceNow, where he positioned the company as an AI platform for business transformation. - SAP, where he built global business ecosystems. - During his leadership, both ServiceNow and SAP more than tripled their market capitalizations. - Both companies are also Figma customers, giving McDermott direct familiarity with the platform and its enterprise users. - Figma CEO Dylan Field highlighted McDermott’s operating experience, humility, authenticity, and ability to lead at scale. ## Figma’s Board of Directors McDermott joins a board that includes: - Dylan Field, Figma co-founder and CEO - Mamoon Hamid of Kleiner Perkins - Kelly Kramer, former Cisco EVP and CFO - John Lilly of Greylock and former Mozilla CEO - Andrew Reed of Sequoia - Danny Rimer of Index Ventures - Lynn Vojvodich Radakovich, former Salesforce EVP and CMO ## Figma’s Continued Expansion - Founded in 2012, Figma has expanded beyond collaborative interface design. - The company now describes itself as a connected, AI-powered platform covering ideation, design, development, and product shipping. - McDermott’s enterprise expertise is expected to help Figma scale its business and serve large organizations more effectively. Figma’s appointment of McDermott adds seasoned enterprise leadership to its board as the company pursues broader platform growth and deeper adoption among large customers.

Figma AI Digital Product Design Servicenow+1

figmaJun 25, 20253 min readCurated summary

6 Skills Every Engineer Needs for the AI Era | Figma Blog

AI should not merely automate engineering work; it should expand how developers explore problems, collaborate, and create better products. Figma argues that engineers who thrive in the AI era will combine technical judgment with user empathy, experimentation, and the ability to direct AI effectively. The goal is to automate repetitive work while preserving—and strengthening—the meaningful parts of product development. ## Use AI for More Than Automation - AI should maximize engineers’ capabilities rather than simply reduce costs. - Developers still need to identify the right problems, understand users, and apply care and craft to their solutions. - Automating tedious tasks frees teams to focus on product meaning, collaboration, and user value. - Employers increasingly value engineers who understand why they are building something, not just how. ## Use Vibe Coding to Explore Possibilities - Vibe coding is presented as a way to explore the problem space, not just generate production code. - Conversational development lets teams test more possible solutions in parallel and quickly produce visual artifacts. - Tools such as Figma Make support rapid prototyping, iteration, and refinement across design and code. - AI-assisted exploration can improve user experience by helping teams consider user needs earlier rather than automating away that consideration. ## Harness Agentic Capabilities - The Model Context Protocol (MCP) enables AI tools such as Cursor and Copilot to communicate with other software. - Figma’s MCP server supplies design context to language models, improving design-informed code generation. - Better context can increase visual fidelity and help developers follow established component libraries and accessibility practices. - Agentic tools are most effective when they have access to the conventions and information that guide the product. ## Audit Your Own Pull Requests - Engineers can use LLMs as a pre-review sounding board before submitting a pull request. - Models familiar with the codebase can identify duplicated implementations, unnecessary rewrites, and other issues. - This self-review improves code quality while reducing the burden on human reviewers. - AI-assisted review can increase engineering throughput without replacing team review. ## Coordinate Teams of AI Agents - Developers are learning to divide complex problems into smaller tasks for multiple AI agents. - They must then evaluate and integrate the agents’ separate solutions. - A key emerging skill is writing detailed Markdown instructions and providing context, much like guiding an intern. - The supplied article ends mid-section, so the sixth skill and the remainder of this discussion are not included. Engineers should treat AI as a partner for exploration, feedback, and coordination—not simply as a code generator. Strong results depend on clear problem framing, relevant context, human judgment, and continued attention to users.

AI Large Language Models AI Agents Model Context Protocol+2

figmaJun 24, 20252 min readCurated summary

Canvas, Meet Code: Building Figma’s Code Layers | Figma Blog

Figma’s code layers bridge visual design and web development by making React code behave like editable objects on the Figma canvas. They preserve the canvas’s flexibility—moving, resizing, nesting, duplicating, and comparing layers—while enabling advanced interactions, APIs, shaders, and forms. The approach combines a new canvas primitive, an integrated web IDE, AI-assisted coding, and multiplayer collaboration. ## Reconciling Design and Code - Figma’s canvas is spatial, flexible, and designed for rapid experimentation. - Code is traditionally organized in a hierarchical filesystem with strict syntax and structure. - This difference raises workflow questions about duplication, source of truth, and how canvas objects should map to files. - Figma identified three major challenges: - Integrating code layers with Figma’s existing ecosystem and components - Building an accessible but powerful browser-based IDE - Supporting collaboration between designers and developers ## Code as a Canvas Material - Code layers are implemented as a new Figma canvas primitive. - Like regular layers, they can be: - Moved, resized, and reparented - Nested inside frames - Used in layouts and components - Duplicated and arranged side by side - Option-dragging creates a fork of the source code, making experimentation comparable to creating Git branches but faster and more visual. - Figma chose React because its reusable component model aligns with Figma components. - React props connect to Figma component properties, allowing users to edit code-defined values through visual controls such as toggles, sliders, and dropdowns. ## AI and Direct Code Editing - Code layers can be created and modified using AI, including the model behind Figma Make. - Users can also edit the underlying code directly when they need complete control. - Designs can be converted into code layers with a single click, after which developers or designers can add behavior and interactivity. ## A Web-Based IDE - Figma built an integrated coding environment rather than requiring users to leave the canvas. - The editor uses CodeMirror as its extensible foundation. - CodeMirror supports features including: - Syntax editing and extensions - Themes - Find-and-replace - Line numbers - Figma customized default editor behavior to fit its own systems, including replacing CodeMirror’s undo and redo with Figma’s multiplayer-aware undo stack. Code layers are designed to make code feel like another creative material: structured enough for developers, but flexible enough to support the visual experimentation that defines Figma’s canvas.

React Multiplayer Collaboration Code Editor Codemirror+2

figmaJun 23, 20252 min readCurated summary

In Good Company: How Agencies Are Transforming Client Collaboration | Figma Blog

The article argues that agencies and freelancers are replacing opaque, hierarchical design processes with flexible, collaborative partnerships. Remote work, boutique studios, and tools such as Figma enable clients to participate throughout the project rather than simply review finished deliverables. The result is a more fluid model that combines specialist craft with generalist, cross-functional collaboration. ## A More Collaborative Agency Model - Remote work has dispersed teams across locations and time zones, making frequent communication and shared tools essential. - Boutique agencies increasingly compete with large firms by offering agility and closer client relationships. - Agencies are tailoring their structures to each project, with teams expanding or contracting according to client needs. - Roles are becoming less rigid; Design Business Company co-founder Judson Collier describes this shift as “generalism” returning to the industry. - Clients are more design-literate and comfortable working directly in tools such as Figma. - Shared files and comments replace formal presentations and printed deliverables, allowing teams to iterate continuously. ## Human’s Flexible Studio Structure - Human, founded by Rachael Yaeger and Michael Ray in 2013, typically operates with six to ten employees. - Its variable team size lets the studio provide: - Freelancer-like agility - Large-agency cohesion and experience - Close collaboration between designers, developers, and clients - Human avoids the separation that can arise when internal and agency teams work in isolated groups. - Clients increasingly embed external agencies directly into their teams, reducing management layers and encouraging informal communication. ## Building Jimini Health’s Brand - Human worked with Jimini Health, an AI mental-health company, on a visual identity and website. - During the project’s sprint phase, the two teams held foundational discussions about the qualities and values the brand should express. - Human used Figma Slides to support high-fidelity presentations and cross-functional collaboration. - The resulting identity included: - A visual system reflecting the spectrum of human emotion - A robust, ADA-compliant color palette - Photography by Molly Matalon - Consistent applications across the app, website, and social media - Frequent feedback through shared Figma files allowed both teams to refine the direction together rather than treating design as a one-way agency handoff. Agencies can work more effectively by combining flexible team structures, broad creative skills, and transparent collaboration tools. Treating clients as active partners—and giving them access to the work throughout the process—creates faster, friendlier, and more adaptable design workflows.

Figma Design Systems User Experience Collaborative Design+2

figmaJun 17, 20252 min readCurated summary

Supporting Faster File Load Times with Memory Optimizations in Rust | Figma Blog

Figma improved server-side file loading by reducing the memory overhead of its Rust data structures. Replacing per-node `BTreeMap`s with compact sorted vectors made deserialization faster and cut memory usage for large files by nearly 25%, despite worse theoretical operation complexity. The team also explored packing field IDs into unused pointer bits, potentially storing the same information in fewer bytes. ## Smaller, Memory-Efficient Maps - Figma files consist of nodes, each represented by properties such as type, parent, position, and dimensions. - Nodes were stored as `BTreeMap<u16, u64 pointer>` structures because ordered iteration was required for serialization. - Profiling showed these maps consumed more than 60% of a file’s memory, even though they stored metadata rather than large data payloads. - The schema contains fewer than 200 possible fields, and nodes typically contain only a subset of them—about 60 properties on average. - Figma replaced each `BTreeMap` with a sorted flat vector of `(field ID, pointer)` pairs. - Although vectors have theoretically slower insertion, lookup, and editing, their compact linear layout is more cache-friendly and faster during deserialization. - The deployed change reduced memory usage by nearly 25% for large files and improved file-loading performance. ## Saving More Memory with Bit Stuffing - The team also investigated storing the field ID inside the pointer itself. - While pointers are nominally 64 bits, x86 systems currently use only the lower 48 bits for memory addresses, leaving 16 bits available. - Figma’s field IDs require exactly 16 bits, allowing a single `u64` to contain both: - A 16-bit field ID - A 48-bit memory pointer - This representation could eliminate the separate field-ID storage and further reduce memory overhead. - The approach had not yet been productionized because relying on unused pointer bits is architecture-dependent and could change in the future. Figma’s results demonstrate that practical memory layout and CPU cache behavior can outweigh Big O complexity. For compact, bounded data structures, flat vectors—and carefully considered bit packing—can deliver substantial improvements in both memory efficiency and load speed.

Rust Performance Optimization Memory Optimization Data Structures+2

figmaJun 17, 20253 min readCurated summary

7 Moments That Shaped Figma, as Told by Dylan Field | Figma Blog

Figma’s story, as told by co-founder Dylan Field, was shaped by unlikely experiences, persistent experimentation, and lessons from mentors and early mistakes. His path ran from child acting and mathematical curiosity to founding a company at 20, with setbacks—including a brief meme-generator idea—helping clarify Figma’s direction. ## Persistence Learned Through Acting - As a child actor, Field once fell asleep during a *Peter Pan* performance, which he considered his most embarrassing acting moment. - The experience nevertheless gave him stunt-flying skills that helped him land a Windows XP commercial. - Auditioning taught him that persistence over time can create opportunities: continuing to try increases the chances of eventually succeeding. ## A Janitor Sparked His Interest in Mathematics - Field was solving algebra problems as early as age six and became bored in middle school. - He spent time with a cerebral school janitor who discussed mathematics and physics with him. - The janitor encouraged him to study proofs and set theory, pushing Field toward deeper mathematical thinking. ## An Unusual Fellowship Application - Applying for the Thiel Fellowship, Field answered the question about what most people get wrong by arguing that “chocolate is repulsive.” - He treated the response as a “meta-contrarian” idea—challenging not only conventional wisdom but also Silicon Valley’s tendency to prize contrarian opinions. - The playful, unexpected answer may have helped his application stand out. ## Figma Briefly Considered Becoming a Meme Generator - Field and Evan Wallace initially wanted to use WebGL—the JavaScript API for high-performance graphics in browsers—to build a design product. - Unsure how to apply the technology, they briefly considered making a meme-creation tool. - Field called this five-day period Figma’s “darkest week,” after realizing that memes were not a sufficiently serious direction. - The episode illustrates the founders’ willingness to explore ideas before committing to a larger product vision. ## Growing Into Leadership - At 20, Field struggled with the responsibilities of being CEO after previously identifying more like an intern. - He acknowledged micromanaging because he had intensely considered every part of the product experience. - Pressure to launch and control the details created tension, teaching him that building Figma required developing as a manager as well as refining the product. The post presents Figma’s development as the result of accumulated experiences rather than a perfectly planned startup journey. Field’s advice and example emphasize persistence, intellectual curiosity, experimentation, and the willingness to learn from immature decisions.

Figma Product Design User Interface JavaScript+2

figmaJun 16, 20252 min readCurated summary

Make your site interactive with code layers | Figma Blog

Figma’s new code layers let designers add custom React-powered interactions directly within Figma Sites. They bridge the gap between static canvas designs and production-like experiences by combining AI-assisted coding, direct code editing, and reusable components. The feature is intended to make advanced interactions—such as drag-and-drop systems, animations, calculators, maps, shaders, and 3D effects—accessible without external developer support. ## Customizing Existing Designs - Code layers extend Figma Sites’ built-in responsive elements and interactions. - Designers can convert an existing element into a code layer through the Figma Make icon in the Design panel. - AI chat can then generate or modify behaviors such as: - Spinning or bouncing animations - Animated counters and text effects - Loan calculators and price estimators - Hover effects, ripples, and color changes - Code layers can be duplicated with **Command D** to create and compare multiple interaction variations. - Example use case: a flower shop could let visitors duplicate, drag, rotate, and layer flower images to create custom bouquets. ## Creating Code Layers from Scratch - Designers can use the Make tool or press **E** to draw a standalone code layer on a blank canvas. - A modal opens for generating the layer through AI prompts or writing code directly. - Suggested prompts and starter components—such as buttons, image galleries, and navigation menus—provide ready-made starting points. - These components can be used as-is or customized to match an existing design. ## Reusable and Extensible Components - Code layers support customizable properties, including strings, numbers, and references to other components. - AI can generate these properties automatically, or users can request specific controls. - A code layer can be converted into a reusable Figma component for use across pages, projects, and team design systems. - Designers can import npm packages such as `motion` and `@react-three/fiber` to add advanced animation, 3D rendering, and other functionality. ## Code Layers Compared with Figma Make - **Figma Make** is suited to building a functional app from a prompt without relying heavily on precise canvas design. - **Code layers in Figma Sites** are designed for adding custom interaction and motion to an existing visual design. - Together, the tools support both prompt-first development and design-first experimentation. Code layers are available to all Figma Sites users, offering a practical way to prototype and publish richer web experiences directly from the Figma canvas.

AI Prototyping React Web Development+4