Design Systems

252 posts

figmaSep 9, 20252 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.

Design Systems Figma AI Product Design+2

figmaSep 9, 20253 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.

Design Systems Figma AI Prototyping+3

figmaSep 8, 20253 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.

Design Systems Figma Typography Photography+3

figmaSep 4, 20252 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.

Design Systems Figma User Experience Product Design+2

figmaAug 20, 20252 min readCurated summary

Forrester Analyzes The ROI Of Dev Mode | Figma Blog

Dev Mode is presented as a way to reduce friction between designers and developers, especially during handoff and implementation. A Forrester Total Economic Impact study found that it can increase developer output by 20–30%, save more than 90 minutes per developer each week, and generate significant financial benefits over three years. The central conclusion is that a shared, inspectable source of truth helps teams ship faster without sacrificing product quality. ## The Business Case for Dev Mode - Figma commissioned Forrester two years after Dev Mode launched. - Forrester interviewed four decision-makers and modeled a composite organization with 100–1,000 designers and developers. - The study identified inefficient handoffs and redundant work as major sources of lost time. - Its modeled benefits include: - 20–30% higher developer output - More than 90 minutes saved per developer each week - Approximately $10 million in developer-efficiency time savings over three years - Approximately $2 million in increased profit from faster time to market ## One Shared Source of Truth - Teams working in a shared space can collaborate continuously instead of waiting for a formal design handoff. - One organization reportedly moved from design completion to release in six to eight months, compared with an earlier process that could take two or three years. - A survey of 200 developers at another company found average savings of 98 minutes per week. - Developers can inspect design files directly to find: - Variables and specifications - Exact assets - Documentation - Code snippets - This reduces dependence on Slack messages, meetings, time-zone coordination, and manually maintained annotations. ## More Autonomous Developers - Dev Mode allows developers to resolve many implementation questions independently. - By seeing design intent and technical details directly in Figma, developers spend less time clarifying requirements with designers. - Reduced context switching and fewer back-and-forth conversations let developers focus more of their time on building products. - The broader benefit is not simply faster execution, but lower mental overhead and smoother collaboration between disciplines. The study supports adopting Dev Mode—or similar workflow improvements—when teams need to accelerate delivery while preserving design quality. Its strongest value comes from making design information immediately accessible and enabling designers and developers to collaborate before either side has finished their work.

Design Systems AI Code Snippets Cross Platform Development+3

figmaAug 5, 20253 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.

Design Systems Figma AI Agents Model Context Protocol+2

figmaJul 31, 20252 min readCurated summary

The Duolingo Method: Collaboration As A Core Practice | Figma Blog

The Duolingo Math team treats collaboration as a continuous practice rather than a one-time handoff from design to engineering. Designers, engineers, and product managers co-create ideas, validate them through rapid prototypes, and refine features together. This approach helps the team make better decisions quickly while building entirely new learning experiences. ## Ideating Together - The Math team develops new lessons and games without established templates or patterns to follow. - Designers, engineers, and product managers begin projects together in a shared FigJam file. - After agreeing on a direction, designers create detailed Figma mockups, including interactions and motion. - Engineers participate early by evaluating technical complexity and commenting on implementation challenges. - Jira is connected directly to Figma, reducing context switching during development. ## Experimenting Through Rapid Prototyping - Engineers quickly build initial prototypes using components from Duolingo’s design system. - Designers and engineers share Figma files, working prototypes, questions, and feedback in Slack. - The team repeats a “prototype, test, tweak” cycle for each feature. - Duolingo’s “show don’t tell” principle encourages building and experiencing ideas instead of debating them abstractly. - Prototypes reveal how an interaction actually feels, helping the team test assumptions and make decisions before investing in a polished implementation. ## Polishing and Shipping Together - Continuous collaboration allows the team to make decisions and polish features during development. - The team may simplify animations or remove nonessential mechanics to ship faster. - When exploring educational games, Duolingo first created a batch of simple prototypes instead of building two fully developed games. - The team tested seven different prototypes to learn what resonated with users and prioritized features based on those findings. The Duolingo method replaces rigid handoffs with shared ownership, frequent communication, and working software. For exploratory products, teams should involve engineers early, prototype quickly, and use real user or team feedback to guide what gets polished and shipped.

