figmaJul 6, 2021

How News UK developed a multi-brand design system | Figma Blog (opens in new tab)

News UK needed a unified design system for brands spanning print, digital, radio, and television, but its independently operated teams and fragmented tools made scaling difficult. By migrating to Figma, simplifying library management, and investing in education and advocacy, the company created a flexible system that supported brand differences while encouraging collaboration. The transition improved adoption substantially, including a 23-point increase in internal NPS during the first quarter. ## Fragmented Tools and Independent Brands - News UK’s brands, including *The Times* and *The Sun*, historically had separate design organizations, product teams, and workflows. - The team attempted to combine Sketch, Abstract, Zeplin, and InVision, but the result was difficult to maintain. - Design-system updates could take days or weeks, and accommodating brand variations created thousands of styles. - Existing theming features became rigid and overly complex as product requirements expanded. - The launch of *The Times* radio station exposed how much support the design-systems team needed to provide, making the approach unsustainable. - News UK chose Figma to consolidate tools, centralize library management, and increase participation. ## Building Adoption Through Education - The team recognized that successful adoption required cultural change, not just a new tool or library. - Design-system specialists personally configured designers’ Figma workspaces and provided onboarding. - Workshops and documentation covered: - Migrating files from Sketch - Structuring and managing files - Using components - Commenting and inspecting designs - Integrating tools such as Jira - Designers were encouraged to contribute component specifications and reusable patterns. - The team created Figma guidance tools to recommend components for common scenarios, such as onboarding users to a new product. - Designer advocates promoted best practices within product areas and acted as contacts between their teams and the design-systems group. ## Supporting Multiple Brands at Scale - News UK completed its migration to Figma in a few weeks. - Designers shifted from viewing the design system as a burden to seeing it as a productivity aid. - Shared components could be given different brand themes, allowing one system to support distinct visual identities. - A custom Themer plugin helped teams experiment with and build components that worked across multiple brands. - Earlier collaboration and feedback reduced duplicated work and discouraged teams from reinventing existing solutions. - The system was rolled out across all product and design teams. ## Measurable Results - Internal product teams increasingly adopted and contributed to the system. - News UK recorded a 23-point increase in its design-system NPS in the first quarter after introducing Figma. - Teams reported practical benefits while recognizing that the system would continue to evolve. News UK’s experience shows that a scalable multi-brand design system depends on both flexible technology and sustained organizational engagement. Consolidating tools, supporting brand-specific themes, educating users, and appointing internal advocates can turn a centralized system into a shared platform rather than a constraint.

design-componentsfigmadesign-systemsjira+4

figmaSep 9, 2019

How to make background patterns for your next design project | Figma Blog (opens in new tab)

Namika Hamasaki uses a daily pattern challenge to develop creativity through repetition without producing repetitive results. Her process combines observation, unconventional color palettes, layout grids, geometric experimentation, and Figma components to turn simple ideas into seamless patterns. The central lesson is that consistent practice and attention to everyday details can make creative work easier and more adventurous. ## Finding Daily Inspiration - Inspiration can come from ordinary surroundings, including: - Food - Architecture - Furniture - Nature - Landscapes encountered during a commute - Hamasaki photographs interesting shapes, colors, and compositions for later reference. - Maintaining an inspiration library helps prevent the blank-page problem and provides starting points for new designs. ## Building a Color Palette - The challenge allows her to experiment beyond the brand color restrictions common in professional work. - She often derives palettes from inspiring photographs. - Figma’s Image Palette plugin extracts colors from images and generates a usable palette. ## Setting Up a Grid - A grid helps organize pattern elements and ensures that the final design can repeat correctly. - Hamasaki uses Figma’s Layout grid to establish the structure before placing shapes. ## Experimenting with Geometric Shapes - Complex-looking patterns begin with basic forms such as circles, rectangles, and triangles. - She strategically places shapes on the grid, then experiments with: - Rotating circles or semicircles - Shifting elements - Varying rotation angles - Testing different color combinations - The process is intentionally exploratory, allowing unexpected visual results to emerge. ## Creating Seamless Patterns - Once a design feels successful, Hamasaki converts it into a component. - She turns off the component’s **Clip content** option. - She duplicates and arranges the component across a frame to create a repeating pattern. - Editing elements inside the master component lets her quickly test different layouts across all duplicated instances. The practical recommendation is to establish a regular creative exercise, document visual inspiration, and use simple, flexible systems—such as palettes, grids, and reusable components—to explore many possibilities efficiently.

design-componentsfigmagraphic-designcolor-palette+2

figmaNov 29, 2017

How to build your design system in Figma | Figma Blog (opens in new tab)

