figma·Jun 18, 2026·2 min readCurated summary

Direct Every Frame with Runway Aleph 2.0, Now in Figma Weave | Figma Blog

Runway Aleph 2.0 is now integrated into Figma Weave, giving creators precise, frame-level control over video edits. The model supports longer clips, reference images, and sequential creative decisions while preserving footage that users do not ask to change. It also enables substantial transformations—such as new camera angles, characters, or environments—without requiring a reshoot. ## More Time, More Control - Aleph 2.0 supports video clips up to 30 seconds, allowing users to direct complete scenes. - Reference images can guide the visual style and appearance of edits. - Changes are applied across relevant frames while preserving unaffected elements. - Subject-specific edits follow that subject throughout the footage. ## Sequenced Creative Workflows - The Aleph 2.0 node in Figma Weave supports connected, step-by-step workflows. - Creators can preview edits before committing them. - Multiple decisions can be refined progressively rather than being forced into a single prompt. - The workflow mirrors traditional creative development on a visual canvas. ## Extending Existing Footage - Users can alter a scene beyond the limits of the original recording. - Possible changes include: - Adjusting the camera angle - Adding new characters - Transforming the environment - Multiple creative directions can be explored side by side without restarting from scratch. - The creator defines the desired conditions, while Aleph 2.0 generates the revised video. ## Pricing and Resources - Figma says pricing will soon scale according to input length, potentially lowering costs for some use cases. - Users can learn more through Figma’s help center, community templates library, and Weavy’s knowledge center. Figma Weave users can use Aleph 2.0 to move from broad AI generation toward more controlled, iterative video direction—making it useful for experimentation, editing, and visual development without reshooting footage.

Read original(opens in new tab)

AIFigma WeaveVideo EditingCreative Workflows+2

figma·Jun 17, 2026·3 min readCurated summary

Speaking the Language of Color | Figma Blog

Color is presented as a cultural language that influences emotions, perception, branding, and consumer behavior. The Pantone Color Institute studies these associations through psychology and trend forecasting, helping organizations choose colors that communicate specific messages. Effective color decisions require cultural awareness, a clear brand purpose, and consideration of the physical or digital medium where the color will appear. ## How Colors Influence Perception - Color associations often arise from nature: - Yellow suggests sunlight, warmth, and joy. - Green implies renewal and growth. - Brown conveys groundedness. - Blue is associated with dependability and stability. - Orange recalls fruit and tangy sweetness. - Cultural trends also shape color preferences, including: - Film, art, travel, sports, and technology. - Lifestyle changes and broader social conditions. - Economic pressures, which can cause palettes to shift. - Color meanings vary by region: - Black is associated with mourning in much of the West, while white serves that role in parts of the East. - Red can suggest love, anger, or urgency in Western contexts, but luck and prosperity in Eastern cultures. - Brands should research local color sensibilities rather than assume that a trend has universal meaning. ## Building a Brand Story Through Color - Strong brand palettes express what a company stands for and support its broader narrative. - Coca-Cola’s red communicates energy and excitement and has become inseparable from the brand. - Airbnb’s 2014 shift from baby blue to salmon pink was intended to convey warmth, humanity, comfort, and connection—qualities that supported its expansion into local Experiences. - “Brat Green,” associated with Charli XCX’s 2024 album, illustrates how an unconventional color can capture attention and reflect cultural attitudes: - Its yellow undertone adds energy and vitality. - Its organic associations suggest authenticity amid increasing digital saturation. - Its unusual appearance helps it stand out on social media. - Pantone’s own Config palette combines bright, pastel, earthy, aquatic, and nature-inspired colors to connect the physical and digital worlds. ## Designing for Materials and Surfaces - Colors do not appear identically across screens, fabrics, packaging, or other physical materials. - A color that looks appealing digitally may seem overly harsh in person. - Some hues achievable in fabric dyes may not be practical for products made from other materials. - Color decisions should therefore begin early in the design process, with the material, surface finish, and viewing context already considered. ## Tracking Cultural Change - Pantone’s Color of the Year program has run for more than 26 years and is one of the design industry’s most closely watched color forecasts. - The institute’s broader work combines color psychology, global observation, and trend forecasting to identify how cultural shifts influence color preferences. The practical recommendation is to treat color as a strategic design decision: define the intended message, understand the audience’s cultural associations, and test the color in its actual material and environmental context.