Design Systems Figma Figjam Slack+3

figmaJul 28, 20253 min readCurated summary

A Tale of Two Parameter Architectures—and How We Unified Them | Figma Blog

Figma’s component properties and variables both let users define a value once and apply it across a design, but they were originally built on separate architectures. This led to conflicting bindings, inconsistent rendering, and duplicated engineering effort. Figma unified the systems into one parameter architecture, improving consistency and creating a scalable foundation for future products. ## Two Different Parameter Systems - **Component properties**, introduced in 2022, addressed the gap between design and code. - They enabled **scoped parametrization**: parameters could be defined by a component and applied only to its internal layers. - This gave design-system authors a clear customization contract and mirrored how component properties work in code. - The model supported features such as: - Boolean properties - Text and instance customization - Component variants and states - Component properties helped power products including Figma Sites, Figma Make, and Code Connect. ## Variables and Global Parametrization - Variables provided a broader, more globally reusable parameter system. - They supported values such as colors and could define different values for contextual modes, such as light and dark themes. - Unlike component properties, variables were designed to be reused across many unrelated layers and components. - This made variables well suited to design tokens and system-wide configuration. ## Problems Caused by Separate Architectures - The two systems evolved independently despite having similar goals. - A variable and a component property could bind to the same layer property, producing inconsistent results in the editor. - Users had to learn different behaviors and rules for concepts that appeared similar. - Maintaining two implementations increased engineering complexity and slowed feature development. - Extending parametrization to other Figma products risked reproducing the same technical limitations. ## Unifying the Architecture - Figma built a single underlying parameter architecture to support both component properties and variables. - The unified system preserves the distinction between: - Parameters scoped to a component - Parameters reused globally across a project - It eliminates competing bindings and makes parameter behavior more predictable. - The change also improves developer velocity by allowing new capabilities to build on shared infrastructure. ## Broader Impact - Designers receive a more consistent mental model for configuring components and design systems. - Rendering behavior is more reliable when multiple parameter types interact. - Figma can extend parametrization across existing and future products without maintaining separate technical foundations. - The unified architecture supports Figma’s broader goal of connecting design-system behavior with code and interactive products. Figma’s recommendation in practice is to treat component properties and variables as complementary uses of one parameter model: use scoped properties for component contracts and variables for reusable, contextual design tokens.

Design Systems Figma Responsive Design Code Generation+3

figmaJul 24, 20252 min readCurated summary

The making of a product icon | Figma Blog

Figma product icons are the result of extensive exploration rather than a single inspired sketch. Designer Tim Van Damme combines consistent visual rules with product-specific research, then develops dozens or hundreds of variations before refining the final symbol. The process balances recognizability, scalability, and a distinct identity across Figma’s expanding product suite. ## Building a Consistent Icon System - Figma previously had no formal icon-design system, so Tim created unofficial guidelines to ensure the icons worked as a cohesive family. - Core principles include: - One-pixel-wide strokes - One-pixel-thick cutouts - Rounded caps - Balanced compositions that use the available space - Three standard sizes for different surfaces - Icons must work everywhere from toolbars to large marketing displays and billboards. - Designs are rejected when lines blur or visual elements become indistinguishable at smaller sizes. ## Finding the Product’s Core Idea - Each icon must follow Figma’s broader visual language while representing the identity of its specific product. - Tim collaborates with design and product teams to list concepts, themes, and associations connected to the product. - For Figma Community, ideas such as shared learning, connection, and knowledge exchange inspired experiments with people, trees, and books. - For Figma Buzz, themes including magic, creation, and AI image generation led to explorations involving glass orbs, stars, and bees. ## Exploring Through Extensive Iteration - Tim uses Figma’s variable-width strokes and simultaneous vector-layer editing to speed up experimentation. - He develops large families of related symbols, gradually adjusting shapes, proportions, movement, and composition. - Creative exploration can transform one idea into another—for example, trees into faces, faces into mandalas, or abstract shapes into interlocking forms. - For Figma Make, he explored motion and transformation through wheels, butterflies, compasses, and fidget spinners. - For Figma Buzz, he created hundreds of bee variations, changing wings, antennas, and line treatments before narrowing the options. The practical lesson is that effective product icons emerge from a structured but highly exploratory process: establish shared rules, identify the product’s essential meaning, and iterate freely until the symbol is both distinctive and immediately legible.

