Real Time Collaboration

38 posts

figmaAug 30, 20212 min readCurated summary

Talk it out in Figma and FigJam | Figma Blog

Figma introduced audio and cursor chat to make remote collaboration feel more like working together in person. These tools let teammates communicate directly inside Figma and FigJam without switching apps, while FigJam also adds high-fives for lightweight social interaction. The goal is to support both spontaneous conversations and structured, synchronous work without replacing asynchronous workflows. ## In-File Communication - Audio and cursor chat keep questions, feedback, and discussions within the shared file. - Users can: - Add a question or message to their cursor. - Start an audio conversation with teammates. - Share feedback in real time while viewing the same design or board. - The features are designed to be fast and low-friction, without downloads, phone calls, or calendar invitations. ## Recreating In-Person Collaboration - Figma aims to restore informal interactions lost in remote work, such as: - Asking a quick question at a colleague’s desk. - Brainstorming spontaneously. - Requesting feedback during a design review. - Teammates can encounter one another in a file and start a conversation directly from there. ## Lightweight Jam Sessions - Audio and cursor chat can replace a video meeting when video is unnecessary. - Teams can brainstorm in FigJam while using: - Templates to structure activities. - Timers to keep sessions focused. - Audio for live discussion. - These tools are intended to complement, not replace, asynchronous collaboration. ## Availability and Future Features - Cursor chat is available to everyone in Figma and FigJam. - FigJam users can send high-fives. - Audio was rolling out to Figma education and paid plans. - Live captions for the Figma desktop app were planned for open beta, enabling more accessible conversations and further product improvements. Figma’s recommendation is to use in-file communication for quick questions, spontaneous syncs, and focused workshops, while continuing to rely on asynchronous workflows when teammates need independent time to work.

Real Time Collaboration Figma Figjam Audio Chat+2

figmaJul 14, 20212 min readCurated summary

Keeping creativity flowing | Figma Blog

The post argues that creativity and productivity can survive difficult periods when teams make room for play, connection, and personal boundaries. Alek Mackie describes remote-work practices at Shopify that helped illustrators sustain creative energy during the pandemic. The central conclusion is that informal, inclusive human interaction can support serious work rather than distract from it. ## Make Room for Play - Creative work carries serious responsibilities, but occasional fun helps people remain happy, engaged, and inventive. - Figma’s collaborative environment can support harmless practical jokes, such as adding humorous images or fake cursors to coworkers’ files. - Briefly disrupting routine can provide the mental reset needed for a creative breakthrough. ## Design Better Team Activities Effective team-building activities should be: - **Short and easy**, ideally taking less than an hour. - **Free of serious goals or expected outcomes.** - **Optional and casual**, allowing people to observe, leave early, or decline. - **Consensual**, with the team’s interest and boundaries respected. - **Inclusive and accessible**, giving everyone an equal opportunity to participate. Examples include asynchronous creative prompts, watching Bob Ross together while painting in an online MS Paint simulator, and other low-pressure collaborative exercises. ## Create Space for Human Connection - Remote work can reduce interaction to meetings focused only on business outcomes. - Teams should intentionally create opportunities for genuine, non-work-related conversation. - Personal connection and professional effectiveness can coexist and reinforce one another. ## Use Informal Collaboration - Unplanned multiplayer sessions in Figma allow coworkers to work together while chatting, similar to sitting beside one another in an office. - People can collaborate on the same project or work independently while staying connected. - The format should adapt to individual needs: video, audio, written comments, or even silent co-working are all valid options. - Boundaries, workload, and energy levels should determine how people participate. Teams can maintain creativity during difficult times by treating play, connection, and flexibility as legitimate parts of productive work—not as distractions from it.

Real Time Collaboration Figma Figjam Remote Work+2

figmaJun 23, 20212 min readCurated summary

Figma's Series E | Figma Blog