Read original(opens in new tab)

FigmaDesign SystemsBrandingColor Theory+2

figma·Jun 16, 2026·2 min readCurated summary

4 Ways We’re Using Our MCP Server at Figma | Figma Blog

Figma’s MCP server has expanded beyond design-to-code workflows to support Slides, FigJam, Figma Make, and the Figma design agent. The post argues that agents can now create and update production-ready artifacts while preserving team context, design systems, custom fonts, and brand consistency. In practice, humans still provide review and polish, but agents can complete much of the initial content and formatting work. ## Broader MCP capabilities - Agents can create or update: - Figma Slides presentations - FigJam boards - Figma Make prototypes - Canvas designs through the Figma agent - The server supports: - Custom fonts uploaded from a user’s computer - Downloading assets as SVG, PDF, JPG, or PNG through `download_assets` - Reusable MCP skills that encode team decisions and workflows - These capabilities connect external context and coding tools with Figma’s design environment. ## Creating and refreshing Figma Slides decks - Designer advocate Mallory Dean maintains an evergreen deck about Figma’s AI product launches. - She prompted an agent to: - Update the deck with the new Figma agent - Gather information from Slack, Google Drive, Shortcut blog posts, and release notes - Suggest content updates and new slides - The agent used the `use_figma` tool and `/figma-use-slides` skill to modify the existing deck template. - The first 80% of the content work was completed before human review. - Mallory still needed to replace images, edit copy, and approve the final slides. - Uploaded custom fonts allowed the deck to use the correct brand typefaces rather than web-safe substitutes. - Similar workflows can support: - Product kickoff decks - Design explorations - Go-to-market presentations - Sales decks with current product information - The stated benefit is faster production of presentations that remain aligned with a team’s design system and brand. ## Generating FigJam boards from live data - Product manager Prasant Lokinendi frequently prepares feature kickoff workshops. - Building an engaging FigJam board requires collecting company context and formatting the board for each session. - To streamline this process, he created the `/figjam-builder` skill. - Figma describes skills as a way to make agent outputs more consistent and context-aware. - Teams can use community-created skills or submit their own through Figma’s community-resources repository. Figma’s MCP workflows are most useful for accelerating repetitive preparation and production work while leaving humans responsible for review, judgment, and final creative decisions.

Read original(opens in new tab)

Design SystemsAI AgentsFigjamFigma Make+2

figma·Jun 11, 2026·2 min readCurated summary

Improving Performance in the Layers Panel | Figma Blog

Figma rebuilt its layers panel to handle files containing tens of thousands of layers. The old architecture recomputed too much data too often, slowing both panel interactions and broader editor operations. A two-pass computation model and cached derived properties now make some interactions 30–50% faster. ## Why the Original Architecture Slowed Down - Figma files are trees of nodes with properties and children. - The panel previously built a large JavaScript object in one recursive pass. - Every expanded node—and often all of its descendants—had its display data recomputed after changes. - This created two problems: - Data was computed for hundreds of thousands of nodes even though only 20–30 rows were visible. - Small changes, such as expanding a node, triggered broad recomputation because incremental results were rarely cached. ## Two-Pass Computation - The first pass computes only the ordered list of row IDs shown in the panel. - Determining that order still requires handling complex rules, including: - Reversed child ordering in autolayout frames. - Node types such as widgets and FigJam stickies that hide children. - Fixed and scrolling headers that divide prototype-frame children. - Sticky top-level frames and components. - The second pass gathers display data—names, icons, lock and visibility state, and selection state—only for rows inside the visible window. - This makes windowing effective: previously, Figma computed data for off-screen rows even though they were not rendered. ## Caching Derived Data - Figma introduced its “derived properties” platform primitive to avoid recomputing unchanged data. - Nodes store mutable fields, while other values are calculated from those fields and related properties. - For example, a node’s absolute position can be derived from its parent’s absolute position and its relative position: ```text Self.AbsolutePosition = Parent.AbsolutePosition + Self.RelativePosition ``` - Derived properties: - Track their dependencies through an optimized dependency graph. - Support different caching strategies balancing speed and memory. - Are lazy by default, computing values only when they are read. - Because the layers panel is itself a tree, this dependency-aware system lets Figma update only affected rows while keeping stable portions cached. Figma’s results show the value of combining virtualization with incremental, dependency-based computation: large hierarchical interfaces can remain responsive when they calculate only visible data and preserve everything that has not changed.

