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

figmaFeb 26, 20242 min readCurated summary

Nicole Boettcher’s Figma-Designed Quilts | Figma Blog

Nicole Boettcher, a former product designer, uses Figma to design and plan her quilts. Her UX background leads her to carefully map patterns, colors, measurements, and sewing steps before cutting fabric. Figma helps her iterate quickly, reduce waste, and translate digital layouts into precise handmade pieces. ## From Product Design to Quilting - During the pandemic in 2021, Nicole left product design at Artsy and began learning to quilt. - She taught herself through online tutorials and beginner patterns. - As her projects grew more ambitious, she turned to Figma to create original designs. - She designs roughly 80% of each quilt digitally before cutting any fabric. ## Building Designs in Figma - Nicole often starts with a traditional quilt block and experiments with its shapes, colors, and proportions. - She maintains a Figma color library using swatches from fabric manufacturers. - Existing fabric supplies influence her palette and pattern choices. - Figma makes it easy to recolor sections, adjust layouts, and create many variations. - Plugins such as Random Colors Fill help her explore different palettes. - Auto layout allows her to move or modify entire rows of a quilt grid at once. ## Planning Fabric and Construction - Once a design is finalized, Nicole duplicates it and breaks it into individual pieces. - The Count Things plugin helps calculate quantities, such as the number of rectangles and squares required. - Pixels in her Figma files correspond to inches in the physical quilt. - She plans cuts carefully to minimize scraps and use fabric efficiently. - She adds a quarter-inch seam allowance to each side of every piece before estimating fabric requirements. - She also rearranges pieces digitally to determine an efficient sewing sequence and reduce unnecessary steps. ## Inspiration and Influences - Nicole draws inspiration from quilting books and artists on Instagram. - She recommends exploring Amish quilts and Gee’s Bend quilts. - Favorite sources include accounts focused on vintage quilts and contemporary textile artists. Figma gives Nicole a bridge between digital product design and physical craft: it lets her experiment freely while preserving the precision quilting requires. For complex, material-intensive projects, digitally planning patterns and construction can save both time and fabric.

Figma User Experience Product Design Auto Layout+2

figmaFeb 26, 20242 min readCurated summary

Behind the Feature: Inline Device Frames | Figma Blog

Inline device frames bring interactive phone, tablet, and watch mockups directly into the Figma editor, making prototypes feel closer to real-world use without switching to presentation view. The feature evolved from Figma’s inline preview and was designed to make devices tangible, movable, and resizable. Its development balanced realistic device representation with intuitive interactions and collaborative input from Figma’s community and cross-functional teams. ## Prototyping in the Editor - Figma introduced inline device frames as part of broader prototyping improvements. - Designers can preview their work within representations of mobile, tablet, and watch devices. - The goal is to help teams identify usability gaps and opportunities earlier by experiencing how designs actually behave. - Other announced prototyping updates included: - Copying and pasting interaction “noodles” - Faster flow deletion - Importing elements with local variables into new files - A 22% reduction in loading-spinner time in key use cases ## A Collaborative Foundation - Figma previously offered device presets in presentation view, but the team wanted to make them available beside designs in the editor. - The intended experience was for devices to feel tangible: - Users should be able to grab, move, and resize them. - Frames needed to be dynamic and responsive rather than static images. - Development combined community research with feedback from engineering, design, product management, and marketing teams. - Three guiding principles shaped the feature: - Seamless integration into the design process - Realistic representation of diverse devices - Intuitive interactions through clearly defined hit targets ## Representing Different Devices - The inline preview’s space constraints led the team to prioritize phones, tablets, and watches rather than larger personal-computer interfaces. - Supporting many device shapes and sizes created significant design and engineering challenges. - The team had to account for details such as smartphone notches, which house front-facing cameras and sensors. - Watch frames raised additional questions about where users should be able to interact and resize the device. Inline device frames are intended to make prototyping more immediate and realistic while preserving the flexibility of the Figma editor. Designers can use them to evaluate designs in context without leaving their working file.

Figma Prototyping Responsive Design User Interface Design+2

