techlist.io
KREN

User Experience

165 posts

figma3 min readCurated summary

Figma on Figma: Our Approach to Designing UI3 | Figma Blog

UI3 is Figma’s two-year effort to make the interface less distracting and keep designers focused on their work. The redesign explored bold changes, including floating panels and a new way to minimize interface elements, but user feedback and performance data led Figma to reverse some decisions. The result balances a long-term vision for a cleaner canvas with practical adjustments based on how people actually work. ## Designing Around Focus and Flow - Figma’s central goal was to put users’ creative work “center stage” and minimize distractions. - The team relied on craft, intuition, feature-adoption data, performance metrics, and extensive user feedback. - Figma emphasizes that redesigning for designers requires establishing a clear destination while bringing users along through iteration. - UI3 was scheduled for general availability on October 10, 2024. ## Docked Panels: Experimentation and Reversal - The team explored unconventional navigation and properties-panel designs: - Panels appearing only on hover - Panels floating above the canvas - A simplified floating-panel system shared across Figma products - Floating panels initially seemed promising but created practical problems for frequent users: - Reduced available canvas space, especially on smaller screens - Made designs appear to sit behind the panels - Increased distraction - Made rulers less useful by moving them farther from the design - Slowed users down, conflicting with Figma’s goal that “speed is a feature” - For the full UI3 rollout, Figma reattached the navigation and properties panels in Figma Design. - The panels remain resizable for flexibility. - Floating UI continues in specific contexts, including: - Minimize UI mode in Figma Design - Grid view in Figma Slides - Default views in FigJam - Bottom toolbars across Figma products ## Minimize UI: Making the Canvas the Center - Figma’s redesign was guided by the belief that work should remain the primary focus of the canvas, even as interface conventions evolve. - The existing Hide UI feature was considered too rigid and “blunt.” - Minimize UI offers a more flexible alternative: - Collapses side panels for distraction-free work - Keeps tools readily accessible - Works better in small windows and split-screen setups - The interface hierarchy was reorganized to accommodate future features more cleanly. - The navigation panel now follows a linear structure: - File name - Branch name - Project name - Pages - Layers - This structure gives future navigation capabilities a logical place without requiring disruptive layout compromises. ## Updating Familiar Interface Conventions - UI3 also examines established interaction patterns, such as keyboard shortcuts, scrollbars, and blend modes. - Figma describes these as “training wheels” or conventions that may no longer match how modern interfaces are used. - The redesign aimed to balance newer interaction trends with users’ existing habits and expectations. UI3 demonstrates that successful redesign is not simply about pursuing a cleaner or more ambitious vision. Figma’s experience suggests that bold experiments should be tested in real workflows, with usability and performance data ultimately determining which ideas remain.

Read original(opens in new tab)
User ExperienceFigmaDesign SystemsUser Interface+2
figma3 min readCurated summary

Building a better First Draft for designers | Figma Blog

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.

Read original(opens in new tab)
User ExperienceDesign SystemsGenerative AIFigma Ai+2
figma2 min readCurated summary

Breaking In: A Guide To Landing Your First Product Design Role | Figma Blog

Figma’s guide explains how aspiring product designers can land their first role by presenting strong work, communicating their thinking, and showing how they learn from challenges. It emphasizes that a portfolio should be personal but focused on clear storytelling, accessible navigation, and evidence of design impact. The strongest projects are those where candidates can explain their decisions, trade-offs, constraints, and outcomes. ## Crafting a Portfolio - Portfolios do not need to follow one prescribed format or use a specific website builder. - The priority is to: - Showcase your best work. - Tell compelling project stories. - Make the portfolio easy to navigate. - Represent your individual perspective and skills. ### Lead with Your Best Work - Your first project creates the initial impression, so lead with work that best demonstrates your: - Design skills - Creativity - Process - Product impact - If choosing between projects, feature the one you can discuss most naturally and explain most compellingly. - Strong case studies should include: - A clear problem statement - Important project milestones - An insightful conclusion - Relevant metrics and learnings - What you would change in retrospect - A project does not need to have been an overwhelming success. Honest reflection and lessons learned can create a stronger narrative. - Explain the reasoning behind design decisions, not just the final visuals. - Discuss the trade-offs, advantages, disadvantages, constraints, and implications of choices involving colors, components, styles, and copy. - Figma designer Tammy Taabassum argues that explaining “why” demonstrates product thinking more effectively than simply showing “what” was designed. ## Figma’s Early-Career Opportunities - Figma welcomes interns and new graduates onto its product design team. - Early-career designers are encouraged to contribute actively and bring new ideas rather than merely observe. - The guide is intended to explain what Figma looks for and how aspiring designers can prepare for its interview process. A practical approach is to build a portfolio around a few well-developed case studies, prioritize the work you can explain most clearly, and make your decision-making and learning as visible as the final design.