Read original(opens in new tab)

JavaScriptCachingVirtualizationDependency Graph+2

figma·Jun 10, 2026·2 min readCurated summary

Steal This Template: Bring a User Persona to Life with Figma Weave | Figma Blog

The post shows how Figma Weave can make Ideal Customer Profiles (ICPs) more vivid and useful by turning static personas into realistic visual scenes. Dropbox designer Sara Clayton used a headshot, prompts, and reference images to depict media professionals in authentic work environments. The result was faster iteration, greater emotional connection, and more effective storytelling for product strategy. ## Static Personas Lack Context - Dropbox’s ICPs represented video editors, audio engineers, and production managers. - Traditional diagrams, user stories, and repeated headshots failed to show these users in their real working environments. - Story-driven slide decks worked better, but lacked visual variety and realism. - Clayton wanted personas to feel more human and connected to tools such as timelines, mixing boards, and editing software. ## Creating Realistic Persona Scenes with Figma Weave - Clayton used Figma Weave to transform a profile picture into an image of a media producer working from home. - A single prompt placed the persona in front of a Premiere Pro screen. - She uploaded a reference image to revise the character’s outfit when the initial style was not appropriate. - Weave provided more control over visual variables and iterations than general-purpose chatbots such as Gemini or ChatGPT. - The workflow took less than two minutes. ## Figma Weave’s Role in AI-Native Creation - Figma Weave emerged from Figma’s acquisition of Weavy. - The platform combines generative AI with professional editing tools on an open canvas. - Its intended capabilities include image, video, animation, motion design, and VFX generation and editing. - The post also highlights persona-focused templates for car scenes, character sheets, outfits, and character variations. ## Impact on Product Strategy - More realistic visuals help teams connect with personas and understand their contexts. - Higher-fidelity storytelling can make ICPs more influential in strategic decisions. - Clayton’s broader goal is to “humanize” product work by showing users as real people rather than static profile images. - Readers can use the featured Figma Weave template to create a more engaging ICP quickly. Figma Weave is best suited for teams that want to supplement traditional persona documentation with realistic, editable visual narratives that make customer needs easier to understand and remember.

Read original(opens in new tab)

FigmaGenerative AIMotion DesignFigma Weave+2

figma·Jun 8, 2026·3 min readCurated summary

You Never Stop Cultivating Taste | Figma Blog

Mastery is not just learning tools or techniques; it is developing a distinctive point of view through repeated practice and intentional choices. Figma’s Loredana Crisan argues that “taste” is cultivated continuously through care for one’s craft, empathy for users, and disciplined attention to detail. AI can expand creative exploration, but it cannot replace the judgment that makes work personal and meaningful. ## Taste Is Built Through Practice - Expertise requires understanding both the material and the tools of a craft. - Crisan compares design to piano and music composition: technical correctness matters less than knowing why choices create emotion and impact. - Taste develops through: - Consistent practice - Mentorship and critique - Feedback and collaboration - Sustained creative attention - Developing a point of view is the most time-consuming part of mastery—and it never truly ends. ## Taste Is a Form of Care - Taste is visible when work feels intentional, refined, and thoughtfully executed. - Dieter Rams’ Braun products demonstrate this principle by considering not only an object’s function but also its surroundings, physical interactions, and overall experience. - Taste is not universal popularity; different designers can have different sensibilities while showing equal intentionality. - In product design, taste appears in trade-offs such as: - Form versus function - Expressiveness versus legibility - What to include versus what to omit - Which compromises to accept or reject - Taste comes from both love of the craft and care for the people using the result. - Designers should test details across varied contexts, including screen sizes, color profiles, languages, devices, transitions, and uncommon user states. ## What Designers With Taste Demonstrate When hiring for taste, Crisan looks for three qualities: - **Discernment:** The ability to identify what is not working and explain why with nuance. - **Empathy:** Attention to the person experiencing the interface, including needs that may not be obvious. - **Creative energy:** A persistent drive to make, experiment, and pursue side projects or unresolved problems. ## AI Expands Exploration but Cannot Replace Judgment - AI may reduce the labor involved in producing work, but accepting its first output would undermine the iterative process required for quality. - Examples such as James Dyson’s 5,127 prototypes illustrate how refinement and rejection are central to creative mastery. - Better tools increase the distance a creator can travel between an idea and its execution, but the vision still comes from the creator. - AI can help generate more possibilities, while taste determines which possibilities are worth developing. - A creator’s distinctive voice emerges from accumulated, intentional decisions repeated over time. The practical recommendation is to use AI and other tools to explore broadly, while continuing to practice, critique, refine, and care deeply about both the craft and the people who experience the final result.

