real-time-collaboration

38 posts

figma

6 Designs That Reimagine How We Interact With Software | Figma Blog (opens in new tab)

This Figma Make-a-thon showcase argues that software interaction can become more expressive, playful, and socially connective when designers rethink familiar conventions. The winning projects use technology to recreate communal crafts, enable hands-free control, and expand physical experiences beyond traditional limits. Together, they suggest that creativity and emotional connection—not just speed and efficiency—should shape digital experiences. ## Collaborative Embroidery: Common Thread - Charlota Blunárová’s winning project adapts the tradition of handmade samplers into a shared online canvas. - Visitors choose thread colors and stitch types, then contribute to a communal embroidery piece alongside strangers. - The project deliberately imposes constraints: one shared canvas becomes more meaningful as people add to it over time. - More than 100,000 stitches have been added, turning the site into an evolving, collectively authored artifact. - Blunárová built the real-time collaboration and canvas interactions in Figma Make despite having no engineering background. - Her process began with the desired feeling and used visual references, including logos and color palettes created in Figma. ## Hands-Free Interaction: Pucker - Aleyna Çatak’s “Pucker” replaces tapping and voice commands with head movements and a lip gesture. - Users tilt their heads to move through an interface, hold still to select an item, and pucker their lips to confirm. - The concept is designed for situations where users’ hands are occupied, such as cooking, knitting, or designing. - It also points toward more accessible interfaces that can be operated without touch or speech. - Pucker uses a device’s front camera for real-time tracking and states that no data is stored or transmitted. - Çatak describes it as a flexible interaction layer rather than a finished product, potentially adaptable across apps and platforms. - Her advice is to understand basic coding concepts so prototypes can be refined and troubleshot more effectively. ## A Remote Photo Booth: Duet Booth - Paige Latimer reimagines the traditional photo booth as a remote, asynchronous experience. - Duet Booth allows two people in different places—or participating at different times—to take photos that are combined into one photo strip. - The project preserves the photo booth’s sense of immediacy and shared participation while removing its physical and geographic constraints. - Latimer recommends concentrating on the core interaction before polishing visual details, giving the rest of the design a strong foundation. The projects presented in the article demonstrate how Figma Make lowers the barrier to prototyping ambitious ideas. Designers can use it to turn emotional concepts, alternative input methods, and collaborative rituals into working experiences—provided they begin with a clear sense of the feeling or interaction they want to create.

figma

Introducing Figma Make: A New Way to Test, Edit, and Prompt Designs | Figma Blog (opens in new tab)

Figma Make is Figma’s new prompt-to-app tool for turning designs into interactive, testable experiences. It allows designers and product teams to start with existing Figma frames, add behavior through natural-language prompts, and iterate collaboratively without rebuilding everything in code. Figma’s goal is to make exploration faster while preserving design intent, structure, and craft. ## Start with Existing Designs - Users can copy frames from Figma Design into Figma Make, including their structure and metadata. - Natural-language prompts transform static designs into interactive prototypes. - The tool is designed to support the entire design process, from early sketches to developed prototypes. - Figma Make currently uses Claude 3.7 Sonnet, with additional models planned. ## Turn Static Designs into Interactive Experiences - Add animations, interactive buttons, and real-time feedback without complex coding. - Test features using dynamic data, including file uploads and data visualizations. - Adapt designs across platforms and form factors, such as converting a mobile app design into a desktop version. - Future capabilities are expected to include third-party database integrations and design-system support. ## Real-Time Collaborative Exploration - Figma Make is built into the Figma platform and supports multiplayer collaboration. - Designers, product managers, and other team members can add features, test interactions, and incorporate data in the same file. - By reducing the need for coding expertise, it enables broader participation in product exploration. ## Point-and-Prompt Editing - Users can select a specific element and describe the desired behavior, such as animating a button or responding to scrolling. - This approach connects design intent directly to functional implementation. - Figma Make preserves component hierarchies and design-system structure while adding interactive behavior. ## From Canvas to Code and Publication - Figma Make connects with existing Figma workflows, including Figma Design and Figma Sites. - Teams can move from concept to prototype to published site without switching tools or recreating work. - The workflow is intended to provide a continuous path from visual design through implementation. Figma Make is positioned as a complement to—not a replacement for—traditional design work. Its practical value is in helping teams validate ideas sooner, explore more alternatives, and communicate functionality while retaining the original design’s structure and intent.