Design Systems Figma Vector Graphics Ai Image Generation+1

figmaJul 20, 20252 min readCurated summary

Launching the roadshow for Figma’s proposed IPO | Figma Blog

Figma announced the launch of its roadshow for a proposed initial public offering of Class A common stock. The offering includes new shares from Figma and shares sold by existing stockholders, with an expected price of $25–$28 per share. Figma plans to list on the New York Stock Exchange under “FIG,” pending regulatory effectiveness. ## Proposed Share Offering - Figma will offer 12,472,657 shares of Class A common stock. - Existing stockholders will offer 24,646,423 additional shares. - Selling stockholders may grant underwriters a 30-day option to purchase up to 5,540,561 more shares for over-allotments. - Figma will not receive proceeds from shares sold by existing stockholders. - The expected IPO price is $25–$28 per share. ## Listing and Underwriters - Figma has applied to list its Class A common stock on the New York Stock Exchange under the ticker symbol **FIG**. - Morgan Stanley, Goldman Sachs, Allen & Company, and J.P. Morgan are joint lead book-running managers. - BofA Securities, Wells Fargo Securities, and RBC Capital Markets are book-running managers. - William Blair and Wolfe | Nomura Alliance are serving as co-managers. ## Regulatory Status - Figma’s registration statement has been filed with the SEC but is not yet effective. - The shares cannot be sold, and purchase offers cannot be accepted, until the registration process is complete. - The offering will be made only through a prospectus. ## Figma’s Business - Founded in 2012, Figma describes itself as a collaborative platform for digital product development. - It has expanded from a design tool into a connected, AI-powered platform supporting ideation, design, development, and product delivery. Figma’s announcement marks a formal step toward becoming a public company, but the IPO remains subject to SEC approval and final offering conditions.

Design Systems Figma AI Prototyping+2

figmaJul 10, 20252 min readCurated summary

In Good Company: How Retailers Use Figma to Elevate E-commerce | Figma Blog

The article argues that successful e-commerce depends on cohesive, trustworthy digital experiences that connect customer needs, operational systems, and brand values. It highlights how Nuuly, Ruggable, and GitHub use Figma to improve collaboration, maintain consistency, and create more engaging shopping experiences. Nuuly’s example shows how thoughtful design systems can simplify highly complex business processes for customers and employees alike. ## Nuuly: Simplifying Clothing Rental - Nuuly aims to make clothing rental an everyday habit, giving subscribers flexibility to experiment with their style. - Its business requires complex behind-the-scenes systems for: - Circular inventory management - Cleaning and repairs - Rental logistics - Nuuly built two separate design systems: - One for the customer-facing experience - One for internal rental-management tools - Both systems use flexible color and typography tokens so the brand can evolve seasonally. - The “My Nuuly” feature makes more than 26 rental statuses understandable by showing customers what is happening now and what to expect next. - In 2023, Nuuly migrated to Figma and consolidated 16 fragmented design files into two shared libraries. - Figma’s prototyping and collaboration tools helped the team: - Work faster - Communicate interaction details more clearly to developers - Stay aligned across departments - Content, photography, and other teams also adopted Figma, FigJam, and Figma Slides for brainstorming, reviews, and customer-journey improvements. ## Ruggable: Creating Consistent Digital Experiences - Ruggable’s UX leadership encountered siloed workflows across social advertising, the homepage, and product-detail pages. - These disconnected processes produced inconsistent digital experiences. - The article presents Ruggable as an example of how shared design practices can connect marketing and e-commerce touchpoints, though the supplied text ends before describing its specific solutions. ## GitHub and Design Business Company: Designing for Developers - The article also introduces a collaboration between GitHub and Design Business Company. - Their goal was to create a storefront specifically tailored to developers. - The partnership illustrates how brands can use design to add personality and delight while remaining aligned with their audience’s expectations. By combining scalable design systems with cross-functional collaboration, retailers can make complicated services feel simple, improve internal efficiency, and deliver a more consistent brand experience across every digital surface.

Design Systems Figma User Experience Prototyping+2

figmaJul 1, 20252 min readCurated summary