Figma announced its Series E funding round in June 2021, led by Durable Capital Partners with participation from Morgan Stanley’s Counterpoint Global and earlier investors. The round valued the company at roughly $10 billion. CEO Dylan Field framed the funding as support for Figma’s broader mission: making design accessible, collaborative, and relevant to everyone involved in creating products. ## Series E Funding - Durable Capital Partners led the new investment round. - New investors included Counterpoint Global, Morgan Stanley’s investment group. - Existing investors such as Index, Greylock, Kleiner Perkins, Sequoia, and Andreessen Horowitz also participated. - The announcement followed 16 months of disruption and remote work during the COVID-19 pandemic. ## Figma’s Vision for Accessible Design - Figma aims to make design accessible to all, not only professional designers. - Its browser-based multiplayer model is intended to change how teams work and build products together. - The company plans to serve: - Expert designers with specialized tools - Engineers, product managers, and other product-development roles - Students and company executives - A broader community interested in creativity and visual collaboration - Field described a future with more products that help more people create and collaborate visually. ## Appreciation for the Figma Community - Field credited Figma’s employees, users, and designer community for the company’s progress. - He emphasized the team’s shared experience of working, growing, and supporting one another during the pandemic. - The company presented the funding as both an opportunity and a responsibility to continue serving its community. Figma’s Series E marked a major financial milestone, but the company positioned it primarily as fuel for expanding collaborative, design-first product development. Its recommendation to prospective employees was clear: join the company as it broadens design beyond traditional specialists.

Real Time Collaboration Figma Product Development Design Tools+1

figmaApr 20, 20212 min readCurated summary

Coming together at Config 2021 | Figma Blog

Figma’s Config 2021 announcements focus on making design more collaborative and accessible to broader teams. The company introduced tools for brainstorming, safe experimentation, mobile review, live discussion, and large-scale participation. Together, these updates reflect Figma’s shift from a specialized interface-design tool toward a broader collaborative workspace. ## FigJam for Brainstorming - FigJam is a new whiteboard space for brainstorming, diagramming user journeys, and exploring ideas. - It includes features such as emotes and chats to recreate some of the spontaneity of in-person collaboration. - Released in open beta, it was initially free through February 2022, with planned free and paid tiers afterward. ## Branching for Safer Iteration - Branching lets users create independent versions of a file to explore ideas without changing the main design. - Teams can collaborate within branches using Figma’s multiplayer tools. - Completed work can be merged back into the main branch. - The feature is available in beta for Organization-plan customers and is intended to support design-system contributions and large-team workflows. ## Mobile Access and Review - New iOS and Android apps make files and prototypes easier to access from anywhere. - The apps improve the mirrored playback experience, helping designers preview how work appears on actual devices. - The mobile app was launched in beta, with a broader release planned. ## Audio Collaboration - Audio allows teammates to start calls directly inside Figma or FigJam. - It supports live design critiques, group brainstorming, and discussions without leaving the editor. - The feature was planned for Professional and Organization plans. ## Larger Multiplayer Sessions - Figma increased its limit to 500 concurrent users: 100 editors and 400 viewers. - The company planned to raise the limit to 1,000 users across Figma and FigJam, with 200 editors and 800 viewers. - These limits support large presentations, workshops, classrooms, and other emerging collaborative uses. ## Publishing to the Figma Community - Everyone can publish files, templates, techniques, and other resources to the Figma Community. - Users can both discover work from others and share their own contributions. - FigJam templates were highlighted as an early example of this expanded community ecosystem. Figma’s Config 2021 updates recommend a broader model of design collaboration: teams can ideate in FigJam, experiment through branching, review work on mobile, communicate through audio, and share results with the wider community.

Real Time Collaboration Figma Design Systems Figjam+3

figmaApr 5, 20212 min readCurated summary

About Figma’s new Starter plan | Figma Blog

