figmaJul 29, 2024

HP Powers Up Design Handoff with Dev Mode | Figma Blog (opens in new tab)

HP built its Veneer design system to unify digital experiences across more than 100 product lines and many independent business units. By combining design language, reusable components, documentation, governance, and community feedback, HP reduced duplication and improved consistency. Figma’s Dev Mode further streamlined handoff, helping developers interpret designs faster and cutting development time by up to 50% on some projects. ## Building a multilayered design system - HP’s diverse products—including printers, laptops, and gaming systems—each have distinct brand and product requirements. - Teams previously worked in isolation, making it difficult to maintain a consistent digital experience. - Veneer evolved from a frontend component library into a broader system containing: - Design language and tokens - Shared components and patterns - Usage guidelines, code standards, and snippets - Governance and community collaboration - Its multilayered structure supports HP’s numerous sub-brands rather than forcing every product into one rigid system. ## Measuring adoption and impact - HP tracks both usage data and feedback from designers and developers. - Veneer’s iconography library includes 915 components used by 320 teams. - The library averages approximately 85,000 component inserts per week. - HP reported that Veneer saved projects 500% more time than the time invested in creating the system during 2023. - Some projects experienced a 50% reduction in development time. - Adoption remained challenging because designers were protective of their product-specific work and teams needed flexibility for different sub-brands. ## Dev Mode improves design handoff - Dev Mode gives developers direct access to design specifications in Figma, reducing meetings and repeated clarification between design and engineering. - **Compare changes** helps teams identify differences between design versions, especially when updating existing products. - **Ready for development** lets designers indicate which parts of a design are prepared for implementation, helping developers focus on the correct work. - **Variables** connect designs to primitive and semantic tokens, allowing HP’s system to scale across themes and modes. HP’s experience suggests that a successful enterprise design system must be flexible, measurable, and supported by strong collaboration. Pairing such a system with Dev Mode can make handoff clearer, reduce redundant work, and give both designers and developers more time to focus on higher-value work.

design-handofffigmadesign-systemsdesign-tokens+2

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.

design-handofffigmadeveloper-toolszeplin+2

figmaSep 25, 2018

Microsoft automates design handoff with Figma’s API [Video] | Figma Blog (opens in new tab)

Microsoft Dynamics 365 for Talent’s design team used Figma’s API to automate the slow handoff between designers and engineers. By connecting Figma webhooks to their development workflow, saving a new design version automatically generates a pull request for review and approval. The team reported reducing the handoff process by about 70%, allowing designers and engineers to focus on their primary work. ## The Design Handoff Problem - After adopting Microsoft’s Fluent Design System, the team focused heavily on scaling visual design elements. - Even minor design updates required negotiation and prioritization between designers and engineers. - With a large enterprise workload, engineers could take a week or more to move a single design element into production. - The team needed a workflow that could support a high designer-to-engineer ratio while reducing manual coordination. ## Automating the Workflow with Figma’s API - During Microsoft’s OneWeek hackathon, the Dynamics 365 for Talent team built an automation around Figma’s web-based API. - A Figma webhook detects when a designer saves a new version of a file. - That event automatically creates a pull request containing the design change. - Designers and engineers can review, approve, and commit the update through the existing development process. ## Reported Benefits - The automated workflow reduced the overall handoff process by approximately 70%. - Designers gained more time to create and refine designs. - Engineers spent less time processing design requests and more time developing features. - The approach made design-system updates faster and easier to scale. The example demonstrates how integrating design tools directly with engineering workflows can eliminate repetitive coordination and accelerate production changes. Teams facing similar handoff bottlenecks can consider webhook- and API-driven automation to connect design revisions with code review and deployment.

design-handoffdesign-systemspull-requestsfigma-api+2

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.

design-handofffigmaprototypingui-design+2