stripeDec 4, 2025

Analyzing how SaaS platforms are shipping payments and finance products in days (opens in new tab)

Stripe’s embedded components—prebuilt UI modules for payments and finance workflows—have seen rapid adoption, with active users more than tripling in a year. Usage data shows that large platforms and those serving in-person businesses are especially likely to adopt them, primarily to manage complexity, accelerate launches, and simplify onboarding. Most platforms also customize the components to match their branding. ## Large Platforms Adopt More Broadly - Platforms with more than 1,000 employees or $1 billion in revenue are nearly three times more likely to use embedded components than startup platforms. - Larger platforms use a median of three components, compared with two among startups. - Their main motivation is managing international compliance, localization, and the need to launch features quickly. - FreshBooks uses account onboarding across more than 160 countries, with automatic adjustments for language and regional requirements. - Tekmetric launched Stripe Capital after updating its Connect integration, while Kajabi introduced a Xero integration in six weeks instead of the usual six to twelve months. ## In-Person Industries Lead Adoption - Platforms serving industries such as automotive repair adopt embedded components at more than twice the median rate. - These businesses often have tighter margins, higher operating costs, and less experience with online payments. - Embedded workflows let platforms provide streamlined payment experiences without building and maintaining them independently. - TheCut uses embedded onboarding for businesses accepting both in-person and online payments. - Cloudbeds reduced hotel onboarding time from weeks to hours. - Jobber doubled Capital originations after adding financing capabilities. ## Most Platforms Customize the Experience - Seventy-one percent of platforms use Stripe’s theming features to match their own design systems. - Common customizations include branded colors, notification banners, and dashboard styling. - Consistent branding is especially important for sensitive workflows involving payments and identity verification. ## Expanding Component Capabilities - New components let platforms promote financial products such as Instant Payouts and Stripe Capital within their dashboards. - Disputes components allow platform users to manage payment disputes themselves, reducing operational support demands. - Stripe is continuing to expand the component library based on usage data and customer feedback. Embedded components are most valuable for platforms that need reliable, localized financial workflows without the cost and delay of custom development. They offer a practical way to scale payments, add new financial products, and maintain a consistent user experience.

ui-componentssaasfintechembedded-components+3

figmaNov 20, 2024

The Making of the Figma Pattern Library | Figma Blog (opens in new tab)

Figma rebuilt its internal design system during the UI3 redesign after years of growth had produced inconsistent components, detached instances, and a fragmented workflow. The resulting Figma Pattern Library (FPL) was created through close designer-engineer collaboration and uses variables, APIs, and shared standards to keep design intent aligned with shipped code. Its goal is to provide both a reliable source of truth and a flexible foundation for building consistent, accessible products across Figma’s product suite. ## Why Figma rebuilt its design system - Figma’s internal system had become increasingly fragmented as the company and product portfolio expanded. - Components that were intended to be identical had accumulated subtle but important differences. - Detached component instances made consistency difficult to maintain. - The upcoming UI3 rollout made these problems impossible to ignore. - The team needed a foundation that could support consistent, efficient development across all Figma products. ## A paired design-and-engineering approach - A five-person team of designers and engineers led the rebuild. - The team modeled its workflow on pair programming: - One discipline would actively build. - The other would review and provide immediate feedback. - This collaboration helped bridge the gap between design intent and technical implementation. - The system was designed to be both: - A source of truth for shared UI decisions. - A springboard for future product development. - The effort resulted in the new Figma Pattern Library, or FPL. ## Using variables as a shared language - The previous system relied on Figma styles for designers and a separate Google Sheet for engineers’ color tokens. - Because the spreadsheet often lagged behind product changes, designs and production code diverged. - FPL replaced this disconnected process with Figma variables and the Figma REST API. - Typography variables were introduced and aliased through existing typography styles. - Color styles were migrated to color variables as a centralized source of truth. - CSS definitions were added to color variables so Dev Mode could display the correct variable names during inspection. ## Primitive and semantic color systems - FPL organized colors into two main variable collections: - **Primitive variables:** Color ramps organized by hue and numbered from 100 to 1000. - **Semantic variables:** Contextual names based on Figma’s dark-mode schema. - Semantic variables support multiple themes and products, including: - Light and dark modes. - Figma Design. - FigJam. - Slides. - Dev Mode. - Semantic variables alias primitive variables, allowing colors to be changed across themes and products without manually updating every component. - This structure enables shared components to adapt to different contexts while preserving visual consistency. The practical lesson is that a scalable design system requires more than a component library: it needs shared ownership, synchronized design and engineering tokens, and variable-based foundations that can support multiple products and themes.