Figma’s updated free Starter plan, launched April 21, 2021, prioritizes unrestricted multiplayer collaboration over unlimited shared files. Drafts remain an unlimited personal workspace, while team spaces gain unlimited editors but are limited to three files with three pages each. Figma concluded that removing the arbitrary two-editor cap would better let teams experience real-time collaboration. ## Changes to the Starter Plan - Drafts become a personal workspace: - Unlimited files, pages, and viewers remain available. - Co-editing requires moving a file into a team space. - Team spaces now support: - Unlimited editors. - A maximum of three files. - Up to three pages per file. - Existing files, pages, and projects created before the rollout were not moved or altered. - FigJam was also introduced to all plans with unlimited usage during its beta period. ## Why Figma Removed the Editor Limit - Collaboration is central to Figma’s browser-based product and often the main reason teams choose it. - The previous two-editor limit prevented users from experiencing the full benefits of multiplayer design. - Figma considered simply increasing the editor limit but decided any fixed number would be arbitrary. - The new approach supports teams ranging from two collaborators to dozens of teammates. ## Results from User Testing - 87% of users were excited about unlimited editors in team spaces. - Teams collaborated 29% more after the two-editor restriction was removed. - Users typically worked actively on only two or three files at a time, making the new team-space limits seem reasonable. - Unlimited files remained available in Drafts for personal work. ## Rollout and Additional Options - Figma announced the changes ahead of the April 21, 2021 rollout. - Users received notifications through email and the Figma app. - Students and educators could apply for the Figma for Education plan, which provided Professional-plan features for free. The updated Starter plan was designed to make Figma’s multiplayer experience accessible to teams of any size while reserving broader file capacity for paid plans.

Real Time Collaboration Figma Figjam Collaborative Design+1

figmaSep 21, 20202 min readCurated summary

The many dimensions of trust in design | Figma Blog

Trust is presented as the foundation of open, inclusive design collaboration. Insights from Figma’s Config Europe show that trust grows through human relationships, clear communication, transparent processes, and space for honest disagreement. Teams that invest in these practices can give better feedback, collaborate more effectively with clients, and consider the broader impact of their work. ## Building Strong Relationships - Trust starts with understanding teammates and everyone involved in product development. - Informal conversations, quick calls, and regular check-ins can build connections more effectively than relying solely on email. - A foundation of trust makes design critiques more constructive because feedback is interpreted as supportive rather than threatening. - Teams should assume positive intent and develop empathy by learning about one another’s working styles and challenges. ## Embracing In-Progress Work - Clear communication and agreed-upon operating processes help build trust with both clients and colleagues. - Real-time collaboration in Figma exposes early design work, which can make designers uncomfortable when ideas are still evolving. - Teams should establish rules for shared files, including: - Clearly marking the stage of the design process with status annotations - Indicating whether feedback is currently welcome - Specifying the level or type of feedback needed - Project documents should reflect the current state of the work so clients and internal teams remain aligned. ## Opening the Dialogue - Trust also requires conversations about design ethics, technology, and the broader consequences of products. - Rakuten Viki designer Shirley Lai created “The Designated Dissenter,” a card game that encourages people of any role or seniority to challenge team assumptions. - The game assigns one participant to object to proposed ideas and structures discussion around stakeholders, values, and ethical questions. - Deliberately making room for dissent helps teams develop an open feedback culture and consider consequences beyond immediate project goals. Building trust takes time, but teams can make steady progress by getting to know one another, defining collaboration norms, keeping work transparent, and encouraging thoughtful disagreement.

Real Time Collaboration Figma Product Design Design Collaboration+1

figmaNov 20, 20193 min readCurated summary

Figma’s infrastructure: What goes into powering a web-based design tool | Figma Blog

