techlist.io
KREN

Figma

736 posts

www.figma.com/blog/engineering

Filter by tag

Figma528Design Systems246User Experience140Prototyping135AI110Figjam98Product Design76User Interface63Generative AI47Collaborative Design47Accessibility41React39+1265
figma3 min readCurated summary

What Would You Ask If No One Could Judge You? | Figma Blog

Perplexity’s founders envision it as an “answer engine” that turns web-scale information into concise, sourced explanations rather than lists of links. The product grew from a personal need for judgment-free learning and was shaped by the shortcomings of early conversational AI, especially outdated knowledge and hallucinations. Its broader goal is to make curiosity easier to express and pursue. ## Building a Judgment-Free Knowledge Tool - Aravind Srinivas was inspired by childhood “Wikipedia rabbit holes” and the evolution from printed encyclopedias to AI-powered knowledge tools. - Perplexity aims to make learning engaging through curiosity rather than attention-grabbing entertainment. - The company wants users to ask anything without worrying about appearing uninformed or being judged. ## From Private Slackbot to Public Product - The founders initially built a Slackbot to answer practical questions about fundraising, employee health insurance, and running a company. - They hesitated to launch because they feared criticism for attempting to compete with Google. - Investor Nat Friedman encouraged them to view the effort as an asymmetric bet: little downside, but potentially enormous upside. - Perplexity launched shortly after ChatGPT, despite the founders having no previous company-building experience. ## An Answer Engine with Sources - ChatGPT highlighted problems with knowledge cutoffs, hallucinations, and unsupported answers. - Perplexity responded by combining: - Natural-language interaction - Web search and indexing - Large language models - Inline sources and footnotes - Its goal is to provide a direct answer while allowing users to verify the underlying information. - Srinivas describes the product as a combination of Wikipedia and conversational chat, with information drawn from across the internet. ## Making Complex Information Approachable - Perplexity follows an 80/20 approach: identify the most important concepts and deliver most of the useful understanding quickly. - It synthesizes information from multiple web pages into a concise explanation instead of requiring users to read extensively. - The product aims to simplify information without reducing it to misleading or overly shallow conclusions. ## Turning Answers into Further Curiosity - Each response includes three related follow-up questions to encourage exploration. - Srinivas argues that people are naturally curious but often lack the confidence, vocabulary, or precision to formulate good questions. - Perplexity’s design assumes that the user is never wrong; the system should help clarify and develop a person’s curiosity rather than blame them for asking imperfectly. Perplexity’s central recommendation is implicit in its design: make knowledge easier to access, verify, and explore, while removing the social fear that prevents people from asking questions in the first place.

Read original(opens in new tab)
AILarge Language ModelsNatural Language ProcessingConversational Ai+2
figma3 min readCurated summary

Navigating the Promise and Pitfalls of AI | Figma blog | Figma Blog

AI’s promise is real, but useful AI products will emerge through experimentation rather than a race to ship features. Figma’s research suggests AI is already transforming individual workflows—especially for developers—while having a smaller effect on collaboration and foundational design work. To deliver lasting value, teams must focus on how AI reshapes products, industries, and group work, not just on model capabilities. ## Research and Methodology - Figma surveyed more than 1,800 designers, executives, and developers. - Participants came from the US, Canada, Australia, the UK, Japan, France, and Germany. - The survey ran from February 26 to March 3, 2024. - The report combines survey findings with discussions involving AI and design experts. - Its central premise is that AI’s impact depends heavily on product design and user experience—not only on the power of large language models. ## AI’s Uneven Transformation of Workflows - Developers were 60% more likely than designers to say AI had transformed the products they work on. - Developers use AI for daily tasks such as generating starting points and translating between programming languages. - AI-generated output is currently perceived as more reliable for developer workflows. - Designers may use AI to turn mockups into code, but much of design’s foundational work still involves: - Understanding user needs - Exploring problems nonlinearly - Learning about the broader problem space - AI initiatives increasingly originate outside design, with programmers, subject-matter experts, and stakeholders contributing ideas. ## AI Must Improve Collaboration, Not Just Individual Productivity - Eighty-five percent of respondents said AI had affected their personal productivity or workflows. - Common uses include text and image generation, brainstorming, and using AI as a sounding board or thought partner. - Respondents were three times more likely to report significant changes to individual workflows than to collaborative ones. - AI has not substantially changed group activities such as alignment or meeting facilitation. - Truly transformational AI products will need to support how teams work together, rather than focusing only on isolated tasks performed by individuals. ## Long-Term Effects Across Industries - Respondents in technology, professional and business services, and retail most often expected significant AI-driven changes to their products and services: - Technology: 41% - Professional and business services: 40% - Retail: 39% - Healthcare, energy and utilities, and telecommunications respondents expected the least impact over the following 12 months. - The report argues that realizing AI’s full potential requires considering how major institutions and essential services—not just software products—will evolve. ## Experimentation Before the Product Race - AI development is still characterized by experimentation, play, and research. - Teams face pressure to release new AI features quickly as new products, applications, and research appear constantly. - The recommended approach is to embrace uncertainty, iterate thoughtfully, and determine which ideas genuinely create value. - As the technology matures, the most successful products will likely come from careful exploration rather than simply adding AI features because of market hype.