Read original(opens in new tab)

AIDesign SystemsProduct DesignUser Experience Design+1

figma·May 28, 2026·3 min readCurated summary

4 New Ways to Go From Idea to Product With AI Tools | Figma Blog

AI tools are reshaping product development by enabling teams to prototype, test, and refine ideas earlier and across both code and design. The article argues that working prototypes can expose problems that static mockups miss, while preserving design context throughout the path to production. It illustrates this shift through examples from FloQast, Merkle, Affirm, and Accor. ## AI-enabled product workflows - Product teams are: - Prototyping earlier instead of relying solely on traditional requirements documents. - Testing ideas in code before finalizing designs. - Exploring more possibilities at greater scale. - Carrying design-system context into implementation. - Figma presents these practices as ways to balance faster iteration with deliberate product decisions. ## Testing constraints in code AI coding tools make it easier for non-developers and product teams to build functional prototypes involving: - Multi-step workflows. - Conditional behavior based on user permissions or data. - Actions that trigger subsequent actions. - Realistic backend logic and data relationships. A prototype can then be moved into Figma with Codex to Figma for collaborative exploration and refinement. If implementation work continues in code, teams can move the design back through MCP while retaining the relevant design context. ## FloQast’s complex workflow prototype ### The challenge - FloQast needed to redesign an accounting workflow for investigating discrepancies. - Users previously had to move between multiple pages to: - Find an issue. - Investigate it. - Resolve it. - The team wanted one page where users could see tasks, identify blocked work, and take action. - Because the workflow depended on interconnected steps, real data, and business logic, a static mockup could not fully validate the concept. ### The unlock - UX manager Benjamin Ellis built a working prototype with an AI coding tool. - The prototype included: - A simulated backend. - Realistic data based on an actual customer’s workflows. - Clickable scenarios where completing one task affected the next. - Testing the workflow revealed interactions that appeared sound in a design mockup but failed when subjected to realistic conditions. ### The impact - The team and designer committed to a direction only after testing it against real scenarios. - They identified interaction problems earlier. - The approach reduced later surprises and increased confidence in the final design. ### When this approach is useful - When behavior depends on permissions, data, or sequential actions. - When a small fix is faster to make directly in code. - When designers and developers need a working example to scope a complex experience together. ## Exploring with AI on the canvas The next section introduces using AI directly in the Figma canvas to explore product possibilities. The provided excerpt ends before describing the specific workflow or company example. Teams should use code-backed prototypes when logic and real data are central to the experience, then bring those prototypes into collaborative design tools to refine decisions with greater confidence.

Read original(opens in new tab)

FigmaDesign SystemsPrototypingModel Context Protocol+4

figma·May 28, 2026·2 min readCurated summary

Figma Make, Now on Your Local Code | Figma Blog