Read original(opens in new tab)
User ExperienceFigmaGenerative AIProduct Design+3
figma3 min readCurated summary

How Crunchyroll Clarified Confusing Workflows with Dev Mode | Figma Blog

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.

Read original(opens in new tab)
User ExperienceFigmaDesign SystemsDesign To Code+4
figma2 min readCurated summary

Crafting the Visual Identity for Config 2024 | Figma Blog

Figma’s Brand Studio created Config 2024’s visual identity as an immersive extension of the Figma brand. Inspired by the redesigned Figma canvas and Figma Slides, the team developed a flexible, shape-based system that could work across a massive physical and digital conference experience. The result balanced visual variety with practical UX needs for more than 10,000 in-person attendees and a larger virtual audience. ## Balancing Form and Function - The team drew inspiration from switching between different modes of making, such as creating, sharing, and presenting work. - They developed a visual language centered on shapes that could: - Shift and transform - Amplify creative ideas - Reveal unexpected perspectives - Represent collaboration and multiple modes of creation - Three large physical supergraphics formed the conference’s central installations. - Attendees used them as seating, photo backdrops, and meeting points. - The identity was designed not only for visual impact but also for usability. - It supported complex experiences such as registration and navigating popular talks. - The system helped guide attendees through the event while maintaining a cohesive look. - Simple primitive shapes served as the foundation for more complex graphic structures. ## Designing at Scale - Config required a large volume of assets across physical spaces, digital surfaces, signage, merchandise, and other touchpoints. - The team created a modular system that could remain consistent without becoming repetitive. - Its core shapes came directly from the Figma toolbar: - Rectangle - Circle - Polygon - These basic forms reflected the starting point of the design process in Figma and became components of larger supergraphics. - The team built a reusable component library in Figma to generate variations efficiently. - Each supergraphic included three variants, allowing shapes to be presented from different angles and creating visual variety across the conference. Figma’s approach demonstrates how a strong event identity can combine expressive branding with a practical, reusable design system. By treating simple interface primitives as flexible building blocks, the team created a conference experience that could scale across environments while remaining recognizably Figma.

Read original(opens in new tab)
User ExperienceFigmaDesign SystemsComponent Library+1
figma2 min readCurated summary

Can we reach beyond the echo chamber? | Figma Blog

The Browser Company’s Arc browser aims to rethink everyday browsing by drawing inspiration from outside the technology industry. Karla Mickens Cole and Nashilu Mouen argue that products become distinctive when they reflect many creative influences rather than copying existing conventions. Their approach to AI emphasizes subtle, useful experiences that blend naturally into users’ lives instead of adding AI merely as decoration. ## Designing Beyond the Tech Echo Chamber - The team deliberately looks to literature, film, art, and nature for inspiration. - Mouen cites writers such as Zadie Smith and Toni Morrison, asking how technology can be “in tech, without being of tech.” - The browser is treated as a large creative canvas with room for experimentation and play. - The team’s diverse perspectives contribute to a brand built from “many voices.” ## Reinventing Familiar Browser Conventions - Arc challenges established patterns, including the traditional placement of browser tabs. - The team’s recurring question is “Why not?”—a mindset that encourages them to reconsider assumptions. - Arc’s unboxing experience drew on: - Movie title sequences - The opening atmosphere of A24 films - The visual phenomenon of sunspots - These outside references help the product feel meaningfully different, not simply functionally new. ## Making AI Feel Natural - The Browser Company wants AI to solve practical problems and blend into ordinary browsing rather than overwhelm users with conspicuous AI branding. - Cole compares the desired approach to flowers: - They can appear unexpectedly and make an experience feel special. - They suggest care without being disruptive. - They reflect AI’s ongoing “seasons of growth.” - The team sees AI as something to plant thoughtfully within the product experience, not apply indiscriminately. ## Rapid Experimentation - The team prototypes quickly and evaluates which AI ideas genuinely improve the product. - Mouen notes that they had explored more than 30 applications in the previous month alone, indicating an experimental process in which some concepts will work and others will not. - Their view of AI is therefore practical and seasonal: its impact depends on the context and the moment. The article’s central recommendation is to build technology with influences beyond technology itself. For AI in particular, thoughtful integration, experimentation, and emotional subtlety may create more valuable experiences than adding obvious, standardized features.