Read original(opens in new tab)
AILarge Language ModelsMachine LearningGenerative AI+2
figma2 min readCurated summary

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

Issue no. 5 of Figma’s newsletter, “Come together,” argues that progress depends on community, collaboration, and shared inspiration. Ahead of Config, it highlights creators and leaders whose work shows how connection—whether in person or online—helps turn ideas into reality. The issue spans product development, design quality, creative experimentation, AI, and community events. ## Building tools that feel magical - Charmaine Lee, product manager for Snap’s Lens Studio, shares principles for creating developer tools that delight creators. - Her approach emphasizes hands-on involvement, collaboration, and understanding the creator’s experience rather than following rigid product-building rules. - The feature presents creator-focused product development as an “all-hands-on-deck” effort. ## Craft, beauty, and product quality - Leaders from Stripe, Linear, and Figma discuss how to define and measure craft and beauty in digital products. - Katie Dill, Karri Saarinen, and Yukhi Yamashita explore the relationship between form and function. - Their central argument is that thoughtful design is not merely cosmetic: quality and beauty can contribute directly to product adoption and business growth. ## Designing quilts in Figma - Former product designer Nicole Boettcher uses Figma to plan and design handmade quilts. - Her process demonstrates how digital design tools can support physical, artistic work beyond conventional interface design. - The project playfully extends the idea of “moving rectangles,” connecting her former profession with her current craft. ## AI and creative tools - David Hoang, formerly of Replit, discusses how AI is changing creative tools, product design, and development workflows. - He recommends responding to rapid change through shared learning and strong communities. - Cohorts that combine accountability with fun can help people stay motivated as they develop new skills. ## Config and community opportunities - In-person Config tickets are sold out, but virtual attendance and local watch parties remain available. - Readers can follow the live blog for speaker highlights and event coverage. - The issue also promotes illustrator Thomas Colligan’s artwork, new Config merchandise, and the upcoming Figma Store release. Figma’s overall recommendation is to stay connected: creative progress is strengthened by mentors, collaborators, peers, and communities that make learning and experimentation possible.

Read original(opens in new tab)
FigmaAIProduct DesignDeveloper Tools+3
figma3 min readCurated summary

What’s Happening at Config 2024? | Figma Blog

Config 2024 brought together product builders, designers, artists, and inventors for a conference focused on creativity, technology, and unconventional thinking. Figma’s coverage highlights talks, workshops, community activities, and behind-the-scenes moments from the event. The central message is that meaningful innovation comes from authentic perspectives, outside influences, experimentation, and the freedom to play. ## Conference Community and Programming - Config featured both in-person and virtual programming, including: - “Design of Everything” - New feature recaps - Friends of Figma - Figma EDU - “Figma like the pros” - Daily conference recaps - Attendees came from around the world, supported by speakers, staff, and volunteers. - Figma encouraged viewers to revisit sessions through its YouTube playlist and announced Config APAC for July 2. ## Designing Beyond Expectations - Karla Mickens Cole and Nashilu “Nash” Mouen of The Browser Company discussed designing for a world that resists conformity. - Working on the Arc browser, they argued that products should carry the “fingerprints” of their creators—their experiences, identities, and perspectives. - Nash emphasized that designers should look beyond technology for inspiration, drawing from unexpected sources, stories, and culture. ## AI, Digital Art, and Criticism - Artist Refik Anadol described his digital artwork *Unsupervised*, which uses AI to reinterpret MoMA’s archive. - He framed the project as an exploration of “the possible dreams of the machine.” - Responding to criticism that his work simplifies data, Anadol questioned who the critics are and what perspectives shape their judgments. - His comments reflected the broader challenge of establishing digital and AI-assisted art within the traditional art world. ## Creativity Through Play and Failure - Inventor and YouTuber Simone Giertz presented humorous projects such as a toothbrush-brushing helmet, a slapping alarm clock, a soup-feeding robot, and a drone hair cutter. - After leaving her startup, she found that striving for excellence was not helping and instead gave herself permission to play. - She stressed that difficulty does not necessarily equal importance. - Giertz also discussed overcoming self-deprecation and building a professional identity through her product design company, Yetch. - Her brainstorming exercise—finding unusual uses for a brick—encouraged attendees to embrace strange and creative ideas. - She concluded that creating her own career was her favorite invention. ## Design, Merchandise, and Hands-On Experiences - The conference floor offered opportunities for attendees to connect, explore exhibits, and shop at the Figma Store. - Attendees praised the quirky, distinctive character of the event merchandise. - In the Maker Space, participants customized tote bags with patches and received personalized aura portraits. Config 2024’s activities reinforce a practical creative philosophy: designers should draw from life beyond their field, experiment without fear of failure, and build work that reflects their individual perspectives.

