figmaMay 22, 2026

7 Tips for Using Figma Make Credits More Efficiently | Figma Blog (opens in new tab)

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.

ui-uxreacttypescriptfigma-make+3

figmaJun 23, 2025

In Good Company: How Agencies Are Transforming Client Collaboration | Figma Blog (opens in new tab)

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.

ui-uxfigmadesign-systemscollaborative-design+2

figmaMay 4, 2025

How Polaroid Is Building its Next Era of Innovation | Figma Blog (opens in new tab)

Polaroid is reinventing its iconic instant-photography business for the digital era while preserving its creative heritage. The company uses Figma to unify design across its website, camera products, and mobile apps, enabling faster collaboration and more consistent user experiences. A centralized design system and more capable prototypes help the team validate ideas early and reduce costly development changes. ## Preserving Polaroid’s Creative Legacy - Polaroid became culturally significant through Edwin Land’s instant-camera innovations and its use by artists such as Andy Warhol, Ansel Adams, and David Hockney. - Digital photography threatened the company’s survival, leading to the closure of its last film factory in 2008. - The Impossible Project acquired the factory, recreated Polaroid film chemistry, and eventually obtained the Polaroid brand. - The modern company now combines instant cameras and film with photo printers, connected-camera apps, and other digital products. ## Building a Single Source of Truth - Before adopting Figma, designers worked in separate files and fragmented workflows. - The lack of shared components and a centralized design system caused duplication, slowed iteration, and limited the team to designing primarily for iOS. - Figma’s cloud-based collaboration gives designers and other departments shared visibility, supporting remote work and cross-functional discussion. - Design tokens and variables allow Polaroid to: - Support light and dark modes. - Adapt designs across iOS and Android. - Change default fonts by platform. - Match an app’s theme to a camera’s colorway. - Show users only the camera model they own during device setup. - Figma UI kits provide starting points, while plugins such as Autoflow help map user journeys. ## Using Prototypes to Validate Ideas Earlier - More powerful Figma prototypes let the team test realistic user flows before development. - Users can navigate freely and change settings, producing more natural feedback than earlier prototype methods. - User testing reveals actual behavior instead of relying on assumptions. - Early validation improves product quality, saves time, and prevents expensive revisions later. Polaroid’s experience suggests that a shared design system combined with realistic prototyping can help legacy brands modernize efficiently while maintaining a recognizable creative identity.

ui-uxfigmadesign-systemsprototyping+4

figmaApr 9, 2025

Finding a Forever Home for FigPals | Figma Blog (opens in new tab)

FigPals were temporary customizable companions in Figma files, designed to make long hours of creative work feel more playful and social. Inspired by nostalgic virtual pets and toy culture, they quickly became a hit, with users creating emotional connections to their pixel-based friends. Although FigPals will not remain permanently active, Figma is preserving them through sticker packs and other commemorative experiences. ## What FigPals Were - Users could create, customize, and name companions across Figma products. - More than 9,000 combinations were possible, including animals, food, colors, and accessories. - FigPals followed users’ cursors and interacted with other companions in the same file. - Users could pose them in a photobooth and save images as keepsakes. - Easter eggs included feeding pals layers and nodes and surprising them by detaching components. ## Nostalgia and the April Fun Day Launch - FigPals launched on April 1 as part of Figma’s annual April Fun Day tradition. - The concept drew on nostalgia for products such as Pet Rocks, Tamagotchis, Neopets, and Furby commercials. - Figma partnered with Night Shift to create a deliberately zany, vintage-style promotional video. - The goal was to make work feel less lonely and repetitive by giving designers playful companions. ## From Maker Week to FigPals - FigPals evolved from internal Maker Week experiments: - **Figmagotchi** featured Tamagotchi-inspired creatures fed with sticky notes. - **FigPets** introduced pixelated pets that moved around Figma toolbelts. - A small team across engineering, product, and design developed the limited-release version. - The project reflected Figma’s emphasis on experimentation, play, and building enjoyable web experiences. ## The FigPal Frenzy - Users saved more than 1.5 million FigPals within a week. - They fed their companions more than 250,000 times. - Five FigPals were saved as the only examples of their particular model, color, and accessory combination. - One user created and saved 210 pals, while the most popular design—a pink cat with a heart speech bubble—accounted for 13% of saved pals. - Community members became emotionally attached, with some modeling their FigPals after real pets. ## Preserving FigPals Through Stickers - A petition seeking to make FigPals permanent attracted more than 2,000 signatures. - Figma extended the feature by one additional week but ultimately chose not to keep the companions active indefinitely. - Instead, it released FigPal sticker packs so users could continue displaying them in Figma files. - Additional FigPal-related surprises were planned for attendees of Config. Figma’s response shows how a short-lived playful feature can create lasting community engagement. While the interactive FigPals have ended, sticker packs provide a simple way to preserve the experience and keep the characters present in users’ work.