Read original(opens in new tab)
User ExperienceAIProduct DesignWeb Browsers+1
figma2 min readCurated summary

Stack the deck with Figma Slides | Figma Blog

Figma Slides is introduced as an open-beta presentation tool combining Figma’s high-fidelity design capabilities with FigJam’s collaborative feedback features. It aims to help designers and non-designers create more engaging presentations without exporting work into separate tools. Figma positions it as a way to turn product reviews, sales decks, and pitches into clearer visual stories and collaborative conversations. ## Why Figma Built Slides - Presenters commonly struggle with: - Designing creative layouts - Finding effective visuals - Spending more than eight hours creating a deck - Figma users created approximately 3.5 million presentations in the previous year. - Designers often had to move Figma work into other presentation tools or distribute prototypes and pre-reads to non-designers. - Figma Slides brings presentation creation into the same environment as design and collaboration. ## High-Fidelity Design Features - Slides includes core presentation features such as: - Speaker notes - Slide transitions - Presentation-focused editing tools - Design mode provides access to Figma Design capabilities, including: - Auto Layout - Advanced properties - Precise alignment and snapping - Interactive components and states - Interactive components, such as hover states, can remain functional during presentations. ## Shared Libraries and Assets - Existing Figma text styles, color styles, and design assets are available directly in Slides. - Designers can reuse established libraries instead of recreating presentation elements. - Copy-and-paste workflows work across Figma products, reducing the need to export interface designs individually. ## Grid View for Structuring Narratives - Users can edit individual slides or switch to grid view for an overview of the entire deck. - Grid view organizes slides into rows, making it easier to: - Rearrange sections - Review the overall story - Refine the narrative arc - This bird’s-eye perspective is particularly useful for long presentations where restructuring becomes difficult. ## From Presentations to Conversations - Figma’s experience with FigJam revealed the limitations of one-way presentations. - FigJam became a regular tool for meetings such as team kickoffs, bug bashes, executive reviews, all-hands meetings, and Q&A sessions. - Figma Slides is intended to combine polished visual storytelling with collaborative participation, helping more people contribute to and influence the discussion. Figma Slides’ central promise is to make presentations both visually sophisticated and easier to build collaboratively, allowing teams to design, organize, and discuss their ideas in one shared space.

Read original(opens in new tab)
User ExperienceFigmaFigjamDesign Collaboration+3
figma2 min readCurated summary

Inside the Redesigned Figma, Where Your Work Takes Center Stage | Figma Blog