figma

Everything You Need to Know About Figma for Government | Figma Blog (opens in new tab)

Figma for Government is now FedRAMP Moderate certified, allowing U.S. federal agencies to use Figma’s collaboration and design tools in a secure, privacy-focused environment. The platform is intended to help agencies replace siloed workflows with a shared process spanning ideation, design, prototyping, and development. Figma argues that improving how digital services are built is essential to creating more accessible, consistent, and effective experiences for citizens. ## FedRAMP Certification and Product Availability - Figma for Government meets the federal government’s security and privacy requirements at the Moderate level. - The offering includes: - Figma Design - FigJam - Dev Mode - Figma Slides, planned for a future release - The certification builds on Figma’s earlier commitment to achieving FedRAMP status. ## Why Figma Built a Government Offering - Government agencies increasingly need to provide healthcare, assistance, and other services through seamless digital experiences. - Federal digital-first policies emphasize accessibility, consistency, and ease of use. - Siloed tools and disconnected teams can reduce efficiency and produce less usable products. - Figma for Government aims to give agencies secure access to the same collaborative workflows used by leading private-sector organizations. ## Government Use Cases and Examples - More than 100 government agencies and contractors already use Figma to modernize their processes. - Examples include: - The National Park Service creating an app for 431 parks and monuments. - Amtrak streamlining systems for more than 20,000 employees and 28 million passengers. - Agencies working on passport, visa, taxpayer, and citizenship services. - The official United States Web Design System design kit contains 42 components built with variables and smart layouts. - A shared Figma link gives teams a common source of truth for viewing, editing, and commenting on work. ## Collaborative Planning with FigJam - FigJam supports real-time and asynchronous collaboration for distributed teams. - Agencies can use it to: - Brainstorm ideas - Build project roadmaps - Map user journeys - Align stakeholders around strategy - Keeping planning materials in one shared workspace helps teams communicate across locations and time zones. ## Design Alignment with Figma - Designers, developers, product managers, executives, and other stakeholders can access the latest design files. - Teams can move efficiently from wireframes to prototypes, reviews, and refinements. - Shared feedback reduces delays and keeps everyone aligned on design direction. - Design systems help agencies maintain consistency, quality, and recognizable brand identities. ## Connecting Design and Development with Dev Mode - Dev Mode provides a shared space for designers and engineers. - It is designed to reduce misunderstandings about design intent, changes between iterations, and how designs map to code. - By connecting design and development workflows, agencies can reduce clarification work and move products toward implementation more efficiently. Figma for Government is best suited to agencies seeking a secure, centralized environment for collaborative digital-service development—from early planning through engineering handoff and implementation.

figma

Why Devs Should Play an Active Role in Design | Figma Blog (opens in new tab)

