techlist.io
KREN

Figma

736 posts

www.figma.com/blog/engineering

Filter by tag

Figma528Design Systems246User Experience140Prototyping135AI110Figjam98Product Design76User Interface63Generative AI47Collaborative Design47Accessibility41React39+1265
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)
FigmaDesign SystemsDev ModeCode Connect+2
figma2 min readCurated summary

The Infrastructure Behind AI Search in Figma | Figma Blog

Figma’s AI search lets users find designs and components through text, screenshots, or layer selections. It relies on multimodal embeddings, vector nearest-neighbor search, and large-scale indexing of frames and components. The main infrastructure challenge was generating and indexing billions of embeddings efficiently while controlling costs. ## AI-Powered Search Flows - **Search for designs** indexes frames across users’ files, including unlabeled frames buried in complex files. - Users can search designs: - Lexically with a text description - Visually with a screenshot - By selecting similar Figma layers - **Search for components** enhances the Assets panel with semantic matching. - A component representing 😀 can be found with terms such as “smiley,” “happy,” “face,” or “grin.” - Designers no longer need to manually add every possible keyword to component descriptions. - Components can also be found using visual queries. ## Multimodal Embeddings - An embedding model converts text or images into numerical vectors that represent their meaning. - Figma uses the open-source **CLIP** model, which places text and images in the same embedding space. - The embedding for the word “cat” should be numerically close to an embedding generated from an image of a cat. - Figma’s models were not trained on private customer files or data. - Fine-tuning used interface images from public, free Community files. - Search works by: - Generating embeddings for indexed content - Creating an embedding for the user’s query - Finding indexed vectors that are nearest to the query vector - Figma tested embeddings based on textual representations such as JSON, but image-based embeddings produced better results and supported the same workflow as screenshot search. - Layer selections are converted into screenshots before being passed to the embedding model. ## Populating the Vector Search Index - Each searchable item requires: - A thumbnail or rendered screenshot - An embedding - Metadata stored in the search index - Figma uses DynamoDB for metadata and embeddings because the workload primarily requires high-throughput key-value reads and writes. - Identifying searchable frames is difficult because unpublished frames are not directly enumerable. - Figma runs a headless, server-side version of its C++ editor in asynchronous jobs to discover frames within files. - These jobs use server-side sandboxing techniques to safely run the editor. Figma’s approach combines CLIP-based multimodal representations, server-side rendering, asynchronous processing, and scalable vector storage to make visual and semantic search practical across large design systems.

Read original(opens in new tab)
Multimodal AIVector DbC++Embeddings+2
figma2 min readCurated summary

The Search for Speed in Figma | Figma Blog

Figma’s search investigation revealed that OpenSearch itself was responsible for less than 30% of total search latency. The larger costs came from query construction and especially permission checks before and after searches. By measuring the correct end-to-end metrics, Figma identified misleading monitoring data and established a foundation for improving search performance at scale. ## Diagnosing the Latency Gap - Figma migrated from an older Elasticsearch version to AWS-managed OpenSearch, a fork created after Elasticsearch’s 2021 license change. - OpenSearch reported an average search time of roughly **8 ms**, while Figma’s API showed: - About **150 ms average latency** - **200–400 ms** latency at the 99th percentile - Minimum latency above **40 ms** - Search performance also varied significantly depending on traffic levels, with peak periods much slower than weekends. - Additional instrumentation showed that substantial time was spent both before and after the OpenSearch request. ## Understanding OpenSearch’s Metrics - OpenSearch distributes a query through a coordinator node to worker nodes, typically sending one request per index shard. - It then gathers, sorts, and fetches results during the query and fetch phases. - The reported 8 ms metric measured only the average time for individual shard queries—not the total time required to coordinate hundreds of shard requests. - Figma’s queries could involve as many as **500 shard-level requests**, many of which ran in parallel but not all. - OpenSearch did not provide built-in metrics or logs for overall query duration. - Figma instead extracted the `took` value from each search response, producing a backend latency measure that aligned more closely with application-level timing. ## Permission Processing as the Main Bottleneck - Less than 30% of total query API time was spent waiting for OpenSearch. - Pre-processing: - Retrieved information about files the user could access. - Built an OpenSearch filter intended to exclude inaccessible files. - Post-processing: - Performed additional permission checks on every returned file. - Was especially slow and consumed more time than the search itself. - The investigation demonstrated that optimizing the search engine alone would not solve Figma’s overall latency problem. Figma’s experience highlights the importance of measuring end-to-end request latency rather than relying on subsystem metrics. Accurate coordinator-level and application-level instrumentation is essential, particularly when distributed searches involve many shards and expensive authorization work.