Read original(opens in new tab)
FigmaAIUser ExperienceProduct Design+2
figma2 min readCurated summary

Charmaine Lee’s 10 Rules for Building Developer Tools | Figma Blog

Developer tools feel “magical” not because of polished interfaces, but because they help users quickly become confident creators. Charmaine Lee argues that teams should optimize what happens after the initial “aha moment,” shorten the path to meaningful creation, and build products through close, authentic engagement with developers. ## Prioritize lasting adoption over onboarding - The first-time user experience (FTUE) should not be overloaded with every product capability. - The real measure of success is whether users understand and continue using the product after the initial discovery moment. - Lens Studio 5.0’s public beta omitted a formal FTUE, testing whether the product was intuitive enough to use independently. ## Shorten the path to “magic” - Teams should identify how long it takes users to move from downloading a tool to creating and sharing something valuable. - Lens Studio’s team mapped a 19-step journey from visiting the website to submitting a first project. - By removing unnecessary steps and avoiding guidance for actions users already understood, they reduced the experience to four key moments. - User-journey mapping and testing help reveal which steps create delight, friction, or confusion. ## Meet developers in their communities - Product managers should engage directly with developers at meetups, conferences, hackathons, livestreams, and online communities. - Charmaine monitors AR discussions and attends events to learn developers’ language and gather candid feedback. - Building long-term context from these conversations enables better product decisions and more informed responses to user needs. ## Replace traditional marketing with DevRel - Developers tend to respond poorly to conventional marketing and prefer authentic communication. - Effective developer relations includes: - Real experiences and detailed product-building stories - Transparency about mistakes and limitations - A balance between accessible explanations and technical depth - DevRel should be a company-wide responsibility, not limited to a specialized team. - When employees advocate for both the product and its users, they can foster a more loyal developer community. The excerpt’s central recommendation is to design for users’ sustained progress, not merely their first impression: remove unnecessary friction, understand developers firsthand, and communicate with them honestly.

Read original(opens in new tab)
User ExperienceDeveloper ToolsAugmented RealityUnity+3
figma2 min readCurated summary

Updates to how drafts work | Figma Blog

Figma is moving Drafts for Starter and Professional users into team-associated spaces. The change is intended to clarify ownership, permissions, security, and plan features while keeping drafts private and free to create or edit. Users must eventually move existing drafts into a team, though no immediate deadline applies. ## Why Figma Is Changing Drafts - Drafts previously existed outside teams, creating: - Unclear ownership and team association - Inconsistent behavior across Figma plans - Limited access to paid features such as advanced prototyping, password protection, and Dev Mode - Ambiguous permissions between personal and professional work - Potential security, intellectual-property, and file-loss risks ## New Drafts Structure - Every draft must now belong to a team. - Each team provides members with a private drafts space. - Drafts in Professional teams can use Professional features when edited by eligible users. - Collaborators who are not full team members will be changed from editors to viewers when a draft moves, preventing unexpected paid seats. - Users with one Starter team may have their drafts migrated automatically. ## What Remains the Same - Drafts remain private to their owner and invited collaborators. - Users can create and edit personal drafts for free. - Starter teams can have unlimited viewers and unlimited editors on up to three collaborative files. ## Moving Existing Drafts - Users will find their files in a temporary “Drafts to move” space. - Drafts can be moved into any existing team or into a newly created free Starter team for personal work. - Existing collaborators can continue editing before migration, but new collaborators can only be added after moving a file to a team. - There is no hard deadline yet; unmoved drafts will eventually be transferred to a new free Starter plan after advance notice. ## Future Billing and Collaboration Improvements - Figma plans to make paid editor-seat upgrades clearer. - Planned improvements include better freelancer handoffs, support for users on multiple teams, license management, admin tools, and guest management. - The company is also redesigning its core billing experience. Figma recommends organizing drafts into the appropriate team—or creating a free Starter team for personal projects—to establish clearer separation between professional and personal work.

