User Experience | Techlist.io

figmaNov 14, 20222 min readCurated summary

Figma’s feedback gift guide | Figma Blog

Feedback is most effective when it is treated as a thoughtful, context-dependent exchange rather than a generic “gift.” Figma argues that good feedback depends on timing, project stage, team culture, and the relationship between the people involved. Matching feedback to the work’s level of development helps teams stay open to possibilities while still making progress toward clear goals. ## Match Feedback to the Design Stage - **Brainstorming:** Keep feedback expansive so it does not eliminate promising directions too early. - **Early concepts:** Use research and data to narrow options while preserving an open mind. - **Product reviews:** Check that the work supports product and business objectives. - **Design critiques:** Offer detailed UX and visual suggestions and encourage consistency. - **Prototypes:** Focus on usability and animation. - **High-fidelity designs:** Examine detailed decisions that may benefit from another perspective. - **Final designs:** Identify overlooked flows, use cases, or remaining gaps. - When requesting feedback, explain what type of input would be most useful at that stage. ## Adapt to Team Culture - Feedback practices should reflect where a company is in its shift toward collaboration. - Teams early in that transition may need more context, frequent critical conversations, and patience while feedback relationships develop. - Teams with an established feedback culture can rely on direct communication through proven channels. - Feedback should meet teammates where they are rather than assuming every team has the same norms. ## Respect Timing and Working Styles - Timing matters as much as content; feedback is more constructive when people are ready to receive it. - Consider project deadlines, teammates’ schedules, time zones, and personal preferences. - Avoid sending work-related messages at inconvenient hours without setting expectations. - Communicating your own working style and accommodating others’ schedules can reduce friction. Thoughtful feedback helps turn conversations into action, but it requires adapting both the message and delivery to the project, people, and culture involved.

Read original

User Experience Figma Prototyping Product Design+2

datadogSep 29, 20223 min readCurated summary

DRUIDS, the design system that powers Datadog

Datadog created DRUIDS in 2018 to provide consistent UX patterns across its rapidly expanding observability platform. The system succeeds only if designers and developers trust and use it, so its documentation and tooling are designed to be easy to understand, implement, and contribute to. Datadog’s approach connects design, source code, documentation, and development workflows into a shared source of truth. ## Easy to Understand ### Fast Navigation and Discovery - The DRUIDS documentation supports Cmd+K (or Ctrl+K) quick navigation for finding components, patterns, icons, logos, and other resources. - The “DRUIDS Loupe” lets Datadog employees inspect components directly on product pages. - Hovering over an inspected component reveals links to its source code, Figma files, and documentation. ### Connected Documentation - Component pages link to GitHub, Figma, and VS Code. - JSDoc comments provide descriptions and links back to DRUIDS documentation inside VS Code. - Figma also links back to relevant components and guidance. - These connections minimize dead ends and keep supporting context close to where people are working. ## Easy to Implement ### Editable Playgrounds - DRUIDS treats React, TypeScript, and CSS implementation as the source of truth because code defines the actual browser experience. - Interactive playgrounds let users explore component props, test variations, and copy production-ready code. - A Code Sandbox page allows multiple components to be combined into live prototypes. - Stateful internal URLs make it easier to share ideas and reproduce bugs. - The tools also help teams without dedicated frontend specialists build internal applications using familiar Datadog patterns. ### Auto-Generated API Documentation - Each component includes an API table listing its props, allowed values, and descriptions. - The tables are generated directly from source code rather than maintained separately. - This prevents documentation from drifting away from the implementation across more than 150 components. - Clear, meaningful prop names improve predictability for both designers and developers. ## Easy to Contribute Back ### Contribution Guidelines - DRUIDS is intended to evolve as Datadog’s products and customer needs change. - Internal contribution guidelines define expectations for core design, structure, prop naming, documentation, styling, responsiveness, accessibility, and testing. - The guidelines aim to reinforce quality without making contributions burdensome or intimidating. ### CLI Tooling - A command-line wizard generates the standard structure for new components, including code, tests, and documentation examples. - For example, `yarn component button` creates the scaffolding for a button component. - Automating boilerplate lets contributors focus on design, user experience, and performance. Datadog’s central recommendation is to treat a design system as more than a component library: it should connect users, designers, and developers through consistent patterns, live examples, source-linked documentation, and lightweight contribution workflows.