UI3 is Figma’s third major redesign, created to manage the complexity accumulated over nearly a decade of new features. Its central goal is to put users’ work—not the interface—at the center while preserving professional workflows and making Figma more approachable. The redesign also establishes a flexible foundation for products such as Dev Mode, Figma AI, and Figma Slides. ## Why Figma redesigned the interface - **Center users’ ideas:** New capabilities such as interactive components and AI risked making the interface feel crowded or distracting. - **Serve both beginners and experts:** Figma aimed to become more intuitive for newcomers without removing the power and familiar ergonomics professional designers rely on. - **Adapt to modern design practices:** Reusable components, generative AI, and higher-level abstractions require tools that provide building blocks rather than focusing only on individual pixels. - **Prepare for the future:** UI3 supports Figma’s broader ecosystem, including closer connections between design and code, Dev Mode, Figma AI, and the newly introduced Figma Slides. ## Clearing the stage for the canvas - The redesign began by maximizing canvas space and reducing visual distractions. - Figma experimented with extreme concepts, including interfaces that appeared only on hover and layouts where panels constantly appeared and disappeared. - These approaches made the workspace feel unstable, so the team moved toward a more consistent solution: - Resizable and collapsible panels - A slim toolbar positioned at the bottom of the canvas - The ability to hide the interface completely and reveal panels when needed - The new structure creates a roomier workspace and provides a consistent framework for switching between Figma products. ## Iterative design process - Figma explored hundreds of interface variations. - Designers built and used many prototypes internally to evaluate how each approach affected real workflows. - Features and controls were deliberately removed until the team identified what users genuinely missed, then selectively restored them. UI3’s practical recommendation is to give designers more control over the interface: keep tools accessible, but allow the canvas and the work itself to take priority.

Read original(opens in new tab)
User ExperienceFigmaDesign SystemsGenerative AI+2
figma2 min readCurated summary

Meet Figma AI: Empowering Designers with Intelligent Tools | Figma Blog

Figma AI is a suite of tools designed to help designers overcome creative blocks, work faster, and explore ideas more easily. Rather than treating AI as hype, Figma presents it as a practical way to solve common workflow problems, including finding existing designs and components. The features are initially available in a limited beta and are free during 2024, though usage limits and future pricing may change. ## Figma’s Practical Approach to AI - Figma AI builds on the company’s earlier AI features for FigJam. - The tools target several stages of design work: - Finding inspiration and existing assets - Exploring different design directions - Automating repetitive tasks - Generating interfaces from text prompts - Figma emphasizes helping designers remain efficient and creative rather than replacing their judgment. ## Visual Search - Visual Search allows users to find similar designs by: - Uploading an image - Selecting part of a canvas - Entering a text query - Results are drawn from team files the user can access. - Relevant frames can be inserted directly into the current working file. - Figma plans to expand search to Community files, with attribution, links to source files, and access to creators’ other work. ## AI-Enhanced Asset Search - Asset Search now uses semantic understanding rather than relying only on exact keyword matches. - A search such as “primary button” can find a component named `btn_large`. - The system considers the meaning and typical use of design elements, making components in large or complex design systems easier to discover. - The goal is to make finding assets feel more natural and reduce time spent searching through files and libraries. ## Beta Availability and Pricing - Figma AI and UI3 are being rolled out through a limited beta. - Users can join through Figma’s help menu by selecting **“Join UI3 + AI waitlist.”** - Features are free during the beta period, which runs through 2024. - Figma may introduce beta usage limits as it evaluates demand and infrastructure costs. - Pricing for general availability will be announced later. Figma AI is positioned as an assistive layer within the existing design workflow: it helps users locate useful starting points and reduce friction while leaving creative decisions with the designer.

Read original(opens in new tab)
User ExperienceAIDesign SystemsGenerative AI+2
figma3 min readCurated summary

What’s Happening at Config 2024? | Figma Blog