Developers should participate actively in design rather than treating design files as read-only specifications. Nicholas Villapiano argues that Figma’s Dev Mode reduces friction, improves confidence, and creates a shared workflow between designers and developers. Teams should advocate for these tools because they understand day-to-day collaboration problems better than management often does. ## Shared Tools Create a Common Language - Dev Mode gives developers a dedicated space within Figma instead of forcing them to work cautiously in designer-oriented files. - It treats developers as contributors to the product process, not merely implementers of finished designs. - Figma’s Auto Layout offered an early example of shared understanding by resembling CSS Flexbox and making designs behave more like responsive web layouts. - Dev Mode extends that connection into a broader framework for collaboration between design and engineering. ## Developers Should Advocate for Better Workflows - Managers may not see the practical pain points developers encounter when translating designs into code. - Developers already advocate for change through GitHub issues, pull requests, and technical discussions, so they should apply the same behavior to design and collaboration tools. - Useful opportunities to raise these needs include one-on-ones, sprint retrospectives, and team meetings. ## Exploring Designs Without Fear - Dev Mode is read-only by default, preventing accidental edits or deleted work. - This works much like branch protection on `main`: developers can investigate freely without risking the source file. - Greater confidence encourages developers to explore designs instead of avoiding or cautiously navigating them. ## Comparing Design Changes Clearly - Dev Mode provides version history and visual comparisons similar to Git commit history and pull requests. - Developers can see what changed, when it changed, and who made the change. - Differences become an actionable checklist, such as updating copy, adjusting margins, or adding a component variant. ## Reducing Context Switching - Developers often lose time switching between design files, documentation, and code. - Dev Mode and related tools such as Code Connect aim to bring implementation details closer to the design workflow. - Centralizing relevant information can reduce the “tab-switching tax” and make design-to-code work more efficient. ## Practical Recommendation Developers should actively evaluate and promote shared design-development tools like Dev Mode. By creating safer exploration, clearer change tracking, and a common language around implementation, teams can improve productivity, collaboration, and morale.

figma

Figma and Adobe are abandoning our proposed merger | Figma Blog (opens in new tab)

Figma and Adobe jointly ended their proposed acquisition after 15 months of regulatory review, concluding that approval was no longer achievable. Although the merger was intended to accelerate both companies’ impact, Figma will remain independent and explore future partnerships with Adobe. CEO Dylan Field framed the decision as a renewed opportunity to pursue Figma’s original mission: helping people turn ideas into digital products. ## Why the Merger Was Abandoned - The companies spent thousands of hours addressing regulators’ concerns worldwide. - Despite explaining the differences between their businesses, products, and markets, they no longer saw a viable path to approval. - The decision was made jointly, ending the pending acquisition. ## Figma’s Progress During the Review - Figma continued shipping products despite the uncertainty surrounding the acquisition, including: - Native AI features for FigJam - Dev Mode for improving the handoff between designers and developers - Variables - Advanced prototyping - The company also: - Opened new hubs in the United Kingdom and Asia - Hosted Config 2023 in San Francisco - Acquired AI startup Diagram - Added more than 500 employees ## Figma’s Independent Direction - Figma will continue operating as an independent company. - The company remains focused on eliminating the gap between imagination and reality. - Field sees the growth of the digital economy and advances in AI as making this mission more urgent and attainable. - Figma aims to support the entire product-development process on a single multiplayer canvas, from ideation through production. Figma’s practical next step is to maintain its independent momentum, deepen its design-to-development platform, and use AI and collaboration tools to help more people build digital products.

figma

Why Roles Are Not Rules | Figma Blog (opens in new tab)

Figma CTO Kris Rasmussen argues that engineering roles should guide collaboration, not restrict who participates in product decisions. As products become more collaborative and nonlinear, engineers must contribute not only to implementation but also to deciding what to build. However, collaboration works best when teams balance broad input with clear ownership, milestones, and momentum. ## Collaboration Beyond Traditional Roles - Modern product development is increasingly multiplayer, shaped by: - Web technologies such as WebGL and WebAssembly - Collaboration tools like Google Docs - Hybrid and remote work - Engineers are no longer simply responsible for executing plans created by product managers and designers. - At Figma, engineers help determine both: - **How** to build products - **What** to build - Cross-functional collaboration includes working closely with product peers and incorporating customer feedback. ## Early, Open Design Work - Teams are encouraged to gather diverse perspectives at the beginning of a project. - Engineers write down early ideas in concept documents rather than waiting until proposals are polished. - Feedback is collected during the drafting process, allowing designs to evolve collaboratively. - This approach helps expose problems earlier, though it can be difficult to obtain timely feedback from teams focused on their own work. ## Engineering Crits as Feedback Forums - Figma holds regular engineering “crits” across design and engineering organizations. - Crits provide: - Early and frequent feedback - Expert input on technical designs - A dedicated forum for cross-team participation - They are explicitly **not approval meetings**: - No decisions need to be finalized during the session. - Participants identify problems and improve designs without immediately choosing a solution. - Figma uses FigJam so participants can collaborate in real time. - The goal is to improve a proposal until it no longer requires formal approval. ## Balancing Input with Direction - Collaboration can become counterproductive when teams receive too many conflicting ideas. - Excessive feedback may cause projects to: - Lose focus - Get stuck in endless exploration - Struggle with ambiguous tradeoffs, such as defining an initial pricing model - Teams need a balance between: - Diverging to explore possibilities - Converging to make progress - The right balance depends on the organization, culture, product, and desired outcomes. ## Milestones and Momentum - Figma breaks projects into clearly defined milestones. - Milestones help: - Set expectations with stakeholders - Signal when exploration should give way to decisions - Preserve forward momentum - Momentum makes goals feel attainable, while losing momentum can cause teams to question their direction and spin in circles. The practical lesson is to treat roles as areas of responsibility rather than rigid boundaries. Invite collaboration early, use structured forums for feedback, and establish milestones that make it clear when the team must stop exploring and move forward.