Read original(opens in new tab)
FigmaPrototypingDev ModeAccess Control+2
figma3 min readCurated summary

The Linear Method: Opinionated Software | Figma Blog

Linear argues that software should be intentionally designed around a clear use case rather than offering unlimited flexibility. Its defaults reduce process debates and help teams start working quickly, while the company remains willing to evolve its opinions through customer feedback and experimentation. The approach balances strong product principles with deliberate, manageable compromises. ## Opinionated Software as a Default Way of Working - Linear was created by founders with experience at companies such as Airbnb and Coinbase, who wanted an issue-tracking and project-management tool suited to modern product teams. - Unlike general-purpose software, opinionated software guides users toward one effective workflow. - The goal is to prevent the chaos that can emerge when every team or individual invents a different process as an organization scales. - Linear does not insist that its default is the only possible approach, but it makes the recommended path clear. ## Designing at the Atomic Level - Linear favors familiar concepts such as projects, teams, labels, and due dates instead of introducing specialized jargon. - Users should be able to start without reading a handbook or learning an elaborate methodology. - The company is most opinionated about small, foundational decisions—such as treating labels and due dates as issue properties. - For broader structures, such as how projects should work, Linear responds more heavily to customer feedback because organizations differ in how they operate. - The intended result is less time spent configuring processes and more time spent building products. ## Managing Product Debt Deliberately - Linear distinguishes product debt from technical debt: - Technical debt is generally associated with poor or costly code. - Product debt comes from narrowing scope, postponing polish, or optimizing for short-term delivery. - The team treats product debt as borrowing against the future, with “interest” paid through later customer feedback, redesign work, or additional resources. - Settings are an example: Linear has continued adding features and preferences without redesigning the overall experience. - Because settings are not central to the primary workflow, the team considers the accumulated debt relatively low-interest and acceptable to repay gradually. - These shortcuts are framed less as reducing quality and more as intentionally limiting scope. ## Strong Opinions That Can Change - Linear does not treat its principles as a rigid recipe; it expects the product and its processes to evolve. - The team supports experimentation and iteration instead of preserving every decision indefinitely out of fear of user resistance. - Changes that disrupt established workflows require care, but the company believes software must retain the ability to remove or rethink features. - Strong opinions are therefore held firmly enough to guide decisions, but flexibly enough to change when evidence shows a better direction. Linear’s method is most useful when teams want to reduce workflow complexity without eliminating adaptability. Establish clear defaults for common tasks, be deliberate about where flexibility matters, and treat shortcuts as temporary product debt that should be tracked and repaid when its cost becomes significant.

Read original(opens in new tab)
Product DevelopmentProject ManagementLinearIssue Tracking+2
figma2 min readCurated summary

Unlocking the Power of Code Connect | Figma Blog

Code Connect helps design systems bridge the gap between design and engineering by making implementation guidance and production code available directly in Figma’s Dev Mode. Leaders from Bumble, GitHub, and HP argue that successful adoption depends on creating shared terminology, meeting developers in their existing workflows, and introducing the tool incrementally. The broader conclusion is that Code Connect is a practical first step toward tighter, more consistent design-to-code collaboration. ## Establish a shared language - Designers and developers often use different naming conventions, component properties, and expectations. - Design systems can serve as a “third language” by defining shared terms, patterns, and components. - Documentation and design decisions must be easy to discover and implement, not merely documented somewhere. ## Bring design guidance into developer workflows - Teams often struggle to identify a single source of truth, leading to inconsistent implementations and duplicated code. - Designers may rely on design documentation while engineers consult separate technical sources. - Code Connect surfaces design-system documentation and implementation details directly in Dev Mode, reducing the need for developers to switch to external websites or tools. - This helps teams reuse established patterns instead of repeatedly creating custom solutions. ## Start small to encourage adoption - Design systems cannot assume that people will adopt them simply because they exist; reducing friction is essential. - Code Connect lets developers inspect how a design has been implemented without leaving their existing workflow. - Teams should begin with small, high-impact components such as toggles. - Mapping a few components first makes it easier to learn the process, demonstrate value, and expand gradually. - HP’s Gilson Hoffmeister describes Code Connect as a first step toward broader design-system improvements. ## Value both disciplines’ expertise - Effective design-to-code collaboration requires recognizing that designers and developers contribute different forms of expertise. - Code Connect is intended to connect those perspectives by delivering design-system code into Dev Mode. - Better alignment can improve consistency, speed, and the quality of handoff without requiring either discipline to abandon its established practices. Teams should begin with a small set of frequently used components, establish shared terminology and ownership, and use Code Connect to make authoritative implementation guidance available where developers already work.