ui-componentsfigmadesign-systemsaccessibility+4

figmaJan 30, 2024

Everything You Need to Know About Dev Mode | Figma Blog (opens in new tab)

Figma built Dev Mode to make the transition from design to code more efficient for developers, who now represent roughly one-third of its weekly active users. Rather than separating developers into different tools or files, Figma created a dedicated space within the same collaborative environment. After an open beta shaped by extensive user feedback and more than 200 updates in its first two months, Dev Mode moved out of beta with a focus on clearer handoff and developer-centered workflows. ## Why Figma Built Dev Mode - Developers were already using Figma alongside designers, product managers, and other collaborators, despite Figma not being optimized for their workflows. - Figma wanted to support varied development roles, including: - Front-end developers working with design systems - Design systems engineers building components - Developers implementing content layouts and exporting assets - In 2021, Figma acquired Visly, a team of eight designers and engineers experienced in React UI development and developer tooling. - The Visly team emphasized that developers should not have to learn every interaction in design mode; the experience should be tailored to their needs. ## An Integrated Development Workspace - Figma considered both fully separate files and tightly integrated design and development experiences. - It ultimately chose a dedicated mode inside Figma: - Developers get tools and workflows optimized for implementation. - They retain access to the design context and collaboration surrounding the work. - The approach avoids forcing teams to switch tools or lose important information during handoff. - Dev Mode launched as an open beta at Config 2023, with customer feedback driving rapid improvements and over 200 requested updates delivered in the first two months. ## Communicating Design Intent - Traditionally, designers had to manually create measurements, callouts, and organized specifications for developers. - Dev Mode introduces annotations that remain connected to the design and update as the design changes. - Designers can: - Click and drag to measure - Highlight important details without cluttering the canvas - Add live specifications and contextual notes - Automate or customize annotations through plugins - Designers can mark a section as “ready for development” without creating a separate file or page. - Developers can use diffing tools to compare changes between versions and stay current with design updates. ## Practical Impact Dev Mode is intended to make design handoff less manual and more collaborative by giving developers a purpose-built workspace without removing them from Figma’s shared context. Teams can use annotations, readiness labels, and frame comparisons to reduce ambiguity and keep implementation aligned with evolving designs.

ui-componentsfigmadesign-systemsreact+3

figmaAug 30, 2023

How Spotify’s Design System Goes Beyond Platforms | Figma Blog (opens in new tab)

Spotify’s expansion to 45 platforms and more than 2,000 device types exposed inconsistencies between its product experiences. The company evolved Encore from separate mobile and web systems into a cross-platform design system focused on shared foundations and reusable components. Its goal is to make Spotify feel coherent everywhere without erasing the distinctive strengths of each platform. ## The Challenge of Consistency at Scale - Spotify’s 2019 ubiquity strategy aimed to make audio available across TVs, cars, computers, phones, and many other devices. - The design team needed more than broad platform coverage: users should recognize the experience as distinctly Spotify wherever they use it. - Components became central to achieving this consistency, from defining their scope to implementing them across products. ## The Birth and Evolution of Encore - When introduced in 2019, Encore had two main subsystems: - **Encore Consumer Mobile**, a flexible catalog of mobile-focused UI components. - **Encore Web**, supporting a wider range of web products. - Both systems used shared design tokens for foundational decisions such as colors and typography. - Over time, differences in component sizing, typography, and state treatments revealed that the subsystems needed greater commonality. - By 2022, flexibility had created too much divergence, prompting Spotify to rebalance the system toward reusable, consistent components. ## A Shared Layer Between Foundation and Products - Spotify created a specialized team focused on reusable components for Encore Mobile. - This new layer sits between the foundational system and Encore Consumer Mobile. - It acts as a “first line of defense,” reducing the need for product-specific teams to build every component themselves. - Developed in collaboration with Encore Web, the layer establishes platform parity from the beginning rather than retrofitting consistency later. ## Designing Components Across Platforms - The overall workflow remained familiar: research, design, and development. - The major change was coordinating design work across iOS, Android, and Web instead of designing for one platform in isolation. - Components are intended to share a coherent visual and behavioral language while still adapting to platform-specific requirements. - This requires collaboration among specialists, since web and mobile designers bring different domain expertise. - Spotify begins by bringing platform teams together and researching each platform’s unique characteristics before creating the shared component. Spotify’s approach treats a design system as more than a collection of platform-specific libraries. By establishing shared components early and combining them with platform-aware design, teams can create experiences that feel unified without sacrificing the qualities that make each device and interface effective.

