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.

zeplinfigmadesign-systemsjira+4

figmaApr 28, 2020

Bridge design and development with the new Zeplin integration | Figma Blog (opens in new tab)

Figma and Zeplin introduced a redesigned native plugin to improve design-to-development handoff. The integration lets teams export Figma frames, components, colors, and text styles directly to Zeplin, where developers can generate specs, assets, and code snippets. Rebuilt for better performance and maintainability, it addresses issues with large files and high-resolution exports while opening the door to automatic component updates. ## A Growing Design-to-Development Workflow - Zeplin provides advanced handoff features and acts as a bridge between designers and developers. - The original Figma integration launched before Figma officially launched. - More than 300,000 Figma files were exported to Zeplin each month, with usage increasing by 30–40% during the shift to remote work. ## Rebuilt as a Native Plugin - The second-generation integration was rebuilt from the ground up as a native Figma plugin. - This creates a more seamless export experience for users. - It also makes the integration easier for Zeplin to maintain and extend with new features. - Performance problems affecting large Figma files, frames, and export resolutions were addressed. ## Exporting Designs and Generating Handoff Materials - Users can export: - Frames - Components - Color styles - Text styles - In Zeplin, product teams can automatically generate: - Accurate design specifications - Assets - Code snippets - Exported assets can also appear directly in Zeplin style guides. ## Future Possibilities - Figma’s web-based architecture offers advantages over integrations with other design tools. - Zeplin was exploring automatic synchronization, allowing changes to Figma components to be pushed to Zeplin without manual exports. - Users could install the plugin through the Figma Community, and Figma customers were offered three free months of Zeplin’s Organization plan. The new plugin is recommended for teams seeking a faster, more reliable handoff between Figma and development, especially when working with large files or shared design systems.

zeplinfigmadeveloper-toolsdesign-handoff+2

figmaNov 27, 2018

Zoom Streamlines the Design Workflow with Figma | Figma Blog (opens in new tab)

Zoom adopted Figma to replace a fragmented design workflow built around Sketch, InVision or Framer, and Zeplin. Figma’s speed, real-time collaboration, contextual commenting, and shared libraries reduced manual file management while improving communication between designers, engineers, product managers, and other stakeholders. The case study concludes that Figma became a shared source of truth that made Zoom’s distributed design process faster and more collaborative. ## Speed Bumps in the Design Workflow - Zoom’s lean design team—about one designer for every ten engineers—needed efficient ways to communicate design decisions. - Designers worked across multiple countries and time zones, making collaboration especially important. - Their workflow relied on separate tools: - Sketch for design - InVision or Framer for prototypes - Zeplin for engineering handoff - Each iteration required files to be synchronized across tools. - Teams pushed revisions 10–20 times per project and had to manage multiple versions, reviews, and stakeholders. - Static screenshots often removed designs from their broader context, limiting the quality of feedback. ## Figma’s Collaborative Workflow - Designer Steven Crosby was initially attracted by Figma’s performance, particularly its smooth frame rate when moving objects. - Figma’s integrated commenting and real-time collaboration addressed Zoom’s workflow problems in one place. - Multiple designers could brainstorm and work on the same file simultaneously. - Anyone with access could comment directly on the design without downloading files or managing synchronization. - Feedback became more contextual because reviewers could see the full design flow rather than an isolated screenshot. - Figma brought designers together with engineers, project managers, product managers, and other teams, substantially improving the amount and quality of feedback. ## A Shared Design System - Figma became Zoom’s single source of truth for design work. - Team Libraries allowed designers in different locations and time zones to share components across projects. - Zoom created a master file containing an icon set and reusable components, with live updates available to the team. - Constraints helped designers create responsive components while keeping elements pinned to specific sides of a layout. - Using reusable components improved consistency and helped designers better understand scalable design-system construction. ## Brainstorming Across Teams - Zoom used Figma to include data scientists and an external design partner in product-message brainstorming. - Participants needed no prior Figma experience to contribute. - By sharing a link and inviting collaborators into the file, everyone could work simultaneously in separate areas of the canvas. - Participants quickly moved elements, modified messages, and reused ideas from one another. - The low learning curve enabled non-designers to participate directly rather than providing feedback indirectly. Zoom’s experience suggests that consolidating design, prototyping, feedback, and reusable components in a collaborative tool can eliminate workflow friction and make design a genuinely cross-functional activity.

zeplinfigmadesign-systemsprototyping+3

figmaOct 25, 2017

Figma Now Integrates with Zeplin | Figma Blog (opens in new tab)

Figma announced a Zeplin integration to make it easier for teams to move designs into a developer-focused handoff workflow. The integration supports teams using different design and development processes, allowing Figma frames to be exported directly into Zeplin. However, unlike Figma’s always-current code mode, designs must be re-exported whenever the original Figma file changes. ## Supporting Flexible Design Workflows - Teams use different tools and processes to design, prototype, and build digital products. - Figma aims to support these workflows through integrations with complementary tools. - Zeplin is focused specifically on the developer experience, presenting design specifications and assets in an accessible format for engineers. ## Exporting Figma Designs to Zeplin The integration can be enabled through the following workflow: - Download Zeplin and create a project. - Enable Zeplin in Figma through **Menu → Integrations → Zeplin**. - Create and select a frame in Figma. - Choose **Export**, then select **Export to Zeplin**. - Zeplin opens automatically, where the user can select **Import**. - The exported Figma design then becomes available for viewing in Zeplin. ## Important Workflow Limitation - Exported designs are not automatically synchronized with Figma. - Any updates made to the original Figma design require another export to Zeplin. - This differs from Figma’s code mode, where developers always see the latest design assets. Figma presents the integration as part of its broader effort to help design and engineering teams collaborate more efficiently. Teams that rely on Zeplin can now incorporate Figma into their existing handoff process, provided they remember to re-export designs after changes.

zeplinfigmaprototypingui-design+2