figmaFeb 25, 20242 min readCurated summary

David Hoang on how AI brings design and development together | Figma Blog

AI is reshaping creative tools by making interfaces more dynamic, multimodal, and less fully controlled by designers. David Hoang argues that design and engineering are converging as AI augments both disciplines, enabling more people to move from learning and prototyping to shipping real products. Replit’s focus is “Artificial Developer Intelligence” (ADI), aimed at increasing autonomy, productivity, and collaboration rather than pursuing general intelligence. ## Dynamic Interfaces and a New Design Paradigm - Like the rise of mobile, AI is resetting the field and giving designers an opportunity to rethink how people interact with technology. - Interfaces will increasingly adapt across modalities and form factors instead of presenting a fixed, fully designed experience. - Designers must relinquish some control over presentation while shaping how systems behave and respond. - AI, spatial computing—including Apple Vision Pro—and other emerging technologies are converging to create new interaction models. ## Design and Engineering Converge - AI can augment both designers and engineers, making the boundaries between the disciplines less distinct. - Product development is evolving toward a tightly integrated design-and-engineering practice. - Replit frames this strategy as Artificial Developer Intelligence, or ADI, rather than Artificial General Intelligence. - ADI is intended to give people greater autonomy and productivity through collaboration between humans and AI. ## Replit’s Vision for Artificial Developer Intelligence - Future ADI agents could: - Generate code and complete code automatically. - Build complex software architectures. - Orchestrate advanced tools deployed on Replit. - Understand how teams work and improve organizational collaboration. - Hoang describes Replit as a potential “technical co-founder” for people with ideas but limited technical expertise. - The goal is to accelerate the path from learning to coding, launching a business, and scaling an idea. ## Lowering the Barrier to Building Software - AI-powered tools can enable nontechnical users to create technically sophisticated applications. - A Replit hackathon example showed a nontechnical product manager producing work that surpassed projects built by teams of engineers. - Prompting becomes an important skill because translating goals into effective instructions resembles the product manager’s role in defining what should be built. AI’s practical impact may be greatest when it helps people combine product judgment, design, and engineering execution. Rather than replacing creative or technical roles, tools like ADI are positioned to expand who can build software and shorten the distance between an idea and a working product.

AI Prompt Engineering Code Generation Mobile Apps+4

figmaFeb 13, 20242 min readCurated summary

5 Things Designers Need to Know for a Smooth Handoff | Figma Blog

Design handoff should be treated as an ongoing process of communication and collaboration, not a single event at the end of design. The article argues that clear annotations, shared terminology, and organized files help ensure that “Ready for dev” genuinely means developers have the context they need. These practices reduce ambiguity while preserving conversations between designers and developers. ## Streamline and Clarify Callouts - Use annotations to explain design intent and highlight details that might otherwise be missed. - Focus callouts on information developers actually need, such as: - New components - Specific interactions not obvious from a prototype - Platform-specific differences - Specs, measurements, and behavior - Avoid duplicating information already captured through variables or styles. - Figma’s annotations in Dev Mode can pin measurements, properties, and notes directly to designs. - Annotations are intended to improve—not replace—designer-developer discussions. ## Adopt a Shared Language - Design and development may use different terms for similar concepts, so teams should align on naming early. - Clarify terms such as “toggle” or “switch” to avoid misunderstandings. - Coordinate variable, style, and component names with conventions already used in code. - Use variables and styles for foundational properties such as: - Fonts - Colors - Spacing - Shared names like `bg-primary-active` are more reliable than manually communicating hex codes or font specifications. - A color wheel within the design system can help teams consistently reference shades and tints. ## Organize Files with Labels - Infinite canvases can become difficult for developers to navigate, especially when they contain unfinished explorations. - Clean up and structure files before inviting developers to build. - Use sections to group related designs and reduce navigation overhead. - Mark completed sections or frames with a “Ready for dev” status so developers know where to focus. - Standardized team templates can reduce context switching and create a more predictable handoff process. A smooth handoff depends on shared context, precise communication, and intentional file organization. Designers should tailor annotations and terminology to their development partners, then clearly separate exploratory work from implementation-ready designs.