ui-uxfigmafigjamproduct-design+3

figmaFeb 18, 2025

In Good Company: How Publishers Use Figma to Help Design the News | Figma Blog (opens in new tab)

Publishers are adapting to digital-first journalism by redesigning products, developing new visual identities, and experimenting with formats that attract and retain readers. The article argues that Figma helps media organizations coordinate designers, editors, engineers, and executives while maintaining accuracy, clarity, and accessibility. The New York Times’ redesigned app illustrates how collaborative prototyping can support a broader subscription ecosystem without losing journalism’s central role. ## The shift toward digital-first publishing - Legacy publishers face accelerating change as audiences move from print to web and mobile. - Subscription models are becoming more important amid an unpredictable advertising market, although many readers remain reluctant to pay for online news. - Media teams must build stronger relationships with readers while exploring new products and formats. - Figma supports this work by keeping multidisciplinary teams aligned during design and experimentation. ## The New York Times’ redesigned app - Relaunched in October 2024, the app reflects The Times’ strategy of connecting multiple products, including News, Games, Cooking, Audio, Wirecutter, and The Athletic. - The redesign places the **Today** section and the latest news at the center of the experience. - A top navigation system makes other verticals easier to discover, with each product receiving its own home screen. - Rather than creating one “super app” feed, the design gives each section a distinct visual identity: - Lifestyle uses image-heavy grids with headline overlays, based on a component called a “poster.” - Opinion uses stylized headlines to communicate its different editorial perspective. - The overall concept treats journalism as the central “sun,” with other products orbiting around it. ## Figma as a newsroom collaboration space - The project involved section editors, engineers, senior management, product designers, and The Times’ storytelling group. - Teams used Figma asynchronously to explore layouts combining text, images, video, and audio. - Designers could share interactive prototypes directly instead of preparing as many presentation decks or relying on screen-sharing meetings. - The shared workspace helped stakeholders see colleagues’ work immediately and participate in shaping the app’s editorial formats. The article’s broader recommendation is that collaborative design tools can help publishers manage complex digital transformations while preserving strong editorial identities.

ui-uxfigmadesign-systemsprototyping+3

figmaFeb 5, 2025

Double click: Human Takes on Agentic AI | Figma Blog (opens in new tab)

Agentic AI could fundamentally change UX by handling tasks across apps with minimal supervision, reducing the need for users to navigate complex interfaces. Supporters see agents as a new abstraction layer that lets people focus on goals rather than buttons, menus, and tabs. However, the shift also raises concerns about designing for machines at the expense of human creativity, agency, and meaningful interaction. ## The Promise of Agentic AI - Agents can take routine work off users’ plates, such as paying bills or completing multistep tasks. - Perplexity’s Henry Modisett argues that AI should be “how something works,” not necessarily what users directly interact with. - The ideal experience resembles starting a car: users specify where they want to go without needing to understand the machinery underneath. - Agentic systems may reduce the cognitive load associated with chatbots, personalities, and complicated interfaces. ## Agents as a New Web Abstraction - Agents could operate across platforms, creating a more interoperable web that works more like human workflows. - They may reduce the need to navigate menus, manage open tabs, or repeatedly switch between applications. - Rather than one all-purpose AI, the future may involve specialized agents collaborating like a team. - This could shift users’ attention from browsing and operating software toward creating, connecting, and pursuing goals. ## Designing Websites for Machines - Maintaining and optimizing websites for AI agents could become a distinct industry. - Websites may increasingly prioritize: - Clean APIs - Machine-readable content - Clear structure - Streamlined navigation - Visual polish, animations, and pixel-perfect layouts may matter less to agents than accessibility and functional interoperability. - Designers and developers must consider whether they are primarily building for humans, machines, or both. ## Preserving Human Creativity - Optimizing exclusively for AI could flatten the web and remove creativity, depth, and intentional visual experiences. - The growth of agentic systems arrives alongside renewed interest in: - Creative coding - Handcrafted websites - Experiences that move beyond templates - The industry has an opportunity to decide which tedious work to automate while preserving the aspects of the web that feel expressive and distinctly human. ## The Value of Friction and User Control - Traditional UX often treats friction as something to eliminate, but autonomous agents complicate that principle. - Users need deliberate moments to: - Review an agent’s proposed action - Approve consequential changes - Correct mistakes - Stay aware of what the system is doing - Carefully reintroduced friction can preserve agency and trust, even when the agent performs most of the work. - Good agentic design may therefore prioritize appropriate checkpoints over completely invisible automation. Agentic AI is still in its early stages, but it is likely to reshape both web infrastructure and interface design. The strongest approach is to automate complexity while preserving human oversight, creativity, and opportunities for meaningful participation.