Read original(opens in new tab)
ObservabilityAWSElasticsearchOpensearch+2
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)
FigmaDesign SystemsUser ExperienceUser Interface+2
figma3 min readCurated summary

Building a better First Draft for designers | Figma Blog

Figma reintroduced its AI design-generation feature as **First Draft**, repositioning it as a starting point rather than a finished product. After disabling the original Make Designs feature because its outputs too closely resembled existing apps, Figma rebuilt the system with improved design libraries and safeguards. First Draft was later folded into Figma’s more powerful design agent, which adds iterative prompting, bulk edits, and live feedback. ## The Purpose of First Draft - First Draft is designed to reduce the tedious work required to turn an idea into an initial design. - It helps designers: - Express an idea through a simple prompt - Start productive discussions - Explore multiple design directions - Move more quickly from concept to prototype - Figma presents it as an additional way to explore possibilities, not a replacement for design judgment or craft. ## How the AI Generates Designs - First Draft uses off-the-shelf AI models, including OpenAI’s GPT-4 and Amazon Titan. - It combines three elements: - **Model:** The underlying AI system - **Context:** Figma’s proprietary mobile and desktop design systems, components, and assembly examples - **Prompt:** The user’s description of their design goal - The AI selects, arranges, and customizes components from the relevant design system to produce an initial design. ## Lessons from Make Designs - Figma originally introduced the feature as **Make Designs** during Config 2024. - The company disabled it after discovering that problems in the underlying design system caused generated mockups to resemble existing applications too closely. - Following analysis, testing, and iteration, Figma relaunched the feature under the name **First Draft**. - The new name emphasizes that the output is meant to be a flexible jumping-off point rather than a polished final design. ## Design Libraries and Future Customization - Users can choose among four libraries tailored to different needs: - Low-fidelity wireframes - More visually expressive, high-fidelity designs - Site-oriented patterns - App-oriented patterns - This contrasts with Visual Search, which helps users find exact existing files or components. - Figma’s longer-term goal is to let organizations use their own custom libraries and company-specific design languages. - The company is also exploring code-backed systems such as Google Material 3 to help designers and product teams iterate more closely with implementation. ## From First Draft to Figma’s Design Agent - First Draft is now incorporated into Figma’s purpose-built design agent. - The agent extends the original concept with: - Re-prompting and deeper iteration - Automated bulk edits - Live feedback on designs and user flows - Direct interaction through chat on the canvas Figma’s approach is to use AI to accelerate early exploration while keeping designers in control. The current recommendation is to use the design agent as an iterative partner for generating, refining, and evaluating ideas rather than treating AI output as a finished solution.

Read original(opens in new tab)
Design SystemsUser ExperienceGenerative AIFigma Ai+2
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)
FigmaGenerative AIGithubGithub Copilot+3
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)
FigmaDesign SystemsDesign TokensTypography+2
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)
FigmaTypographyBrandingTypeface Design+2
figma2 min readCurated summary

Breaking In: A Guide To Landing Your First Product Design Role | Figma Blog