Read original

User Experience Figma React TypeScript+4

figmaJun 29, 20222 min readCurated summary

Digital Design Is Now A Real Job | Figma | Figma Blog

Digital design has gained formal recognition as a distinct profession, reflecting its growing importance to businesses and everyday life. The U.S. Bureau of Labor Statistics now separately tracks “web and digital interface designers” and projects nearly 40% growth in the broader category through 2030. This change confirms a global surge in demand driven by the increasing importance of digital products, subscriptions, and user engagement. ## Formal Recognition of Digital Design - The BLS previously grouped digital designers with web developers or did not track them separately. - Its new category recognizes web and digital interface design alongside established fields such as graphic, industrial, interior, and architectural design. - The broader web development and digital design category is projected to grow from 2020 to 2030 by almost 40%. - Projections for 2030 increased from 188,000 jobs before the pandemic to 225,000 by February 2022. ## Demand Is Growing Globally - Design recruiter Judy Wert describes demand for designers as unprecedented, with company inquiries reportedly tripling in recent years. - LinkedIn identified design and UX research as fast-growing job categories across countries including the UK, France, Germany, Poland, Spain, Brazil, Saudi Arabia, and India. - Figma’s survey of 280 enterprise companies in four countries found that design teams grew by an average of 31% between 2019 and 2022. ## Why Businesses Need More Designers - People increasingly depend on digital interfaces for essential activities, including banking, work, healthcare, entertainment, education, and personal planning. - Many companies now operate through subscriptions or user engagement, making retention and satisfaction critical. - Frequent product updates and rapidly changing user expectations require organizations to respond quickly to feedback. - Design therefore influences not only how products look, but also how companies compete, retain customers, and operate. - Design thinking and initiatives such as Stanford’s d.school have made design methods more accessible across organizations, reducing resistance to design work. Digital design’s recognition by the BLS is less a symbolic change than evidence of a broader business transformation. Organizations should treat design as a core strategic capability and continue investing in designers who can shape effective, adaptable digital products.

Read original

User Experience Figma Web Development Design Thinking+1

figmaMay 26, 20222 min readCurated summary

Full-scale expression with Grilli Type | Figma Blog

Variable fonts let designers adjust weight, optical size, slant, and other typographic properties from a single file, making type more adaptable across screens and contexts. Thierry Blancpain of Grilli Type argues that they improve efficiency, designer–developer collaboration, accessibility, and expressive web design. Their adoption in tools such as Figma helps turn precise typographic intentions into practical code. ## Scaling Typography Across Contexts - Fonts can become less readable when scaled from mobile or business-card sizes to desktop or billboard sizes. - Designers often need careful kerning and tracking adjustments to preserve legibility and visual balance. - Supporting multiple weights and styles traditionally requires separate font files, increasing assets, code complexity, download size, and opportunities for error. ## The Efficiency of Variable Fonts - A variable font contains an entire type family in one file. - Designers can adjust several axes—such as weight, optical size, and slant—rather than selecting from fixed styles. - Variable fonts are increasingly a standard format, so support across tools is important for avoiding workarounds and inconsistent workflows. - Figma’s support allows designers to use the same capabilities during design that developers can later implement in code. ## Improving Designer–Developer Collaboration - Developers benefit from managing one font file instead of many individual assets. - A single file simplifies updates, keeps code cleaner, and reduces implementation friction. - Designers gain finer control over typography, including custom weights and optical sizing. - Blancpain notes that variable fonts are especially valuable when designers and developers work in separate roles, since the format creates a shared, more transferable design language. ## More Expressive and Dynamic Web Design - Variable fonts support animated and interactive typography, such as changing from regular to bold on hover. - Grilli Type’s GT Maru Mega demonstrates how expressive type can remain usable at small sizes through variable adjustments. - Blancpain expects the web to become increasingly dynamic, with motion and responsive typography replacing purely static experiences. - Typography can communicate mood and interaction—not merely deliver information. Variable fonts are recommended as both a practical production format and a creative medium. Their combination of smaller asset overhead, precise control, and animation potential makes them useful for modern responsive interfaces and richer web experiences.

