Figma

532 posts

figma2 min readCurated summary

Turn Your ChatGPT Brainstorms Into FigJam Diagrams | Figma Blog

Figma’s new ChatGPT app turns brainstorms, sketches, uploaded files, and technical documents into editable FigJam diagrams. It supports flowcharts, sequence and state diagrams, and Gantt charts, helping users move quickly from exploration to collaborative artifacts. The feature is powered by Figma’s remote MCP server and is available to logged-in ChatGPT users outside the EU. ## Turning Conversations into Diagrams - Users can mention Figma in a prompt, such as “Figma, make a diagram from this sketch.” - ChatGPT can recommend the Figma app when diagramming is relevant. - Photos, drawings, PDFs, and other files can provide context. - Generated diagrams can be revised, expanded, or represented in alternative formats. - Figma plans to add more diagram types over time. ## Accelerating Design Iteration - Hand-drawn sketches can become shareable FigJam files. - Designers can ask ChatGPT to update diagrams or explore different visualizations. - Dense documents can be uploaded so ChatGPT can produce an initial draft. - This helps teams move ideas from informal notes or whiteboards into a collaborative workspace. ## Clarifying Technical Systems - Developers can use uploaded documentation and screenshots to create or update software architecture diagrams. - ChatGPT can research technical approaches using blogs and case studies, then visualize them. - Screenshots, such as a pricing page, can be used to map likely React component structures. - The resulting diagrams support system design discussions, technical communication, and interview preparation. ## Planning Products and User Experiences - Product managers can visualize tradeoffs, such as simplicity versus power in a permissions flow. - PRDs can be converted into user journey or process flowcharts. - Product, engineering, and design requirements can be combined into Gantt charts for launch planning. - ChatGPT supports individual exploration, while FigJam enables teams to review and iterate together. The feature is currently live for logged-in ChatGPT users outside the EU. It offers a practical workflow for using ChatGPT to generate a first visual draft and FigJam to refine, discuss, and collaborate on it.

Read original(opens in new tab)
figma2 min readCurated summary

Why You Should Care About Design Context | Figma Blog

Design files are becoming an important input for agentic coding tools, so their organization and clarity directly affect the quality of generated code. Figma argues that designers should treat handoff as carefully as the design itself, providing developers and AI agents with explicit links between visual decisions and implementation details. The central recommendation is to build strong design-system foundations and structure files so they are easy for both humans and tools to interpret. ## Design systems as implementation foundations - Components and shared variables for color, spacing, sizing, and typography promote consistency and reuse. - These foundations become more valuable when connected directly to the codebase: - **Code Connect** links Figma components to their coded equivalents and displays accurate snippets in Dev Mode. - **Variable code syntax** defines how design variables should be represented across web and native platforms. - With the Dev Mode MCP server, AI agents can retrieve this design-system context directly instead of searching through an entire codebase. - A component such as a card can therefore be generated with the correct variants, properties, spacing, colors, typography, and states. - Embedding this information in shared Figma libraries allows the benefits to scale across teams and projects. ## Structuring files for developer consumption - Clear page hierarchies, frame names, layer names, and layouts make files easier to work with during design and easier for developers and MCP-powered tools to understand. - Create frames for important responsive breakpoints and major visual changes, such as a navigation bar becoming a menu icon. - Use auto layout to express how designs should respond to viewport widths, breakpoints, and changing text. - Intentional structure turns a design file into useful implementation context rather than merely a visual reference. Designers can improve development speed and AI-generated code by treating Figma files as structured technical documentation. Establish reusable, code-connected foundations first, then organize layouts and responsive states explicitly so developers and coding agents can reliably translate designs into production.

Read original(opens in new tab)
figma3 min readCurated summary

The Branding for Intercom’s AI Summit Looks Like an Alien Superbloom | Figma Blog