Figma Design Systems Design Tokens Dev Mode+3

figmaFeb 12, 20243 min readCurated summary

The Anatomy of a Super Bowl Ad | Figma Blog

Duolingo’s five-second Super Bowl ad succeeded by turning a severe budget constraint into a creative advantage. Its deliberately absurd “unhinged Duo” gag, paired with a real lesson reminder, was designed to create a memorable WTF moment and generate conversation beyond the broadcast. The campaign depended on close coordination between marketing, engineering, and the brand studio. ## Aiming for Culture and Conversation - Duolingo saw the Super Bowl as a chance to reach the year’s largest live U.S. audience. - The goal was not merely exposure, but earned media, virality, and word-of-mouth. - Previous data showed that major broadcasts could drive language-learning activity: - Users completed lessons during Eurovision breaks. - A prior Super Bowl push notification produced the app’s highest engagement. - The team decided to make the ad itself function as a lesson reminder. ## Turning a Budget Constraint into a Format - A 30-second Super Bowl commercial cost about $7 million on average in 2023. - Rather than compete with longer, more expensive ads, Duolingo pursued a five-second spot. - The team looked to short ads such as Reddit’s 2021 commercial as examples of compact ideas that could expand through social media. - The intended result was tens of millions of social impressions generated by a highly shareable moment. ## Designing the “WTF Moment” - The ad featured Duo sitting in a white frame before turning around and revealing an exaggerated, balloon-like backside. - A second Duo emerged with a flatulent sound, followed by the message “Do your Duolingo.” - Simultaneously, users received a push notification reminding them to complete a lesson. - The crude humor built on Duo’s existing reputation as both wholesome and “unhinged,” matching the brand’s relationship with its online community. ## Cross-Functional Brainstorming - The first of three brainstorming sessions began in September after the ad slot was secured. - The brief asked: “How do we hack and own the Super Bowl conversation in 5 seconds?” - Marketing, engineering, and brand teams divided into breakout groups and developed concepts in FigJam. - Ideas were evaluated for whether they would: - Produce a strong reaction and social buzz - Fit Duolingo’s tone and strengthen the brand - Support additional campaign content - Demonstrate Duolingo’s product capabilities - Groups nominated their best ideas, and the wider team voted on them using FigJam stickers. ## Aligning on a Big Idea - One brainstorm was not enough to reach agreement. - The teams reconvened in another FigJam session to evaluate concepts through different strategic approaches, including ways to exploit the five-second television format. - The eventual campaign required several weeks of synchronized work across creative, marketing, engineering, and design. Duolingo’s approach demonstrates how a sharply defined constraint can produce stronger creative work. A short, distinctive concept—when aligned with existing brand behavior, product functionality, and coordinated distribution—can outperform a conventional expensive commercial.

Figjam Mobile App Brainstorming Push Notifications+2

figmaFeb 11, 20243 min readCurated summary

What Is a Design System | Design Systems 101 | Figma Blog