Read original(opens in new tab)
FigmaDesign SystemsDesign To CodeDev Mode+2
figma2 min readCurated summary

Speeding Up File Load Times, One Page At A Time | Figma Blog

Figma improved file-loading performance by dynamically loading only the page a user opens instead of the entire file. This approach reflects user-perceived complexity, reduces memory usage, and avoids making small pages wait for unrelated content. For the slowest 5% of loads, the change reduced load times by 33%. ## Loading Content According to User Needs - Figma files can contain dozens of pages, hundreds of frames, components, styles, variables, and prototype screens. - Usage data showed that users often treat a file as an entire project but typically visit only a subset of its pages in one session. - Loading everything up front made a small page unnecessarily depend on the size of the whole file. - Dynamic loading lets Figma display the selected page first and fetch additional content only when needed. ## Cross-Page Read Dependencies - A Figma file is modeled as a tree of nodes, with nodes representing interactable layers and their properties. - Nodes can reference content located on other pages, creating cross-page dependencies. - An instance points to its backing component, which may be on another page; the component must be loaded before the instance can render correctly. - Styles and variables also create dependencies: - A fill style requires loading its corresponding style node. - A variable-based font size requires the variable node so the client can resolve the raw value. ## QueryGraph and Earlier Dynamic Loading - Figma had already developed dynamic loading for view-only files and prototypes. - Its QueryGraph framework stores dependency relationships as an in-memory graph. - The multiplayer system uses this graph to determine which parts of a file should be sent to connected clients. - Previous loading strategies included: - **Page-based canvas loading:** Load the selected page and its required dependencies, then fetch other pages on demand. - **Frame-based prototype loading:** Load the current prototype screen and preload reachable frames within a limited number of transitions. ## Performance Impact - The goal is for load times to trend downward even as files become larger and more feature-rich. - Dynamic loading improves both initial responsiveness and memory consumption. - The largest benefits appear in worst-case loads, with a reported 33% reduction for the slowest 5% of page loads. Figma’s approach demonstrates that large collaborative documents should be loaded according to the user’s immediate context, while dependency tracking ensures referenced content remains available when required.

Read original(opens in new tab)
FigmaPerformance OptimizationDependency GraphDynamic Loading+1
figma2 min readCurated summary

Keeping It 100(x) With Real-time Data At Scale | Figma Blog

Figma’s LiveGraph powers real-time collaboration by subscribing to GraphQL-like queries and updating clients automatically. Rapid growth—tripled sessions since 2021 and fivefold view-request growth in one year—exposed limits in its single-server, mutation-based architecture. Figma launched “LiveGraph 100x,” a redesign focused on scaling reads and database updates while preserving performance and enabling a safe migration. ## LiveGraph’s Role in Figma - LiveGraph keeps data synchronized across collaborative features such as: - File editing - Comments - FigJam voting - It exposes a web API for subscribing to GraphQL-like queries. - Results are returned as JSON trees based on a schema of entities, relationships, and views. - A custom React Hook automatically re-renders interfaces when subscribed data changes. ## The 100x Scaling Initiative Figma’s growing user base increased both the number and cost of LiveGraph client sessions. At the same time, the underlying database evolved from one PostgreSQL instance into vertically and horizontally sharded infrastructure. The redesigned system needed to: - Preserve or improve service-level objectives for initial loads and updates. - Support more database shards reliably and efficiently. - Scale reads and database-update processing independently. - Allow incremental, transparent migrations without disrupting users. ## Limitations of the Original Architecture Originally, LiveGraph consisted of: - A single LiveGraph server. - An in-memory query cache. - One PostgreSQL instance. - A cache that tailed PostgreSQL’s logical replication stream. PostgreSQL writes row mutations to its write-ahead log, including pre- and post-row images and a monotonically increasing sequence number. LiveGraph used these mutations to update cached query results directly rather than recomputing them. This design worked well at smaller scale because: - All updates came from one primary database. - The replication stream provided a global ordering. - Each row mutation could be applied directly to the relevant cached results. ## Sharding Breaks Global Ordering As the original PostgreSQL instance reached capacity, Figma introduced vertical shards and began moving toward broader horizontal scaling. This invalidated the assumption that all database updates arrive in one globally ordered stream. - Multiple shards can generate updates simultaneously. - Their updates have no guaranteed global order. - LiveGraph therefore needed an architecture that could process distributed database changes while maintaining reliable, timely query updates. The growing load made it necessary to rethink LiveGraph fundamentally rather than continue extending its single-database design.