Config 2024 brought together product builders, designers, artists, and inventors for a conference focused on creativity, technology, and unconventional thinking. Figma’s coverage highlights talks, workshops, community activities, and behind-the-scenes moments from the event. The central message is that meaningful innovation comes from authentic perspectives, outside influences, experimentation, and the freedom to play. ## Conference Community and Programming - Config featured both in-person and virtual programming, including: - “Design of Everything” - New feature recaps - Friends of Figma - Figma EDU - “Figma like the pros” - Daily conference recaps - Attendees came from around the world, supported by speakers, staff, and volunteers. - Figma encouraged viewers to revisit sessions through its YouTube playlist and announced Config APAC for July 2. ## Designing Beyond Expectations - Karla Mickens Cole and Nashilu “Nash” Mouen of The Browser Company discussed designing for a world that resists conformity. - Working on the Arc browser, they argued that products should carry the “fingerprints” of their creators—their experiences, identities, and perspectives. - Nash emphasized that designers should look beyond technology for inspiration, drawing from unexpected sources, stories, and culture. ## AI, Digital Art, and Criticism - Artist Refik Anadol described his digital artwork *Unsupervised*, which uses AI to reinterpret MoMA’s archive. - He framed the project as an exploration of “the possible dreams of the machine.” - Responding to criticism that his work simplifies data, Anadol questioned who the critics are and what perspectives shape their judgments. - His comments reflected the broader challenge of establishing digital and AI-assisted art within the traditional art world. ## Creativity Through Play and Failure - Inventor and YouTuber Simone Giertz presented humorous projects such as a toothbrush-brushing helmet, a slapping alarm clock, a soup-feeding robot, and a drone hair cutter. - After leaving her startup, she found that striving for excellence was not helping and instead gave herself permission to play. - She stressed that difficulty does not necessarily equal importance. - Giertz also discussed overcoming self-deprecation and building a professional identity through her product design company, Yetch. - Her brainstorming exercise—finding unusual uses for a brick—encouraged attendees to embrace strange and creative ideas. - She concluded that creating her own career was her favorite invention. ## Design, Merchandise, and Hands-On Experiences - The conference floor offered opportunities for attendees to connect, explore exhibits, and shop at the Figma Store. - Attendees praised the quirky, distinctive character of the event merchandise. - In the Maker Space, participants customized tote bags with patches and received personalized aura portraits. Config 2024’s activities reinforce a practical creative philosophy: designers should draw from life beyond their field, experiment without fear of failure, and build work that reflects their individual perspectives.

Read original(opens in new tab)
User ExperienceFigmaAIProduct Design+2
figma2 min readCurated summary

Charmaine Lee’s 10 Rules for Building Developer Tools | Figma Blog

Developer tools feel “magical” not because of polished interfaces, but because they help users quickly become confident creators. Charmaine Lee argues that teams should optimize what happens after the initial “aha moment,” shorten the path to meaningful creation, and build products through close, authentic engagement with developers. ## Prioritize lasting adoption over onboarding - The first-time user experience (FTUE) should not be overloaded with every product capability. - The real measure of success is whether users understand and continue using the product after the initial discovery moment. - Lens Studio 5.0’s public beta omitted a formal FTUE, testing whether the product was intuitive enough to use independently. ## Shorten the path to “magic” - Teams should identify how long it takes users to move from downloading a tool to creating and sharing something valuable. - Lens Studio’s team mapped a 19-step journey from visiting the website to submitting a first project. - By removing unnecessary steps and avoiding guidance for actions users already understood, they reduced the experience to four key moments. - User-journey mapping and testing help reveal which steps create delight, friction, or confusion. ## Meet developers in their communities - Product managers should engage directly with developers at meetups, conferences, hackathons, livestreams, and online communities. - Charmaine monitors AR discussions and attends events to learn developers’ language and gather candid feedback. - Building long-term context from these conversations enables better product decisions and more informed responses to user needs. ## Replace traditional marketing with DevRel - Developers tend to respond poorly to conventional marketing and prefer authentic communication. - Effective developer relations includes: - Real experiences and detailed product-building stories - Transparency about mistakes and limitations - A balance between accessible explanations and technical depth - DevRel should be a company-wide responsibility, not limited to a specialized team. - When employees advocate for both the product and its users, they can foster a more loyal developer community. The excerpt’s central recommendation is to design for users’ sustained progress, not merely their first impression: remove unnecessary friction, understand developers firsthand, and communicate with them honestly.

Read original(opens in new tab)
User ExperienceDeveloper ToolsAugmented RealityUnity+3
figma2 min readCurated summary

Craft and Beauty: The ROI of Marrying Form and Function | Figma Blog