Intercom’s 2025 Pioneer AI summit branding uses an “alien superbloom” concept to express how rapidly AI is evolving. Its Creative Studio built a flexible system of surreal flowers, pollen-like particles, motion, and dot-matrix imagery that could work across digital campaigns, the website, event spaces, and merchandise. Figma served as the central workspace for exploration, collaboration, prototyping, feedback, and refinement. ## Building a Broad Creative Direction - Intercom Creative Studio began with expansive mood boards in Figma Design. - Teams combined motion clips, still images, vectors, logos, collages, and written concepts to explore multiple creative territories. - Motion designers, brand designers, and copywriters could experiment together in the same files. - Embedded video helped the team test logo treatments and messaging against motion references early in the process. - The selected direction evolved from the previous year’s “planted seeds” concept into an AI superbloom. ## Developing the Superbloom Visual Language - The central motif became surreal, alien-looking flowers blooming at unusual scales and speeds. - Pollen particles inspired a stippled aesthetic used in the logo, speaker portraits, and static imagery. - The visual system was designed to feel dynamic in motion while remaining restrained enough for print. - Intercom collaborated with Colors and the Kids to explore flower forms, animation styles, pollen density, and movement. - Figma Draw allowed designers to annotate video frames and specify changes to motion and flower shapes without switching applications. ## Presenting and Refining the Brand - Instead of conventional slide decks, the team presented concepts on long, scrollable Figma artboards. - Stakeholders could review work and leave comments directly on each board. - Separate pages organized successive feedback rounds, allowing explorations to develop into polished case studies. - Figma functioned both as a presentation tool and as an organizational system for the distributed 30-person creative team. ## Prototyping the Website - The Pioneer website was designed, prototyped, and quality-assured in Figma. - Designers and developers could review changes in one environment rather than moving between multiple platforms. - Live comments enabled immediate conversations during iteration, replacing slower back-and-forth through tools such as Slack. - The same brand principles could be tested across the web experience alongside event and campaign materials. The project demonstrates how a unified design workspace can help a distributed creative team move from broad visual exploration to a cohesive, motion-ready identity. For complex event branding, combining shared mood boards, in-context feedback, motion prototyping, and website testing can make the process faster and more connected.

Read original(opens in new tab)
figma3 min readCurated summary

Free Association: Production Designer Jeremy Hindle on Building Severance | Figma Blog

Jeremy Hindle’s production design for *Severance* began with a minimal script description—“four desks, large room”—and developed into Lumon Industries’ eerie, emotionally charged world. Drawing on modernist architecture, industrial design, cinema, and television, Hindle prioritized how spaces feel over what they communicate intellectually. His conclusion is that the show’s unsettling power comes from the tension between sterile order, vast scale, and profound loneliness. ## Designing Emotion - Hindle describes his goal as creating an atmosphere that is “stunning and lonely.” - His experience designing hundreds of commercial offices informed Lumon’s corporate environments. - Rather than focusing only on narrative information, he designs for viewers’ “kinetic” responses—the physical and emotional sensations produced by a space. - The sparse script gave him room to build a complete visual language around emptiness, repetition, and institutional control. ## *Playtime* and Architectural Absurdity - Jacques Tati’s *Playtime* was a central reference for *Severance*. - Tati’s film satirizes modern corporate architecture through vast, impersonal spaces and carefully choreographed movement. - Its mixture of comedy, alienation, and architectural scale helped shape Lumon’s uncanny office environment. ## John Deere Headquarters and Lumon’s Monumental Scale - Kevin Roche and Eero Saarinen’s 1964 John Deere headquarters provided a blueprint for Lumon’s institutional architecture. - Its monumental structure influenced the show’s sense of corporate permanence and authority. - The building also inspired the iconic desks used by the Macrodata Refinement team. - Hindle translated large-scale architectural references into environments that feel both imposing and strangely empty. ## Dieter Rams and Controlled Modernism - Lumon’s largely fabricated sets include selected real design classics, including Dieter Rams’s Braun TS 45 and TG 60 wall console. - Rams’s restrained, functional aesthetic reinforces the company’s carefully controlled visual identity. - The inclusion of recognizable industrial design creates a believable mid-century modern world while making Lumon’s environment feel more curated and artificial. ## Lessons from Film Production - Hindle’s work on *Zero Dark Thirty*, his first feature film, strengthened his commitment to constructing large-scale physical worlds. - He used full-scale models to help the entire crew understand how environments would function and remain visually readable. - This experience supported the detailed spatial planning required for *Severance*’s complex office interiors. ## Negative Space and the Scale of *Fargo* - A single still from the Coen brothers’ *Fargo* influenced Hindle’s vision for the scale of *Severance*. - The image demonstrated how negative space can make characters appear isolated and vulnerable. - Hindle showed the reference to director Ben Stiller, using it to communicate the show’s desired balance of composition, distance, and loneliness. ## The Emotional World of *Her* - Spike Jonze’s *Her*, with production design by K.K. Barrett and costumes by Casey Storm, served as another important reference. - Hindle admired the film’s ability to create a complete emotional world through design. - Its coordinated use of architecture, interiors, color, and clothing helped inform *Severance*’s approach to character and atmosphere. ## *Twin Peaks* and Television with Staying Power - David Lynch’s *Twin Peaks* represented the kind of distinctive, enduring television Hindle hoped *Severance* could become. - Although he had not previously been strongly interested in television, the project offered an opportunity to build a world with lasting cultural and visual identity. - Like *Twin Peaks*, *Severance* combines recognizable everyday settings with surrealism, mystery, and an unsettling sense of place. Hindle’s work shows how production design can make an abstract corporate dystopia physically memorable. By combining modernist architecture, precise industrial objects, cinematic negative space, and emotionally charged emptiness, *Severance* turns Lumon into one of the story’s most powerful characters.

