figmaApr 14, 2025

The Long and Short of It: Issue no.10 | Figma Blog (opens in new tab)

“Skill share,” Figma’s April 2025 issue, gathers practical lessons for designers, developers, and product builders ahead of Config 2025. Its central argument is that strong products depend not only on speed or technical execution, but also on craft, communication, storytelling, experimentation, and long-term thinking. The issue encourages readers to keep learning across disciplines and apply these skills collaboratively. ## Craft as a Competitive Advantage - Linear CEO Karri Saarinen shares ten principles for creating products that stand out. - The advice reflects a shift away from “move fast and break things” toward deliberate quality and attention to detail. - Craft is presented as an organizational value that should influence every level of product development. ## Better Designer–Developer Handoff - Successful handoff depends on collaboration rather than simply transferring designs to engineering. - Figma’s guide focuses on three principles: - Encourage curiosity between designers and developers. - Keep communication open throughout the build process. - Establish a shared understanding of what “good” means. - The goal is to reduce friction, clarify expectations, and preserve design intent during implementation. ## Writing and Storytelling for Product Builders - Clear writing helps teams explain technical architecture, new features, product roadmaps, and broader visions. - Storytelling is not limited to writers or marketers; people in every product role benefit from articulating ideas effectively. - Strong communication can make complex concepts easier to understand and build support for new directions. ## Building for the Long Term - In a period of rapidly advancing AI tools, product teams must focus on making things work well—not merely making them work. - Dylan Field and Garry Tan discuss experimentation, play, and exploring an “idea maze” as essential parts of product development. - They also address vibe coding, AI-assisted creation, and the importance of preserving human craft even as AI models become more capable. - Founders are encouraged to remain deeply focused on quality and to develop products with lasting value. ## Broader Exploration - The issue also includes a “Rabbit hole” section featuring additional visual and editorial explorations. - Together, the featured topics present skill development as an ongoing process spanning design, engineering, communication, and strategy. The practical takeaway is to treat craft and collaboration as core product skills. Teams can improve their work by communicating clearly, aligning early, experimenting freely, and maintaining high standards even when new tools make development faster.

developer-handofffigmaaisoftware-development+2

figmaMar 31, 2025

The Designer's Handbook for Developer Handoff | Figma Blog (opens in new tab)

Design-to-development handoff works best as an ongoing collaboration rather than a final transfer of files. Designers and developers bring different priorities—elegance and consistency versus performance and stability—so teams should involve engineering early, communicate openly, and agree on what “good” means. The article organizes this collaboration around aligning on the product, choosing how to build it, sharing vocabulary, and clarifying design intent. ## Align on What You’re Building - Involve developers during wireframing or early feasibility checks, when design ideas are still easy to change. - Early engineering input can: - Clarify scope and technical constraints - Reveal difficult implementation logic - Identify opportunities to reuse or extend existing functionality - Prevent costly rework later - Use wireframes in Figma or FigJam to make ideas concrete without overcommitting to visual details. - Figma is suited to more structured, concrete visuals. - FigJam supports exploratory thinking and feedback from outside collaborators. - Less realistic wireframes help teams focus on user flows and overall direction instead of prematurely debating polish. ## Ask Developers Targeted Questions - Developers may notice redundant work or reusable patterns, but designers often need to prompt them explicitly. - Ask about: - Constraints and possible friction in the data layer - Missing states in a sequence of screens - Existing product patterns that could be reused - Asking these questions turns developers into proactive design partners rather than people who only implement finished screens. ## Work Within Developer Workflows - Developers frequently switch contexts and need uninterrupted time to reach a productive flow state. - Designers can build trust and improve collaboration by understanding how developers work and meeting them in their existing tools and processes. - The article also points to shared artifacts, such as using code blocks in FigJam to align on component APIs in design-system documentation and development workflows. ## Broader Collaboration Principles - Effective handoff depends on curiosity, continuous communication, and a shared point of view about quality. - The remaining focus areas are deciding how the design should be built, adopting a shared language, and explaining design intent in ways that account for the developer experience. Designers should treat handoff as a shared problem-solving process, involving developers early and asking precise questions about constraints, states, reuse, and implementation. This reduces rework while producing designs that are both ambitious and practical to build.