figma

How Figma Draws Inspiration From the Gaming World | Figma Blog (opens in new tab)

Figma’s technology shares more with a game engine than a traditional web application. Like games, it combines graphics rendering, interaction, multiplayer, animation, and other systems to create a responsive digital world. This architecture, along with close collaboration across engineering, design, product, and research, enables Figma and FigJam to support complex creative work in real time. ## Engineers as Digital World-Builders - Game engines combine foundational systems such as: - Graphics and rendering - User controls - Multiplayer - Physics and collisions - Animation - Artificial intelligence - Combat or other specialized mechanics - Figma similarly builds a 2D graphics and rendering system for the web. - Engineers ensure that text, shapes, and lines appear correctly while users pan and zoom across a canvas. - Collaboration is central to Figma, so its real-time collaboration engine is called “multiplayer,” inspired by cooperative games. - Figma and FigJam are built from many interacting “systems,” including: - Multiplayer editing - Spring animations - Audio and cursor chat - Component Variants - Plugins and widgets - Because these systems must run efficiently in browsers and mobile apps, Figma uses a game-engine-like stack rather than a conventional web stack. - The canvas is written in C++ and compiled to WebAssembly, helping address memory and performance constraints. ## Creativity Requires Systems-Level Collaboration - Game developers work closely with artists and designers to refine both technical behavior and user experience. - Figma follows a similar model, with engineers collaborating across product management, design, data science, and research. - Interdependent systems create emergent behavior: changing one system can affect many others. - The article compares this to *The Legend of Zelda: Breath of the Wild*, where fire can provide warmth and food, cause damage, or help defeat enemies. - Figma’s complexity produces comparable interactions, where an apparent problem in one feature may actually result from behavior elsewhere in the system. - This systems-level collaboration helps teams investigate unexpected failures and improve the overall product rather than treating each feature in isolation. Figma’s game-inspired approach is both architectural and cultural: build modular, interacting systems, optimize for real-time performance, and involve diverse disciplines in solving problems. Teams building similarly complex collaborative tools can benefit from treating the product as a living digital world rather than as a collection of disconnected web features.

figma

Raising the (table) stakes on tables in FigJam | Figma Blog (opens in new tab)