Figma is bringing Make beyond prototyping by connecting it directly to local production codebases. Designers can visually edit interfaces, use annotations and prompts for more complex behavior, and manage changes through Git workflows without leaving Figma. The broader goal is to make design and code a continuous, collaborative workflow rather than separate tools. ## Visual Editing in Production Code - Make connects to a local codebase and translates visual changes into code. - Users can select interface elements and modify: - Layouts - Colors - Fonts - Sizing - Other visual properties - Annotations let users describe interactions, animations, and other changes that go beyond simple property edits. - The feature is currently best suited to designers who already have access to their organization’s codebase. ## Git-Based Branching and Shipping - Make supports standard development workflows, including: - Creating branches - Reverting commits - Reviewing commit history - Creating pull requests - Changes remain in local commits until the team intentionally opens a pull request. - Engineering teams can review Make-generated changes like any other production contribution. ## Collaboration Between Design and Code - Local code changes can be shared as files and links with teammates who have access to the relevant branch. - Teammates can inspect changes, build on them, and compare versions through commit history. - Screens, pages, and components can be copied from Make into Figma Design as editable layers. - Changes made in Figma can be detected and brought back into Make, creating a round-trip workflow between the design canvas and codebase. ## Beta Availability - Direct editing, annotations, chat, and pull-request creation enter limited beta on May 28, 2026. - Beta access is limited to Figma’s Mac desktop beta app and requires joining a waitlist. - The features will not consume credits during beta; pricing for AI credits will be announced later. - Figma plans to expand availability to other platforms. Figma’s recommendation is effectively to use whichever environment best fits the current task—design canvas, code-based prototyping, or production code—while maintaining a shared workflow between them.

Read original(opens in new tab)

AI AgentsCollaborationFigma MakeDesign To Code+3

figma·May 26, 2026·2 min readCurated summary

Issue no.16: Trust the process | Figma Blog

Issue 16 of Figma’s newsletter, “Trust the Process,” explores how AI and agentic tools are changing product design. Its central argument is that faster creation makes judgment, context, and craft more important—not less. Teams need to choose the right problems, preserve design intent, and build workflows that connect design and code. ## Choosing What’s Worth Shipping - AI enables product teams to build and iterate rapidly. - The main risk is moving quickly in the wrong direction or settling for “good enough” output. - Strong product judgment and a clear sense of what creates meaningful differentiation remain essential. ## Using MCP to Preserve Context - Model Context Protocol (MCP) allows coding agents to access context from Figma files and design systems. - Figma’s MCP server helps developers translate design decisions into code more accurately. - Better documentation and structured design systems can make this workflow more effective. ## Building Visual Workflows with AI - Figma Weave supports AI-assisted work across video, photography, illustration, and 3D effects. - The newsletter highlights more than 20 workflow templates and methods for creating asset libraries from reference images. - Effective prompting depends on understanding the logic behind a visual language, including how to build, edit, and direct imagery consistently. ## The Design-to-Code Loop - Modern teams increasingly move back and forth between canvas and code. - This “roundtripping” gives designers and developers faster feedback and deeper product context. - Keeping real product states connected to the canvas can reduce drift between what is designed and what ultimately ships. - The convergence of design and development creates more opportunities to improve both speed and craft. ## Practical Experiments - A workflow lab demonstrates how Figma MCP can help teams refine a video export flow by bringing real product states into the design canvas. - Figma also offers efficiency tips for users who rely heavily on Figma Make, including ways to manage credits and streamline workflows. The newsletter recommends treating AI as an accelerator rather than a substitute for direction. The best results come from combining faster tools with deliberate judgment, strong context, and continuous collaboration between design and code.

Read original(opens in new tab)

FigmaAIModel Context ProtocolDesign To Code+2

figma·May 22, 2026·2 min readCurated summary

7 Tips for Using Figma Make Credits More Efficiently | Figma Blog

Figma argues that efficient AI prototyping is less about writing longer prompts and more about setting up projects carefully, limiting changes, and knowing when to edit manually. The first prompt should establish a strong foundation, while follow-ups should describe precise deltas. For minor visual or code changes, direct editing is often faster and cheaper than another AI request. ## Build a Strong First Prompt - Treat the initial prompt as a complete project brief. - Include: - The project goal and context - Key elements and behaviors - Constraints and exclusions - A clear definition of what “done” means - Use follow-up prompts as deltas that explain: - What should change - How it should change - What should remain unchanged - For larger projects, work in stages: - Establish the structure first - Add logic and behaviors - Refine content and visual polish afterward - Keep follow-ups tightly scoped. Combine requests only when they affect the same component or logic. - Specific instructions such as “Update the calendar component” or “Edit `tokens.ts`” are more efficient than vague requests like “Redo it.” ## Prefer Manual Edits for Small Changes - Use Figma Make’s **Edit tool** for minor adjustments such as: - Changing spacing - Removing an element - Adjusting text - Direct edits avoid spending credits on changes that do not require a new design solution. - Use **Go to source** when the relevant value is dynamic or unavailable in the preview. - Press **⌘F** to search the code for a specific tag or data source. - Start with `App.tsx`, then inspect other `.tsx` files in the component folder if necessary. - Direct source editing is particularly useful for repeated components or content populated from lists.