Figma’s guide explains how aspiring product designers can land their first role by presenting strong work, communicating their thinking, and showing how they learn from challenges. It emphasizes that a portfolio should be personal but focused on clear storytelling, accessible navigation, and evidence of design impact. The strongest projects are those where candidates can explain their decisions, trade-offs, constraints, and outcomes. ## Crafting a Portfolio - Portfolios do not need to follow one prescribed format or use a specific website builder. - The priority is to: - Showcase your best work. - Tell compelling project stories. - Make the portfolio easy to navigate. - Represent your individual perspective and skills. ### Lead with Your Best Work - Your first project creates the initial impression, so lead with work that best demonstrates your: - Design skills - Creativity - Process - Product impact - If choosing between projects, feature the one you can discuss most naturally and explain most compellingly. - Strong case studies should include: - A clear problem statement - Important project milestones - An insightful conclusion - Relevant metrics and learnings - What you would change in retrospect - A project does not need to have been an overwhelming success. Honest reflection and lessons learned can create a stronger narrative. - Explain the reasoning behind design decisions, not just the final visuals. - Discuss the trade-offs, advantages, disadvantages, constraints, and implications of choices involving colors, components, styles, and copy. - Figma designer Tammy Taabassum argues that explaining “why” demonstrates product thinking more effectively than simply showing “what” was designed. ## Figma’s Early-Career Opportunities - Figma welcomes interns and new graduates onto its product design team. - Early-career designers are encouraged to contribute actively and bring new ideas rather than merely observe. - The guide is intended to explain what Figma looks for and how aspiring designers can prepare for its interview process. A practical approach is to build a portfolio around a few well-developed case studies, prioritize the work you can explain most clearly, and make your decision-making and learning as visible as the final design.

Read original(opens in new tab)
FigmaUser ExperienceGenerative AIProduct Design+3
figma2 min readCurated summary

A Year With Dev Mode: 10 Lessons From An Engineering Manager | Figma Blog

After a year using Figma Dev Mode at Decathlon, Laurent Thiebault found it transformative for connecting design and development workflows. The biggest improvement came from Code Connect, which links Figma components to real implementation code and helps resolve mismatches in properties, naming, and states. His overall recommendation is to adopt Dev Mode incrementally, using design tokens, advanced inspection, and embedded documentation to build trust and alignment. ## Start Small, Think Big - Developers may resist adding another tool to established workflows, so the team began with small wins rather than a full process overhaul. - Figma variables helped the team improve design-token handoff. - Variable aliasing creates a clear token hierarchy and supports semantic theming. - Variable scoping prevents incorrect usage, such as applying background colors to text or spacing values to corner radii. - Customized code syntax allows token names to match developer conventions across platforms. - Token changes can expose the corresponding implementation changes directly to developers. ## Use Advanced Inspection Capabilities - Dev Mode handles complex layouts, including Flexbox, and generates implementation-ready code. - Teams can inspect CSS, SwiftUI, UIKit, Android XML, and Jetpack Compose properties. - These inspection tools help designers verify that components are implemented according to specifications. - The Figma VS Code extension adds autocompletion and makes it easier to navigate CSS, Compose, and SwiftUI implementations. ## Define What “Done” Means - Keeping design-system documentation current is difficult, and design intent can be lost during handoff. - Dev Mode documentation and annotations keep requirements closer to the designs themselves. - Designers can add free-text explanations, defined values, measurements, alignment details, and sizing guidance. - Developers can be linked directly to relevant annotations for additional context. - The team documents components with links to GitHub source code, README files, and related playgrounds. ## Code Connect as the Central Improvement - Code Connect connects Figma components directly to the components used in production code. - It helps reconcile differences between how components are structured in design files and how they are implemented in code. - The feature improves consistency around component properties, naming conventions, and state management. - Combined with design tokens and inspection tools, it makes Dev Mode a more reliable bridge between design systems and engineering. Teams adopting Dev Mode should start with focused improvements—especially token management and documentation—then expand toward deeper code integration with Code Connect.

Read original(opens in new tab)
Design SystemsDesign TokensSwiftuiFlexbox+4
figma3 min readCurated summary

How Crunchyroll Clarified Confusing Workflows with Dev Mode | Figma Blog