Design systems provide a shared foundation for designing and building consistent digital products. They combine principles, visual standards, reusable components, documentation, and development guidance to reduce duplication and prevent confusing or fragmented user experiences. Rather than limiting creativity, a well-designed system gives teams a common language and lets them focus on solving higher-level product problems. ## What a Design System Is - A design system is a collection of building blocks, standards, resources, and processes that guide product design and development. - It acts as a blueprint for an organization’s product ecosystem, covering: - Design tokens and technical specifications - Documentation and best practices - UX principles and decision-making processes - Brand, accessibility, and usability guidance - Its goal is to make products more consistent while reducing the time spent recreating common elements and patterns. ## The Three-Level Structure ### 1. The Design System - The highest-level container includes the organization’s overall guidance and evolving processes. - It may include design principles, documentation, technical specifications, tokens, and product-development standards. ### 2. Component and Pattern Libraries - Component libraries contain reusable interface elements such as buttons, input fields, and other UI controls. - Pattern libraries describe broader solutions, such as navigation flows, layouts, and data-display approaches. - These libraries can include: - Templates and layouts - Interaction patterns - Design components - Code snippets - Technical specifications - Usage documentation - They connect design and development by translating design intent into implementable code and shared practices. ### 3. Foundational Elements - Foundational elements establish the product’s visual language and voice. - Common examples include: - Color - Typography - Icons and logos - Illustrations - Voice and tone - Brand guidelines - Accessibility standards ## Design Systems Versus Related Resources - A component library focuses on individual UI elements, while a pattern library addresses complete interface solutions or user flows. - A design system is broader than a style guide: - Style guides mainly document visual elements such as colors, typography, and imagery. - Design systems also include components, coding standards, usability guidance, processes, and documentation. ## More Than Visual Consistency - Design systems influence the full user experience, not just appearance. - Consistent colors, icons, button behavior, language, and layouts help users understand and navigate products more easily. - The article challenges the idea that design systems eliminate creativity or force every design to look identical. - Instead, they handle repeated design and implementation decisions so designers can spend more time addressing unique product and user needs. A practical design system should be treated as an evolving shared foundation rather than a static style guide. Combining reusable components with clear standards, documentation, accessibility guidance, and development support helps teams scale product work without sacrificing consistency or usability.

Design Systems User Experience Accessibility Design Tokens+2

figmaFeb 6, 20242 min readCurated summary

Power up your designer-developer handoff with Figma and Jira | Figma Blog

Product teams achieve higher velocity not through speed alone, but through tools, processes, and rituals that keep design and development aligned. Figma argues that reducing communication gaps—especially in hybrid and growing organizations—helps teams preserve “flow” and ship better products faster. High-fidelity prototypes, work-in-progress sharing, and connected workflows such as Figma for Jira are presented as practical ways to support that alignment. ## Building a Shared Understanding with Prototypes - As companies grow, teams tend to become siloed and processes slow down. - Designers and developers may interpret the same requirements differently, making continuous communication essential. - High-fidelity, interactive prototypes provide a shared visual and functional reference: - Developers can understand user flows, pop-ups, dropdowns, and interactive states. - Teams avoid the ambiguity of static mockups or fragmented prototypes spread across many linked pages. - At One.com, designers in Denmark meet regularly with developers in India to review requirements, blockers, and potential problems around a working Figma prototype. - The prototype also preserves meeting context for remote and asynchronous collaborators, allowing people to continue working effectively after the meeting ends. ## Protecting Maker Time and Team Flow - Paul Graham’s “Maker’s Schedule, Manager’s Schedule” is used to illustrate why uninterrupted time matters to designers and developers. - Product teams rarely work in ideal conditions: calendars are crowded, requirements change, and hybrid work introduces additional coordination challenges. - Maintaining velocity therefore requires deliberate foundations: - Clear communication - Shared artifacts - Regular alignment rituals - Processes that reduce interruptions and uncertainty - Daily standups, such as those used by Condé Nast’s product development team, help teams discuss progress, priorities, and possible roadblocks. ## Connecting Design and Development Workflows - Figma positions its Jira integration as a way to keep design context connected to implementation work. - Embedding design information in development workflows helps developers understand not only what to build, but how the intended experience should behave. - The broader goal is to reduce handoff friction and keep different teams working from compatible sources of information. Teams can improve designer-developer handoff by treating prototypes and collaboration processes as part of the product infrastructure—not as final-stage documentation. Use interactive prototypes, share work early, maintain regular alignment, and connect design artifacts directly to development tools such as Jira.

Figma Prototyping Product Development Jira+2

figmaFeb 1, 20242 min readCurated summary

An Insider’s Guide to a Seamless Figma Migration | Figma Blog