ui-uxuxagentic-aicreative-coding+4

figmaNov 25, 2024

Pablo Sánchez’s 7 Rules for Designing the Unexpected | Figma Blog (opens in new tab)

Pablo Sánchez argues that memorable digital products come from personal conviction, unexpected sources of inspiration, and a willingness to imagine alternatives to the present. His work on Ableton Note demonstrates this approach: instead of reproducing conventional music-production tools, the app emphasizes tactile, immediate experimentation through features like “Capture,” which loops phrases after they are played. ## Design for Yourself - Strong design begins with personal conviction rather than detached objectivity. - Designers should create something that inspires them, since personal enthusiasm can make the final product feel authentic. - For Ableton Note, Sánchez replaced an expected MIDI editor with directly playable instruments suited to mobile interaction. - User testing later validated the direction, and the app launched without a MIDI editor. - Note lets users tap rhythms on a 16-pad grid, play melodies and chords, and develop variations in Session View. ## Brainstorm Without References - Starting with existing design references can lock a team into familiar solutions. - Brainstorming without references encourages ideas drawn from personal experience and absorbed cultural influences. - Sánchez describes this process as creating an “assemblage” from the collective ideas designers carry with them. - Although Note’s influences were not copied directly, apps such as Samplr and Borderlands Granular contributed to its creative foundation. ## Look Beyond Design - Inspiration can come from literature, dance, nature, science, emotions, and personal memories—not only other interfaces. - Sánchez wanted Note to feel as immediate as picking up a guitar and experimenting. - He also drew from Brutalist architecture, particularly its emphasis on materiality, simplicity, and the removal of unnecessary ornament. - This led to a minimal interface that reduces the complexity of music production and lets users interact directly with sound. - Note includes features such as a microphone-based sampler and a visual sound interface. ## Design for Tomorrow - Sánchez distinguishes between: - **Affirmative design**, which solves existing problems and reinforces the current world. - **Critical design**, which questions current conditions and explores how the world could be different. - Unexpected design combines both approaches by imagining new possibilities while encouraging people to investigate them. - Designers are encouraged to speculate beyond present assumptions rather than simply repeating familiar patterns. - The article invokes xenofeminist thinking—“If nature is unjust, change nature!”—as an example of challenging supposedly fixed conditions. The excerpt presents unexpected design as a practice of trusting personal intuition, combining diverse influences, and designing toward possibilities that do not yet exist. Ableton Note illustrates how a focused, unconventional vision can produce a more playful and distinctive experience than simply implementing expected features.

ui-uxuser-researchmobile-app-designmusic-production+4

figmaOct 20, 2024

Made in Figma: The National Park Service Goes From Paper to Pixels | Figma Blog (opens in new tab)