Crunchyroll’s global scale—15 platforms, 12 languages, and many legacy workflows—makes consistent product design difficult. Its Universal Design System helps standardize experiences and improve delivery speed, but outdated processes and fragmented documentation created confusion. Moving handoff and implementation guidance into Dev Mode has made design-to-development collaboration faster, clearer, and easier to maintain. ## Crunchyroll’s Design Complexity - Crunchyroll serves around 15 million fans across: - Web and mobile applications - Smart TVs, game consoles, set-top boxes, and Roku - Nine living-room platforms - Supporting multiple languages and complex licensing requirements increases product complexity. - The company also extends beyond streaming through the Crunchyroll Store and Game Vault. - Its goal is to create a deeply relevant experience for anime fans rather than a generic service for everyone. ## Measuring Design Success - James Hsu defines successful design through two baseline criteria: - It looks good, using sound typography, grids, spacing, and visual hierarchy. - It works well, with clear content, thoughtful interactions, and no frustrating edge cases. - A design can be visually polished but still fail if users become trapped in confusing flows or loops. ## The Role of the Universal Design System - The design system promotes consistency across devices, reducing cognitive load caused by inconsistent fonts, grids, spacing, or responsive behavior. - Reusable components improve team efficiency, much like meal preparation: - Teams can build from existing solutions. - New components can be evaluated based on their cost and value. - Shared patterns speed up product delivery and help product teams validate ideas quickly. - Engineers also benefit from avoiding duplicated implementations, reflecting the “Don’t Repeat Yourself” principle. ## Adapting the Design System to Reality - Crunchyroll uses: - A foundational design layer - Separate component libraries for individual clients - The system still contains many one-off components, numerous variants, and an underdeveloped type system. - The team rejects treating the existing system as an unchangeable process. - The design system should serve current product needs, not constrain teams because of decisions made by previous teams. - Different designers are at different stages of understanding and adopting the system, making education and early investment important. ## Problems with the Previous Workflow - Design and code parity was managed through complicated Jira workflow triggers. - Component changes generated automated alerts, but time-zone dependencies and convoluted processes meant stakeholders often lacked the latest information. - Documentation was split across separate Zeplin projects for iOS, Android, tvOS, and Android TV. - Finding the right flow required invitations, navigating branches, and comparing against outdated designs. - Searching for a specific payment signup flow could take several minutes per artboard, making implementation research slow and frustrating. - Handoff statuses were ambiguous: - Designers submitted work for review. - Reviewers moved it back to “in progress.” - Exported designs were not necessarily final. - Engineers had to rely on labels such as “ready for development.” ## How Dev Mode Improved Handoff - Dev Mode gives engineers direct access to design values and helps them identify the correct component. - Designers now create a dedicated, organized page when work is ready for development. - The page is labeled “ready for development,” and engineers receive a link directly to it. - Engineers no longer need to sift through ideation or outdated explorations. - Faster loading and parsing removed a major pain point from the previous tool. - The team supported adoption through documentation and onboarding workshops for developers. - Crunchyroll is also interested in integrating Code Connect to make its existing design-system code more accessible. Crunchyroll’s experience suggests that a design system is most effective when paired with clear ownership, focused documentation, and a streamlined handoff process. Dev Mode helped replace fragmented legacy workflows with a faster path from approved design to implementation.

Read original(opens in new tab)
FigmaDesign SystemsUser ExperienceDesign To Code+4
figma2 min readCurated summary

The Three Cs of Figma: A Beginner’s Guide to Success | Figma Blog

Figma beginners should focus less on memorizing individual features and more on building practical skills through three stages: creation, customization, and collaboration. The author argues that this framework makes learning more structured and helps users progress from making simple designs to creating reusable resources for their teams. Learning by doing, seeking help, and setting realistic milestones are central to that progression. ## Establishing Goals, Timelines, and Mindset - Define what you want to learn and how Figma fits into your role, whether in design, development, product management, or education. - Suggested milestones: - **30 days:** Learn basic tools, collaboration practices, and file organization. - **60 days:** Pilot projects and identify knowledge gaps. - **90 days:** Add more advanced features to your workflow. - Adopt a hands-on learning approach by experimenting, making mistakes, and rebuilding. - Share work and ask questions through coworkers, Slack, social media, or the Figma Community Forum. - Take breaks and allow time for unfamiliar tools and processes to become natural. ## The Three Cs of Figma - **Creation:** Learn to make a basic design element. - **Customization:** Use advanced features to make the element flexible and reusable. - **Collaboration:** Share the work with teammates and provide components or documentation they can use. - The three stages function like rungs on a ladder: users first create something, then improve its adaptability, and finally make it useful to others. - Figma’s Help Center, YouTube channel, virtual events, and community resources support this learning process. ## Applying the Framework to a Button - A button provides a practical example of the three Cs: - Create a basic button. - Turn it into a reusable component. - Publish it so teammates can use it in their own files. - This approach connects individual feature knowledge to real design workflows and team collaboration. - Figma provides a playground file for practicing the progression. The practical recommendation is to learn Figma through small, complete projects rather than isolated feature tutorials. Build something, make it reusable, and share it with others while progressing at a sustainable pace.