Read original(opens in new tab)
PostgreSQLDistributed SystemsGraphQLReal Time Data+4
figma2 min readCurated summary

Craft and Beauty: The ROI of Marrying Form and Function | Figma Blog

Craft and beauty are presented as business advantages, not merely aesthetic preferences. Leaders from Stripe, Linear, and Figma argue that thoughtful details improve usability, engagement, conversion, and product differentiation. Their examples—including a 20% increase in email conversion and 11.9% higher average revenue for Stripe Checkout users—show that investment in quality can directly support growth. ## Craft Improves Usability and Conversion - Beauty can make products feel easier and more effective, an effect known as the **aesthetic usability effect**. - Clearer language, stronger visual hierarchy, and a smoother journey helped Stripe increase conversion from an email series by **20%**. - Every user touchpoint can either add or subtract value from the overall product experience. - Stripe’s Optimized Checkout Suite, whose quality and detail were key priorities, helped businesses generate **11.9% more revenue on average**. ## Craft as a Mindset, Beauty as the Result - Linear’s Karri Saarinen distinguishes between: - **Craft:** the mindset and care applied while creating something. - **Beauty:** the visible experience and quality that result. - Quality extends beyond appearance. A well-designed object or product should function smoothly, reliably, and pleasantly. - The central question is whether a team is committed to doing excellent work or merely completing tasks as quickly as possible. ## Performance and Quality Are Foundational - Figma views product quality as a hierarchy of needs. - Fundamental qualities such as web performance and a consistent **60 frames-per-second** experience must come first. - These technical foundations enable users to appreciate higher-level design and interaction details. - Craft also involves making products feel intuitive—so well-designed that users feel everything simply works. ## Craft Requires a Company-Wide Culture - Craft is not the responsibility of a single design team; engineering, product, design, and other functions all contribute. - Figma and Linear emphasize that quality should be an inherent cultural value rather than something enforced only through OKRs. - Stripe uses “friction logging” and multidisciplinary “walking the store” exercises, in which teams experience the product end to end as users do. - This approach helps teams identify and remove problems across the full customer journey. The practical recommendation is to treat craft as an organization-wide operating principle. Companies should invest in performance, clarity, usability, and detail at every touchpoint, because form and function together can create both a better experience and measurable business results.

Read original(opens in new tab)
FigmaUser ExperienceProduct DesignStripe+2
figma3 min readCurated summary

Figma’s journey to TypeScript | Figma Blog