The National Park Service turned decades of printed visitor guides into a unified digital app serving 431 parks and monuments. GuideOne and Twohy Design Works drew on Massimo Vignelli’s 1977 Unigrid system to create a flexible interface that could accommodate diverse park data, long-term government use, and varied accessibility needs. Figma helped the NPS, designers, and developers collaborate on a practical design system that works for both visitors and park staff. ## A Digital System for 431 Parks - The NPS manages an unusually diverse collection of sites, ranging from major national parks to small historic memorials. - Each park controls much of its own data and writes its own content, making consolidation difficult. - The app needed to bring inconsistent information into one reliable system. - It includes: - Interactive maps - Self-guided tours - Essential visitor information - Content useful to both the public and NPS employees - The app launched in 2021 after the NPS moved from separate apps for individual parks to a single consolidated experience. ## Designing for Durability and Accessibility - Government software must remain useful for many years rather than follow short-lived product trends. - The app serves people with widely different accessibility requirements. - Designers had to balance a consistent national system with the individual character and needs of each park. - Collaboration between the NPS, GuideOne’s developers, and designers helped ensure concepts were feasible with the available data and engineering resources. ## Adapting the Unigrid - Before 1977, NPS brochures varied widely in format and visual style. - Massimo Vignelli’s Unigrid standardized: - Graphic components - Layout structures - Typography and visual hierarchy - Print-production methods - The system gave the NPS a recognizable identity while allowing individual parks to present their own stories. - GuideOne and Twohy Design Works treated Unigrid as a foundation for the app rather than copying the brochures directly. - The challenge was translating a print-based grid and editorial system into interactive screens, maps, and digital navigation. ## Figma as a Collaboration Tool - Figma made it easy to circulate designs among the NPS, designers, and engineering teams. - Shared prototypes exposed practical constraints around park data and implementation. - The workflow supported ongoing feedback instead of separating design from development. - This helped turn a historical visual system into a robust digital product. The project demonstrates how a well-established design system can be modernized without losing its identity. For complex public platforms, combining strong historical principles with collaborative prototyping, flexible data structures, and accessibility-focused design can produce a product that remains useful across many users and locations.

ui-uxfigmadesign-systemsaccessibility+2

figmaSep 23, 2024

Building a better First Draft for designers | Figma Blog (opens in new tab)

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

ui-uxdesign-systemsgen-aifigma-ai+2

figmaAug 19, 2024

How Crunchyroll Clarified Confusing Workflows with Dev Mode | Figma Blog (opens in new tab)

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

ui-uxfigmadesign-systemsdesign-to-code+4

figmaApr 15, 2024

Alaska Airlines Reaches Cruising Speed With the Help of Variables | Figma Blog (opens in new tab)

Alaska Airlines uses Figma and its Auro design system to create consistent experiences across websites, mobile apps, kiosks, and digital signage. Moving away from Sketch and InVision resolved fragmented workflows, improved collaboration with engineers, and accelerated product development. Figma variables further help the 45-person design team adapt designs across screen sizes, themes, and the needs of more than 23,000 employees. ## Building a Reliable Design System - Alaska’s previous Sketch and InVision workflow lacked: - A single source of truth - Intuitive prototyping and collaboration tools - Consistent reusable components - Easy synchronization between design and engineering - Designers frequently made small but important inconsistencies in colors, buttons, checkboxes, modals, and date pickers. - Manual copying between platforms created version-control problems and contributed to accessibility issues. - Figma enabled Alaska to document Auro clearly for both designers and engineers, creating a more consistent digital ecosystem. ## Redesigning the Flight Status Experience - Severe storms exposed weaknesses in Alaska’s underused flight status page, which lacked information such as flight tracking and aircraft details. - A cross-functional “tiger team” rebuilt the page using approximately 90% Auro components. - The team completed the work in one sprint instead of the estimated four or five sprints without Figma. - Afterward, average time spent on the page increased from 36 seconds to 5 minutes and 10 seconds—a 761% increase. ## Connecting Design and Engineering - Figma components mirror the web components used by engineers, making designs easier to implement accurately. - This alignment improved product consistency and increased trust between design and engineering teams. - Alaska also documented Figma practices such as auto layout, merging, and branching to encourage adoption. - Designer education reduced conflicts and helped teams make better use of Figma’s capabilities. ## Using Variables at Scale - Figma variables allow Alaska to adapt designs for: - Different screen sizes - Light and dark modes - Themes for internal teams and external partners - The approach saves designers an average of 11 hours per week. - Variables help the team support the needs of more than 23,000 employees while maintaining a coherent design system. Alaska’s experience suggests that a well-documented design system, shared tooling, and variables can significantly reduce repetitive work while improving consistency, accessibility, and collaboration across an organization.