FigJam introduced native tables to make roadmapping, planning, and organizing information clearer and easier to edit collaboratively. The team deliberately focused on visual presentation rather than complex data manipulation, prioritizing simplicity for both table creators and viewers. Building the feature required extensive work on multiplayer conflict resolution, responsive editing controls, and visual clarity at different zoom levels. ## Why FigJam Needed Tables - Internal teams were already creating tables with stickies and shapes for: - Feature requirements and prioritization - Project tracking - Product marketing messaging - Design critique feedback - Brainstorming and vote counting - Native tables improve performance and reduce the effort of assembling makeshift grids. - The core requirements were to make tables: - Clear - Easy to create - Editable by everyone - FigJam intentionally avoided becoming a complex spreadsheet or data-manipulation tool. ## Designing for Creators and Users - The team treated table creation and table editing as equally important experiences. - A single toolbar click creates a pre-styled table, similar to other FigJam elements. - Users can choose from a limited style palette, while the entire table remains visually consistent. - Adding rows or columns derives styling from the neighboring row or column. - Changing a table’s color automatically adjusts its text for readability. - Programmatically drawn borders help separate cells without creating excessive visual noise. ## Multiplayer Editing Challenges - Tables may contain many cells edited simultaneously by users at different zoom levels. - Unlike ordinary elements, simultaneous table edits cannot simply use “last update wins” behavior. - Changes often need to be merged so multiple users’ contributions are preserved. - Multiplayer support consumed at least half of the engineering effort. - The team spent months addressing concurrency bugs and edge cases, including collaborative typing in the same cell. - Testing included simulated second users, such as a script that repeatedly typed “FigJam.” ## Interaction Design for Collaborative Tables - Standard FigJam selection-based editing became visually overwhelming when multiple people edited different cells. - The team changed table behavior in two important ways: - Editing controls appear on hover and follow the user’s cursor. - A prominent button lets users add a complete row or column. - Table functionality adapts to zoom level: - At distant zoom levels, users can move and arrange the table. - At closer zoom levels, they can resize it and add rows or columns. - This approach keeps the interface uncluttered while exposing more controls when they are useful. The resulting feature keeps tables intentionally simple and presentation-focused while making them native to FigJam’s collaborative, visual environment. For teams that need lightweight planning, tracking, or structured brainstorming, native tables are preferable to building grids manually from shapes or sticky notes.

figma

Welcome to the WIP | Figma Blog (opens in new tab)

Modern digital products are never truly finished, so product development rarely follows the neat sequence of research, brainstorming, design, testing, and launch. Figma argues that teams should embrace this “work in progress” reality, sharing work earlier and designing workflows around continuous collaboration. The challenge is managing changing feedback and uncertainty without waiting for a mythical perfect moment to review or finalize work. ## Digital Products Are Always Works in Progress - Physical product development historically required a linear process because changes were expensive and slow. - Digital products can be updated quickly, making iteration continuous rather than stage-based. - Browser-based tools let collaborators access and modify the same file in real time. - Early sharing lowers the stakes: labels such as “[WIP]” signal that feedback is welcome and the work is not final. ## The Benefits and Confusion of Continuous Collaboration - Real-time collaboration encourages teams to share unfinished work sooner. - Feedback can become outdated as designs change. - Previous approvals may no longer apply when the underlying work evolves. - Teams need better ways to stay informed, including notifications, mobile comments, and integrations with tools such as Google Calendar, Microsoft Teams, and Zoom. - Because work may never have a clearly defined final state, teams can even forget to remove “work in progress” labels after launch. ## Review Work on a Predictable Cadence - In an always-changing workflow, it is difficult to identify the perfect time to involve stakeholders or leadership. - Teams may be tempted to wait until the problem, solution, or product feels sufficiently complete. - Figma recommends predictable, intentional reviews—such as regular weekly critiques—instead of waiting for a supposedly ideal milestone. - Frequent check-ins help teams build confidence progressively while keeping feedback connected to the current state of the work. Teams should treat iteration as a normal operating condition, not a sign of poor planning. Regular reviews, clear communication, and collaboration tools can make continuous work more manageable without forcing it into an unrealistic linear process.

figma

Making multiplayer more reliable | Figma Blog (opens in new tab)