Read original

User Experience Figma Accessibility Typography+3

figmaMay 23, 20222 min readCurated summary

A look back at Config 2022 | Figma Blog

Config 2022 brought together more than 100 speakers for 24 hours of talks on ambitious, urgent design work. The event covered topics ranging from Web3 and research strategy to design systems and emerging technologies. A central message was that designers can create meaningful local or global change by designing more inclusively and acting with urgency. ## Designing for Different Digital Experiences - Yuan Qing Lim discussed designing for Chinese users who moved directly from limited PC use to widespread mobile internet. - Three themes shaped the discussion: - **“More is More”**: Chinese digital products often embrace rich, maximalist experiences. - **Super apps**: Users expect broad functionality within unified platforms. - **Community**: Digital experiences should reflect strong social and communal behaviors. - The goal is to better serve China’s roughly 1 billion internet users by accounting for local expectations rather than applying Western design assumptions. ## Designing for New Internet Users - Rahul Goradia focused on people who are new to the internet, a group often overlooked by mainstream UX practices. - This population is especially significant in India, where internet access is expected to grow rapidly. - Designers should use usability testing to make e-commerce approachable for newcomers. - Products must account for changing behaviors, particularly as users adapt to a post-pandemic digital environment. ## A Broad Program of Design Topics - Other Config 2022 sessions explored: - Decentralizing design through Web3 - Turning research findings into strategy and product development - Design systems and their limitations - UX writing and product copy - Design tokens and collaboration - Dark-mode implementation - Multi-platform design systems - Designing super apps for Southeast Asia’s cultural diversity The event’s practical takeaway is to design for a wider range of users, challenge assumptions about “standard” digital behavior, and use research and collaboration to make products more accessible and effective.

Read original

User Experience Figma Design Systems Design Tokens+4

figmaMar 23, 20223 min readCurated summary

The art and influence of motion | Figma Blog

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.

Read original

User Experience Figma Accessibility Motion Design+2

datadogFeb 22, 20223 min readCurated summary

How Datadog uses Datadog to gain visibility into the Datadog user experience

Datadog’s product designers use their own monitoring tools to supplement interviews with quantitative insight into user behavior. By applying Real User Monitoring (RUM) and Logs to design questions, they made decisions about fonts, component functionality, and time-range input based on actual usage. This “dogfooding” approach improved products while making design collaboration faster and more evidence-based. ## Choosing a Monospace Font - Datadog uses monospace text for logs, stack traces, source code, container IDs, and dense data views. - Previously, users received different system fonts through a generic font stack, including Consolas, Menlo, and Courier. - The team used the browser’s CSS Font Loading API and RUM to determine which fonts users were actually seeing. - They analyzed the results in RUM Analytics and shared them through a dashboard with designers and engineers. - Datadog selected **Roboto Mono** as the standard font and used RUM after launch to verify that the rollout worked as intended. - Matching the existing visual proportions was important because font-size and character-width changes could disrupt tightly designed tables and other interfaces. ## Simplifying the DraggablePane Component - DraggablePane lets users resize adjacent content panels, but its small handle contained several controls that created visual clutter. - Custom loggers were added to the component and its draggable handle to track how users interacted with each feature. - Logs showed that almost no users used the minimize and maximize buttons, despite the space they occupied. - The team removed those buttons and replaced their functionality with a double-click on the handle. - Datadog notes that custom actions in RUM now provide a more direct way to collect this kind of interaction data. ## Expanding Custom Time-Range Syntax - Datadog initially offered only preset ranges such as 15 minutes, 1 hour, and 1 day. - The DateRangePicker introduced text-based custom ranges, but early versions supported only limited patterns such as “{N} months” or explicit dates. - Logs captured invalid user-entered time expressions, along with the page and country associated with each request. - The most common unsupported input involved “weeks,” including phrases like “last 1 week” and “last 2 weeks.” - The team used these patterns to prioritize improvements to the parser. - After adding support for common previously invalid inputs, the error rate fell from roughly 10 percent to 5–6 percent. ## Dogfooding and Collaboration - Designers tracked behavior, analyzed results, built dashboards, and documented findings using Datadog products. - Keeping data collection, analysis, and presentation in one platform made design reviews more efficient. - Shared dashboards and documentation helped designers and engineers collaborate around concrete evidence rather than assumptions. - Using the product internally also gave the team direct experience with the platform from a user’s perspective. Datadog’s examples show that quantitative product data works best alongside qualitative research: interviews explain user needs, while RUM and Logs reveal how often behaviors occur and which improvements will have the greatest impact.