Read original(opens in new tab)
figma2 min readCurated summary

Issue No.12: New Roles, New Rules | Figma Blog

Figma’s “New roles, new rules” highlights how AI and faster iteration are blurring traditional boundaries between product roles. Product managers, designers, and developers are increasingly working across disciplines, using prototypes and shared principles to collaborate directly. The issue argues that effective teams are replacing rigid handoffs with experimentation, co-creation, and better systems for guiding AI. ## Shifting Roles - Research found that: - 64% of product builders identify with two or more roles. - 56% of non-designers perform design-related work. - Faster development cycles and AI tools are enabling people to contribute further outside their formal specialties. - As responsibilities expand, teams are also reconsidering how they manage time, ownership, and collaboration. ## Prototyping to Create Shared Understanding - Figma product designer Natasha Tenggoro struggled to explain how video playback should work in Figma Buzz. - Instead of relying on verbal descriptions, she used Figma Make to build prototypes herself. - The prototypes helped the team reach three “aha” moments and provided a clearer basis for discussion. - The example demonstrates how building interactive artifacts can replace lengthy explanations and accelerate alignment. ## Music-Inspired Design in Figma Draw - Figma Draw’s new scatter brushes were shaped by musical concepts such as tempo, texture, and volume. - Designers translated the character of genres including Honky-tonk, Screamo, Doo-wop, and Vaporwave into brush behavior. - The release adds 10 scatter brushes, giving designers more control over attributes such as gap, wiggle, and jitter. ## Duolingo’s Collaborative Method - Duolingo’s Math team is changing the traditional design-to-engineering handoff for its math games. - Designers and engineers work through co-creation, scrappy prototypes, and continuous experimentation. - Shared principles—including “show, don’t tell” and distinguishing between a v1 and an MVP—help the team move quickly while refining ideas. - Collaboration is treated as an ongoing product practice rather than a stage that ends when design is handed off. ## Broader Changes in Creative Work - Agencies and freelancers are also abandoning rigid client boundaries and involving clients throughout the creative process. - Design systems can improve AI-generated code by giving agents structured, relevant, and brand-consistent input. - MCP servers are presented as an important connection between design systems and AI-powered workflows, helping agents produce more useful output. Overall, the issue recommends embracing broader roles and replacing formal handoffs with shared prototypes, collaborative iteration, and well-structured design systems—especially as AI becomes more involved in product development.

Read original(opens in new tab)
figma3 min readCurated summary

Are Roles and Responsibilities a Thing of the Past? | Figma Blog