Figma improved multiplayer reliability by adding a durable write-ahead journal alongside its existing checkpoint system. Instead of relying on full-file snapshots every 30–60 seconds, Figma now records incremental changes frequently, allowing crashed servers to recover nearly to the latest state and reducing deployment-related database spikes. The goal was to reduce potential data loss from up to 60 seconds to less than one second. ## How Figma’s Multiplayer System Worked - Browsers connect to Figma’s multiplayer service over WebSockets. - The service authoritatively handles: - Validation - Ordering - Conflict resolution - Broadcasting updates to connected clients - File state is held in memory for speed. - Every 30–60 seconds, the entire file is: - Encoded into a binary format - Compressed - Uploaded to Amazon S3 as a checkpoint ## Problems with Checkpoint-Only Persistence - A multiplayer crash could lose up to 60 seconds of server-side work. - Checkpoints become increasingly expensive as files grow in size and complexity. - Redeployments caused large write spikes: - All in-memory files had to be closed. - Each file needed a final checkpoint. - The resulting burst increased database load. ## Introducing the Journal - Figma added a durable transaction log, or journal, backed by DynamoDB. - Each accepted change receives an incrementing sequence number. - Checkpoints store the latest sequence number they include. - During recovery: - Multiplayer loads the latest checkpoint. - It queries the journal for entries with higher sequence numbers. - It replays those incremental changes to reconstruct the latest file state. - Journal entries are much smaller than full-file checkpoints, since they contain only user edits. - Figma writes journal data roughly every 0.5 seconds rather than waiting 60 seconds between full snapshots. - The target was less than one second of data loss in rare failure scenarios. ## Smoother Deployments - During deployment, Figma can close connections and wait for unsaved changes to reach the journal. - The 99th percentile persistence time is under one second. - Since journal writes happen continuously during normal operation, deployments no longer create a sudden checkpoint-writing surge. - Database write load is therefore steadier and more predictable. ## Datastore and Batching Decisions - Figma selected DynamoDB because the journal requires a horizontally scalable datastore with high write capacity. - Postgres was considered but rejected because the anticipated write volume exceeded Figma’s current horizontal-scaling approach for Postgres. - Clients send updates at approximately 30 frames per second, or every 33 milliseconds. - The journal does not need that granularity, so multiple changes can be batched before being persisted, improving performance. Figma’s approach combines inexpensive, frequent incremental journal writes with larger periodic checkpoints. This provides faster recovery, minimizes data loss, and avoids deployment-related load spikes while retaining checkpoints for efficient long-term storage and features such as version history.

figma

What’s new in Figma: August 2022 | Figma Blog (opens in new tab)

Figma’s August 2022 update focused on improving collaboration, usability, and education support across Figma and FigJam. The headline release was a Microsoft Teams integration, while more than 20 smaller improvements refined everyday design and diagramming workflows. Figma also expanded its education offerings through new resources, templates, events, and Chromebook support. ## Microsoft Teams Integration - The new Figma app for Microsoft Teams lets users collaborate in Figma and FigJam without leaving Teams. - Users can: - Present files during meetings - Brainstorm and riff together - Add relevant files to Teams channels - Receive real-time feedback notifications - The integration targets the more than 270 million people who use Microsoft Teams for work. ## Usability Improvements Figma introduced more than 20 “Little Big Updates,” designed to make frequent tasks faster and more intuitive. - **Gradient editing:** Double-clicking gradients makes it easier to space gradient stops evenly and add depth to color fills. - **Frame markups:** Users can annotate frames without worrying that markings will be clipped or affected by auto layout. - **FigJam diagrams:** New prompts automatically create shapes, while connector mode remains active to speed up flowchart creation. - The updates cover shortcuts, design tools, collaboration features, and other day-to-day workflows. ## Expanding Figma for Education Figma highlighted new initiatives for educators and students through its Commons education conference. - Hundreds of educators participated in workshops, panels, and talks about collaborative classroom practices. - New education-focused FigJam sticker packs were released. - Figma launched an Education Community collection featuring classroom templates. - A monthly YouTube series, **“Study Hall,”** provides additional educational content. - Updates to the Chromebook beta allow U.S. high school districts to deploy Figma Organization to students and teachers for free. Overall, the update shows Figma investing both in major workplace integrations and in small workflow refinements. Teams, designers, and educators can benefit by adopting the Microsoft Teams app, exploring the usability improvements, and using Figma’s growing education resources.

figma

Collaboration’s next chapter with Microsoft’s Jon Friedman | Figma Blog (opens in new tab)