Craft and beauty are presented as business advantages, not merely aesthetic preferences. Leaders from Stripe, Linear, and Figma argue that thoughtful details improve usability, engagement, conversion, and product differentiation. Their examples—including a 20% increase in email conversion and 11.9% higher average revenue for Stripe Checkout users—show that investment in quality can directly support growth. ## Craft Improves Usability and Conversion - Beauty can make products feel easier and more effective, an effect known as the **aesthetic usability effect**. - Clearer language, stronger visual hierarchy, and a smoother journey helped Stripe increase conversion from an email series by **20%**. - Every user touchpoint can either add or subtract value from the overall product experience. - Stripe’s Optimized Checkout Suite, whose quality and detail were key priorities, helped businesses generate **11.9% more revenue on average**. ## Craft as a Mindset, Beauty as the Result - Linear’s Karri Saarinen distinguishes between: - **Craft:** the mindset and care applied while creating something. - **Beauty:** the visible experience and quality that result. - Quality extends beyond appearance. A well-designed object or product should function smoothly, reliably, and pleasantly. - The central question is whether a team is committed to doing excellent work or merely completing tasks as quickly as possible. ## Performance and Quality Are Foundational - Figma views product quality as a hierarchy of needs. - Fundamental qualities such as web performance and a consistent **60 frames-per-second** experience must come first. - These technical foundations enable users to appreciate higher-level design and interaction details. - Craft also involves making products feel intuitive—so well-designed that users feel everything simply works. ## Craft Requires a Company-Wide Culture - Craft is not the responsibility of a single design team; engineering, product, design, and other functions all contribute. - Figma and Linear emphasize that quality should be an inherent cultural value rather than something enforced only through OKRs. - Stripe uses “friction logging” and multidisciplinary “walking the store” exercises, in which teams experience the product end to end as users do. - This approach helps teams identify and remove problems across the full customer journey. The practical recommendation is to treat craft as an organization-wide operating principle. Companies should invest in performance, clarity, usability, and detail at every touchpoint, because form and function together can create both a better experience and measurable business results.

Read original(opens in new tab)
User ExperienceFigmaProduct DesignStripe+2
figma2 min readCurated summary

Alaska Airlines Reaches Cruising Speed With the Help of Variables | Figma Blog

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.

Read original(opens in new tab)
User ExperienceFigmaDesign SystemsDesign Tokens+4
figma2 min readCurated summary

How Carvana Fuels Consistency and Scale | Figma Blog

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.

Read original(opens in new tab)
User ExperienceFigmaDesign SystemsDesign Tokens+4
figma2 min readCurated summary

How to Build a Design System | Design Systems 102 | Figma Blog

A design system creates a shared language and reusable components that improve product consistency, team efficiency, and collaboration. Figma recommends building one around the organization’s specific goals and challenges rather than following a universal formula. The process begins with understanding the problem, auditing existing work, involving cross-functional partners, and choosing an approach that can evolve over time. ## Lay the Groundwork - Define why the design system is needed: - What problems should it solve? - What goals should it support? - How will success be measured? - Recognize that systems vary in scope: - Small teams may need a simple component library. - Enterprise organizations may require a comprehensive system. - Design the system to grow as product and team needs change. ## Take Stock of Existing Design and Code - Collect screenshots and examples of the product across: - Platforms and devices - Interactive states - Alternate versions - Look for recurring patterns and consistent UI elements that can become system foundations. - Audit the codebase for existing reusable components, shared CSS variables, and repeated UI patterns. - Build on existing engineering work instead of creating disconnected design and development systems. ## Organize and Evaluate the Product Landscape - Categorize the collected examples to understand the current design language. - Identify: - Inconsistencies across products or platforms - Redundant solutions - Disconnected user experiences - Problems being solved differently by designers and developers - Use these findings to prioritize where a unified system can provide the greatest value. ## Find Cross-Functional Champions - Involve designers, developers, product managers, and other stakeholders. - Seek people who care about consistency and can advocate for the system internally. - Include developers early because they can assess: - Technical feasibility - Implementation requirements - Long-term maintenance - A design system can begin with a single dedicated contributor, but broader collaboration helps it serve the whole product team. ## Choose an Approach - Decide whether to: - Build a custom system from scratch - Adopt an existing framework and adapt it to the organization’s needs - The best choice depends on the team’s goals, existing assets, technical context, and available resources. A practical starting point is to define measurable goals, audit both design files and production code, and form a cross-functional group before creating components. This ensures the design system addresses real product problems and remains useful as the organization evolves.

Read original(opens in new tab)
User ExperienceFigmaDesign SystemsUser Interface+3