Storybook | Techlist.io

figmaJul 10, 20262 min readCurated summary

How Decagon Uses AI For Design System Saturation | Figma Blog

Decagon built its Deco design system to maintain quality and consistency as its AI-powered customer service platform scaled. By connecting Figma, Storybook, coding agents, and Figma MCP, the company reduced design-to-code friction and enabled agents to produce higher-fidelity implementations. The result is a shared design language and a continuous loop between design and engineering. ## Building a Design System for Quality at Scale - Decagon initially had no formal design system, while its product and team were expanding rapidly. - Inconsistencies across the platform weakened the polish expected by enterprise customers. - Designers and engineers created Deco together, addressing implementation details early, including: - Focus-mode behavior - Disabled, read-only, error, and warning states - Placeholder decisions - Existing code patterns and edge cases - Deco grew into an organization-wide Figma library with hundreds of components, styles, and variables. - Library analytics recorded tens of thousands of component insertions in 30 days, indicating broad adoption. - The system provides: - A single source of truth for design and implementation - A shared vocabulary between designers and engineers - Faster screen assembly from reusable components - Greater consistency across teams and product areas ## Connecting Design and Code with Figma MCP - Before MCP, designers exported specifications, developers interpreted them, and discrepancies were discovered during review, creating repeated back-and-forth. - Decagon moved its design-system components into Storybook so engineers and coding agents could work from precise, documented implementations. - The team created coding-agent skills that: - Require agents to use approved design-system components - Help designers add new components while keeping Figma and code aligned - With Figma MCP enabled, agents can access design specifications, code context, and the Figma canvas within the same workflow. - Designers can provide a Figma link to a coding agent, which uses design context and maps the requested interface to Deco components. - This produces high-fidelity starting points and speeds up iteration while reducing divergence between the intended design and the final code. Decagon’s experience suggests that design systems become significantly more valuable when they are connected directly to development tools and AI agents. Maintaining synchronized component libraries across Figma and code can help fast-moving teams scale without sacrificing consistency or implementation quality.

Read original

Storybook Figma Design Systems AI Agents+2

figmaApr 15, 20242 min readCurated summary

What We Launched at Framework 2024 | Figma Blog

Figma’s Framework 2024 launches focus on increasing design-system adoption across organizations. The central argument is that creating a system is only half the challenge; teams must also make it useful and accessible to developers and other stakeholders. Code Connect, typography and gradient variables, and the Design System Analytics API are presented as tools for bridging design and code, improving consistency, and measuring adoption. ## Design System Adoption as the Central Challenge - Design systems have become more powerful and sophisticated, but that complexity can make organizational adoption harder. - Figma emphasizes that successful systems require more than components and documentation—they need an adoption strategy. - The new releases build on earlier updates such as variables, theming, state management, advanced prototyping, and Dev Mode. - Figma frames design-system advocacy partly as a marketing problem: teams must persuade designers and developers to use the system consistently. ## Code Connect Bridges Design and Code - Code Connect brings production-ready code snippets directly into Figma’s Dev Mode. - Developers can find the implementation for a design-system component without searching through separate documentation. - Copying the relevant snippet is intended to reduce inconsistencies and make the design-to-code process faster. - The beta supports React, iOS, and Storybook, with additional frameworks and platforms planned. - Bumble, GitHub, and HP shared their design-system challenges and early experiences with Code Connect. ## Typography and Gradient Variables Expand Token Coverage - Figma describes typography as an essential part of a complete design system that was previously difficult to represent with variables. - Typography variables allow teams to define font scales once and apply them consistently throughout a product. - They can support platform-specific adjustments and accessibility goals, including WCAG-compliant type scales. - Gradient variables, introduced alongside typography variables, further align Figma variables with the range of design tokens teams need. ## Analytics for Measuring Adoption - Figma also announced the Design System Analytics API, referred to in the introduction as the Library Analytics API. - The API is intended to help design-system teams understand usage across an organization. - By measuring adoption, teams can identify where systems are being used effectively and where additional education, improvements, or outreach may be needed. Figma’s overall recommendation is to treat a design system as an organizational product: provide developers with usable code, cover essential tokens such as typography and gradients, and use analytics to guide adoption efforts.

Read original

Storybook Figma Design Systems React+3

figmaJan 8, 20244 min readCurated summary

How Razorpay Sharpened Developer Workflows | Figma Blog