Figma’s infrastructure team is focused on making a web-based design tool feel as fast and reliable as a desktop application. Its cloud-based, collaborative model creates demanding networking, storage, and scaling challenges, especially as organizations grow. The company is therefore evolving from a simple but operationally intensive backend toward a more mature, horizontally scalable architecture. ## Figma’s Collaborative Design Model - Figma stores designs in the cloud, giving each file a unique URL and making it a shared source of truth. - Users can collaborate, comment, prototype, and support developer handoff without exporting files or managing separate versions. - Its multiplayer functionality allows multiple people to view and edit files simultaneously. - Files may contain complex shapes and large images, creating significant data-transfer demands. - Users accustomed to desktop design tools expect fast interaction despite Figma running in a browser. ## Limits of the Original Infrastructure - Figma’s early backend favored simple strategies that worked well for smaller teams. - The application initially loaded all shared components available to a user when opening a file. - This approach became increasingly inefficient as organizations accumulated nearly 10,000 shared design elements. - Growth among large customers and the broader user base exposed the limits of the original design. ## Reducing Interaction Latency - Figma still preloads more data than users immediately need, increasing backend load and slowing startup. - Fixing this requires more than backend optimization: the client-server interaction model must be redesigned. - The client should request information incrementally, only when it is needed. - This change also requires coordination with product teams because existing user experiences depend on preloaded data. ## Building a Horizontally Scalable Database - At the time of the article, Figma relied on a single powerful AWS database instance. - The simple architecture reflected the company’s preference for the KISS principle and had supported substantial growth. - As usage increased, the database approached its capacity limits. - Figma planned to replace it with a database layer capable of scaling horizontally, a difficult transition because nearly every system depends on the database. ## Improving International Performance - More than 80% of Figma’s weekly active users were located outside the United States. - Their latency was affected by the round-trip distance to Figma’s Oregon datacenter. - Figma planned to move selected infrastructure components closer to users around the world. - The initial step was to deploy strategically placed remote proxies globally. Figma’s broader infrastructure strategy is to preserve the simplicity that helped it move quickly while introducing selective caching, better data loading, geographic distribution, and horizontal scaling where growth demands it.

Real Time Collaboration AWS Distributed Systems Performance Optimization+2

figmaOct 21, 20192 min readCurated summary

Beyond multiplayer: Building community together in Figma | Figma Blog

Figma argues that design is becoming more open, collaborative, and community-driven beyond real-time multiplayer editing. It introduces the Figma Community, where people can publish live files for others to inspect, remix, and learn from, alongside a redesigned workspace focused on team collaboration. The beta is intended to evolve through feedback from companies, educators, governments, and independent designers. ## From Multiplayer Collaboration to Public Sharing - Figma’s multiplayer features helped normalize co-editing and involving non-designers in the design process. - The company now wants to make it easier for designers to share not only finished work, but also the underlying process and methods. - The Figma Community beta provides a public space for publishing files that anyone can inspect, remix, and learn from. ## A Community Built with Customers - Users choose which files to publish on their public profiles. - The initial licensing option is Creative Commons Attribution 4.0 International, with more restrictive licenses potentially added later. - Figma describes the release as a multi-month beta designed to gather feedback and discover how organizations will use the platform. ## Use Cases Across Organizations - **Slack:** Publishing UI kits to help partners build better Slack applications. - **Dropbox:** Sharing culture kits for design managers. - **Unsplash:** Providing avatars and visual assets for designers. - **VMware:** Making its Clarity public design system easier to use. - **City of Chicago:** Offering a public design system that citizens can remix with their own identity. - **Lambda School and Stanford d.school:** Publishing free educational templates. - **Independent designers:** Sharing presentation templates, portfolios, tutorials, and source files. - **Square Crypto:** Exploring transparent, cross-company design collaboration inspired by the openness of the Bitcoin community. ## Learning Through Inspectable Files - Designers can publish editable source files rather than only screenshots or finished exports. - David Kulakevich’s Figma artwork demonstrates how viewers can inspect individual layers and learn the techniques behind a finished piece. - This turns community sharing into both a portfolio platform and an educational resource. ## Communities Inside the Workspace - Figma is also redesigning workspaces around the people on a team. - The goal is to make important files and projects easier for team members to discover. - This reflects Figma’s broader view that design files should be organized around collaboration and community, not treated as isolated artifacts. Figma’s recommendation is effectively to treat design as an open, reusable medium: publish useful files, learn from others’ source material, and build shared systems across organizational boundaries.

Real Time Collaboration Figma Design Systems Plugins+2

figmaOct 15, 20193 min readCurated summary

How Figma’s multiplayer technology works | Figma Blog