Product teams are moving away from rigid job boundaries toward more fluid, overlapping responsibilities. Figma’s research, based on 51 interviews and a survey of 1,199 product professionals, found that 64% of respondents identify with at least two roles, while more than a third span three or more. This shift can improve collaboration and speed, but it also creates friction through tool overload and requires teams to coordinate more deliberately. ## Roles Are Becoming More Fluid - Product development responsibilities increasingly overlap across design, product management, engineering, research, data, and marketing. - 56% of non-designers say they participate heavily in at least one design-related task. - PMs are prototyping ideas, engineers are contributing to early design decisions, and marketers and content specialists are commenting directly in design files. - Figma conducted the research with Factworks and Fusion Hill through 51 qualitative interviews and a survey of 1,199 participants. ## Design Isn’t Just for Designers - Non-designer participation in design tasks such as mockups and brand exploration rose by 10% in the past year. - 70% of product managers create low-fidelity mockups or wireframes, and 59% create interactive prototypes. - One in four product builders has recently adopted a new design tool; 42% of those who have not yet adopted one plan to do so within a year. - Cross-functional design work can: - Help teams align on ideas earlier. - Expose technical feasibility problems before implementation. - Reduce back-and-forth and save time. - Designers can use the time saved for research, strategy, design-system maintenance, and craft. - The goal is not to eliminate design expertise, but to encourage shared visual communication and earlier collaboration. - Teams can support this transition by building stronger relationships, establishing a shared vision early, and welcoming contributions from colleagues who are still learning design tools. ## Tool Overload Is Causing Friction - 72% of respondents identify AI tools as the main force changing their roles. - Tools such as Figma Make, Claude Code, and GitHub Copilot make prototyping and code generation more accessible. - Notion, Figma Buzz, and Airtable similarly support rapid marketing production and project management. - Role expansion has led 71% of respondents to use more tools and software. - Participants use tools across an average of 7.6 out of 16 categories, including spreadsheets, project management, graphic design, and coding assistants. - Although new tools enable more people to contribute, the growing number of platforms can make workflows harder to manage and reduce the effectiveness of individual tools. Teams should treat overlapping roles as an opportunity for earlier alignment and broader participation, while actively simplifying their tool ecosystems. Clear collaboration practices—not rigid ownership boundaries—will be essential as product work continues to evolve.

Read original(opens in new tab)
figma2 min readCurated summary

How to Harness Skills That AI Can’t Automate | Figma Blog

Great products require more than AI-generated functionality; they depend on human craft, including curiosity, intuition, taste, and intention. AI accelerates prototyping and iteration, but people must decide what questions to ask, when to expand the scope, and whether an experience truly resonates. The article argues that these uniquely human skills are essential for steering AI toward thoughtful, high-quality outcomes. ## Curiosity: Starting from First Principles - Curiosity means asking “why” and “what if,” exploring multiple directions, and validating ideas through iteration. - Tools such as Figma Make, Claude, and ChatGPT make it faster to generate prototypes, campaign concepts, and alternative approaches. - AI can expand possibilities within a prompt, but it cannot independently challenge the original scope, follow an unexpected hunch, or recognize that a tangent deserves deeper investigation. - Early exploration improves confidence and reduces rework: - Figma designer Natasha Tenggoro used Figma Make to test video-playback concepts for Figma Buzz. - Prototyping exposed edge cases, clarified feasibility, and helped engineers understand the feature before implementation. - Curiosity can also lead to valuable scope expansion: - While designing icons for four new Figma products, Tim Van Damme realized the existing icon family needed a broader redesign. - He explored hundreds of variations and redesigned the suite for greater consistency, distinctiveness, scalability, and a unified Figma identity. ## Intuition: Following a Feeling - AI can help bring products to market quickly, but it cannot determine what will emotionally or practically resonate with customers. - Human designers can recognize when an interaction feels confusing even if it technically works. - Intuition may also identify qualitative improvements—such as adding white space to a crowded layout—that are difficult to express as strict requirements. - Eliel Johnson of CVS Health describes design as an active practice centered on asking whether an experience “feels good,” not merely whether it satisfies functional constraints. The practical lesson is to use AI for speed and breadth while reserving human judgment for direction, exploration, emotional resonance, and quality. Human craft is what turns technically workable output into a product people genuinely value.

Read original(opens in new tab)
figma3 min readCurated summary

The Anatomy of a Summer Campaign: How Instacart Staged a Sick ’90s Throwback | Figma Blog