Figma Launches Latin American Spanish Localization | Figma Blog

Figma has launched Latin American Spanish localization for its product and support services, strengthening its presence across the region. The update reflects growing demand from Latin American designers, developers, startups, and enterprises, where more than 10 million Figma files were created in the past year. It is Figma’s fifth product localization and supports the company’s broader expansion beyond the United States. ## Expanding in Latin America - Figma already serves major regional companies including iFood, Itaú Unibanco, Mercado Libre, Nubank, Sicredi, TOTVS, and Quinto Andar. - The company says design is becoming an increasingly important business differentiator across Latin America. - Latin American Spanish is available starting July 2. ## What the Localization Includes - Spanish language support tailored specifically to Latin American users. - Culturally adapted product interfaces. - Dedicated customer support for the region. - The release follows Figma’s Brazilian Portuguese localization. ## Growing Regional Adoption - More than 10 million Figma files were created across Latin America in the previous year. - Companies such as iFood and Itaú Unibanco use Figma to coordinate design, product, and engineering workflows. - Leaders at these companies say localization will make collaboration and product development more natural and efficient. ## Figma’s Global Expansion - Latin American Spanish is Figma’s fifth localization, following Japanese, European Spanish, Korean, and Brazilian Portuguese. - Approximately 85% of Figma’s monthly active users were outside the United States in Q4 2024. - More than half of Figma’s 2024 revenue came from non-U.S. markets. - About two-thirds of monthly active users work outside traditional design roles, including roughly 30% who identify as developers. Figma’s Latin American Spanish release is intended to deepen its relationship with the region’s growing design and development community while making collaboration more accessible to local teams.

Design Systems Figma Product Design User Interface+2

figmaJun 23, 20252 min readCurated summary

In Good Company: How Agencies Are Transforming Client Collaboration | Figma Blog

The article argues that agencies and freelancers are replacing opaque, hierarchical design processes with flexible, collaborative partnerships. Remote work, boutique studios, and tools such as Figma enable clients to participate throughout the project rather than simply review finished deliverables. The result is a more fluid model that combines specialist craft with generalist, cross-functional collaboration. ## A More Collaborative Agency Model - Remote work has dispersed teams across locations and time zones, making frequent communication and shared tools essential. - Boutique agencies increasingly compete with large firms by offering agility and closer client relationships. - Agencies are tailoring their structures to each project, with teams expanding or contracting according to client needs. - Roles are becoming less rigid; Design Business Company co-founder Judson Collier describes this shift as “generalism” returning to the industry. - Clients are more design-literate and comfortable working directly in tools such as Figma. - Shared files and comments replace formal presentations and printed deliverables, allowing teams to iterate continuously. ## Human’s Flexible Studio Structure - Human, founded by Rachael Yaeger and Michael Ray in 2013, typically operates with six to ten employees. - Its variable team size lets the studio provide: - Freelancer-like agility - Large-agency cohesion and experience - Close collaboration between designers, developers, and clients - Human avoids the separation that can arise when internal and agency teams work in isolated groups. - Clients increasingly embed external agencies directly into their teams, reducing management layers and encouraging informal communication. ## Building Jimini Health’s Brand - Human worked with Jimini Health, an AI mental-health company, on a visual identity and website. - During the project’s sprint phase, the two teams held foundational discussions about the qualities and values the brand should express. - Human used Figma Slides to support high-fidelity presentations and cross-functional collaboration. - The resulting identity included: - A visual system reflecting the spectrum of human emotion - A robust, ADA-compliant color palette - Photography by Molly Matalon - Consistent applications across the app, website, and social media - Frequent feedback through shared Figma files allowed both teams to refine the direction together rather than treating design as a one-way agency handoff. Agencies can work more effectively by combining flexible team structures, broad creative skills, and transparent collaboration tools. Treating clients as active partners—and giving them access to the work throughout the process—creates faster, friendlier, and more adaptable design workflows.

Design Systems Figma User Experience Collaborative Design+2

figmaMay 6, 20253 min readCurated summary

Publish Your Designs On The Web With Figma Sites | Figma Blog