Razorpay built Blade, a cross-platform design system, to create consistent, accessible experiences across its many products while accelerating collaboration between designers and developers. Its success depends not only on reusable components, but also on adoption metrics, advocacy, developer tooling, and tight integration between design and code. Tools such as Blade Coverage, RazorSharp, Dev Mode, Storybook links, and Figma variables have significantly reduced handoff friction and improved productivity. ## Blade’s Cross-Platform Structure - Razorpay has around 70 designers and 100 front-end developers. - Three designers and five engineers work full-time on Blade. - Blade supports desktop web, mobile web, iOS, and Android through a shared API and common properties. - This allows developers to transfer knowledge between platforms without rebuilding the system for each one. ## Problems Blade Solved - Before Blade, teams frequently hard-coded custom components and missed details such as: - Button states - Text-field error handling - Accessibility requirements - Repetitive, ad hoc development led to inconsistent user experiences across Razorpay’s products and domains. - Blade provides: - A shared design and development language - More consistent experiences across products - Built-in accessibility - Faster collaboration and shorter time to market - Designers and developers are treated as Blade’s customers, while end users benefit from the resulting consistency and reliability. ## Driving Design System Adoption - Razorpay uses several strategies to reduce adoption friction: - Securing leadership support for funding and organizational adoption - Tracking metrics such as onboarded projects and the percentage of apps using Blade components - Holding office hours and maintaining a support Slack channel - Creating an advocacy group of designers from consumer teams - Announcing new components through demo videos and status-page updates - These practices make Blade visible, supported, and easier for individual teams to adopt. ## Measuring Impact and Coverage - Blade’s north star is enabling teams to ship polished interfaces while the system handles common design and implementation work. - Its adoption targets are: - 70% Blade usage for new features - 50% usage for existing product surfaces - Razorpay discovered that adoption begins during design, not just development. - The Blade Coverage plugin shows designers where their designs diverge from Blade components, helping them: - Identify issues earlier - Predict launch timelines more accurately - Reduce handoff friction - Quantitative metrics are supplemented with surveys and focus groups measuring speed, documentation, training, collaboration, and user experience. - These findings contribute to an annual Net Promoter Score for the design system. ## RazorSharp and Improved Developer Handoffs - Before Dev Mode, developers had to inspect designs manually, identify components and properties, and reproduce them in code. - A developer created RazorSharp as a private plugin that automatically generated equivalent code for designs. - Initially, Figma required edit access to run plugins, forcing developers to clone shared files before using RazorSharp. - When Figma introduced Dev Mode, Razorpay adapted RazorSharp to work there in just two days. - Developers can now inspect designs and generate implementation code without editing or duplicating files. - Dev Mode also includes links to Storybook, allowing developers to move directly from a design component to its code playground. ## Variables and Design Tokens - Razorpay is transitioning its design tokens to Figma variables. - This makes token copying more seamless and supports developer-friendly naming such as `surface.text.subtle`. - Spacing tokens are now mapped to variables, addressing a frequent request from consuming teams. - Variables make light and dark modes easier to implement without duplicating entire designs. - Previously, multiple themes and modes caused Blade files to consume large amounts of memory and slowed designers down. - Consolidating Blade into a single theme with variables has substantially improved design performance. Razorpay’s approach shows that a design system is most effective when it is treated as an internal product: it needs leadership support, measurable adoption goals, user support, and tooling that connects design directly to implementation. Teams building similar systems should invest in both component quality and the workflows that make those components easy to discover and use.

Read original

Storybook Figma Design Systems Design Tokens+3

figmaNov 21, 20233 min readCurated summary

Dev Mode: Building a Design Tool that Works Harder for Developers | Figma Blog

Figma built Dev Mode to make developers first-class participants in product design rather than secondary users of a designer-focused tool. The team initially emphasized code generation, but real-world differences in teams, workflows, and codebases exposed its limitations. By combining developer research, the acquisition of Visly, and a broader focus on inspection and collaboration, Figma shifted toward reducing the gap between design and code. ## Designing for Developers as Core Users - Figma’s multiplayer canvas was created for entire product teams, including product managers and developers. - Developers were already using Figma to explore work in progress, despite the tool not being optimized for their workflows. - By 2023, developers represented roughly one-third of Figma’s users. - The goal became a tailored developer experience that did not require developers to learn or navigate design-centric interactions. - Proposed directions included: - Component playgrounds - Code snippets - GitHub and Storybook integrations - Developer-specific resources - Design inspection and change comparison ## The Visly Acquisition - Figma acquired Visly in 2021, bringing in eight designers and engineers who had built a React UI development tool. - The Visly team contributed: - Extensive research into developer tooling - Practical experience with development workflows - A developer-oriented perspective and intuition - Their involvement accelerated Figma’s efforts and helped the company understand how developers work across different environments. ## Moving Beyond a Codegen-First Strategy - Early versions of Dev Mode focused on code generation: automatically translating designs into code according to predefined rules. - Codegen could save hours or even days when designs mapped cleanly to implementation. - Testing showed that successful code generation in controlled scenarios did not necessarily work in production. - Companies differ in their: - Team structures - Engineering practices - Toolchains - Codebases - Workflow conventions - These variations made it difficult to generate universally useful code, prompting the team to reconsider codegen as the central solution. ## Redefining Design-to-Code Handoff - Figma’s broader objective was to break down the traditional “handoff wall” between designers and developers. - Dev Mode was positioned as a dedicated space where developers could inspect designs, compare changes, work with VS Code, and access implementation-oriented information. - The team continued refining the product through beta feedback, including daily customer requests collected through an internal Slackbot. - Rather than assuming developers would live inside a design tool, Figma focused on making the parts of the design process they needed more accessible and useful. Dev Mode’s central lesson is that developer tooling must reflect real engineering practices, not just generate code from idealized designs. A practical developer experience combines accurate design context, collaboration, integrations, and workflow flexibility with code generation where it genuinely helps.