developer-handofffigmadesign-systemsfigjam+2

figmaDec 15, 2021

Frame 2021: design by the numbers | Figma Blog (opens in new tab)

Figma’s 2021 data shows how remote and hybrid work reshaped design collaboration. Teams increasingly worked across borders and included product managers and developers earlier, using FigJam for ideation and Figma for interface design and handoff. The overall trend was toward a more open, continuous design process spanning idea to implementation. ## Building Across Borders - Figma users represented 235 countries and territories. - Collaboration activity grew across regions and time zones as organizations adopted virtual-first and hybrid work. - In the U.S., New York and California remained major collaboration hubs, while Washington and Texas gained activity. - Globally, the U.S. and Russia were established hubs, with India, Brazil, and Indonesia increasingly active. - Nearly 14% of collaboration occurred between different continents, up from 8% in early 2020. - Examples included teams collaborating between Madrid and Wellington, and between Beijing and Buenos Aires. ## From Ideas to Shipped Products - About 52% of users collaborated with others in 2021. - Shared files had a median of four invited collaborators. - Product managers and developers were the largest groups of Figma users outside designers. - FigJam supported early-stage brainstorming and freeform exploration before teams moved into Figma to build interfaces. - Around 15% of active FigJam users began with templates, with brainstorming templates the most popular. ## A More Open Design Process - The first collaborator viewed a Figma file an average of 10 days after creation, compared with 19 days in 2019. - This suggests cross-functional partners were being involved earlier in design. - Developers participated in 40% of collaborative files. - When developers joined, handoff typically began 33 days after design creation and continued for 45 days after the first code inspection. - Handoff activity often continued well after the final design edit. ## Collaboration Beyond Design - Teams increasingly used digital tools for activities traditionally held in person. - FigJam supported stand-ups, icebreakers, roadmapping, retrospectives, and other team exercises. - The shift reflects a broader move toward virtual-friendly collaboration across the entire product development process. Figma’s findings recommend treating design as a shared, end-to-end process rather than an isolated stage. Bringing cross-functional partners into FigJam and Figma early can improve collaboration across locations, disciplines, and the full path from concept to code.

developer-handofffigmafigjamdesign-collaboration+2

figmaJun 23, 2020

How to evaluate design tools | Figma Blog (opens in new tab)

Choosing a design tool should be treated as a structured team project, not a simple feature comparison. The right choice depends on factors such as team size, remote distribution, workflow, collaboration needs, and existing pain points. Figma recommends a phased process that typically takes about a month and combines stakeholder input, defined criteria, hands-on testing, and documented feedback. ## Phase 0: Lay the Groundwork - Treat the evaluation like a product launch or design sprint and include it in the team’s quarterly planning. - Create a workback schedule, allowing roughly: - Two weeks for preparation - Two weeks to test tools on short-term projects - Set a firm decision deadline so the process can end early if one tool clearly stands out. - Identify stakeholders across design, product, development, marketing, and project approval teams. - Consider forming a cross-functional working group with regular check-ins and a shared communication channel. - Document milestones, formal feedback, and informal observations in a shared workspace. - Set expectations that adopting a new tool may require several weeks of ramp-up before productivity returns to normal. ## Phase 1: Define the Problem - Clarify what the team actually needs before comparing specific products. - Consider team characteristics such as: - Size and expected growth - Whether members work in one office or remotely - Onboarding and scalability requirements - Identify concrete pain points in the current workflow, including moments where collaboration breaks down. - Gather feedback from people outside the immediate design team, especially developers, product managers, and marketers. - Focus on specific scenarios such as developer handoff rather than vague dissatisfaction. ## Phase 2: Establish Evaluation Criteria - Convert the team’s needs and pain points into a small number of priority themes. - Productivity is one important theme, covering activities such as: - Individual design work - Sprint planning - Design critiques - Developer handoff - Match criteria to the team’s circumstances: - Large teams may prioritize consistency, shared libraries, and design-system support. - Fast-growing teams may emphasize onboarding and scalability. - Distributed teams may place greater weight on collaboration and communication. The practical recommendation is to invest in preparation before testing tools. A documented, stakeholder-informed evaluation helps teams choose software that fits their real workflows and reduces the disruption and cost of a poorly planned migration.