Read original(opens in new tab)
FigmaDesign SystemsPrototypingUser Interface+2
figma3 min readCurated summary

The Atlassian Method: The Power of Developer Joy | Figma Blog

Atlassian treats “developer joy” as more than a smoother developer experience: it is a company-wide philosophy centered on reducing friction and protecting the craft of development. After poor productivity and satisfaction in 2022, Atlassian standardized tools, improved processes, and empowered engineering teams to address frustrations directly. The effort produced major gains, including higher satisfaction, faster pull-request cycles, more frequent deployments, and improved roadmap delivery. ## Developer Joy as a Company Priority - Developer experience typically covers workflows, tools, and processes; developer joy focuses more deeply on the values, standards, and craft of development. - Atlassian found that developers lose more than eight hours per week—about 20% of their time—to inefficiencies. - Common sources of friction include: - Searching for information and solutions - Poor tooling and redundant systems - Cross-functional coordination with design and other teams - Planning and process overhead - In 2022, Atlassian frequently missed public roadmap commitments, while developer satisfaction fell below 50%. ## Operationalizing Joy - Atlassian created a cross-functional “champions” program to identify and eliminate organizational frustrations. - The initiative focused on: - **Systems:** Auditing tools and processes, standardizing where possible, and removing redundant tools—the company’s “Noah’s Ark of tooling.” - **Culture:** Establishing coding standards, shared values, and metrics that emphasized quality and craft, not just efficiency. - Every engineering team allocated 10% of its time to developer productivity improvements. - This gave developers an “ownership stake” in solving the problems affecting their work. - Developer joy became a company-wide OKR reported by teams every month. ## Measuring the Business Value - Atlassian accepted short-term tradeoffs, prioritizing engagement and productivity improvements over immediate revenue optimization. - The company measured both quantitative and qualitative outcomes. - Within a few months, it achieved: - A 50% increase in developer satisfaction - A 50% reduction in median pull-request cycle time - A threefold increase in deployment frequency - Delivery of all customer roadmap commitments instead of repeated delays - An increase in internal CSAT from below 50% to 80% - The results reinforced the idea that investments in tools, processes, and clear measurement compound over time. ## Toward Team Joy - The success of developer joy helped Atlassian build broader support for applying the same principles beyond individual developers. - The initiative began moving toward the larger concept of “team joy,” extending the focus to collaboration and the shared experience of delivering work. Organizations seeking similar results should treat developer productivity as an ongoing company responsibility: give teams dedicated time to improve their systems, reduce unnecessary complexity, and measure satisfaction alongside delivery performance.

Read original(opens in new tab)
Software DevelopmentDevOpsDeveloper ExperienceAgile+3
figma3 min readCurated summary

How We Migrated onto K8s in Less Than 12 months | Figma Blog