Figma built a custom multiplayer system because traditional operational transformation (OT) was too complex for its document-editing needs. Its client/server architecture synchronizes document changes over WebSockets, supports offline editing, and separates document collaboration from other data such as comments and users. The system began as a prototype that enabled rapid experimentation before being integrated into production. ## Why Figma Built Its Own Multiplayer System - In 2015, no major design tool offered real-time collaborative editing. - Figma avoided OT, the algorithm used by tools such as Google Docs, because it considered OT unnecessarily complex for its problem space. - The custom approach was designed to be simpler and faster to implement. - Multiplayer eliminated the need to export, email, or manually synchronize design files. - It also allowed non-designers—such as copywriters and developers—to participate or view work without interrupting the designer. ## Figma’s Client/Server Architecture - Figma clients are web pages connected to a server cluster through WebSockets. - Each multiplayer document runs in a separate server process, with all editors connected to that process. - When a document opens, the client downloads an initial copy of the file. - Subsequent changes are synchronized in both directions over the WebSocket connection. - Server performance and scaling were important considerations, later addressed in part through the use of Rust. ## Offline Editing and Reconnection - Clients can continue editing while offline for an arbitrary period. - When reconnecting, the client: - Downloads a fresh version of the document. - Reapplies its locally stored offline edits to that latest state. - Resumes synchronization through a new WebSocket connection. - This keeps connection and reconnection logic relatively simple by concentrating multiplayer complexity on already-connected clients. ## Separate Systems for Different Data - Figma’s multiplayer system is used only for syncing document changes. - Comments, users, teams, projects, and similar information are stored in Postgres. - That data is synchronized through a separate system because it has different requirements involving: - Performance - Offline availability - Security ## Prototyping Before Production - Figma first created a standalone browser-based prototype rather than experimenting directly in the production codebase. - The prototype simulated three clients connected to a server and visualized the complete system state. - Engineers could test: - Offline clients - Bandwidth-limited connections - Different collaborative algorithms - Alternative data structures - Once the design was validated, the ideas were transferred into the main codebase. Figma’s experience demonstrates that collaborative systems do not always require the most established algorithm. A focused, custom protocol—validated through fast prototyping—can provide a simpler solution when its data model and product requirements differ from tools like document editors.

Real Time Collaboration PostgreSQL Rust Websockets+2

figmaOct 6, 20193 min readCurated summary

Customer journey mapping with Figma | Figma Blog

Customer journey maps help teams build a shared understanding of how people experience a process, including emotions, pain points, and opportunities for improvement. The article explains how Lextech uses Figma to research, create, refine, and validate these maps collaboratively. Figma’s component libraries, collaboration tools, version history, and comments make journey mapping more consistent and easier to share with clients and customers. ## When Customer Journey Maps Are Useful - Journey maps visually tell the story of a customer process, such as shopping for a car or purchasing a product online. - They combine process steps with customer emotions and pain points. - A shared map helps people with different perspectives understand research and identify improvement opportunities. - Journey maps are less suitable for highly nonlinear processes with many branches or dependencies; a two-dimensional user-flow diagram may work better. - They may also add limited value when a process is already well documented through other visual methods. ## Building a Journey Map Component Library - Teams can create reusable components and styles specifically for journey maps. - A shared library improves visual consistency and speeds up the creation of new maps. - Global style or component updates can be applied efficiently when the design changes. - Lextech provides a sample Figma file and component library as a starting point. ## Keeping Maps Organized with Tidy Up - Figma’s **Tidy Up** feature helps adjust spacing between journey steps. - It makes it easier to insert or reorder steps without rebuilding large portions of the map. ## Research and Real-Time Collaboration - Multiple designers can work on the same journey map simultaneously. - Lextech also records interview notes directly in Figma, keeping research and map development in one location rather than spreading information across multiple tools. ## Using Version History - Before sending a map to clients, the team manually timestamps a version in the file’s history. - This creates a reliable reference point if the team needs to revisit an earlier state. - Showing how a map evolved can help clients understand how research findings changed the team’s understanding of the customer. ## Gathering Feedback with Comments - Lextech shares rough journey maps with customers to validate research and uncover missing steps. - Comments provide a centralized feedback channel tied to precise locations on the map. - Teams can ask follow-up questions directly in comment threads. - For asynchronous reviews, the team duplicates the file, shares the map as a single-screen prototype, and invites users to comment. - During live reviews, a designer records participant feedback directly in the file. - Separate file copies can prevent earlier comments from biasing new reviewers and make it easier to compare feedback from customers, clients, and other groups. Figma is most effective when journey maps are treated as collaborative, evolving research artifacts rather than static deliverables. Start with reusable components, keep research and feedback in the same file, and validate the map with real users before using it to guide design decisions.