developer-handofffigmadesign-systemscollaboration+2

figmaJun 20, 2018

Figma 3.0 (!) | Styles, prototyping++ and design at scale | Figma Blog (opens in new tab)

Figma 3.0 aims to replace fragmented, desktop-based design workflows with a unified web platform. Its major additions—more capable prototyping, shared styles and libraries, and an Organization tier—help teams keep designs, feedback, prototypes, and systems connected. The overall goal is to reduce tool switching, synchronization work, and redundant subscriptions. ## More Capable Prototyping Figma 3.0 expands prototyping so teams can create realistic interactive experiences directly from their designs: - **Device frames** provide context for designs across iPhones, Android devices, and Apple Watch. - **Fixed objects** keep headers, footers, status bars, and buttons attached to frame edges during scrolling. - **Scrollable areas** support nested frames, vertical lists, horizontal carousels, and scrolling in any direction. - **Transitions** such as dissolve, slide, and push make prototypes resemble native mobile applications. - Prototypes remain synchronized with the underlying design, eliminating screen exports and manual updating. - Comments stay linked to the design, while prototypes can be presented from a mobile browser. - Figma is also investing in an API for integrations with other prototyping tools and web applications. ## Styles and Team Libraries Figma Styles is now generally available, following extensive user research and a private beta. - Styles and Team Libraries allow companies to create and maintain shared design systems. - Teams can centralize reusable visual attributes and apply them consistently across projects. - The feature is intended to reduce inconsistencies and help organizations manage company-wide design standards. ## Organization Tier Figma is previewing a new Organization tier designed for larger companies. - It focuses on scaling design management across large organizations. - Together with shared components, commenting, developer handoff, and web-based collaboration, it is intended to support moving most of a team’s workflow into Figma. Figma 3.0’s practical recommendation is to consolidate design, prototyping, feedback, and design-system management in one web-based environment, while using Figma’s API when specialized integrations are still necessary.

developer-handofffigmadesign-systemsprototyping+3

figmaJun 12, 2018

A Sketch user's perspective on switching to Figma | Figma Blog (opens in new tab)

After using Figma for a month, Marco Pacifico argues that Sketch teams—especially distributed product teams—could gain substantially by switching. Figma combines Sketch-like design capabilities with prototyping, collaboration, developer handoff, version control, and cloud storage in one web-based tool. Its central advantage is reducing the syncing, uploading, and coordination overhead that slows design iteration. ## Web-Based Design and Real-Time Collaboration - Figma runs in browsers, with native apps available for offline work. - Work is automatically saved to a shared cloud space, eliminating manual file organization and updates. - A single URL serves as the source of truth for designers, developers, and stakeholders. - Teams no longer need to repeatedly upload screens, sync files, or distribute PNGs. - The author reports that Figma feels at least as performant as Sketch, including with large files. ## A Replacement for the Sketch Ecosystem The article presents Figma as combining the capabilities of several tools traditionally used alongside Sketch: - Sketch-like drawing tools and interface. - Clickable prototyping comparable to Craft and InVision. - Built-in comments, tagging, resolution tracking, and Slack integration. - Developer handoff with dimensions, styles, and downloadable assets. - Version history that allows users to restore or fork earlier designs. - Multiplayer editing with visible cursors and real-time drawing. - Live viewing of another collaborator’s screen and cursor. - Flexible components, intuitive constraints, and shared team libraries. - Dropbox Paper embedding. ## Faster Design Iteration - Designers can conduct reviews, make changes, and receive immediate feedback in the same file. - Iteration can shrink from days to minutes because teams avoid: - Re-uploading screens to InVision. - Reordering prototype screens after synchronization. - Waiting for teammates in other time zones to commit or upload work. - Recovering from broken third-party plugins after software updates. - Changes are visible immediately, so there is no separate synchronization step between the design file and prototype. ## A More Inclusive Design Process - The design file becomes a shared space where team members and stakeholders can discuss work directly. - Anyone with the link can participate through comments and collaborative review. - Real-time access makes design discussions more seamless and reduces barriers between distributed teammates. ## Practical Recommendation For teams currently assembling Sketch, Abstract, InVision, Craft, Zeplin, and collaboration tools into one workflow, the author recommends evaluating Figma as a unified alternative—particularly when rapid iteration and distributed collaboration are priorities.