Read original

User Experience Database Design Datadog Real User Monitoring+4

datadogFeb 22, 2022Original article

How Datadog uses Datadog to gain visibility into the Datadog user experience | Datadog (opens in new tab)

Datadog leverages its own monitoring tools to bridge the gap between qualitative user interviews and quantitative performance data. By "dogfooding" features like Real User Monitoring (RUM) and Logs, the product design team makes evidence-based UI/UX adjustments while gaining firsthand empathy for the user experience. This approach allows them to identify exactly how users interact with specific components and where current designs fail to meet user expectations. **Optimizing Font Consistency via CSS API Tracking** * To ensure visual precision in information-dense views like the Log Explorer, the team needed to transition from a generic system font stack to a standardized monospace font. * Designers used the Web API’s `Document.font` interface and the CSS Font Loading API via Datadog RUM to collect data on which specific fonts were actually being rendered on users' machines. * By analyzing a dashboard of these results, the team selected Roboto Mono as the standard, ensuring the new font’s optical size matched what the plurality of users were already seeing to avoid breaking embedded tables. **Simplifying Components through Interaction Logging** * The `DraggablePane` component, used for resizing adjacent panels, was suffering from UI clutter due to physical buttons for minimizing and maximizing content. * The team implemented custom loggers within Datadog Logs to track how frequently users clicked these specific controls versus interacting with the draggable handle. * The data revealed that the buttons were almost never used; consequently, the team removed them and replaced the functionality with a double-click event, significantly streamlining the interface. **Refining Syntax Support through Error Analysis** * When introducing the `DateRangePicker` for custom time frames, the team needed to expand the component's logic to support natural language strings. * By aggregating "invalid inputs" in Datadog Logs, the team could see the exact strings users were typing—such as "last 2 weeks"—that the system failed to parse. * Analyzing these common patterns allowed the team to update the parsing logic for high-demand keywords, which resulted in the component’s error rate dropping from 10 percent to approximately 5 percent. Leveraging internal monitoring tools allows design teams to move beyond guesswork and create highly functional interfaces. For organizations managing complex technical products, tracking specific component failures and interaction frequencies is an essential strategy for prioritizing the design roadmap and improving user retention.

User Experience Database Design Datadog Real User Monitoring+4

figmaFeb 7, 20223 min readCurated summary

Jamming on FigJam: a journey from beta to GA | Figma Blog