Instacart’s “Summer Like It’s 1999” campaign used nostalgia to recreate the carefree feeling of a late-’90s summer. The campaign combined discounted retro snacks, a cohesive visual identity, immersive advertising, and a free Third Eye Blind concert. Its success depended on close collaboration across creative, marketing, CPG partners, and external agencies, with Figma serving as the shared source of truth. ## Recreating ’90s Nostalgia - Instacart reduced prices on nostalgic products such as Bagel Bites, Capri-Sun, and Otter Pops to their approximate 1999 prices. - The campaign culminated in a free Third Eye Blind concert in New York City. - Its visual language drew on: - Chunky typography - Bright, vivid colors - Fish-eye photography - Oversize clothing and other recognizable ’90s references - The team aimed to evoke nostalgia while keeping the work distinctly recognizable as Instacart. ## Building an All-in-One Creative Toolkit - Instacart’s in-house creative studio held daily meetings to align on: - Typography - Color palettes - Illustration - Photography - Logo and lockup treatments - Designers explored a wide range of ’90s references before reducing them to the essential elements that fit the brand. - The resulting toolkit documented the campaign’s colors, illustrations, typography, and other visual rules. - It became a living Figma file that internal teams, marketers, and external partners could use to create new assets. - The toolkit supported later campaign extensions, including a Venmo partnership and an advertisement inspired by the ’90s movie theater experience. ## Cross-Functional Collaboration - Creative, marketing, and CPG co-marketing teams worked together from the beginning rather than relying on formal handoffs. - Marketers had direct access to Figma, enabling frequent reviews, rapid changes, and visibility into work in progress. - The shared workspace helped maintain consistency across many campaign touchpoints, including: - The app icon - Splash pages - Television commercials - Billboards - Partner executions - The toolkit provided a flexible “north star” while allowing teams to remain expressive and adapt the campaign as new needs emerged. ## Developing a Detailed Photography Brief - The photography brief specified not only the products and scenes to capture, but also the precise visual treatment. - The team planned: - Low camera angles - Fish-eye effects - Idyllic outdoor locations - ’90s-inspired styling - Product placement required careful planning because the brief passed through multiple stakeholders. - Illustrations, typography, and textures were designed to layer over the photography, adding complexity and reinforcing a unified campaign style. Instacart’s campaign demonstrates how a strong, flexible design system can turn a broad creative idea into a coordinated, multi-channel experience. Establishing shared guidelines early—and keeping them accessible throughout production—helped the company move quickly without losing brand consistency.

Read original(opens in new tab)
figma2 min readCurated summary

How To Build A Resilient Design Team | Figma Blog

Design teams must build resilience by creating psychological safety, encouraging experimentation, and preserving high standards of craft. The article argues that leaders should prepare teams to adapt to changing technologies, roles, and constraints rather than rely on a fixed playbook. Resilience comes from trust, flexibility, thoughtful capacity planning, and a willingness to question established assumptions. ## Start with Team Health - Stress, burnout, overwork, and fear prevent people from doing their best creative work. - Leaders should build trust and a shared mission while encouraging candid, non-personal critique. - Provide both synchronous and asynchronous ways for people to contribute so the loudest voices do not dominate. - Make it safe to share work at every stage, from rough sketches to polished designs. - Use regular 1:1s, career conversations, and feedback surveys to identify problems early. - Plan realistically around team bandwidth instead of overcommitting. - Model vulnerability by openly acknowledging uncertainty and personal challenges. ## Encourage Experimentation and Shifting Roles - Designers have different strengths, so teams should combine complementary skills and create opportunities for mutual learning. - Boundaries between design, research, product, and engineering are becoming more fluid. - Encourage designers to work closer to production through AI prototyping and code experimentation. - Sharing unfinished work and lessons learned—such as through Figma’s `#design-wip` channel—helps normalize experimentation. - Invite cross-functional partners into design critiques to bring broader perspectives into the process. - Balance shipping current work with inventing and testing new approaches as technology changes. ## Treat Craft as a Differentiator - High-quality, carefully executed products can distinguish a company in crowded markets, strengthen user loyalty, and drive growth. - Craft is especially valuable in enterprise software, where design quality is often neglected. - Strong execution requires attention to detail and may involve trade-offs, such as refining the user experience instead of adding more features. - Fast-moving teams must deliberately protect time for visual consistency, clarity, and overall product quality. ## Practical Recommendation Build resilience as an ongoing operating practice: protect team health, make experimentation routine, support fluid collaboration across roles, and treat quality as a strategic advantage rather than an optional extra.

Read original(opens in new tab)
figma3 min readCurated summary

Why Is Corpcore Suddenly Such a Thing? | Figma Blog