ui-componentsdesign-systemsandroidios+3

figmaJul 12, 2023

How Thumbtack structures their design system | Figma Blog (opens in new tab)

Thumbtack structures its Thumbprint design system as three layers: design tokens, atomic CSS, and reusable UI components. Each layer trades some flexibility for greater productivity, consistency, accessibility, and quality. The approach lets developers choose the highest-level solution that fits their needs while retaining lower-level escape hatches for custom or native experiences. ## Three-Layer Architecture - **Thumbprint Tokens** - The foundation shared by web and native clients. - Defines granular properties such as colors, typography, spacing, sizing, radii, and shadows. - Offers the greatest flexibility but the least built-in structure. - **Thumbprint Atomic** - An atomic CSS library built on the tokens. - Enables developers to build interfaces without writing custom CSS. - Includes utilities such as aspect-ratio classes for maintaining proportions in responsive or embedded media. - **Thumbprint Components** - Provides accessible, prebuilt implementations of common patterns, including alerts, buttons, date pickers, and star ratings. - Improves development speed, consistency, and accessibility. - Developers can fall back to Atomic or Tokens when no suitable component exists. ## Layered Components and Tokens - Individual layers can contain their own sub-layers for added flexibility. - Thumbprint’s modal system separates: - `ModalCurtain`, which supplies core usability and behavior without visual styling. - `Modal`, which adds the standard visual design on top of `ModalCurtain`. - Developers generally use the more prescriptive `Modal`, but can use `ModalCurtain` for unusual requirements. - Tokens can also inherit from one another. For example, a semantic token such as `button-cta-background-color` may derive from a broader token like `cta-background-color`, which ultimately maps to a raw value such as `blue-400`. - Users are encouraged to select the highest abstraction appropriate for their use case. ## Why the Structure Helps - Higher layers reduce repeated work and improve consistency. - Lower layers preserve flexibility for custom product needs. - Components allow engineers to focus on product functionality instead of rebuilding common UI patterns. - Layered primitives provide a controlled way to support exceptions without abandoning the design system. - The architecture is intended to simplify maintenance and save time for both developers and end users. Thumbprint’s model demonstrates that a design system does not need to choose between standardization and flexibility. A layered structure provides strong defaults while preserving lower-level tools for cases that require customization.

ui-componentsdesign-systemsreactaccessibility+3

figmaMay 8, 2023

The Future of Design Systems Is Accessible | Figma Blog (opens in new tab)

Design systems can make accessibility a scalable, built-in practice rather than a late-stage compliance task. By standardizing accessible colors, components, documentation, and feedback processes, they allow improvements to spread across an entire product ecosystem. The article also highlights AI as an emerging tool for detecting and fixing accessibility issues, while emphasizing the need for responsible implementation. ## Accessibility and design systems belong together - Only about 3% of the internet was accessible to people with disabilities in 2022. - Design systems offer a way to improve that figure by embedding accessibility rules into shared components and guidelines. - In-house design system adoption increased by 22% in 2020, and 47% of surveyed organizations reported including accessibility guidelines. - Accessible design is both a social responsibility and a business opportunity, given the global population of people with disabilities and their significant purchasing power. - Accessibility can be integrated into: - Tested foreground and background color combinations - Individual UI components - Consistent documentation and usage guidance - Ongoing feedback and testing processes - System-level changes can be propagated across many product instances, making accessibility fixes more efficient and consistent. ## Responsible AI in accessibility - Design system teams are increasingly exploring AI to improve accessibility. - New AI-powered tools aim to identify and resolve common issues automatically. - Potential applications include: - Generating descriptions for images - Labeling buttons that lack accessible names - Adding semantic structure to interfaces - These tools can accelerate accessibility work, but they should supplement—not replace—human expertise, testing, and accountability. Design systems should treat accessibility as a foundational requirement from the beginning. Teams can make the greatest impact by combining accessible system components and standards with continuous testing, inclusive feedback, and carefully governed automation.