Figma’s integration with Microsoft Teams reflects a broader shift toward seamless, hybrid collaboration across design, communication, and productivity tools. Jon Friedman argues that distributed work expands access to global talent, while collaborative platforms give teams more equal participation and reduce duplicated effort. However, in-person interaction remains valuable for rich social connection, and adopting collaborative systems requires significant cultural change. ## Hybrid Work and Global Talent - The pandemic accelerated Microsoft’s existing shift toward a more globally distributed workforce. - Strong talent exists far beyond company headquarters, including locations such as India, China, Atlanta, and Norway. - Remote work makes it possible to promote and support high-impact employees without requiring relocation. - Microsoft’s earlier experiments with remote-work practices helped the company transition more effectively during the pandemic. ## Collaboration Tools and the Role of In-Person Work - Tools such as Microsoft Teams and Figma can sometimes enable more effective collaboration than in-person meetings. - Digital tools are relatively non-hierarchical, allowing people to participate with a stronger and more equal voice. - The next challenge is determining when in-person interaction is genuinely useful rather than assuming it should be the default. - Virtual work can support spontaneous interaction, but face-to-face meetings provide richer social signals, including body language, appearance, and mannerisms. - In-person experiences remain important for building human connection and shared rituals. ## Design Systems as Creative Infrastructure - Moving from individual contribution to collaboration-first work can require a multi-year cultural transformation. - Friedman initially worried that design systems might restrict designers who enjoy controlling every detail. - Instead, designers embraced the idea because shared systems allow them to avoid reinventing established solutions. - A strong design system is not primarily about enforcing rules; it frees creators to focus on more important problems while maintaining coherence. - Reusable tools and patterns provide a foundation for better, more ambitious work. ## Integrated Tool Chains - Using Figma alongside Teams’ chat and video capabilities allows teams to design, discuss, and iterate in the same ecosystem. - Collaboration can happen synchronously or asynchronously, with fewer barriers between creating and communicating. - Teams also benefits from enabling third-party companies to build on its platform. - Combining Microsoft’s communication infrastructure with Figma’s collaborative design environment supports Microsoft’s broader goal of becoming a company that builds together. The practical recommendation is to treat collaboration tools and design systems as cultural infrastructure, not merely software purchases. Organizations should combine flexible remote practices with intentional in-person interaction and use shared systems to give teams more time for meaningful creative work.

figma

Behind the build: a Q&A with developer Gavin McFarland | Figma Blog (opens in new tab)

Gavin McFarland, a freelance design consultant and developer, discusses building a FigJam table widget after first creating a popular Figma table plugin. The widget lets users manage tabular data without leaving FigJam, supporting columns, rows, data import, and sorting. His experimentation with the widget API evolved into broader questions about multiplayer collaboration, performance, and productivity. ## Gavin’s Path to Plugin Development - McFarland began by designing and building websites for friends and family. - As a freelance consultant focused on user-centered digital transformation, he regularly pushes himself to learn new tools. - After seeing someone ask for an easier way to create tables in Figma, he modified the Rectangle Creator example into his first plugin, **Table Creator**. - The plugin eventually gained tens of thousands of users. ## Building a Table Widget for FigJam - McFarland created a FigJam table widget for users who need to display and manage structured data during collaborative work. - The widget supports: - Adding rows and columns - Importing data - Sorting by columns - The goal is to keep users inside FigJam rather than requiring a separate tabular-data application. ## Learning the Widget API - He began with the FigJam notepad example and made incremental modifications to understand the API. - The project required learning JSX, which he had not previously used extensively. - After understanding the basics, he experimented with rendering rows, columns, and different visual designs. ## Collaboration and Multiplayer Challenges - What started as an API exercise became an exploration of how teams could work more effectively together. - McFarland considered: - How simultaneous editing should work when multiple people modify one table - How the interface could show that another collaborator is active - How to keep large datasets responsive during multiplayer interactions - These challenges appealed to him because they combine visual design with technical problem-solving. ## Finding Ideas Through the Community - McFarland looks for problems designers encounter in their everyday workflows. - He draws inspiration from the Friends of Figma Slack community and the broader developer community. - Conversations with other plugin creators help him exchange ideas and improve his own work. ## Focus on Practical Productivity - He hopes the widget helps people work more productively and collaborate more closely. - His broader motivation is creating tools that address real, everyday problems. - The article ends as he begins discussing another plugin, **Node Decoder**, so the remainder of that project description is not included.