Software merchandise has shifted from ordinary corporate swag to desirable streetwear, a trend the article calls “corpcore.” Vintage Apple and Microsoft shirts now command high resale prices, while new collections from companies like Figma attract crowds comparable to major fashion drops. The appeal combines nostalgia, brand loyalty, irony, and a renewed interest in technology’s cultural influence. ## The Rise of Tech Merchandise - Vintage Apple T-shirts, many with simple designs commemorating teams or projects, can sell for hundreds of dollars on Depop and Grailed. - Even the 1997 book *Apple T-Shirts: A Yearbook of History at Apple Computer* can cost up to $850. - Contemporary company merchandise is also attracting serious demand: - Figma’s 2025 Config conference featured a pop-up store with long lines. - The collection included apparel and Otto plush toys. - Its development involved eight months of work between Figma’s Brand Studio and Garrett Elizabeth Office. - Designer Jeff Staple compared Figma’s release to a Supreme drop, highlighting how tech merchandise now operates within streetwear culture. ## Nostalgia for Early Technology - Vintage corpcore appeals to people who remember the early web and their first encounters with companies such as Apple and Microsoft. - The merchandise evokes a period when technology seemed rebellious and disruptive—young programmers challenging established corporate power. - Wearing an old company shirt signals affiliation with a successful or influential group, much like a bumper sticker or sports jersey. - Vintage tech apparel also allows people to celebrate that history from a deliberately ironic distance. ## A Post-Ironic Corporate Style - Modern corpcore blends sincere brand enthusiasm with absurdity and irony. - Examples include: - Cash App’s 2023 club-kid fashion line designed by Marshall Columbia and modeled by Julia Fox. - Overtime’s limited-edition Dunkin’ Donuts streetwear. - Fashion items featuring Lockheed Martin branding, including polo shirts and tactical tracksuits. - Designers must balance making merchandise feel genuinely desirable without losing the humor or self-awareness associated with corporate branding. ## From Company Swag to Cultural Identity - People increasingly wear app and software logos on shirts, hats, totes, and water bottles as they would wear band merchandise or sports jerseys. - The trend reflects both affection for technology brands and the growing influence of software companies on everyday culture. - “Corpcore” succeeds because it turns corporate identity into a form of personal expression rather than merely advertising an employer. The broader lesson is that thoughtful, culturally aware merchandise can transform a company logo into a fashion symbol. Brands that understand nostalgia, scarcity, design quality, and the tension between sincerity and irony can make corporate swag feel genuinely collectible.

Read original(opens in new tab)
figma2 min readCurated summary

IDC Study Says the Global Workforce Engaged in Software Design Is Expanding | Figma Blog

IDC forecasts that the global workforce involved in software design and development will grow by more than 30%, reaching 144 million people by 2029. This expansion reflects the growing role of design as a competitive differentiator and the increasing demand for design talent. Generative AI is expected to accelerate product development while raising expectations for usability and visual quality. ## Workforce Growth in Software Design - The population of knowledge workers and developers designing digital products and interfaces is projected to grow from **107 million in 2025 to 144 million in 2029**. - The research covers multiple industries, company sizes, and roles involved in software design and product development. - IDC based its model on quantitative research involving more than 1,000 IT and business leaders. ## UX Design Leads Growth - UX professionals are expected to grow at a **7.6% compound annual growth rate** between 2025 and 2029. - This growth is expected to outpace other knowledge-worker categories. - IDC links the trend to rising demand for design-intensive digital products and solutions. ## Generative AI Raises the Bar - Generative AI will increase the speed and volume of software development. - Faster development may give users more product choices and enable better-designed digital experiences. - Designers and developers will face greater pressure to make AI-powered features highly usable, appealing, and intuitive. Overall, the study suggests that companies should treat design as a strategic capability and invest in UX talent as software development becomes faster and more AI-driven.

Read original(opens in new tab)
figma3 min readCurated summary

The Anatomy of an Activation | Figma Blog