Read original(opens in new tab)

User ExperienceReactTypeScriptFigma Make+3

figma·May 22, 2026·2 min readCurated summary

What Matters When Anyone Can Build | Figma Blog

AI has made building products faster and more accessible, but speed alone no longer creates an advantage. When anyone can ship, the differentiators become choosing the right direction and shaping the result with care. Figma’s Yuhki Yamashita argues that strong teams combine rapid exploration, deliberate decision-making, and relentless craft. ## Choosing What’s Worth Building - The abundance of possible ideas makes it easy to commit prematurely to the first promising concept. - Iterating deeply on one idea can become “local hill-climbing,” refining a path without questioning whether it is the right one. - AI tools can worsen tunnel vision by accelerating a chosen direction without challenging its assumptions. - Traditional strategic methods, such as MECE option mapping, encourage breadth but can remain too abstract to create conviction. - A stronger approach combines breadth and depth: - Explore several distinct directions in parallel. - Turn each direction into a realistic, end-to-end interactive prototype. - Compare actual user experiences rather than abstract diagrams or wireframes. - Invite teammates and AI agents to react and build on ideas collectively. - This creates a more collaborative, parallel way of working instead of a siloed, sequential process. ## Making the Product Yours - AI-generated products tend to converge on familiar patterns and statistically likely solutions. - “Good enough” becomes easy to produce and easy to accept, creating interchangeable products. - The main danger is passivity: accepting the first convincing result because it looks polished. - Craft requires active judgment: - Question every decision. - Revisit and refine multiple times. - Remove unnecessary elements. - Push beyond the first few acceptable versions. - Develop a distinct point of view. - As AI raises the baseline quality of products, differentiation will come less from tools or execution speed and more from the care and intention behind the final result. ## What Matters Now - The essential capabilities are **speed, direction, and craft**. - The best teams do not treat these as competing priorities: - They move quickly. - They choose deliberately. - They refine relentlessly. - In a world where nearly anything can be built, the lasting advantage lies in deciding what deserves to exist and shaping it into something distinctive.

Read original(opens in new tab)

AIUser ExperienceProduct DesignProduct Development+2

figma·May 20, 2026·3 min readCurated summary

The Figma Design Agent is Here | Figma Blog

Figma introduces a design agent built directly into its canvas and left rail. Unlike external tools, it understands a team’s components, tokens, libraries, standards, and best practices, while preserving designers’ ability to manipulate files directly. The agent is intended to support exploration, iteration, collaboration, and repetitive production work without forcing a choice between AI speed and design precision. ## A Figma-native design agent - Works inside the same Figma file as the team, acting as a collaborative partner. - Can start from any design layer and generate or edit Figma layers. - Supports parallel prompting to explore multiple ideas simultaneously. - Lets designers continue making manual edits while the agent works. - Uses context from frequently and recently used components, with additional control through selected libraries and `@` mentions for tokens, variables, and components. - Is designed for direct manipulation and editing of Figma files, rather than simply producing external suggestions. ## How the agent works with MCP and Figma Make - The Figma agent is intended for canvas-based work and has deeper design-system context. - Figma’s MCP server and `use_figma` support movement between code and the canvas: - Pull code into Figma for iteration or design-system application. - Push designs back to code while maintaining fidelity. - Teams can begin in Figma Design, use the agent to clarify flows, states, copy, and structure, then send work to Figma Make to generate code layers. - Alternatively, teams can start in Figma Make, copy frames into Figma Design, refine them with the agent, and return them to Make. ## Exploring more design directions - The agent helps designers generate several approaches instead of settling for the first plausible result. - It can: - Produce distinct stylistic directions for the same design. - Compare checkout flows optimized for different business goals. - Generate alternative information architectures. - Create multiple screen or layout variations. - Example prompts include generating organic, modern, and retro style options, or producing image carousels with different title treatments. - Once a direction is selected, hands-on editing remains an efficient way to refine the design and reduce unnecessary prompting. ## Automating repetitive design work - The agent handles bulk operations that require both scale and design context. - Potential tasks include: - Renaming variables consistently. - Replacing components across many screens. - Applying padding changes throughout a flow. - Populating frames with realistic content. - Updating typography across a file. - Replacing placeholder text and imagery. - Setting chip components to active states. - Converting screens to dark mode with appropriate fill and contrast changes. - For design-system teams, it can help update library descriptions, tags, use cases, naming conventions, and component documentation. - This automation is designed to preserve momentum between AI-generated changes and precise manual adjustments. The practical recommendation is to use the Figma agent for broad exploration and context-heavy repetitive work, while retaining direct canvas manipulation for judgment, refinement, and final design decisions.