Real Time Collaboration Figma Prototyping Component Library+2

figmaMar 26, 20192 min readCurated summary

Dribbble Scores with Live Design Collaboration for its Remote Team | Figma Blog

Dribbble adopted Figma to make collaboration feel more like working together in the same room despite its fully remote, globally distributed team. Figma replaced a fragmented collection of tools with a shared, real-time workspace and a single source of truth for designs. The result was faster iteration, clearer feedback, and less time spent managing files and communication. ## Remote Collaboration Challenges - Dribbble’s design team included seven product designers and developers working across multiple time zones. - Remote work helped attract talent and offered flexibility, but made spontaneous collaboration more difficult. - The team relied on video conferencing and several disconnected tools, without a seamless way to work together. - Designers lacked visibility into one another’s work, while file management and multiple feedback channels reduced time available for design. ## Figma as a Shared Design Workspace - Figma allowed multiple people to work in the same file simultaneously, recreating the experience of brainstorming in a room or on a whiteboard. - Online files were easier to find and access, eliminating the need to ask colleagues for the latest version. - Designers could stay within one tool instead of repeatedly switching between applications. - Figma’s handling of vectors, images, and copy-paste attributes also appealed to Dribbble’s designers. - The team eased adoption by importing existing design files and recreating familiar interface components in Figma. ## Faster Pairing and Feedback - Figma supported Dribbble’s practice of using design pairs to solve problems and deliver products quickly. - A single, current file reduced communication friction and kept designers aligned on the latest changes. - Multiplayer editing made it easier to hold frequent critiques, duplicate frames, explore alternatives, and comment in real time. - The team could solve design problems in minutes rather than days; in one example, five people collaboratively produced an approved profile design in about 20 minutes. ## Integration with Dribbble - Dribbble used Figma’s API to build an integration for publishing work directly to Dribbble. - Users can select a layer in Figma and choose **Integrations → Dribbble** to begin the Dribbble desktop upload flow. For fully remote design teams, a shared real-time workspace can replace fragmented collaboration processes. Dribbble’s experience suggests that adopting a single source of truth helps teams communicate more clearly, iterate faster, and spend more time designing.

Real Time Collaboration Figma Design Systems Remote Collaboration+3

figmaMar 5, 20193 min readCurated summary

How Notion pulled itself back from the brink of failure | Figma Blog

Notion nearly failed in 2015 because its original product and technology stack did not match what users wanted. Founders Ivan Zhao and Simon Last moved to Kyoto, rebuilt the product from scratch, and used an intensive, collaborative design process to create Notion 1.0. The relaunch succeeded because it combined powerful customization with a simple, approachable user experience. ## Rebuilding Notion from the Brink - Notion’s first version was a programming-oriented tool intended to help nontechnical users build software. - The founders realized they had focused on their own vision rather than customer needs. - With funding running low, they dismissed their team, sublet their office, and relocated to Kyoto to reduce expenses and concentrate on rebuilding. - Zhao spent as many as 18 hours a day designing and iterating on the new product. - The mission remained the same: enable people to create tools tailored to their own problems without writing code. ## Collaborative Design Under Pressure - Zhao and Last worked closely across design and engineering, switching roles as needed. - Figma’s multiplayer capabilities allowed them to work in the same files simultaneously, brainstorm quickly, and explore product problems together. - This collaboration helped them move faster during their year-long rebuild. - Notion 1.0 launched in March 2018 and quickly reached the top of Product Hunt. - The product later reached one million users with only seed funding and earned praise for its user experience. ## Simplicity Despite Powerful Features - Notion’s new-user home screen was intentionally minimal, using a small set of simple icons. - Its visual style drew inspiration from classic interfaces, including Susan Kare’s iconography and the look of Windows 95. - Zhao argues that design is central because users value how a daily tool feels, just as they care about the physical qualities of a hammer or knife. - The product’s challenge was to make extensive functionality feel approachable rather than overwhelming. ## Create Many Variations, Then Choose One - Zhao repeatedly duplicated user flows and changed small details such as icons, wording, and layout. - Notion’s broader philosophy is to explore many permutations before selecting the strongest solution. - Team members are encouraged to produce rough drafts, including unconventional or bad ideas, instead of committing too early. - Designers, copywriters, engineers, and illustrators all use this iterative approach. - Teammates then critique and stress-test the alternatives, narrowing them down to the best option. - Zhao credits this process with helping create Notion’s distinctive brand. ## Design as a Thinking Tool - Notion treats design as part of the thinking process, not merely as a final production stage. - The team develops ideas visually in Figma from the beginning, using it as a flexible scratchpad. - This design-centered approach extends across the small company, involving more than just dedicated designers. Notion’s recovery demonstrates how a failing product can be transformed by listening more closely to users, rebuilding around their needs, and creating space for rapid, collaborative experimentation. Teams facing similar pressure can benefit from exploring many options early, testing them together, and protecting simplicity even when the underlying product is powerful.