Figma marked its 2025 public-market debut by turning the New York Stock Exchange into a public celebration of design and community. Rather than follow a conventional IPO event, the company created “Figma Commons,” supported by citywide murals, posters, billboards, and street experiences. The activation aimed to make the milestone accessible and enjoyable for both longtime users and people encountering Figma for the first time. ## A Citywide Celebration of Design - The July 31 NYSE event centered on the message “Design is everyone’s business.” - Figma’s events and community teams expanded the celebration beyond the exchange with: - A large Brooklyn mural - Posters across New York City - A Times Square digital billboard - The Figma Commons outdoor event - The initiative reflected Figma’s belief that its community is central to the brand and should share in major milestones. ## Building Figma Commons - Community and events leads Jordan Scott and Kelley Sauer shaped the experience over weeks of planning. - The project required approvals from the NYC Department of Buildings, NYPD, and the mayor’s office. - Temporary structures had to be mounted on wheels to comply with emergency-access regulations. - Storms complicated installation, with work stopping for 30 minutes after each lightning strike. - The team deliberately chose a larger, more ambitious event than a standard NYSE listing ceremony. ## Extending the Invitation - Because communications were embargoed until a press release was issued, Figma had fewer than 15 hours to promote the event. - The team relied on grassroots and physical marketing: - Flyers at subway stations and ferry terminals - Wildpostings around Manhattan and Brooklyn - Direct outreach to longtime local customers - Posters included QR codes linking to free invitations, reinforcing the idea that the event was open to everyone. ## Designing the Experience - Figma paid close attention to visual and physical details because its community values design craft. - The event included: - Bespoke signage from Figma’s brand team - Limited-edition merchandise designed to feel fresh rather than excessively branded - Food and drinks from popular New York eateries - A live mural by graffiti artist Greg Lamarche featuring the word “make” - Additional citywide creative work promoted Figma Make, including Times Square billboards and a Brooklyn mural built from more than 200 hand-drawn glyphs. Figma Commons demonstrates how a corporate milestone can become a participatory public experience. By combining strong visual design, local culture, grassroots outreach, and careful logistical planning, Figma made its IPO celebration feel like an invitation to join the company’s broader design community.

Read original(opens in new tab)
figma2 min readCurated summary

Getting into the groove: How music shaped the scatter brushes in Figma Draw | Figma Blog

Figma Draw’s 10 new scatter brushes were inspired by music genres, using rhythm, repetition, and texture as guides for visual experimentation. Product designer Rogie King created 99 designs, which the team narrowed down to brushes named Bubblegum, Witch house, Shoegaze, Honky-tonk, Screamo, Drone, Doo-wop, Spoken word, Vaporwave, and Oi!. The project also emphasizes making digital art feel approachable and expressive for users without formal artistic training. ## Music as a Design Framework - Scatter-brush patterns resemble musical beats because their elements repeat along a stroke. - Brush settings such as gap, wiggle, and jitter parallel musical controls like tempo, texture, and volume. - UX writer Molly Rosen Marriner gathered genre ideas from the Every Noise At Once genre map and Figma employees. - Visually suggestive genres—including Electroclash, Drone, and Witch house—helped guide the brush concepts. ## From Genres to Brush Strokes - Rogie began with familiar uses such as stippling and shading, then explored more expressive interpretations. - He listened to representative songs and researched each genre’s visual culture. - The Screamo brush, for example, drew on early-2000s imagery associated with mosh pits, dark clothing, and heavy eyeliner. - He also consulted others, including his son, to better understand genres such as Shoegaze. ## Selecting the Final Collection - Rogie produced 99 scatter-brush designs through an intentionally exploratory process. - The Figma team voted on designs that offered the most flexibility and expressive potential. - Molly later matched the selected brushes to music genres, sometimes inventing or adjusting associations to fit the visuals. - The final set includes 10 brushes designed for stippling, shading, texture, and playful decoration. ## Making Digital Art More Accessible - The brushes expand the emotional and stylistic range available in Figma Draw, from mysterious wisps to repeated smiley-face splatters. - The genre-based names avoid overly technical art-school terminology. - Rogie wanted users to feel free to experiment without needing formal artistic education or experience with physical media. - The collection presents artistic expression as accessible, playful, and open to everyone.

Read original(opens in new tab)
figma3 min readCurated summary

Design Systems And AI: Why MCP Servers Are The Unlock | Figma Blog