figma

How (and why) we built branching | Figma Blog (opens in new tab)

Figma built branching to preserve the benefits of real-time collaboration without letting unfinished or experimental work disrupt approved designs. Branches provide isolated spaces for exploration while keeping the main file a reliable source of truth. The design prioritizes simplicity, familiar multiplayer behavior, and protection against data loss. ## The Need for Branching at Scale - Figma’s real-time multiplayer model usually helps teams work in one shared file. - As organizations grow, however, design workflows become harder to manage: - Unapproved changes can reach production code. - Work may be overwritten. - Teams may struggle to distinguish work in progress from approved designs. - Branches let designers experiment, iterate, contribute to libraries, or preview work without changing the main file. - Changes can be incorporated into the main file only after review and approval. ## Balancing Freedom and Structure - Growing design teams increasingly requested stronger version-control workflows. - Traditional branching comes from software development, where files and changes are stored locally. - Figma had to adapt the concept for cloud-based files, asking: - Whether people should continue editing the main file simultaneously. - How collaboration should work within branches. - How to introduce version control without overwhelming designers with complexity. ## Designing Around Figma’s Multiplayer Model - Figma chose a purpose-built approach rather than copying existing development tools. - Simplicity and consistency became core principles: - The main file remains multiplayer. - A branch behaves like a regular Figma file. - Existing editor and viewer permissions continue to apply. - The system emphasizes data safety so users’ changes remain protected. - Figma intentionally limited complexity, including preventing branches from being created from other branches. ## The Complexity of Merging - Merging involved more than simply resolving conflicting edits. - Figma also had to handle operational problems such as: - The file changing while someone reviews a merge. - A user losing their connection midway through the process. - These cases required safeguards to ensure merges remain understandable, recoverable, and safe. Branching is therefore presented as a structured layer on top of Figma’s collaborative model: teams can explore freely in branches while maintaining a dependable, approved main file.

figma

What’s new in Figma: September 2021 | Figma Blog (opens in new tab)

Figma’s September 2021 updates focus on making remote collaboration feel more natural and interactive. New audio, cursor chat, and high-fives let teams communicate and react without leaving Figma or FigJam. The release also adds workflow improvements for importing data, exporting visuals, editing text, and pasting assets more precisely. ## Audio Collaboration in Figma and FigJam - Users can start audio conversations directly inside a file. - Audio supports quick questions, spontaneous collaboration, working sessions, and presentations. - Figma planned to introduce beta live captions for audio in the desktop app. ## Cursor Chat and High-Fives - Cursor chat lets collaborators ask questions or send encouragement without interrupting a speaker. - FigJam high-fives provide a lightweight way to celebrate progress or conclude a meeting. - These features are designed to restore the informal reactions and social cues often missing from remote work. ## Spreadsheet Import and Export - Spreadsheet cells can be copied into FigJam and converted into sticky notes. - Selected sticky notes can be exported as a CSV file. - This is especially useful for user research and organizing feedback. ## Exporting FigJam Diagrams - Users can export selected objects or an entire FigJam file. - Available formats include PNG, PDF, and JPG. - Exported diagrams can be reused in presentations, emails, and other documents. ## Text and Layout Improvements - Line spacing for bulleted and numbered lists can be adjusted through the type details panel. - FigJam text boxes, sticky notes, and shapes can contain multiple text sizes within the same object. ## More Precise Pasting - **Paste here** places copied content at a chosen location using the right-click menu. - **Paste to replace** swaps a selected object with copied content using `Shift` plus `⌘ + V` or `Ctrl + V`. - **Multi-paste** places the same copied object in the same position across multiple selected frames or groups. Together, these updates make Figma and FigJam better suited to collaborative remote work while reducing friction in common design and workshop tasks.