ui-uxfigmadesign-systemsdesign-tokens+4

figmaApr 15, 2024

How Carvana Fuels Consistency and Scale | Figma Blog (opens in new tab)

Carvana scaled its design operations by moving from scattered tools to Figma as a centralized source of truth. Its design systems team uses Figma variables to enforce consistency, support rapid rebranding, and reduce design-development friction. The approach helped Carvana adapt quickly during rapid growth and integrate acquired businesses such as ADESA. ## Creating a Single Source of Truth - By 2019, Carvana’s design system was fragmented across a PDF UI kit, Principle, and Sketch. - Designers relied heavily on copying and pasting, causing small changes to diverge across repeated components. - Moving the system to Figma centralized libraries and connected design and engineering workflows. - The transition became especially valuable during the pandemic, when car sales surged and Carvana needed to scale quickly without adding process friction. ## Using Variables to Improve Consistency - Rapid growth introduced inconsistencies in: - Colors - Spacing - Typography - Corner radii - Figma variables let Carvana define reusable values for design properties. - Number variables standardized spacing and corner radii, while color variables helped maintain brand accuracy. - Although setting up variables required an initial learning period, the team achieved more polished designs and fewer revision cycles. ## Supporting New Brands and Business Lines - Variables allowed Carvana to create new themes without rebuilding its component library. - After acquiring ADESA, Carvana added an ADESA theme and applied the new branding to existing designs quickly. - The redesign took less than a week instead of the estimated month required to restyle the component library manually. - Themed components also enabled the team to create ADESA design comprehensives three times faster than usual. ## Connecting Design and Development - Figma’s shared libraries and variable-based system help designers and developers work from the same standards. - Centralized component structure and functionality make handoffs clearer and reduce inconsistencies between design files and implementation. - Carvana’s 40-person design systems team uses these practices to support consistency across a 10,000-person organization. Carvana’s experience suggests that a centralized design system, combined with reusable variables and themes, can make rapid growth more manageable. Investing in the system early reduces rework while making future products, brands, and acquisitions faster to integrate.

ui-uxfigmadesign-systemsdesign-tokens+4

figmaNov 12, 2023

Figma’s State of the Designer Report 2023 | Figma Blog (opens in new tab)

Designers appear more satisfied and optimistic despite the disruption of the past three years. Figma’s survey of 470 designers in Europe and Asia–Pacific examines how remote and hybrid work have affected collaboration, productivity, career prospects, and fulfillment. Its central conclusion is that designers are adapting successfully, while the growing strategic importance of design is improving both morale and opportunity. ## Remote Work and Job Satisfaction - 69% of designers report greater job satisfaction than before the pandemic. - Individual contributors are especially positive: 82% say their satisfaction has improved. - Designers generally feel more in control of where and how they work. - Many believe their workflows and ability to create high-quality digital products have improved, even as remote work has become more common. - Group meetings and collaborative design practices are helping teams work together remotely. ## Design’s Growing Influence - Nearly five times as many designers feel more positive about the design profession as feel more negative. - Design is increasingly viewed as a business-wide way of thinking rather than a function limited to one department. - Visible support from CEOs and other executives reinforces designers’ sense that their work is strategically important. - Leaders who participate in design files, give direct feedback, and experience product development firsthand create stronger connections with design teams. ## Improved Career Prospects - 69% of respondents say their employment options have improved or greatly improved. - Designers are encouraged by organizations placing design at the center of product and business decisions. - The profession’s growing influence is changing how designers view their roles and future opportunities. The report suggests that remote collaboration and increased executive engagement have helped designers feel more satisfied, empowered, and optimistic. Organizations can build on this momentum by supporting flexible work, investing in collaborative practices, and treating design as a core part of business strategy.

ui-uxfigmacollaborative-designdesign-thinking+2

figmaMar 23, 2022

The art and influence of motion | Figma Blog (opens in new tab)