Figma migrated its custom Skew programming language to TypeScript after its original performance advantages became less important than its maintenance and onboarding costs. Advances in mobile WebAssembly support, C++ engine integration, and team growth made the transition practical without sacrificing significant performance. The team completed the migration through an automated, gradual rollout that preserved development velocity and minimized production risk. ## Why Figma Moved Away from Skew - Skew originally helped Figma support prototype viewing across web and mobile. - Its compiler provided optimizations such as: - Constant folding - Devirtualization - Efficient JavaScript integer operations - Fast compile times - Over time, Skew became difficult to scale because: - New engineers struggled to learn it. - It integrated poorly with the broader codebase. - It lacked an external developer ecosystem. - Maintaining its specialized tooling outweighed its performance benefits. - TypeScript offered native package management, static imports, modern language features, extensive tooling, and easier hiring and onboarding. ## Why the Migration Became Possible - Mobile browsers gained broad WebAssembly support by 2018, with reliable performance by 2020. - Figma moved many performance-critical Skew components—especially hot paths such as file loading—to its C++ engine. - These C++ replacements reduced the performance penalty of moving less-critical code to TypeScript. - Larger prototyping and mobile teams provided enough capacity to invest in automated migration tooling. ## Addressing Performance Concerns - In 2020, early benchmarks showed TypeScript could make prototype loading nearly twice as slow in Safari. - Safari was especially important because WebKit was the only browser engine permitted on iOS at the time. - Improved WebAssembly support and the shift of core engine work to C++ made Skew’s compiler optimizations less essential. - Figma gained confidence that TypeScript could provide acceptable performance without recreating Skew’s custom compiler. ## Automated Skew-to-TypeScript Conversion - Manually rewriting the entire codebase would have disrupted development and increased the risk of runtime bugs and regressions. - Figma built a transpiler that converted Skew into TypeScript, extending earlier work by former CTO Evan Wallace. - The migration required care because Skew and TypeScript had different runtime semantics. - For example, TypeScript initializes namespaces and classes only after a module is imported, while Skew made symbols available globally when the codebase loaded. Unexpected import order could therefore introduce runtime failures. ## Three-Phase Rollout ### Phase 1: Write Skew, Build Skew - Figma kept the existing build process. - The new transpiler generated TypeScript from Skew. - Generated TypeScript was checked into GitHub so developers could inspect and prepare for the future codebase. ### Phase 2: Write Skew, Build TypeScript - Once the generated bundle passed unit tests, production traffic began using the TypeScript build. - Developers continued writing Skew. - The transpiler updated the TypeScript source automatically. - The team fixed type errors incrementally; TypeScript could still produce valid bundles despite those errors. ### Phase 3: Write TypeScript, Build TypeScript - After the team adopted the TypeScript build, the generated code became the source of truth. - Figma stopped automatic generation, deleted the Skew source, and required new development to use TypeScript. - The staged process allowed the team to detect and resolve issues such as a Smart Animate regression before completing the cutover. ## Practical Lessons - A custom language can provide valuable early advantages but become a long-term developer-experience liability. - Automated conversion is safer when paired with staged production rollouts and reversible adoption gates. - Controlling the original compiler made it possible to adapt the migration tooling to the codebase’s specific needs. - Figma’s approach demonstrates that large language migrations can preserve delivery speed when technical, performance, and organizational prerequisites are addressed first.

Read original(opens in new tab)
TypeScriptWebassemblyMobile DevelopmentC Plus Plus+3
figma3 min readCurated summary

Speeding Up C++ Build Times | Figma Blog

Figma cut C++ build times roughly in half by addressing unnecessary header inclusion rather than relying solely on faster hardware or caching. The team found that compiled bytes were growing much faster than the codebase itself, making transitive header dependencies the main culprit. They combined automated include analysis with CI-based measurement to prevent both unused includes and costly dependency regressions. ## Why Build Times Were Getting Worse - In 2023, Figma’s codebase grew by about 10%, but build times increased by 50%. - C++ builds were a major productivity problem and a top concern in internal developer surveys. - Faster M1 Max machines, Ccache, and remote caching provided only temporary or insufficient improvements. - The team observed that build times were closely related to the amount of code passed to the compiler after preprocessing. ## How C++ Header Inclusion Affects Builds - The preprocessor expands every `#include` into a single large file before compilation. - Transitive dependencies are included as well: - If file C includes B, and B includes A, C receives the contents of both A and B. - As a result, a small source change can cause the compiler to process a very large amount of unrelated code. ## Removing Unnecessary Includes - Figma suspected that many files included headers they did not use directly or relied on headers only for transitive dependencies. - Removing unnecessary includes from the largest files produced: - A 31% reduction in compiled bytes. - A 25% reduction in cold build time. - These results confirmed that compiled byte volume was strongly correlated with build performance. ## DIWYDU: Automating Include Cleanup - Google’s Include What You Use (IWYU) tool was considered but proved difficult to apply retroactively to Figma’s large codebase. - Figma created a less strict alternative called **Don’t Include What You Don’t Use (DIWYDU)**. - DIWYDU: - Uses Python bindings for `libclang`. - Parses source and header files into Clang Abstract Syntax Trees. - Identifies types, functions, and variables directly used by each file. - Flags headers that are included but provide no directly used symbols. - The tool runs on feature branches to prevent unnecessary includes from accumulating. ## DIWYDU’s Limitations - It analyzes Figma-owned files but excludes Standard Template Library headers. - STL headers may define symbols through private internal includes, making direct dependency analysis difficult. - Python’s `libclang` bindings expose less of Clang’s AST than the compiler’s native C++ APIs, sometimes producing `UNEXPOSED_EXPR` nodes. - A future C++ implementation could provide more accurate AST access. - DIWYDU cannot detect cases where an included header is genuinely required but excessively large. - Such regressions may need forward declarations or header decomposition instead. ## Measuring Dependency Growth with `includes.py` - Figma built `includes.py` to measure the transitive bytes associated with each source file. - The tool is written entirely in Python and typically runs in a few seconds without invoking Clang. - It: - Crawls first-party source, header, and generated files. - Counts file sizes. - Builds a dependency graph. - Estimates the total bytes passed to the compiler for each source file. - Standard library includes are treated as zero bytes because Figma mainly accesses them through internal wrapper directories. - CI uses the measurements to compare pull requests and warn authors when changes significantly increase compiled bytes. Figma’s approach demonstrates that controlling header dependencies can deliver larger and more durable gains than simply adding hardware or cache capacity. Teams working on large C++ codebases should automate unused-include checks, measure transitive dependency size in CI, and use forward declarations or smaller headers when necessary.