FigJam emerged from Figma’s shift to remote work and the growing need for a shared digital space for collaboration and connection. Figma launched it in beta to avoid perfectionism, learn quickly from users, and balance immediate needs with a longer-term product vision. Its path from inception to general availability was driven by cross-functional teamwork, rapid decisions, and continuous user feedback. ## A Collaborative Product Culture - Product Manager Emily Lin describes her role as a facilitator rather than a sole decision-maker. - Figma’s culture encourages ideas and decisions from anyone, with designers, engineers, product, support, sales, and marketing working together. - This collaborative model was especially important for building Figma’s second product. ## Why FigJam Was Created - As Figma began working remotely, the company saw users using its design tool to connect, brainstorm, socialize, and collaborate beyond traditional design work. - Figma employees experienced the same need for a digital gathering space during a difficult transition to remote work. - Because the need was urgent and FigJam became a company-wide priority, teams across Figma contributed to its development. ## Using Beta to Avoid Perfectionism - Building a second product created pressure to match the quality and care associated with Figma. - The team recognized that trying to perfect every detail could slow development and prevent them from responding to real user needs. - A beta launch allowed Figma to ship sooner, gather feedback, and iterate while continuing to pursue a broader product direction. ## Prioritizing Decisions and Feedback - The team focused first on questions that could block future decisions, such as how FigJam should relate to Figma and whether it needed to be a separate application. - Rather than extensively deliberating over every detail, they made decisions, consulted stakeholders, and adjusted based on feedback. - Hundreds of alpha testers participated through a shared Slack workspace and supplied ongoing insights. - Requests were divided into launch-critical fixes and fast-follow improvements: - Author names on sticky notes were required for the initial launch. - A timer could be released after launch as a follow-up feature. ## Iterating After the Beta Launch - After FigJam’s April 2021 beta introduction, product decisions continued to center on solving user problems. - A panel of users opted into new features and provided proactive feedback. - Ideas also came from support conversations, Twitter, and internal teams across the company. - The process emphasized giving active FigJam users the functionality they actually needed rather than following a rigid predetermined roadmap. The FigJam launch demonstrates the value of shipping an adaptable beta, resolving foundational questions early, and involving users and cross-functional teams throughout development. For products facing uncertainty or time pressure, iterative learning can be more effective than waiting for a perfectly defined first release.

Read original

User Experience Figma Figjam Slack+3

figmaNov 15, 20212 min readCurated summary

Stay in the flow with redesigned comments | Figma Blog

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.

Read original

User Experience Figma Prototyping Figjam+2

figmaAug 25, 20212 min readCurated summary

Figma for students and educators | Figma Blog

Figma’s Education plan gives students and educators free access to Professional features and unlimited collaboration. The platform supports virtual and hybrid classrooms by combining teaching materials, activities, critiques, and community in one shared space. It also helps students build practical design skills, portfolios, and professional connections. ## Figma for Educators - Figma enables real-time and asynchronous participation, making it useful for in-person, remote, and hybrid teaching. - Educators can consolidate lectures, assignments, activities, and critiques into a single file with multiple pages. - Shared files encourage iteration and feedback, helping quieter students participate more actively. - Visual collaboration can create a more inclusive classroom environment, including for deaf and hard-of-hearing students. - Teachers can use Figma to build community, such as creating collaborative class yearbooks with comments, stickers, and student profiles. - Figma offers group demos and shared teaching resources to help educators adopt the platform. ## Figma for Students - Working collaboratively in Figma exposes students to modern, cross-functional design workflows used in professional settings. - Students can preserve research, iterations, and design process—not just final visuals—for portfolio reviews and interviews. - Figma Community files allow students to learn through duplication, remixing, and studying other designers’ work. - Student groups, hackathons, and other community programs provide opportunities to build relationships and gain experience. - Education newsletters highlight career-related topics such as hiring preparation, portfolio reviews, and internships. Figma recommends that students and educators use the free Education plan to create collaborative classrooms, document design processes, and connect with the wider design community.

Read original

User Experience Figma User Interface Design Collaboration+2

figmaAug 17, 20212 min readCurated summary

Inside Figma: building a more collaborative design process | Figma Blog