Migrating to Figma is presented as an organizational change—not merely a software switch. Success depends on careful planning, cross-functional communication, advocacy, training, and adaptation of existing workflows and cultural norms. The article argues that treating migration as a strategic investment can produce long-term gains in collaboration, transparency, and productivity. ## Planning the Migration - Begin by identifying the reasons for adopting Figma, such as: - Better collaboration - Greater transparency - Streamlined processes - Treat migration as a change-management initiative involving the entire organization. - Plan around team commitments and existing tool-expiration dates. - Use resources such as Figma’s Migration Toolkit for guidance when moving from other design platforms. ## Building a Cross-Functional Advocacy Team - Create a core team with representatives from design, development, product management, and stakeholder groups. - Give the team responsibility for: - Gathering balanced feedback - Configuring the Figma workspace - Managing communications - Coordinating library transfers - Successful examples include: - Wells Fargo’s “Figma Jedis,” combining experts and enthusiastic users - Uber’s integration of Figma training with an existing design-system workshop - JPMorgan Chase’s advocates, nominated by leadership and cross-functional groups - The strongest advocates are engaged, representative of different departments, and connected to existing initiatives. ## Securing Organization-Wide Support - Obtain buy-in from developers, product managers, leadership, and other stakeholders—not only designers. - Present a clear proposal outlining the benefits and drawbacks of migration. - Build support through: - Workshops and demonstrations - Best-practice sharing - Early access to libraries and components - Training and practical guidance - Dropbox’s migration shows the value of sustained outreach and creative engagement, including extensive internal promotion and Figma-themed incentives. ## Learning from Other Organizations - Contact teams that have already completed large-scale migrations. - Their experience can provide: - Training plans - Deployment playbooks - Cover pages and workspace conventions - Warnings about common mistakes - Examples from Wells Fargo, Uber, and Dropbox demonstrate how peer advice can improve rollout planning and reduce avoidable problems. - Large migrations benefit from studying proven approaches rather than designing every process from scratch. ## Establishing a Migration Timeline - Build a schedule that accounts for: - Team availability - Existing project commitments - Expiration dates for current tools - A defined timeline helps coordinate the transition and gives teams a clear path from planning to adoption. The practical recommendation is to manage a Figma migration as a coordinated organizational program: assemble advocates, involve every relevant function, learn from experienced teams, and create a realistic timeline before moving work and libraries.

Figma Design Systems Design Collaboration Design Tools+2

figmaJan 30, 20243 min readCurated summary

Everything You Need to Know About Dev Mode | Figma Blog

Figma built Dev Mode to make the transition from design to code more efficient for developers, who now represent roughly one-third of its weekly active users. Rather than separating developers into different tools or files, Figma created a dedicated space within the same collaborative environment. After an open beta shaped by extensive user feedback and more than 200 updates in its first two months, Dev Mode moved out of beta with a focus on clearer handoff and developer-centered workflows. ## Why Figma Built Dev Mode - Developers were already using Figma alongside designers, product managers, and other collaborators, despite Figma not being optimized for their workflows. - Figma wanted to support varied development roles, including: - Front-end developers working with design systems - Design systems engineers building components - Developers implementing content layouts and exporting assets - In 2021, Figma acquired Visly, a team of eight designers and engineers experienced in React UI development and developer tooling. - The Visly team emphasized that developers should not have to learn every interaction in design mode; the experience should be tailored to their needs. ## An Integrated Development Workspace - Figma considered both fully separate files and tightly integrated design and development experiences. - It ultimately chose a dedicated mode inside Figma: - Developers get tools and workflows optimized for implementation. - They retain access to the design context and collaboration surrounding the work. - The approach avoids forcing teams to switch tools or lose important information during handoff. - Dev Mode launched as an open beta at Config 2023, with customer feedback driving rapid improvements and over 200 requested updates delivered in the first two months. ## Communicating Design Intent - Traditionally, designers had to manually create measurements, callouts, and organized specifications for developers. - Dev Mode introduces annotations that remain connected to the design and update as the design changes. - Designers can: - Click and drag to measure - Highlight important details without cluttering the canvas - Add live specifications and contextual notes - Automate or customize annotations through plugins - Designers can mark a section as “ready for development” without creating a separate file or page. - Developers can use diffing tools to compare changes between versions and stay current with design updates. ## Practical Impact Dev Mode is intended to make design handoff less manual and more collaborative by giving developers a purpose-built workspace without removing them from Figma’s shared context. Teams can use annotations, readiness labels, and frame comparisons to reduce ambiguity and keep implementation aligned with evolving designs.