Read original(opens in new tab)

AIDesign SystemsGenerative AIModel Context Protocol+2

figma·May 19, 2026·2 min readCurated summary

Friends of Figma’s Brand Refresh Tells the Story of a Global Community | Figma Blog

Friends of Figma has introduced a refreshed brand identity to represent its rapidly growing, globally diverse community. The redesign aims to remain recognizably connected to Figma while giving local chapters freedom to express their own cities, cultures, and members. Its central idea is a flexible, community-owned design system built around shared principles rather than uniform results. ## Friends of Figma’s Global Community - Friends of Figma is Figma’s official user group program for connecting, learning, and sharing inspiration. - The program includes more than 250 chapters across 82 countries. - In the previous year, chapters hosted over 900 events, including: - Workshops and webinars - Craft talks and watch parties - Casual meetups and social events - The program began in 2020 after communities had already been organizing meetups since 2018. - Figma says community is especially important as AI rapidly changes the design industry. ## A Brand That Is Globally Local - The new identity had two primary goals: - Stay connected to the Figma brand so chapters can attract members and sponsors. - Give chapters enough flexibility to reflect their own regions and cultures. - Rather than forcing every chapter to look identical, the system is designed to be shared, owned, and shaped by local organizers. - Figma describes this as a “democratic design system” connected by a common spirit. ## Reworking the Figma Shapes - The redesigned Friends of Figma logo separates the basic shapes of the original Figma mark. - These shapes become building blocks for new compositions. - Their coming together symbolizes individual chapters forming a larger global community. - The identity extends across: - Color guidelines - Chapter badges - Stickers - Event materials - Photography ## Flexible Guidelines for Chapter Creativity - The toolkit provides enough structure to create consistency without limiting local expression. - Chapters share a core color system but can select six additional colors from an approved palette. - Sticker templates offer basic shapes and guidance, while chapters decide what imagery and content to place inside them. - The visual system focuses on real people, local places, and in-person events rather than abstract corporate branding. - New photo guidelines encourage a street-level perspective rooted in what local communities recognize and understand. The refresh positions Friends of Figma as a shared global framework with strong local ownership. Chapters can use the common identity to feel connected to Figma while still creating a brand presence that genuinely reflects their own communities.

Read original(opens in new tab)

FigmaDesign SystemsBrandingVisual Identity+1

figma·May 12, 2026·3 min readCurated summary

What the Design-to-Code Loop Unlocks | Figma Blog