developer-handofffigmadesign-systemsprototyping+3

figmaDec 6, 2017

More time, more money: How Figma accelerates agency workflow | Figma Blog (opens in new tab)

Figma helped Unfold, a 10-person Florida design agency, reduce versioning, collaboration, and handoff problems by keeping work in a shared cloud platform. Its browser-based workflow lets clients, designers, and developers access the same up-to-date files regardless of operating system. Founder Eddie Lobanovskiy estimates the agency saves at least 30% of its communication time and can take on more client work. ## Replacing File Conflicts with Cloud Collaboration - Before Figma, Unfold struggled with overwritten files, conflicting versions, and a patchwork of plugins. - Figma’s cloud-based files provide a single source of truth accessible through a URL. - Teams can share designs, collect feedback, and collaborate without requiring everyone to use the same computer or software. - Unfold used Figma’s Sketch importer to move existing projects into the platform. ## Keeping the Entire Design Process in One Place - Clients can join live brainstorming sessions through Figma’s multiplayer functionality. - Designers and clients can work simultaneously in the same document, accelerating idea generation. - Mood boards are created directly in Figma by dragging images from the web into project files. - High-fidelity designs remain available at the same URL, eliminating repeated exports and uploads. - Pinned comments keep feedback attached to the relevant design frame rather than scattered across email or messaging tools. ## Simplifying Developer Handoff - Previously, Unfold had to accommodate developers using non-Mac computers and sometimes convert files to PSD through Illustrator, which damaged layer structures. - Figma’s code mode lets developers inspect designs, export assets, and retrieve CSS, Android, and iOS specifications. - Developer access remains synchronized with the latest design automatically. - Developers can use view-only access, so clients do not necessarily need paid editor accounts. - Cross-platform access removes the need to persuade clients or developers to purchase specific software or hardware. ## Taking on More Work - Figma made Unfold’s workflow faster and more fluid by reducing administrative and coordination overhead. - The agency found projects more pleasant to manage and felt capable of serving more clients. - The main business benefit was not only saved time, but also fewer process disruptions and smoother collaboration. Figma’s shared, cross-platform workspace gave Unfold a practical way to centralize design, feedback, prototyping, and developer handoff—helping the agency communicate less, move faster, and increase its capacity.

developer-handofffigmaprototypingandroid+4

figmaJul 24, 2017

Figma 2.0: Now with Prototyping and Developer Handoff | Figma Blog (opens in new tab)

Figma 2.0 expands Figma from a collaborative design tool into a platform for entire product teams. Its two major additions—prototyping and developer handoff—reduce the need to export designs, synchronize files, or rely on separate tools. The release reflects Figma’s broader goal of helping teams build software together around a shared, cloud-based source of truth. ## From Designer Collaboration to Team Collaboration - Figma 1.0 focused on cloud-based design, multiplayer editing, and shared component libraries. - User feedback showed that designers also needed to collaborate with marketers, executives, and engineers. - Figma 2.0 therefore aims to empower entire teams, not just designers working together. ## Integrated Prototyping - Prototyping lets designers present work, gather feedback, secure approval, and test interfaces without leaving Figma. - Figma initially avoided building prototyping features because specialized tools already served that market. - Users wanted to design and present from the same document, maintaining one continuously updated source of truth. - The feature emphasizes slideshows and interactive hotspots rather than advanced motion graphics. - Prototypes update in real time as the underlying design changes, eliminating exporting and syncing. - Designers can: - Add or modify screens while others watch. - Connect frames through nodes in Prototype mode. - Turn objects or components into clickable hotspots. - Reuse hotspot behavior across component instances. - Order frames directly on the canvas for simple presentations. - Control presentations from a phone. - Figma describes prototypes as “living documents” rather than static artifacts, while remaining open to integrations with dedicated prototyping tools. ## Developer Handoff - Designers can share files with developers using view-only access. - Developers receive a Code mode in the properties panel. - Selecting an object reveals spacing measurements and redlines relative to nearby objects. - Developers can access CSS, iOS, and Android specifications. - Information is presented in both: - A scannable table of design attributes. - Generated markup or code. - View-only access means developers do not need paid editor seats, making collaboration more accessible. ## Building a Broader Platform - Figma positions version 2.0 as an all-in-one workflow for design, presentation, and implementation. - The company acknowledges that teams have different tools and processes. - Future plans include deeper integrations and partnerships across the wider design and development ecosystem. Figma 2.0’s practical recommendation is to keep design, prototyping, and developer collaboration in one shared cloud document whenever possible, while continuing to integrate with specialized tools for workflows Figma does not fully cover.