Figma’s product design team uses FigJam to make early-stage design more inclusive, collaborative, and focused on ideas rather than polish. Moving brainstorming, feedback, and co-design into a shared whiteboard helps designers, product managers, and engineers contribute asynchronously and visibly. The result is a process that brings together emotional insight, product thinking, and technical constraints earlier. ## Keeping Early Ideation Focused - Figma’s detailed design tools can encourage teams to refine visuals too soon. - FigJam’s lighter, more flexible format keeps attention on brainstorming and concepts instead of pixel-perfect execution. - Product Designer Jenny Wen used reusable tweet and Slack-message components to imagine how users might react to upcoming features. - Limiting the workshop’s format helped the team generate ideas quickly without getting distracted by exact wording or visual details. - The strongest concepts were later moved into Figma for more detailed design work. ## Organizing Asynchronous Feedback - Designing sticky-note attribution raised complex questions about editable names, ownership changes, and copied content. - Jenny collected feedback from alpha testers and teammates directly in FigJam. - She grouped related input and created a decision tree to explain possible solutions. - Sharing the file through Slack allowed collaborators to review the reasoning, add comments, and vote with stamps without scheduling a meeting. - The visual format made both the feedback and the decision-making process easier to follow. ## Co-Designing with Product and Engineering - Product Designer Keeyen Yeo used FigJam to explore the high-five feature by diagramming how people high-five in real life. - Unlike paper sketches, the shared FigJam file let product partners contribute directly and co-design the interaction. - Engineer Willy Wu mapped the technical behavior, including when a cursor should enter high-five mode. - Iterating together helped the team balance technical feasibility with a natural user experience. Figma’s experience suggests that using a lightweight collaborative tool for early exploration can make design processes more open and productive. Teams should defer detailed execution until after designers, product partners, and engineers have jointly developed and tested the core ideas.

Read original

User Experience Figma Prototyping Figjam+2

figmaMay 24, 20213 min readCurated summary

In the file at Config 2021 | Figma Blog

Config 2021’s breakout sessions emphasized practical systems for building products and teams. Coda’s Helena Jaramillo described how to create a strong product vision without existing user data, while Stripe’s design team shared principles for meeting immediate needs without sacrificing long-term scalability. Both approaches rely on context, shared perspectives, strong foundations, and thoughtful communication. ## Building a Vision from Zero to One - At Coda, Helena Jaramillo worked on a publishing platform designed to help users share best practices and discover documents. - Because the product was new, the team lacked existing user behavior, research participants, and historical data. - Helena built context by studying competitors and adjacent products, annotating screenshots in Figma, and identifying useful or unsuitable patterns. ## Developing a Strong Product Perspective - The team explored what publishing on Coda should feel like: a blog post, a no-code app, or a website. - They used Helena’s publishing experience and internal discussion to form a shared point of view. - Two priorities emerged: - Make publishing interactive documents easy. - Help publishers feel proud of and recognized for their work. - These principles shaped features such as simple publishing flows, photos, subtitles, and bylines. - When user insights are unavailable, a team can rely on collective intuition and expertise—but only by aligning around a clear perspective. ## Communicating the Broader Story - Helena created a “tl;dr page” in Figma to align cross-functional partners. - Rather than documenting every feature, the page used a short flow and several mockups to show the product narrative. - The goal was to make the intended experience understandable without requiring deep project context. ## Designing for Immediate Needs and Long-Term Scale Stripe’s Connie Yang, Tayler Aitken, and their team focus on simplifying complex processes for businesses and end users. Their approach combines urgency with long-term planning. - **Think in long time scales:** Stripe uses a “city planner mentality,” considering how systems connect, handle growth, and respond to future needs—potentially as far ahead as 2030. - **Lay strong foundations:** Teams should invest in fast, accessible products and scalable systems instead of short-term fixes. - Stripe’s design-system color tables, for example, include contrast and accessibility ratings, embedding quality requirements directly into the infrastructure. - **Prioritize rigor and quality:** Because Stripe handles payments and payouts, user trust is essential. The team accepts additional complexity when it produces a more reliable, polished experience. The practical recommendation is to combine strong early judgment with durable systems: build enough context to form a clear vision, communicate that vision simply, and make foundational decisions that continue serving users as the product grows.

Read original

User Experience Figma Design Systems Product Design+2

figmaApr 6, 20212 min readCurated summary

How Repsol rethinks the way the world interacts with energy | Figma Blog