Real Time Collaboration Figma Product Design User Experience Design+3

figmaNov 27, 20183 min readCurated summary

Zoom Streamlines the Design Workflow with Figma | Figma Blog

Zoom adopted Figma to replace a fragmented design workflow built around Sketch, InVision or Framer, and Zeplin. Figma’s speed, real-time collaboration, contextual commenting, and shared libraries reduced manual file management while improving communication between designers, engineers, product managers, and other stakeholders. The case study concludes that Figma became a shared source of truth that made Zoom’s distributed design process faster and more collaborative. ## Speed Bumps in the Design Workflow - Zoom’s lean design team—about one designer for every ten engineers—needed efficient ways to communicate design decisions. - Designers worked across multiple countries and time zones, making collaboration especially important. - Their workflow relied on separate tools: - Sketch for design - InVision or Framer for prototypes - Zeplin for engineering handoff - Each iteration required files to be synchronized across tools. - Teams pushed revisions 10–20 times per project and had to manage multiple versions, reviews, and stakeholders. - Static screenshots often removed designs from their broader context, limiting the quality of feedback. ## Figma’s Collaborative Workflow - Designer Steven Crosby was initially attracted by Figma’s performance, particularly its smooth frame rate when moving objects. - Figma’s integrated commenting and real-time collaboration addressed Zoom’s workflow problems in one place. - Multiple designers could brainstorm and work on the same file simultaneously. - Anyone with access could comment directly on the design without downloading files or managing synchronization. - Feedback became more contextual because reviewers could see the full design flow rather than an isolated screenshot. - Figma brought designers together with engineers, project managers, product managers, and other teams, substantially improving the amount and quality of feedback. ## A Shared Design System - Figma became Zoom’s single source of truth for design work. - Team Libraries allowed designers in different locations and time zones to share components across projects. - Zoom created a master file containing an icon set and reusable components, with live updates available to the team. - Constraints helped designers create responsive components while keeping elements pinned to specific sides of a layout. - Using reusable components improved consistency and helped designers better understand scalable design-system construction. ## Brainstorming Across Teams - Zoom used Figma to include data scientists and an external design partner in product-message brainstorming. - Participants needed no prior Figma experience to contribute. - By sharing a link and inviting collaborators into the file, everyone could work simultaneously in separate areas of the canvas. - Participants quickly moved elements, modified messages, and reused ideas from one another. - The low learning curve enabled non-designers to participate directly rather than providing feedback indirectly. Zoom’s experience suggests that consolidating design, prototyping, feedback, and reusable components in a collaborative tool can eliminate workflow friction and make design a genuinely cross-functional activity.

Real Time Collaboration Figma Design Systems Prototyping+3

figmaAug 9, 20183 min readCurated summary

Why transparent, open design leads to happier clients | Figma Blog