Read original

Storybook Figma React Github+3

figmaOct 19, 20202 min readCurated summary

How Kimberly-Clark brings your favorite paper products into your home | Figma Blog

Kimberly-Clark responded to slowing growth, competition, and rising costs by prioritizing its digital presence. By adopting Figma as a collaborative, browser-based design platform, the company replaced fragmented workflows with a shared source of truth and faster stakeholder feedback. This collaboration produced measurable results, including a 71% increase in signups after redesigning a form. ## Digital transformation at global scale - Kimberly-Clark manages more than 400 consumer websites across 175 countries. - Its digital systems support pricing, manufacturing, distribution, merchandising, sales, and operations. - The company needed a more efficient way to create and localize consistent digital experiences for brands such as Kleenex, Scott, and Huggies. ## Problems with the previous design workflow - Designers spent weeks working individually in proprietary Mac applications. - Files had to be uploaded to separate cloud prototyping tools for review. - Stakeholder feedback created repeated edit-and-review cycles. - Developer handoff was difficult when developers did not use Macs. - These delays slowed the launch of new products and digital experiences. ## Figma as a collaborative design platform - Figma consolidated design, prototyping, feedback, and editing in one browser-based tool. - Files were no longer stored locally, and invited stakeholders could view or edit them easily. - Feedback meetings became real-time working sessions rather than discussions held after designs were completed. - Brand, marketing, design, and other teams could participate directly and see changes immediately. - The approach created a shared “single source of truth” and improved alignment. ## Redesigning for measurable user impact - The UX team tracked metrics such as bounce rates, returning visitors, time on site, and signup rates. - One website’s signup form contained 13 fields because marketing wanted extensive information upfront. - The teams collaborated in Figma to reduce the form to five fields. - After launch, signups increased by 71%. - Faster collaboration helped the company resolve design problems quickly and move products to market sooner. ## Next steps - Kimberly-Clark planned a design system connected across Figma, Storybook, and its code repository. - The company viewed its digital transformation as the beginning of a more design-led phase ahead of its 150th anniversary. The case suggests that collaborative design tools are most valuable when paired with user-focused metrics: they can improve internal workflows while directly increasing customer engagement.

Read original

Storybook Figma Design Systems User Experience+3

figmaMay 18, 20202 min readCurated summary

Bringing live Figma embeds to your team’s favorite tools | Figma Blog

Figma introduced live embeds for private design files, allowing teams to view current designs directly inside tools such as Notion, Dropbox Paper, Jira, Trello, Coda, and internal documentation sites. The feature addresses the friction caused by designers and developers working across separate tools, replacing outdated screenshots with embeds that update automatically. Figma’s broader goal is to keep designs available in context throughout product planning, development, and documentation. ## Private Embeds Improve Cross-Functional Collaboration - Previously, Figma embeds supported public files, but many teams needed to keep designs private. - Private embeds let authorized teammates view organizational files without leaving their existing workflows. - Embedded files provide context during handoff and reduce the effort of locating and maintaining the latest design version. - Unlike screenshots, live embeds automatically reflect design changes. ## Product Specs and Requirements - Teams can embed designs, prototypes, user journeys, and idea boards alongside product briefs and roadmaps. - Developers can review requirements and the corresponding designs in tools such as Coda, Notion, and Dropbox Paper. - Figma highlighted reusable Coda templates for product requirements and roadmaps. - Keeping designs inside specifications helps ensure that concepts and prototypes remain current. ## Project and Task Management - Embedding designs in Jira issues and Trello cards keeps design and development work connected. - Product teams can reference current designs while planning work, managing sprints, triaging requests, and tracking tasks. - Figma provides integrations through the Figma for Jira app and Figma for Trello power-up. ## Documentation and Internal References - Teams can include private Figma files in documentation systems such as Storybook and internal knowledge sites. - The Figma Live Embed Kit enables organizations to add private embeds to custom documentation platforms. - Embedded designs serve as an up-to-date reference and help establish a single source of truth for UI standards and product behavior. - Prototype embeds also respect settings that hide the Figma toolbar and footer, which is useful for user-testing tools such as Maze. Figma recommends trying private embeds in existing workflows and encourages users to request support for additional tools. The practical takeaway is to embed live Figma files wherever design context is needed, rather than relying on manually maintained screenshots.

Read original

Storybook Figma Jira Notion+4