Figma migrated most of its core services from AWS ECS to Kubernetes in under 12 months because ECS was increasingly limiting its platform ambitions. Kubernetes offered better support for stateful workloads, Helm-based software, autoscaling, service networking, and the broader CNCF ecosystem. The migration was considered worthwhile because Figma had relatively few core services and had already containerized its workloads, making the transition more manageable. ## Figma’s Existing Compute Platform - By early 2023, Figma was already running all services in containers on Amazon ECS. - ECS had enabled rapid adoption of containerized workloads, but Figma’s growing infrastructure team began evaluating a more capable long-term platform. - Figma is not organized around thousands of microservices: - A small set of powerful core services provides modularization and traffic isolation. - New product capabilities are usually added to existing services rather than creating new ones. - This limited service count made a Kubernetes migration more practical. ## Limitations of ECS - ECS lacked Kubernetes primitives needed for complex workloads. - Running `etcd` on ECS required fragile custom startup code to manage cluster membership because ECS does not provide StatefulSets or persistent pod identity. - Kubernetes StatefulSets provide stable identities and stateful networking for systems such as `etcd`. - ECS did not natively support deploying groups of services packaged as Helm charts. - Open-source tools such as Temporal would require manual conversion into Terraform configurations. - This increased installation and maintenance effort. - ECS also made routine infrastructure operations more cumbersome. - For example, safely removing a malfunctioning EC2 instance was difficult. - EKS can cordon a node and move its pods elsewhere while respecting graceful shutdown behavior. ## Access to the CNCF Ecosystem - Kubernetes would give Figma access to a larger ecosystem of open-source cloud-native tools. - Autoscaling was a major motivation: - Figma was provisioning services for peak demand, wasting resources during lower-traffic periods. - Kubernetes tooling such as KEDA supports scaling based on CPU, SQS queue length, and custom Datadog metrics. - Figma expected to adopt a service mesh eventually. - Existing AWS load balancer routing created operational drawbacks: - Network Load Balancers could take several minutes to register or remove targets. - This slowed emergency deployments and increased incident remediation time. - Envoy offered more customization than AWS load balancers, including custom filters for shedding load during incidents. - Figma had already deployed standalone Envoy machines for a major service and saw Kubernetes ecosystems such as Istio as a path toward fleet-wide service-mesh adoption. Figma’s experience suggests that Kubernetes was justified not simply as a replacement for ECS, but as a foundation for more capable operations and broader platform tooling. Organizations considering a similar move should first assess their workload complexity, existing container maturity, and whether Kubernetes capabilities will materially reduce infrastructure work.

Read original(opens in new tab)
KubernetesDocker & ContainersTerraformHelm+4
figma2 min readCurated summary

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

Figma’s sixth issue of *The Prompt* examines how AI is changing design, engineering, product development, and human curiosity. Its central argument is that adopting AI requires more than learning new tools: it requires understanding which human skills—judgment, creativity, problem selection, and curiosity—remain essential. The issue presents AI as a collaborator that can expand creative and technical work without replacing the craft behind it. ## AI and the Future of Design - Figma’s design leaders ask what “good design” means as AI makes product development more accessible. - As execution becomes easier to automate, design judgment and strong craft principles become more important differentiators. - The focus is on building practical, thoughtful products with AI rather than pursuing novelty for its own sake. ## What Engineers Contribute Beyond Code - Figma CTO Kris Rasmussen argues that engineering is not merely the production of code. - Engineers provide value by identifying which problems matter and determining effective ways to solve them. - AI may commoditize portions of coding, but it also creates space for engineers to focus on architecture, judgment, problem framing, and higher-level innovation. ## Curiosity and Judgment-Free Questions - Perplexity CEO Aravind Srinivas describes AI-powered search as a continuation of encyclopedias and wikis. - The goal is to give people a source of answers without the social pressure or embarrassment that can inhibit curiosity. - AI can act as a “copilot” for exploration, though improving the reliability and usefulness of its answers remains an ongoing challenge. ## Humanoid Robots and Embodied AI - The issue considers whether humanoid robots are finally moving from science fiction into everyday reality. - Androids reflect humanity’s longstanding fascination with reproducing intelligence and ourselves in technological form. - Conversations with robotics builders explore both the promise and the risks of giving AI a physical body. ## The Role of Print and Material Experience - *The Prompt* is also an 80-page print magazine produced with Figma’s Brand Studio and designer Chloe Scheffe. - Vellum paper, illustration, color, layout, and physical materiality interpret the issue’s themes. - The print edition emphasizes experiences that digital tools and AI cannot fully reproduce, reinforcing the value of tangible, intentional creative work. AI’s greatest potential lies in extending human abilities rather than eliminating them. Designers and engineers should use it to increase experimentation and efficiency while preserving the judgment, creativity, and curiosity that give their work meaning.

Read original(opens in new tab)
AIGenerative AIProduct DesignSoftware Engineering+2