Figma Sites is an all-in-one tool for designing, building, and publishing responsive websites directly within Figma. It replaces the traditional handoff-heavy workflow with an iterative process that combines design, prototyping, interaction, and production. The product is aimed at both designers and teams with limited development resources, while offering advanced customization through responsive layouts, animations, and upcoming AI-powered features. ## Design and Publish Directly in Figma - Users can create live websites without exporting designs or switching to separate development tools. - The workflow supports portfolios, event websites, landing pages, and other interactive web experiences. - Templates, responsive web elements, and ready-made interactions provide starting points for teams with limited design or development resources. - A planned chat-to-code feature, powered by Figma Make, will let users describe interactions or animations for Figma to generate. - Published design libraries can be connected through the inserts panel, allowing teams to reuse components and styles from their design systems. - Figma also provides common building blocks such as navigation, hero sections, and complete page layouts. ## Responsive Design and Prototyping - Figma Sites automatically adapts layouts, text, and designs across breakpoints. - Multi-edit enables simultaneous changes across multiple screen sizes. - Text styles can define different sizing and spacing for each breakpoint without relying on variables. - Designers can preview a fully responsive site rendered in HTML and CSS before publishing. - The preview supports resizing the browser window, observing layout reflow, and switching between breakpoints. - Interactive previews can be shared with collaborators for feedback. ## Built-In Interactions and Motion Figma Sites includes pre-built effects for creating more dynamic websites, including: - Mouse parallax - Lightboxes - Infinite spinning objects - Draggable elements - Typewriter text - Scrambled text reveals - Marquee, reveal, and scroll-based effects The product also introduces interactions not currently available in Figma Design, such as scroll parallax, scroll transforms, and hover or pressed states that do not require interactive components. ## Future Customization and AI Features - Upcoming code layers will allow designers to create interactive experiences without plugins or external tools. - AI chat will help turn static frames into interactive elements, such as draggable lists or geographically accurate clocks. - Code layers will eventually support reusable components and instances, similar to Figma Design libraries. - These features are intended to let designers create increasingly complex web experiences while staying within the Figma workflow. Figma Sites is best suited to teams that want a direct path from visual design to a published, responsive website. Its templates and built-in interactions simplify production, while code layers and AI features are intended to expand its capabilities for more advanced experiences.

Design Systems AI Prototyping CSS+4

figmaMay 6, 20252 min readCurated summary

Introducing Figma Make: A New Way to Test, Edit, and Prompt Designs | Figma Blog

Figma Make is Figma’s new prompt-to-app tool for turning designs into interactive, testable experiences. It allows designers and product teams to start with existing Figma frames, add behavior through natural-language prompts, and iterate collaboratively without rebuilding everything in code. Figma’s goal is to make exploration faster while preserving design intent, structure, and craft. ## Start with Existing Designs - Users can copy frames from Figma Design into Figma Make, including their structure and metadata. - Natural-language prompts transform static designs into interactive prototypes. - The tool is designed to support the entire design process, from early sketches to developed prototypes. - Figma Make currently uses Claude 3.7 Sonnet, with additional models planned. ## Turn Static Designs into Interactive Experiences - Add animations, interactive buttons, and real-time feedback without complex coding. - Test features using dynamic data, including file uploads and data visualizations. - Adapt designs across platforms and form factors, such as converting a mobile app design into a desktop version. - Future capabilities are expected to include third-party database integrations and design-system support. ## Real-Time Collaborative Exploration - Figma Make is built into the Figma platform and supports multiplayer collaboration. - Designers, product managers, and other team members can add features, test interactions, and incorporate data in the same file. - By reducing the need for coding expertise, it enables broader participation in product exploration. ## Point-and-Prompt Editing - Users can select a specific element and describe the desired behavior, such as animating a button or responding to scrolling. - This approach connects design intent directly to functional implementation. - Figma Make preserves component hierarchies and design-system structure while adding interactive behavior. ## From Canvas to Code and Publication - Figma Make connects with existing Figma workflows, including Figma Design and Figma Sites. - Teams can move from concept to prototype to published site without switching tools or recreating work. - The workflow is intended to provide a continuous path from visual design through implementation. Figma Make is positioned as a complement to—not a replacement for—traditional design work. Its practical value is in helping teams validate ideas sooner, explore more alternatives, and communicate functionality while retaining the original design’s structure and intent.

Design Systems Generative AI Real Time Collaboration Figma Make+3