ui-componentsaidesign-systemsaccessibility+2

figmaOct 21, 2019

Beyond multiplayer: Building community together in Figma | Figma Blog (opens in new tab)

Figma argues that design is becoming more open, collaborative, and community-driven beyond real-time multiplayer editing. It introduces the Figma Community, where people can publish live files for others to inspect, remix, and learn from, alongside a redesigned workspace focused on team collaboration. The beta is intended to evolve through feedback from companies, educators, governments, and independent designers. ## From Multiplayer Collaboration to Public Sharing - Figma’s multiplayer features helped normalize co-editing and involving non-designers in the design process. - The company now wants to make it easier for designers to share not only finished work, but also the underlying process and methods. - The Figma Community beta provides a public space for publishing files that anyone can inspect, remix, and learn from. ## A Community Built with Customers - Users choose which files to publish on their public profiles. - The initial licensing option is Creative Commons Attribution 4.0 International, with more restrictive licenses potentially added later. - Figma describes the release as a multi-month beta designed to gather feedback and discover how organizations will use the platform. ## Use Cases Across Organizations - **Slack:** Publishing UI kits to help partners build better Slack applications. - **Dropbox:** Sharing culture kits for design managers. - **Unsplash:** Providing avatars and visual assets for designers. - **VMware:** Making its Clarity public design system easier to use. - **City of Chicago:** Offering a public design system that citizens can remix with their own identity. - **Lambda School and Stanford d.school:** Publishing free educational templates. - **Independent designers:** Sharing presentation templates, portfolios, tutorials, and source files. - **Square Crypto:** Exploring transparent, cross-company design collaboration inspired by the openness of the Bitcoin community. ## Learning Through Inspectable Files - Designers can publish editable source files rather than only screenshots or finished exports. - David Kulakevich’s Figma artwork demonstrates how viewers can inspect individual layers and learn the techniques behind a finished piece. - This turns community sharing into both a portfolio platform and an educational resource. ## Communities Inside the Workspace - Figma is also redesigning workspaces around the people on a team. - The goal is to make important files and projects easier for team members to discover. - This reflects Figma’s broader view that design files should be organized around collaboration and community, not treated as isolated artifacts. Figma’s recommendation is effectively to treat design as an open, reusable medium: publish useful files, learn from others’ source material, and build shared systems across organizational boundaries.

ui-componentsfigmadesign-systemsreal-time-collaboration+2

figmaMay 9, 2018

Material Design + Figma Styles = 🔥 | Figma Blog (opens in new tab)