Figma Design Systems React Design To Code+3

figmaJan 30, 20242 min readCurated summary

The Art and Science of Annotations in Dev Mode | Figma Blog

Figma’s Dev Mode annotations aim to make designer–developer collaboration clearer and less manual. The feature centralizes design context, keeps specifications synchronized with changing designs, and avoids cluttering the design canvas. Its core conclusion is that annotations should be dynamic, connected to design properties, and presented in a developer-focused workspace. ## Solving Designer and Developer Needs - Designers need to document information that visuals cannot fully express, including: - Accessibility requirements - Interaction behavior - Rationale behind design decisions - Developers need more than access to an entire design file; they need a curated engineering specification that identifies the relevant work. - Figma placed annotation workflows in Dev Mode so designers can: - Annotate from the same perspective developers use - Create a focused specification - Share a direct Dev Mode link with developers - Dev Mode is intended to involve the broader product team rather than isolate developers after design work is complete. ## Dynamic Annotations That Stay Current - Traditional annotations are manually created and quickly become outdated as designs evolve. - Figma explored connecting annotations directly to design properties so they update automatically when the underlying design changes. - Measurement indicators can also respond dynamically to layout or dimension changes. - Referencing actual variables and components from a design system reduces ambiguity and helps keep specifications aligned with implementation. - This approach supports the constantly changing nature of product development, where developers need visibility into ongoing design updates. ## Positioning Annotations Without Canvas Clutter - Manual annotations often force designers to move frames and rearrange the canvas to make room for notes and pointers. - Figma wanted annotations to remain visible to developers without consuming space in the design itself. - The proposed solution was to position and display annotations automatically. - This required handling complex interactions such as: - Zooming and panning - Scaling - Selecting and hovering - Minimizing annotations - Engineering worked through numerous prototypes and tuned the display logic to make automatically positioned annotations usable in practice. Figma’s approach treats annotations as a living, developer-oriented specification rather than static notes on a canvas. Connecting them to design properties and displaying them dynamically can reduce maintenance for designers while giving developers clearer, more reliable implementation context.

Figma Design Systems Accessibility Dev Mode+2

figmaJan 29, 20242 min readCurated summary

Peter Yang: 10 Rules for Making Products that Customers Love | Figma Blog

Peter Yang argues that great product management is a craft, not an instinct or checklist. Product managers must continually develop product sense, deeply understand customers, think strategically before executing, and protect quality through difficult trade-offs. The goal is to build products customers genuinely value, even when that requires delaying milestones or abandoning a beloved project. ## Product Sense Must Be Cultivated - Product sense is the ability to create products or changes that have the intended impact on users. - It is not a permanent, intuitive skill; markets and customer needs constantly change. - PMs should continually improve through: - Empathy - Creativity - Attention to craft - Humility and ongoing learning ## Use Empathy to Diagnose the Problem - Teams often rush into solutions before clearly understanding the customer or business problem. - Peter cites empathy as a product manager’s superpower. - PMs can build empathy by: - Treating customers like members of the team - Speaking directly with them - Personally using the product as customers do, even for just an hour - Accurate problem diagnosis should come before defining a vision or solution. ## Start with Big Ideas Before Daily Execution - Once the problems are understood, teams should pause before getting absorbed in execution. - Collaboratively define: - Mission - Vision - Strategy - Brainstorm ambitious, “blue-sky” ideas and prioritize them. - Seek simple solutions—potentially a few clear steps—that best address customer needs. - New learning may require changing priorities and making trade-offs. ## Protect Quality and Know When to Change Course - Quality may require missing a launch date or short-term OKR. - In one example, Yang chose to add an important feature identified through customer conversations, even though it meant missing a quarterly deadline. - Craft means obsessing over details, trade-offs, bugs, and the extra work required to create a worthwhile experience. - Product managers must also recognize when a project should be canceled. - At Reddit, Yang worked on Reddit Talk, a well-loved live audio product, but the project was ended during an economic downturn because it did not improve the company’s most important metrics. - Good product judgment includes considering the company’s broader needs rather than becoming attached to a particular product. The practical recommendation is to keep customer understanding and product quality at the center of decision-making, while remaining flexible enough to delay, redirect, or stop work when the evidence demands it.