AI is bringing design and engineering into a more continuous, bidirectional workflow. Instead of treating code as an expensive final step, teams can use functional prototypes, editable designs, and AI assistance to explore behavior and visuals together. The result is broader participation, faster learning, and a shift from mechanical translation between design and code toward more semantic collaboration. ## AI Makes Code Part of Design Exploration - Code was traditionally costly and difficult to revise, while design allowed cheap, broad exploration. - AI reverses that relationship by making functional wireframes easier to create and iterate. - Designers can explore interaction and behavior—not just static layouts—then move work between code and canvas. - AI can translate between the two mediums in a way that preserves intent and structure rather than simply converting files or syntax. ## A More Bidirectional Collaboration Model - Code-based workflows tend to move in one direction and are often constrained by the patterns already present in a codebase. - Figma’s canvas gives teams space to reconsider assumptions and explore radically different directions. - Designers and developers can work from the same evolving artifact instead of repeatedly handing work off. - AI lowers participation barriers: people without access to an internal design system can import a live product into Figma as editable frames and begin contributing. ## Lower Learning Curves for Designers and Developers - AI turns steep technical learning curves into gradual ramps by providing a capable starting point. - People can learn frameworks, routes, React, and other concepts in the context of real work rather than abstract exercises. - Designers can extend beyond previous technical limits into areas such as shaders, 3D, and custom tools. - Deeper specialization remains possible, but the initial investment is much smaller and learning becomes more contextual. ## Curiosity as the New Differentiator - When AI tools become broadly available, access to technology alone is less likely to distinguish practitioners. - Curiosity and taste become more important: people who actively experiment can discover new possibilities. - AI functions as a patient tutor, reducing the friction of learning tools, frameworks, syntax, and development environments. - Staying effective requires continually exploring what can be built rather than relying only on existing technical expertise. The design-to-code loop is therefore less about replacing designers or developers and more about making experimentation and collaboration accessible across disciplines. Teams should treat AI as both a creative medium and a learning partner, moving freely between canvas and code while preserving room to question the initial direction.

Read original(opens in new tab)

FigmaDesign SystemsGenerative AIReact+2

figma·May 4, 2026·3 min readCurated summary

PGKeeper: Building the Bouncer We Needed for Postgres | Figma Blog

Figma built PGKeeper to replace PgBouncer as its PostgreSQL connection and load-management layer. Growing traffic, sharding, and stricter reliability requirements exposed PgBouncer’s limits in scalability, prioritization, backpressure, connection protection, and extensibility. PGKeeper is a custom Go service positioned between Figma’s DBProxy routing layer and PostgreSQL, designed to protect databases from overload and connection churn. ## Figma’s Database Architecture - PostgreSQL powers Figma’s OLTP workloads. - Figma scales through horizontal and vertical sharding across multiple database instances. - DBProxy hides sharding complexity from application code by: - Parsing and analyzing queries. - Selecting the appropriate PostgreSQL instances. - Rewriting requests into queries for the selected targets. - A dedicated set of connection-pooler replicas serves each PostgreSQL machine, creating an n-to-one relationship between poolers and databases. ## Why PgBouncer Was No Longer Enough - **Limited scalability** - PgBouncer’s single-threaded architecture created a vertical scaling ceiling. - Adding replicas helped, but uneven load distribution caused performance degradation. - **Insufficient load management** - PgBouncer could not prioritize critical traffic over lower-priority or misbehaving requests. - It lacked effective backpressure and advanced load-shedding algorithms such as Controlled Delay (CoDel). - CoDel sheds work based on how long requests wait, rather than simply counting queued requests. - **Unsafe connection behavior** - PostgreSQL connections are expensive resources. - Rapid connection creation and churn could destabilize database nodes. - Recovery after overload could trigger another surge of connections, creating cascading failures and prolonged overload. - **Limited extensibility and control** - Figma needed deep observability, feature-flagged rollouts, admission control, and fair resource sharing. - Even maintaining small PgBouncer patches proved costly. - Extending PgBouncer substantially would create an ongoing maintenance burden. ## Why Connection Pooling Could Not Live in DBProxy - Figma generally limits each PostgreSQL instance to roughly 100 pooled connections. - Hundreds of stateless DBProxy replicas sit in front of those databases. - Giving every DBProxy replica its own pool would either exceed database connection limits or require complex coordination. - Centralizing pooling in a separate service provided a better fit for the mismatch between many routers and a small fixed connection budget. ## Why Figma Built PGKeeper - PGCat addressed PgBouncer’s single-threaded scalability problem, but customizing it would require deep changes to its core execution paths. - Those changes would likely require Figma to maintain a long-term fork. - Figma therefore created PGKeeper as a Go-based service tailored to its infrastructure and operational requirements. - Its role is to act like a goalkeeper: protecting PostgreSQL from harmful traffic and protecting connections from uncontrolled churn. PGKeeper was chosen because Figma needed more than a basic connection pooler: it needed a scalable, observable, controllable layer capable of prioritizing traffic and preventing database overload.

Read original(opens in new tab)

PostgreSQLGoDatabase ShardingLoad Balancing+3