Motion helps digital interfaces communicate in ways that resemble the physical world. UX designer Katie Swindler argues that animation can clarify state, build mental models, improve perceived responsiveness, and add personality—but only when it serves a clear purpose. Effective motion balances practicality with restraint and must remain accessible to people who cannot or should not experience animation. ## Motion as a Human-Centered Language - People naturally interpret facial expressions, gestures, and movement alongside spoken information; interfaces can use motion similarly. - Animations communicate: - Progress, such as loading bars - Errors, such as a field shaking after an incorrect password - Change, such as charts recalibrating after a page refresh - Motion helps translate a digital environment into terms understood by a brain shaped by interaction with a physical, three-dimensional world. - It gives users information for building mental models without requiring explicit explanation. ## Designing Familiar Physical Metaphors - Digital animations can borrow from familiar physical behavior. - A sliding menu or “drawer” suggests that: - It can be opened and closed repeatedly - Its contents remain available when reopened - These familiar cues make interfaces feel intuitive. - Figma examples include animated cursor-chat bubbles and the celebratory shake of the FigJam Timer. ## Purpose-Driven Microanimations - Microanimations should solve a specific user or system problem rather than exist merely for decoration. - A short one- to two-second transition can disguise unavoidable backend processing delays and make a product feel more responsive. - Motion should be evaluated with the same discipline as icons: adding more visual elements is not automatically beneficial. - Designers should consider whether text, a static visual, or no additional communication would work better. ## Balancing Practicality and Personality - The strongest motion combines functional guidance with a distinct sense of character. - Animations should be fast, subtle, and respectful of the user’s time. - Swindler highlights Apple’s “sprout” or “Genie in the Bottle” animation: - Minimizing a window visually pulls it into its dock icon. - Restoring it reverses the motion, showing where the window came from and where it will return. - This type of animation provides orientation and delight without distracting from the task. ## Accessibility and Common Mistakes - Motion must never be essential to understanding or operating an interface. - Certain animations can trigger people with epilepsy or create barriers for users with motion-related sensitivities. - Excessive or frenetic movement can: - Interrupt users - Create confusion and visual busyness - Add unnecessary steps - Frustrate users and weaken brand affinity - Every animation should be selected carefully and used with restraint to solve a user problem elegantly. Motion is most effective when it communicates meaning, reinforces familiar behavior, and adds personality without demanding attention. Designers should prototype animations deliberately, test them for accessibility, and remove any movement that does not clearly improve the experience.

ui-uxfigmaaccessibilityux+3

figmaNov 15, 2021

Stay in the flow with redesigned comments | Figma Blog (opens in new tab)

Figma redesigned comments in Figma and FigJam to make feedback easier to discover, understand, and act on without interrupting design work. The updates encourage more collaborators to participate, promote shorter and more contextual feedback, and provide better tools for managing large volumes of comments. Overall, the redesign aims to keep teams in the flow while incorporating feedback. ## Inviting More Collaborators - The comment sidebar is now easier to find for viewers opening a file. - Comments are also more visible in prototype presentation mode. - These changes help unfamiliar collaborators discover where to leave and review feedback. - Figma hopes increased visibility will encourage more contextual input instead of feedback through separate tools—or no feedback at all. ## Encouraging Clearer Feedback - The comment composer was made smaller to encourage concise, easier-to-follow responses. - Reactions let users quickly express opinions, keep threads shorter, and lower the barrier to participation. - Collaborators can select an area of the canvas to leave broader feedback about multiple designs, groups of stickies, or a general concept. - Area-based comments preserve the context of feedback, whether it concerns a broad layout or a small design detail. ## Managing Feedback During Design Work - Comment pins are visible by default, making feedback harder to overlook. - Designers can keep comments open while editing the canvas, allowing them to reference feedback without leaving their workflow. - A simplified canvas view makes it easier to see where feedback is concentrated. - Comment pins display avatars and provide previews on hover. - Comments in the same area are grouped into clusters to reduce visual clutter. - Users can search comments by keyword or person and sort them by date. - Comments can be marked as “unread” as a reminder to return to them later. Figma’s redesigned comments make collaboration more accessible and structured, particularly during design critiques, sprints, and iterative review. The practical recommendation is to use concise, contextual comments and the new search, clustering, and unread features to keep feedback manageable.

ui-uxfigmaprototypingfigjam+2