Figma’s Styles feature makes Material Design easier to customize for different brands while preserving a shared, systematic foundation. The article presents a Material UI kit that uses global styles and nested components to theme colors, typography, elevation, grids, shapes, and icons across an entire design system. This approach helps teams move beyond generic stock interfaces toward consistent but distinctive branded experiences. ## The Challenge of Theming Material Design - Material Design improves usability and consistency across Google and Android applications. - Using the same components everywhere can make products feel generic and less connected to their brands. - Material’s broad component library creates a challenge: designers need an efficient way to customize an entire system rather than editing components individually. - Themed Material Design aims to preserve the system’s strengths while enabling more memorable brand expression. ## Figma Styles for Global Customization - Figma Styles define reusable global text, fill, stroke, effect, and grid settings. - Updating a style automatically changes every instance across the document. - Styles can be shared through team libraries and reused across projects. - This makes Styles well suited to theming large UI kits and design systems. ## Material Colors, Typography, Elevation, and Grids - **Colors:** Fill styles control primary and secondary colors, typography emphasis levels, and surface swatches. Changing a brand palette can update many components at once. - **Typography:** Text styles cover Material’s type specifications, using Roboto by default but allowing teams to substitute their own typeface. Font changes may require adjustments to size and spacing. - **Elevation:** Preset shadow styles represent Material’s elevation levels, simplifying shadows that may otherwise require combinations of up to three drop shadows. - **Grid:** A reusable 4dp baseline grid can be applied to frames and components, alongside custom desktop, tablet, or mobile grids. ## Combining Styles with Components - Nested components allow teams to globally control the shape of buttons, floating action buttons, and cards. - Designers can switch between sharp corners, cut corners, and rounded corners by toggling nested component visibility. - Changes propagate throughout the system, though updates across hundreds of components may take several seconds. - Individual component instances can still override shared settings when specialized styling is needed. ## Icon Libraries - Material offers five icon styles. - To keep the main kit manageable, each icon style was organized into a separate sticker-sheet document. - Teams can copy icons directly or publish the sheets as shared libraries for use across projects. Figma Styles combined with components provide a practical way to build Material-based systems that are globally consistent, easily maintained, and adaptable to individual brands.

ui-componentsfigmadesign-systemsdesign-tokens+2

datadogNov 14, 2016

Redux-Doghouse: Creating reusable React-Redux components through scoping (opens in new tab)

Redux-Doghouse is a Redux library for creating scoped actions and reducers, allowing reusable React/Redux components to coexist without responding to one another’s actions. It preserves Redux’s ability to coordinate state across an application while ensuring that component-local actions affect only the instance that dispatched them. Datadog developed it to support reusable Query Editors within larger editors such as dashboards and Expression Editors. ## The Problem with Reusable Redux Components - Redux reducers respond to actions based on their `TYPE`. - If multiple instances of the same component share a Redux store, an action such as `MY_ACTION` can update every instance. - This is useful for application-wide events, but incorrect when an action should affect only one component instance. - Refactoring each component to use unique action types would undermine its reusability and independence. ## Scoped Actions and Reducers - Redux-Doghouse adds a unique scope to each component instance’s actions. - Reducers are wrapped so that a scoped action is routed only to the matching component instance. - A component can therefore continue using generic action types such as `MY_ACTION` while remaining isolated from sibling instances. - Higher-level components can still observe and respond to those actions, preserving Redux’s cross-component coordination. - The parent can extend a child component’s behavior without requiring the child to know about its parent. ## Datadog’s Query Editor Use Case - Datadog’s dashboards contain Query Editor components for editing individual metrics. - Query Editors were rebuilt as miniature React/Redux applications so they could be reused in: - Dashboard graph editors - Monitor editors - Notebook editors - Other application contexts - The Expression Editor needed to render an arbitrary number of Query Editors and combine their queries with expressions such as `a + b / c`. ## Coordinating Child Editors The Expression Editor needed to: - Validate that expressions reference existing query labels, rejecting inputs such as `a + d` when query `d` does not exist. - Enforce compatible `group by` values across queries: - Queries may share a value such as `host`. - Some queries may have no grouping. - Non-empty groupings such as `host` and `device` cannot be mixed. - Ensure that a `SET_GROUP` action from Query Editor A affects only A, not Query Editor B. - Allow the Expression Editor itself to observe `SET_GROUP` and enforce rules across all queries. - Keep Query Editors independent so they remain usable outside an Expression Editor. ## How Doghouse Solves It - The parent assigns each Query Editor a scope, such as `A`, `B`, or `C`. - Actions dispatched by each editor receive metadata identifying that scope. - The parent wraps each editor’s reducers and routes actions only to the reducer with the matching scope. - The Expression Editor can still listen to the same actions at a higher level and apply cross-editor validation or coordination. Redux-Doghouse is most useful when reusable Redux components need isolated local behavior while still participating in a shared application state. It lets teams organize actions and reducers by component, rather than forcing all Redux logic to be structured around entire views.

ui-componentsdatabase-designreactstate-management+4