developer-handofffigmaprototypingandroid+3

figmaJun 4, 2017

How one designer escaped the export-upload abyss | Figma Blog (opens in new tab)

The post argues that traditional designer-developer handoff creates unnecessary work, outdated files, and communication problems. At Pivotal, designer Colby Sato replaced repeated image exports and uploads with Figma’s browser-based, collaborative workflow. This saved roughly two days per project and made design critiques more focused and efficient. ## The Export-and-Upload Problem - Colby exported design frames as images and uploaded them to Pivotal Tracker engineering cards. - He repeated this process 15–20 times per project as designs evolved. - Searching through hundreds of engineering cards was time-consuming. - Missed updates sometimes caused engineers to implement outdated designs. - The process wasted developer time and made collaboration frustrating. ## Figma as a Shared Source of Truth - Figma files were accessible in the browser, always current, and shareable through links. - Colby could add a Figma link when creating an engineering card instead of updating images repeatedly. - Comments attached directly to design frames provided functional context. - The workflow eliminated uncertainty about which design version engineers should use. - Colby estimated it saved him two days of work per project. ## More Effective Design Reviews - Pivotal’s weekly critiques had previously relied on post-it notes and verbal explanations. - Figma comments stayed attached to the relevant design, making feedback easier to understand. - Colby could observe where engineers were focusing in the file through their cursor activity. - He could redirect reviewers toward areas where feedback was most valuable. - Reviews became faster, more contextual, and more collaborative. Figma ultimately shifted Pivotal’s focus from tracking files and feedback to improving the product itself. The post recommends using a shared, continuously updated design workspace to reduce handoff friction and enable stronger collaboration between designers and engineers.

developer-handofffigmadesign-systemsui-design+2

figmaMay 21, 2017

How Braintree Cut Time Spent on Design Critiques by 50% | Figma Blog (opens in new tab)

Braintree redesigned its critique process by replacing static presentations and follow-up meetings with real-time collaboration in Figma. Designers worked together in the same file during Slack audio calls, making and demonstrating changes immediately. This cut critique time by roughly 50% while also improving collaboration and simplifying developer hand-offs. ## Challenges with Traditional Critiques - Designers typically presented work, collected feedback, and worked alone afterward. - Feedback could be misunderstood or difficult to apply correctly. - Follow-up meetings were needed to review revisions and address new issues. - After PayPal acquired Braintree, multiple design teams, style guides, services, and developer groups increased coordination complexity. ## Finding Figma - Braintree’s Developer Experience team experimented with new critique methods. - Figma’s browser-based, collaborative files allowed designers to work together regardless of device or location. - Designers joined an audio Slack call and opened the same file instead of scheduling several in-person meetings. - Figma’s observation mode let one designer follow another’s screen and move through different frames in real time. ## Collaborative Work Instead of Static Feedback - Designers could duplicate an artboard and make changes while discussing the design. - Feedback became concrete and immediately understandable rather than being recorded as notes for later. - Team members brainstormed, explored alternatives, and combined the strongest elements of multiple designs. - Craig Wattrus estimated that critiques took 50% less time because collaborators could demonstrate ideas directly. - The process often produced better results than one designer working independently and applying feedback later. ## Faster Developer Hand-off - Designers shared a single link with developers instead of repeatedly exporting updated files. - Designers could explain interactions and demonstrate behavior directly in the shared file. - Developers received answers immediately, reducing long message exchanges. - Design and engineering teams needed fewer meetings to clarify how interfaces were intended to work. Braintree’s experience suggests that real-time, shared design files can turn critiques into productive collaboration sessions. Teams looking to reduce review cycles and improve design-to-development communication should consider working together directly in the design artifact rather than relying on presentation-based feedback.

developer-handofffigmaslackreal-time-collaboration+2