Citrusbyte argues that sharing unfinished design work with clients creates better collaboration, faster workflows, and stronger project outcomes. Using Figma’s cloud-based, real-time environment, clients can observe progress, provide precise feedback, and participate directly instead of waiting for polished presentations. Although transparency can expose messy creative stages, Citrusbyte manages expectations through clear communication and finds that openness ultimately produces happier clients. ## Why Transparency Matters - Citrusbyte, a 90-person strategy, design, and development firm, shares raw, in-progress design files with clients. - The company moved away from traditional siloed design, where designers work privately and present finished deliverables. - Earlier tools such as Sketch and Photoshop made continuous transparency difficult, requiring teams to export and email files or use file-sharing services. - Figma enables: - Always-current cloud files - Link-based sharing - Simultaneous collaboration - Real-time visibility into design changes - Clients gain a stronger sense of security and involvement because the work is not hidden in a “black box.” - Citrusbyte explains that unfinished work is part of the process, comparing it to seeing a bicycle being assembled rather than expecting a finished bike immediately. - Bringing clients directly into the project increases buy-in and improves their understanding of the work. ## Faster Feedback and Fewer Handoffs - Before Figma, clients often reviewed PNGs or PDFs and responded through email or Slack. - Vague feedback created unnecessary back-and-forth because clients could not clearly identify which design element they meant. - Prototype tools such as InVision required designers to save, flatten, and re-upload new versions whenever designs changed. - With Figma: - Prototypes update automatically as the source design changes. - Clients can experiment with content, such as headline copy, themselves. - Designers spend less time handling minor text revisions and file management. - Figma’s observation mode allows clients and teams to follow a presenter’s screen directly during reviews, eliminating the need to prepare specially polished presentation files. - Citrusbyte designer Sam Small estimates that Figma saves him 30–50% of his previous workflow time. ## Business and Client Benefits - Removing repetitive steps allows Citrusbyte to handle more work and meet aggressive deadlines. - Regular reviews—sometimes daily—keep clients closely aligned with project progress. - Faster review cycles and continuous visibility improve trust and collaboration. - The approach helped Citrusbyte grow from primarily serving startups to working with major companies including Apple, Sony, Intel, and AT&T. Citrusbyte’s experience suggests that transparent, collaborative design works best when paired with clear expectations. Teams should expose work early, use tools that support real-time collaboration, and treat clients as active participants rather than occasional reviewers.

Real Time Collaboration Figma Prototyping Collaborative Design+1

figmaAug 1, 20182 min readCurated summary

Figma feature highlight: Observation Mode | Figma Blog

Figma’s Observation Mode lets one person mirror another collaborator’s screen in real time. By clicking a teammate’s avatar, users can follow cursor movements, navigation, text changes, and prototype interactions as they happen. Figma presents it as a useful alternative to traditional screen sharing for critiques, client feedback, and user testing. ## How Observation Mode Works - When multiple people are viewing a Figma file, click a person’s avatar in the upper-right corner. - Your view then follows everything that person sees and does. - The mirrored activity includes: - Moving through the file or prototype - Editing text inside frames - Selecting objects - Expanding design elements - Moving the cursor - Observation Mode is available even to users with view-only access, provided sharing is enabled for the file or project. ## Real-Time Design Critiques and Feedback - Designers can watch clients or teammates explore a design instead of relying only on verbal explanations. - The feature makes remote critiques more interactive by allowing everyone to follow the same part of the file. - Clients can demonstrate their reactions and questions directly within the design. ## User Testing in Figma - Researchers or designers can observe users as they move through a prototype. - Watching interactions live reveals: - Where users hesitate - Which elements cause confusion - Where navigation breaks down - Which interface areas create pain points - This provides more direct evidence than collecting anecdotal feedback after a test. ## Sharing and Privacy Considerations - Anyone with access to a shared file may be able to use Observation Mode, including viewers. - Designers should be comfortable being observed before sharing a design URL. - Teams should consider file-sharing permissions when using the feature for sensitive work. Observation Mode is best used as a lightweight collaboration and research tool: enable sharing, ask participants to explore the file or prototype, and follow their activity live to gather more precise feedback.

Real Time Collaboration Figma Prototyping User Testing+2