User Research Product Management Brainstorming Product Strategy+3

figmaJan 25, 20242 min readCurated summary

Six Myths Holding You Back from Embracing Design Systems | Figma Blog

Design systems are not reserved for large companies or teams with advanced design practices. Figma argues that the best system is practical, goal-oriented, and tailored to an organization’s brand, users, and needs—not copied from industry trends or famous examples. By challenging common assumptions, teams can adopt design systems more confidently and incrementally. ## Design Systems Benefit Teams of All Sizes - Small organizations can use design systems to improve efficiency, consistency, and collaboration. - The system’s scale and appearance may vary, but its core purpose remains the same. - Mixpanel’s redesign is cited as an example of using a design system to reduce costs, improve consistency, and make analytics more accessible. ## A Design System Does Not Need Every New Technique - Design trends change constantly, and no single approach is universally correct. - Teams should learn from industry practices without becoming distracted by building a “perfect” or fashionable system. - A useful design system should serve clear organizational goals rather than imitate the latest trends. ## Material Design Is Not a Universal Solution - Google’s Material Design is influential, but it is not automatically suitable for every organization. - Design systems should reflect a company’s brand identity, user needs, and business objectives. - Teams should balance established standards with solutions appropriate to their current context. - Examples such as Uber Base, Spotify Backstage, Pipedrive, Microsoft Teams, and Salesforce Lightning demonstrate that successful systems can differ significantly. ## You Do Not Have to Build Everything From Scratch - The article begins addressing the misconception that every design system must be created internally from the ground up. - Open-source design-system resources and existing UI kits can provide a starting point. - Reusing proven foundations can help teams move faster while adapting components to their own requirements. The practical recommendation is to start with the problems your team needs to solve, then adopt or create only the structure necessary to address them.

Design Systems Open Source Design Thinking Component Library+3

figmaJan 24, 20242 min readCurated summary

What’s next for Dev Mode: Annotations, Compare Changes, Plugins, and More | Figma Blog

Figma is moving Dev Mode out of free beta on January 31, 2024, while adding features designed to improve design-to-development handoff. The update introduces connected annotations, richer visual and code comparisons, customizable plugins, Jira integration, and a redesigned VS Code experience. Dev Mode will require a paid seat after the beta ends. ## Annotations for clearer handoff - Designers can add measurements, properties, specifications, and contextual notes directly to design layers. - Annotations update automatically when the associated design changes. - They appear or disappear at different zoom levels, keeping designs informative without cluttering the canvas. - Teams can use plugins to create and manage annotations in bulk. ## Visual and code-based change comparisons - The compare changes experience has been redesigned to show differences both visually and in code. - The Figma for Jira app brings design context into Jira issues. - Jira users can receive notifications when related designs change. ## Custom code generation with plugins - Codegen plugins let teams generate code for technologies such as HTML, React, Tailwind, and Bootstrap. - Organizations can customize generated output around their frameworks, design systems, component libraries, and internal APIs. - Plugins can validate design-system usage, link to documentation, and identify existing code components. - Enterprise administrators can pin plugins and configure them to run by default across organizational files. - Figma highlights custom implementations such as Razorpay’s RazorSharp plugin. ## Improvements to Figma for VS Code - The extension makes it easier to inspect designs without switching between tools. - A redesigned navigation experience replaces difficult canvas panning with a grid of frames. - Developers can open individual frames in a focused view. - Plugins can now run directly in VS Code, including private and customized tools. Teams using Dev Mode should prepare for the paid-seat requirement and evaluate annotations, plugins, Jira integration, and the VS Code extension to fit their existing handoff and design-system workflows.

Figma Design Systems Dev Mode Plugins+4

figmaJan 22, 20242 min readCurated summary

Improving Performance with Incremental Frame Loading | Figma Blog