Read original(opens in new tab)
CI/CDPythonC++Static Analysis+4
figma2 min readCurated summary

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

Figma’s “Find your framework” newsletter highlights ideas and resources from its virtual Framework design systems event. It emphasizes that successful design systems require more than reusable components: teams must connect design to code, market the system internally, teach its fundamentals, and use it to support growth. The post points readers toward Framework announcements, expert discussions, and practical case studies. ## Framework Event Highlights - Framework brought together design systems practitioners and product builders to discuss current challenges and practices. - Figma announced: - **Code Connect**, which links design-system components in Figma to their code implementations. - **Typography and gradient variables** for more flexible, consistent design foundations. - **Library Analytics API** to help organizations measure and improve design-system adoption. - The event also included roundtables and expert Q&As. ## Treating a Design System Like a Product - Design systems become valuable only when teams actually use them. - Adoption requires product thinking, including: - Understanding internal users and their needs. - Communicating the system’s benefits clearly. - Building an internal marketing and adoption strategy. - The goal is to make the design system an indispensable part of the company’s toolkit, not merely a library maintained by a specialized team. ## Design Systems 101 - Figma’s introductory series is aimed at teams beginning their design-system journey. - The guides explain: - What a design system is. - How design systems work. - How they can change design workflows. - How to build one from the ground up. ## Using Design Systems to Fuel Growth - Carvana’s case study shows how a design system can support rapid business and product expansion. - The company used its design system and variables to: - Maintain consistency while responding to sharply increased customer demand. - Scale design across its e-commerce product. - Keep visual details synchronized throughout periods of change. Figma’s overall recommendation is to combine strong system foundations with adoption efforts, developer integration, education, and measurement so the design system can scale with the organization.

Read original(opens in new tab)
FigmaDesign SystemsDesign TokensAPI+2
figma2 min readCurated summary

What We Launched at Framework 2024 | Figma Blog

Figma’s Framework 2024 launches focus on increasing design-system adoption across organizations. The central argument is that creating a system is only half the challenge; teams must also make it useful and accessible to developers and other stakeholders. Code Connect, typography and gradient variables, and the Design System Analytics API are presented as tools for bridging design and code, improving consistency, and measuring adoption. ## Design System Adoption as the Central Challenge - Design systems have become more powerful and sophisticated, but that complexity can make organizational adoption harder. - Figma emphasizes that successful systems require more than components and documentation—they need an adoption strategy. - The new releases build on earlier updates such as variables, theming, state management, advanced prototyping, and Dev Mode. - Figma frames design-system advocacy partly as a marketing problem: teams must persuade designers and developers to use the system consistently. ## Code Connect Bridges Design and Code - Code Connect brings production-ready code snippets directly into Figma’s Dev Mode. - Developers can find the implementation for a design-system component without searching through separate documentation. - Copying the relevant snippet is intended to reduce inconsistencies and make the design-to-code process faster. - The beta supports React, iOS, and Storybook, with additional frameworks and platforms planned. - Bumble, GitHub, and HP shared their design-system challenges and early experiences with Code Connect. ## Typography and Gradient Variables Expand Token Coverage - Figma describes typography as an essential part of a complete design system that was previously difficult to represent with variables. - Typography variables allow teams to define font scales once and apply them consistently throughout a product. - They can support platform-specific adjustments and accessibility goals, including WCAG-compliant type scales. - Gradient variables, introduced alongside typography variables, further align Figma variables with the range of design tokens teams need. ## Analytics for Measuring Adoption - Figma also announced the Design System Analytics API, referred to in the introduction as the Library Analytics API. - The API is intended to help design-system teams understand usage across an organization. - By measuring adoption, teams can identify where systems are being used effectively and where additional education, improvements, or outreach may be needed. Figma’s overall recommendation is to treat a design system as an organizational product: provide developers with usable code, cover essential tokens such as typography and gradients, and use analytics to guide adoption efforts.

Read original(opens in new tab)
FigmaDesign SystemsReactDesign Tokens+3