Figma’s 2017 post argues that design systems can begin with simple, practical building blocks and grow into sophisticated libraries of reusable components. Rather than prescribing one method, it showcases how teams use Figma’s constraints, components, and Team Library to support different organizational needs. The examples suggest that design systems improve consistency while also strengthening collaboration among designers, engineers, product managers, and non-designers. ## Starting with Simple Building Blocks: Gusto - Gusto’s experience addresses the common challenge of deciding where to begin. - The team used basic, reusable elements as the foundation for its component library. - The approach demonstrates that a design system does not need to be comprehensive at launch; it can develop incrementally. ## Creating Marketing and Communications Assets: Square - Square’s marketing team built an internal system for communications design. - The system included reusable assets such as: - Color palettes - Logo sets - Other brand and communication resources - Figma helped the team organize and share these assets across its internal workflows. ## Empowering Non-Designers: Virta Health - Virta Health documented the process from auditing existing components to producing final mockups. - Designers used reusable components that allowed non-designers to assemble designs through drag-and-drop workflows. - The design system improved communication between designers, engineers, and product managers by giving teams a shared visual language for discussing ideas. ## Using Nested Components: OpenText - OpenText explored nested components to create more flexible and powerful UI patterns. - Components could be combined into more complex structures, including controls with multiple button states. - This approach supports scalable systems in which changes to foundational components can flow through larger interface patterns. ## Applying Atomic Design Principles: SetProduct.com - SetProduct.com used atomic design as the organizing framework for its system. - The hierarchy progresses from small elements to complete interfaces: - Words and icons - Buttons and other phrases - Cards and other sentences - Full screens or chapters - Figma components support both local editing and broader, reusable design-system updates. Figma’s examples show that teams should begin with the problems and workflows specific to their organization, then gradually build a reusable system around them. Features such as constraints, nested components, and Team Library can support systems ranging from simple asset collections to highly structured component architectures.

design-componentsfigmadesign-systemscomponent-library+2

figmaNov 27, 2017

Introducing DesignSystems.com | Figma Blog (opens in new tab)

Figma introduced DesignSystems.com as a central resource for learning about and building design systems. The site aims to address practical challenges—such as consistency, communication, organizational culture, and implementation—rather than presenting only polished success stories. Figma also planned community events, including sponsored design-system dinners, to encourage candid offline discussion. ## Why Design Systems Matter - As products grow across multiple screens and teams, designers need processes that scale. - Companies increasingly compete through user experience, making consistency and efficient collaboration more important. - Common questions include: - Whether design components should be connected to code - Whether dedicated teams are necessary - How to start a design system - Whether design systems could replace designers - Figma had already supported this work through features such as team libraries, which allow companies to share component libraries across files and teams. ## DesignSystems.com as a Community Hub - The site was created as a place to learn, create, and discuss design systems. - It intends to cover: - Difficult implementation problems - Real-world failures and “war stories” - Lessons learned and best practices - The cultural and economic effects of design systems - Figma encouraged designers to contribute their successes, failures, and unresolved questions. ## Bringing the Conversation Offline - Design-system work involves organizational politics and social dynamics that can be difficult to discuss publicly. - Figma sponsored dinners where designers could openly debate how design systems affect their organizations. - The first dinner took place in San Francisco, with plans to support similar gatherings hosted by design communities worldwide. DesignSystems.com was positioned as both an educational resource and a community-building effort. Figma’s recommendation was to learn from honest implementation experiences and connect directly with peers facing similar challenges.

design-componentsfigmadesign-systemsux+1

figmaSep 18, 2017

Team Library 1.0 | Figma Blog (opens in new tab)

Figma’s Team Library 1.0 turns shared components into a centralized foundation for collaborative design systems. Building on feedback from its February beta, the release improves component discovery, documentation, and organization. Figma argues that its centralized, online platform can keep teams synchronized without third-party tools or custom internal systems. ## A Centralized Source of Truth - Teams can share buttons, icons, dialogs, and other components across files and with all team members. - Published components and updates appear immediately in the Team Library. - Users receive notifications when shared components change and can choose whether to apply updates to their local instances. - Centralized storage eliminates manual exporting, syncing, and reliance on tools such as Slack, Google Docs, or custom company software. ## Improved Component Browsing - The beta required repeatedly opening a pop-up that obscured the canvas. - Team components are now available in a dedicated tab in the left sidebar, alongside layers. - Designers can drag components directly from the sidebar into their designs. - A separate local-components tab provides an overview of what will be published. - The sidebar tabs can be switched quickly with `Alt+1`. ## Built-In Component Documentation - The beta provided no place to explain how or when components should be used. - Team Library 1.0 adds documentation fields in the right-hand properties panel. - Teammates can read this guidance while browsing components, keeping usage information attached to the component itself. ## Better Categorization and Organization - The beta organized components only by file, which made larger libraries difficult to navigate. - Components can now also be grouped by frame and group. - For example, button components placed in a group named “Buttons” appear together under that category. - Shared component thumbnails can be visually customized by changing the background color of their containing frame. Figma presents Team Library 1.0 as a practical foundation for building and maintaining living design systems. Teams can adopt shared components with less friction, while documentation and categorization make those systems easier to understand and scale.

design-componentsfigmadesign-systemscollaborative-design+1