Design systems provide the shared language AI agents need to generate code that is not merely functional, but consistent with a company’s brand, accessibility standards, and engineering practices. Figma argues that its MCP server unlocks this value by transferring design context—such as components, variables, styles, and code mappings—directly into developer workflows. The result is a feedback loop in which stronger design systems produce better AI output, while AI makes those systems more useful and scalable. ## Design Systems as Context for AI - Design systems already connect design and engineering through: - Shared patterns and terminology - Documentation and best practices - Brand guidelines and reusable code - These same elements give AI agents the context required to produce the “right” output rather than generic interfaces. - A mature design system can therefore become a productivity multiplier for AI-powered product development. - Organizations without a robust system can also use Figma’s MCP server to help implement tokens and components. ## Design Systems as the Shared Language - As AI lowers the barrier between ideas and implementation, product differentiation increasingly depends on craft, visual identity, and user experience. - Design systems help scale that craft while preserving speed, quality, and consistency. - Effective systems provide: - **Scalable foundations:** Tokens for color, spacing, typography, and other design decisions - **Reusable components:** Flexible elements built around a shared source of truth - **Built-in accessibility:** Inclusive experiences by default - They also prevent teams from shipping interchangeable, generic interfaces assembled from common AI-generated parts. ## Why Context Improves AI Code Generation - Figma reports that 68% of developers use AI to write code, but only 32% trust its output. - Without design-system context, AI behaves like a new engineer who has not been onboarded: its code may work, but it may not follow team conventions. - With that context, AI can: - Reuse existing components and patterns - Apply design tokens consistently - Generate higher-quality starting code - Reduce misunderstandings and shorten design-engineering feedback loops ## How Figma’s MCP Server Works - When developers inspect a Figma frame, the MCP server sends relevant context to an AI agent, including: - Components - Styles - Variables - Variable code syntax - **Code Connect** can map design elements to real code resources, allowing agents to use existing implementation libraries. - Even without these mappings, the server supplies styling information that helps agents create more design-informed code. - Automated design-system rule generation can scan a codebase and produce a structured rules file covering: - Token definitions - Component libraries - Style hierarchies - Naming conventions - This file gives AI agents system-level defaults, reducing the need for developers to repeat detailed instructions in every prompt. - Figma MCP also provides annotations that can communicate extra context, including accessibility and interaction behavior. ## The Design-System and AI Flywheel - Better design systems provide richer context to AI agents. - Better context leads to more accurate, on-brand code. - Improved AI output can make design-system adoption and maintenance more valuable. - This creates a reinforcing cycle: robust systems improve AI results, and AI helps teams apply and extend those systems more effectively. Teams seeking reliable AI-generated product code should treat their design system as essential infrastructure and connect it to development tools through mechanisms such as MCP, Code Connect, tokens, rules, and annotations.

Read original(opens in new tab)
figma2 min readCurated summary

Who Says Design Needs a Mouse? | Figma Blog

Figma is introducing keyboard accessibility features to make end-to-end design possible without a mouse. Developed with feedback from keyboard- and screen-reader users, the updates improve canvas navigation, object insertion, and selection while providing better spoken feedback. The goal is to remove barriers so more designers can participate fully in design work. ## Keyboard-Only Canvas Navigation - Users can pan across the canvas with the arrow keys. - Holding `Shift` enables faster movement or scrolling. - New shortcuts provide finer zoom control and access to the move and hand tools. - These changes address problems such as getting stuck at the top of the canvas or zooming into the wrong area. ## Inserting Objects Without a Mouse - Most object types, including shapes and text, can now be added using the keyboard. - Frames can be inserted with keyboard shortcuts through a crosshair-guided view. - Pressing `Enter` places text in the center of the current screen. ## Selecting and Positioning Objects - A keyboard box-selection tool allows users to select objects on the canvas. - Arrow keys move a pink cursor between objects. - Pressing `Enter` selects the object under the cursor. - Multiple objects can be selected using a selection box. ## Broader Accessibility Improvements - Enhanced screen-reader support announces actions as users work, helping them stay oriented. - Figma’s accessibility efforts also include a color-picker contrast checker for evaluating WCAG compliance. - Semantic HTML tags can be assigned in designs to support products that work better with screen readers. - Figma emphasizes accessibility as an ongoing commitment rather than a one-time checklist. Users can consult Figma’s help center for instructions on using the new keyboard controls and enabling screen-reader support.

Read original(opens in new tab)