Repsol is using design to make energy more understandable and encourage consumers to participate in the transition toward sustainable energy. After creating its first internal design team, the company partnered with Mendesaltaren to build the Oxygen design system in Figma. The system unified design across products, improved collaboration, and reduced product implementation work by 30%. ## Making Energy More Tangible - Repsol’s design team aims to “humanize” energy and help people become active participants in how it is produced and consumed. - An electric car-sharing app shows users how much energy they consume while driving and rates their efficiency. - Another app feature lets users see where their electricity comes from, including nearby solar panels and wind turbines, alongside current weather conditions. - These experiences turn energy from an abstract bill into something visual and interactive. ## Building One Design Language - Repsol serves diverse audiences, including drivers, industrial customers, employees, and teams managing refineries and supply chains. - Before the design system, different products taught users different interaction patterns and languages. - The Oxygen design system provides shared patterns, components, interaction guidelines, and developer guidance. - Built in Figma, it creates consistency across products while allowing teams to adapt designs to different purposes and audiences. ## Figma as the Collaboration Hub - Figma became the central workspace for design, communication, feedback, and executive presentations. - Repsol can work simultaneously on more than 15 projects across internal and external teams while maintaining consistency. - Designers replaced tools such as Sketch, InVision, and PowerPoint. - Product owners, technology leads, and executives can review and iterate on designs in parallel. ## Measuring Design’s Impact - Mendesaltaren developed two plugins to help Repsol measure design performance: - **Figmetrics** tracks how components are used across Figma files. - **MSVM** keeps design, product, business, and technology teams aligned around a shared source of truth. - The new system and processes reduced implementation work by 30%. - Repsol can now track savings in time, money, and effort, making design’s business value more visible. Repsol’s experience shows how a centralized design system can improve efficiency while making complex subjects more accessible. By connecting consistent design practices with measurable results, the company is using design as a tool for both digital transformation and its transition toward net-zero energy.

Read original

User Experience Figma Design Systems Product Development+3

figmaOct 27, 20203 min readCurated summary

Bridging design and code with Variants | Figma Blog

Figma’s Variants feature was created to bring component organization closer to how developers structure reusable code. It combines related component versions into component sets, supports multiple property dimensions, and simplifies switching between variations. The feature’s design was shaped through user research and usability testing, which refined both its interface and its name. ## Bridging Design and Code - Designers need freedom to iterate, while developers prioritize rigor, reuse, and scalability. - Figma identified component management as a major opportunity to connect these workflows. - Existing components were difficult to find, switch between, and organize, especially when systems contained many variations. - Variants was designed to make design-system components resemble their code counterparts more closely. ## Aligning Component Organization with Code - Teams often used forward-slash names such as `default/primary/large/icon` to represent component states and properties. - Variants replaced this workaround with key-value properties, such as: - `state="hover"` - `style="secondary"` - The system supports both simple components and components with multiple dimensions, including state, type, color, and size. - Research showed that design-system managers commonly arranged component variations in grids to compare and maintain them. - Figma therefore allows all variations of a component to be displayed side by side. - Existing component variations can be selected and converted into a component set using “Combine Variants.” ## Refining the Interface Through Usability Testing - Figma built a working prototype and conducted four rounds of usability testing over six weeks. - The initial interface displayed all property values as pills, but users found this confusing because pills typically represent multiple tags or attributes. - Figma changed the interaction to: - Use dropdowns and simple input fields when editing a selected variant. - Retain pills when viewing all properties and values in a component set. - Generic default labels such as “Property 1” and “Property 2” proved clearer than predefined labels like “State” and “Style,” because users understood they should customize them. ## Choosing the Name “Variants” - The feature was initially called “States,” reflecting its early focus on interactive states such as hover, active, and disabled. - User feedback showed that “States” understated the feature’s broader capabilities. - Variants can represent any component property, including type, color, and size—not just interaction states. - Testing confirmed that “Variants” better communicated the feature’s flexibility and scope. Variants, combined with updates to Auto Layout and the Inspect panel, is intended to make design systems easier to organize and easier for developers to interpret. Teams should use component properties and sets to model reusable UI elements in a way that matches both design workflows and code structures.

Read original

User Experience Figma Design Systems Auto Layout+2