Figma redesigned its prototype player because loading entire documents caused slow startup times, high memory use, and frequent mobile crashes. Its incremental frame loading strategy loads only the currently visible frame and nearby reachable frames, then fetches more as users navigate. This improves time to interactive while reducing the amount of prototype data held in memory. ## Problems with Full-Document Loading - The original system loaded the entire prototype document into memory before displaying the starting screen. - As Figma files grew to include more pages, design systems, and component variants, prototypes became substantially larger. - Mobile devices, particularly iPhones, often exceeded their memory limits, causing the operating system to terminate Figma. - Large prototypes could take minutes to load, creating both performance and stability problems. ## Loading Frames Incrementally - Figma defined “incremental frame loading” as loading only the prototype content needed at a given moment. - The initial load includes: - The first frame. - Frames immediately reachable through prototype interactions. - When a user navigates to another frame, Figma loads that frame’s adjacent destinations. - Previously loaded frames remain available so users can navigate backward without reloading them. - This approach reduces both startup time and peak memory consumption. ## Adapting Multiplayer Document Sync - Implementing partial loading required extending Figma’s real-time multiplayer system to synchronize only selected portions of a document. - The system had to support querying specific subtrees instead of always synchronizing the complete file. - A client sends a `query` identifying a document node. - The server returns a `reply` containing the requested subtree, including its ancestors and descendants. - Later modifications to the subscribed content are delivered through `changes` messages. ## Handling Dynamic Document Changes - The protocol continues to work while designers edit the source file in real time. - Changes to subscribed nodes are sent directly to clients. - If a node is moved under a subscribed node, the client is informed about the newly available node. - If a subscribed node is moved outside the client’s subscribed descendants, the client receives a removal update. - This keeps the partially loaded prototype consistent with the live document while avoiding unnecessary data transfer. Figma’s solution combines navigation-aware preloading with fine-grained real-time synchronization. Loading only the frames users need provides a practical way to make large prototypes faster and more reliable, especially on memory-constrained mobile devices.

Multiplayer Collaboration Memory Optimization Incremental Loading Real Time Sync+2

figmaJan 21, 20242 min readCurated summary

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

Figma’s “The Handoff,” published January 22, 2024, reflects on how collaboration turns ideas into products. Using the handoff as a metaphor for the continuous exchange between teammates, the issue reviews Figma’s major 2023 work and explores the evolving relationship between people, technology, and AI. It also highlights stories intended to help readers work better and stay curious in 2024. ## Collaboration as an Ongoing Handoff - Figma compares product design to an American football handoff: ideas repeatedly move between people as they are developed and refined. - This concept is closely tied to Figma’s multiplayer approach to collaboration. - The issue serves as a retrospective on the launches, lessons, and ideas Figma is carrying from 2023 into 2024. ## Best of Figma - Figma revisits the top 10 things it shipped in 2023. - The selection includes both small details with significant impact and major product launches. - The “MVP” label is used playfully to mean “Most Valuable Players,” rather than “Minimum Viable Products.” ## Reconsidering Our Relationship with Technology - “Looking 4 love” presents 36 questions about people’s relationships with technology. - Topics include first usernames, finding community online, and innovations that inspire optimism. - The feature acknowledges digital oversaturation and uncertainty while asking what might help people reconnect with technology. ## Building AI Features That Matter - The issue argues that AI will remain a major force in 2024, but its potential depends on thoughtful product management. - Leaders from Duolingo, LinkedIn, and Asana discuss how to move beyond hype. - Their focus is on building AI features that address real user needs and earn trust. ## Designing Better Tools for Work - Figma highlights its collaboration with Work Louder on the Figma Creator Micro mechanical keyboard. - The device includes 12 keys and two rotary encoders, providing up to 48 shortcuts. - The story presents the keyboard as both an efficiency tool and a celebration of the tactile, creative culture surrounding mechanical keyboards. Overall, the issue encourages readers to view work as a collaborative exchange: ship thoughtfully, use technology intentionally, and carry the most valuable lessons from the past year into the next.

Figma AI Product Design Collaboration+1