figmaApr 9, 2024

The Anatomy of a Component Sprint | Figma Blog (opens in new tab)

The Washington Post’s design system team developed a roughly 10-day “component sprint” to replace siloed, linear workflows with continuous designer–developer collaboration. Each component is jointly planned, designed, implemented, refined, and documented, with input from the wider team throughout. The process aims to reduce miscommunication, uncover technical constraints early, and create components that serve real product needs. ## Why the Component Sprint Was Needed - The Washington Post launched its design system in 2019 to help teams deliver news experiences quickly and consistently. - Earlier components followed either: - A design-led process for inputs such as selects, radios, and checkboxes. - A developer-led process for technically complex components such as carousels and search inputs. - Both approaches caused delays, unexpected compromises, and gaps in communication. - Designers sometimes overlooked existing components or pursued custom solutions, creating overrides and last-minute requests for new variants. - Developers could be forced to focus on visual details instead of solving technical and product problems. - The new process brings the relevant people together early and gives designers and developers shared ownership. ## Sprint Structure and Shared Ownership - A designer and developer from the core design system team lead each component from beginning to end. - Every planned component receives its own sprint, although the timeline can vary. - The approximately 10-day process is intentionally open and inclusive rather than closed and sequential. - The wider team contributes feedback and expertise at multiple stages. ## Kickoff: Balancing Impact and Effort - The team holds a weekly 30-minute meeting to evaluate candidate component tickets in Jira. - Ideas are prioritized according to potential impact and required effort. - Jira tickets serve as shared, evolving spaces where stakeholders can: - Leave feedback asynchronously. - Record insights from Slack discussions. - Group related ideas. - Connect proposals to business goals. - An impact-versus-effort matrix visualizes priorities: - Larger circles represent ideas with more votes. - Numbers identify clusters of related ideas. - Colors indicate associated business goals. - Once a ticket is prioritized, a designer and developer are assigned to lead delivery. ## Concept: Defining Scope and Goals - The sprint begins with a two-hour meeting involving the wider team. - In a FigJam file, participants: - Define the component’s goals. - Agree on requirements. - Assess the scope of work. - Clarify assumptions and technical needs. - The meeting reserves the final 15 minutes for review. - Using FigJam enables both technical and non-technical contributors to participate. - The team focuses first on shared expectations and requirements, avoiding premature debate over detailed visual design. The component sprint provides a practical framework for building design-system components collaboratively: prioritize openly, pair design and development from the start, and establish scope with broad input before implementation begins.

design-development-collaborationfigmadesign-systemsfigjam+3

figmaApr 2, 2024

Join Us for Framework by Figma: Our Global Design Systems Event | Figma Blog (opens in new tab)

Figma announced Framework, a global design systems event focused on new tools, best practices, and the future of design systems. The event aims to help teams manage increasingly complex systems while improving collaboration between designers and engineers. It also highlights Figma’s broader effort to connect design systems more closely with code and organizational adoption. ## Event Focus and Agenda - Framework was scheduled as a half-day virtual event on April 16, 2024. - The program included: - Deep dives into new design system features - Best practices from companies such as Verizon - Product sessions about Figma’s future direction - A design-to-code roundtable with Bumble, GitHub, and Hewlett Packard - Expert Q&A sessions - The article also references features announced at Framework, including Code Connect, typography and gradient variables, and the Library Analytics API. ## Building More Adaptable Design Systems - Design systems have evolved from basic style guides into foundations for product design and development. - Figma acknowledges that implementing and maintaining them can be complex. - Its approach aims to support both structured workflows and more flexible, freeform design. - Product sessions were intended to cover how teams can structure, maintain, and increase adoption of their systems. ## Connecting Designers and Engineers - A central goal was to bring design systems practitioners from design and engineering together. - Sessions addressed both design principles and technical implementation. - Figma previewed capabilities intended to reduce the gap between design and development. - The event emphasized cross-functional collaboration as essential to successful design systems. ## Global Design Systems Community - Framework was presented as a global community event, with virtual programming for broad access. - Additional events were planned for Asia on April 18 and Tokyo on April 23, alongside future meetups in London and other cities. - Participants could attend the main-stage announcements and sessions online regardless of location. Figma positioned Framework as both a showcase of new capabilities and an opportunity to learn from the teams shaping modern design systems. Its practical recommendation was to participate in the event, explore the new design-to-code and analytics tools, and apply the shared practices to improve system adoption and collaboration.

design-development-collaborationfigmadesign-systemsaccessibility+3

figmaJan 30, 2024

The Art and Science of Annotations in Dev Mode | Figma Blog (opens in new tab)

Figma’s Dev Mode annotations aim to make designer–developer collaboration clearer and less manual. The feature centralizes design context, keeps specifications synchronized with changing designs, and avoids cluttering the design canvas. Its core conclusion is that annotations should be dynamic, connected to design properties, and presented in a developer-focused workspace. ## Solving Designer and Developer Needs - Designers need to document information that visuals cannot fully express, including: - Accessibility requirements - Interaction behavior - Rationale behind design decisions - Developers need more than access to an entire design file; they need a curated engineering specification that identifies the relevant work. - Figma placed annotation workflows in Dev Mode so designers can: - Annotate from the same perspective developers use - Create a focused specification - Share a direct Dev Mode link with developers - Dev Mode is intended to involve the broader product team rather than isolate developers after design work is complete. ## Dynamic Annotations That Stay Current - Traditional annotations are manually created and quickly become outdated as designs evolve. - Figma explored connecting annotations directly to design properties so they update automatically when the underlying design changes. - Measurement indicators can also respond dynamically to layout or dimension changes. - Referencing actual variables and components from a design system reduces ambiguity and helps keep specifications aligned with implementation. - This approach supports the constantly changing nature of product development, where developers need visibility into ongoing design updates. ## Positioning Annotations Without Canvas Clutter - Manual annotations often force designers to move frames and rearrange the canvas to make room for notes and pointers. - Figma wanted annotations to remain visible to developers without consuming space in the design itself. - The proposed solution was to position and display annotations automatically. - This required handling complex interactions such as: - Zooming and panning - Scaling - Selecting and hovering - Minimizing annotations - Engineering worked through numerous prototypes and tuned the display logic to make automatically positioned annotations usable in practice. Figma’s approach treats annotations as a living, developer-oriented specification rather than static notes on a canvas. Connecting them to design properties and displaying them dynamically can reduce maintenance for designers while giving developers clearer, more reliable implementation context.

design-development-collaborationfigmadesign-systemsaccessibility+2