techlist.io
KREN

Techlist.io - Korean Tech Blog Curator

figma3 min readCurated summary

Postmortem: Service disruption on January 21-22, 2020 | Figma Blog

Figma’s January 21–22, 2020 outages were caused by separate database failures that compounded one another. A long-running query triggered the first incident and created a vacuuming backlog; the next day, PostgreSQL 9 produced a severely mis-planned query after database statistics changed, while aggressive autovacuuming increased write and lock pressure. Upgrading to PostgreSQL 11 restored stability and addressed both the query-planning and autovacuum performance issues. ## Incident Timeline ### January 21: Long-Running Query - Automated alerts reported elevated error rates at 6:11 AM PST. - Engineers found an expensive, long-running database query driving CPU usage. - Canceling the query at 6:54 AM restored normal performance. - The terminated query left behind a backlog of data requiring vacuuming. ### January 22: Database Saturation - Increased write IOPS and lock contention appeared, despite database CPU being below normal. - Queued API requests eventually made Figma unavailable to some users. - Engineers canceled nonessential queries and increased allocated IOPS, providing only temporary relief. - Performance deteriorated again in the afternoon. - Restarting the database temporarily disabled a suspected background process. - Figma performed an emergency upgrade from PostgreSQL 9 to PostgreSQL 11. - The service returned online at 8:15 PM, with metrics back to normal. ## Aggressive Autovacuuming - The vacuuming backlog crossed the threshold for PostgreSQL’s more aggressive transaction-ID wraparound protection. - This mode generated substantial locking and write activity, particularly in the PostgreSQL version Figma was using. - Canceling autovacuum operations on large tables temporarily improved metrics, but the operations resumed. - Fully suppressing the aggressive behavior required changing `autovacuum_freeze_max_age` and rebooting the database. - Autovacuum was a significant contributor, but disabling it did not eliminate all performance problems. ## PostgreSQL Query Planner Failure - A complex query repeatedly appeared in lock-contention reports. - PostgreSQL estimated that the query would return more than 20 million rows, while the actual result contained only three. - The incorrect plan used full table scans instead of expected indexes. - It also wrote large amounts of data to temporary buffers, matching the observed increases in write IOPS and temporary-byte metrics. - The issue was likely caused by inaccurate statistics or a PostgreSQL planner defect or limitation following a routine statistics change. ## Upgrade and Preventive Measures - PostgreSQL 11 generated a substantially better plan for the problematic query. - Newer PostgreSQL versions improve autovacuum performance and query planning. - PostgreSQL 10+ also provides more advanced performance-analysis tools through Amazon RDS. - Figma had already tested the PostgreSQL 11 upgrade in staging and prepared a detailed production rollout plan, allowing the emergency upgrade to succeed safely. - The company planned to improve monitoring for expensive queries and impose stricter limits on query execution time. Figma concluded that upgrading PostgreSQL, improving query monitoring, and enforcing tighter runtime limits were necessary to prevent similar database-driven outages.

Read original(opens in new tab)
PostgreSQLAmazon RdsDatabase MonitoringQuery Optimization+2
figma2 min readCurated summary

Figma on Figma: How we built our website design system | Figma Blog

Figma built its website design system to address inconsistent pages, duplicated solutions, and a difficult maintenance process. By auditing existing patterns, consolidating visual styles, and creating reusable components in Figma and Contentful, the marketing team established a flexible system that supports consistency without limiting creativity. The result is faster production: teams can move from concept to a live page in as little as one day, often without writing new code. ## Taking Inventory - The team cataloged existing fonts, sizes, colors, layouts, column widths, and other visual patterns in a shared Figma file. - This revealed: - Repeated patterns that could be unified - One-off components that did not belong in the style guide - Large page elements that could be broken into smaller reusable parts - The team applied an atomic approach, combining small “atoms” and “molecules” into flexible page “organisms.” - Similar but inconsistent elements were standardized: - Twelve heading sizes became H1–H3 styles - Body and technical text received defined styles - Long-form content gained pull-quote and block-quote styles - The refined components were organized into a shared library so even people unfamiliar with Figma’s brand could create cohesive pages. ## A Simplified, Flexible Design System - In about a month, the team created a robust style guide and component library integrated with Contentful. - The system standardized: - Typography - Spacing and padding - Line heights - Colors - Grid behavior - Designers could assemble pages from ready-made building blocks rather than recreating common elements. - Frequently paired elements and complete sections were turned into larger reusable components called “FLEGOs,” combining Figma and LEGO. - These components were designed to work together in many combinations, supporting different content and page layouts. ## Faster Marketing Production - Most of Figma’s core marketing site now uses the design-system framework. - Contentful allows the team to build and publish pages without requiring new code for each page. - A product marketer and web producer created the “What’s New” page by: - Wireframing with FLEGOs - Collaborating on copy in Figma - Building the final page from CMS components - The page went from idea to launch in under 48 hours, demonstrating how reusable components accelerated the process. Figma’s experience shows that a website design system should be both standardized and flexible. Auditing existing work, consolidating repeated patterns, and making components accessible through design and content tools can improve consistency while significantly reducing production time.

Read original(opens in new tab)
FigmaDesign SystemsComponent LibraryAtomic Design+2
figma2 min readCurated summary

Bringing the community together in Figma | Figma Blog

Figma’s 2020 priorities centered on strengthening its global community as the company and user base expanded. The company planned to connect users through in-person events, improved support, collaborative product features, and a richer platform for sharing design resources. Its broader goal was to make design more accessible and collaboration more effective for entire product teams. ## More Opportunities to Meet in Person - Figma launched Config, its first user conference, in San Francisco on February 6, 2020. - The event emphasized community-created programming, including talks on open-source design, developing future designers, design confidence, and redesigning Chicago.gov. - Figma also planned more local events and user groups in cities around the world. - Users were encouraged to participate either in person or online, and community leaders could help organize events in their cities. ## Expanded Global Customer Support - More than 80% of Figma’s active users were outside the United States, while its support team primarily covered North American and European business hours. - Figma moved its support technology to Zendesk to better serve customers globally. - Planned improvements included: - A new Help Center for self-service product information - Community forums for peer-to-peer support - Streamlined internal processes for faster responses ## Product Features for Entire Teams - After launching features such as Plugins, Auto Layout, Smart Animate, OpenType support, and Design System Analytics in 2019, Figma promised a larger 2020 product roadmap. - The company would continue reducing repetitive design work and improving creative productivity. - Figma also aimed to better support engineers, product managers, and other members of product teams—not just designers. - Files at larger organizations averaged six collaborators, highlighting the importance of team-based workflows. ## Building a More Open Design Community - Figma introduced the beta of Figma Community in October 2019 to let creators publish files for others to inspect, remix, and learn from. - More than 300 creators had already shared around 600 files, including templates, educational guides, and public libraries. - In 2020, Figma planned to expand the number of contributors and resources so both professional and aspiring designers could discover ideas and learn from shared work. Figma’s roadmap combined product development with community-building: expanding events, improving global support, enabling broader team collaboration, and making shared design resources easier to discover and reuse.

Read original(opens in new tab)
FigmaDesign SystemsAuto LayoutPlugins+4
figma2 min readCurated summary

Measuring the value of design systems | Figma Blog

Design systems can substantially reduce the time designers spend recreating assets, searching for references, and making repetitive visual decisions. Figma’s controlled experiment found that designers completed tasks **34% faster** when they had access to a relevant, up-to-date design system. The result represents an upper bound for real-world savings, since design systems are not always perfectly aligned with the work at hand. ## Why Design Systems Create Time Savings - Designers avoid recreating common elements from scratch. - Shared libraries reduce the need to search through old design files. - Predefined assets minimize small, repetitive decisions about: - Typography - Placement - Colors - Component structure - The accumulated savings can give designers more time for strategic and creative work. ## The Experiment - Designers were asked to complete two comparable tasks for a bank account aggregation app: - Designing a screen for viewing account transactions and trends. - Designing a flow for connecting a new account. - Each participant completed both tasks, but had access to a design system for only one. - For the task without the system, designers could reference older design files. - The tasks were balanced so each participant served as their own control. - Researchers alternated task order, allowed participants to familiarize themselves with the assets, and avoided prescribing specific design solutions. - Completion time was measured, while designers chose when their work was sufficiently complete. ## The 34% Improvement - Participants with access to the design system completed their objective **34% faster**. - The system was specifically relevant, current, and applicable to the assigned tasks. - Because of those ideal conditions, Figma considers 34% a likely maximum rather than an average real-world benefit. - Figma’s broader goal was to help design teams use analytics to keep libraries relevant and understand the value they provide. ## Maintaining the System’s Value - Design systems are most valuable when they reflect the work designers actually need to do. - Quantitative usage data can help teams identify which components are useful, compare libraries, and decide where maintenance is needed. - Figma introduced Design System Analytics to provide insight into library and component usage, supporting better decisions about shared assets. A design system should be treated as an actively maintained productivity tool, not merely a repository of reusable components. Teams can maximize its value by measuring adoption and keeping its assets current and relevant.

Read original(opens in new tab)
FigmaDesign SystemsData ScienceDesign System Analytics+1
figma2 min readCurated summary

Made in Figma, 2019: Design by the numbers | Figma Blog

Figma’s 2019 usage data shows design becoming more collaborative, measurable, and broadly practiced. Anonymized data reveals strong preferences for cool colors, widely available sans-serif fonts, bold typography, and desktop and mobile frame presets. It also shows that design files increasingly serve as shared spaces for cross-functional teams rather than isolated work by individual designers. ## Color and Typography Trends - The most popular non-gray color was teal `#009688`, followed by dark blue-gray `#455A64` and `#263238`. - These cool tones contrasted with Pantone’s 2019 Color of the Year, Living Coral (`#FF6F61`). - Montserrat, Open Sans, and Lato were the three most-used fonts. - Google Fonts accounted for six of the top ten fonts, largely because they are readily available in Figma. - SF Pro Text, SF Pro Display, Proxima Nova, and Arial also ranked highly; notably, Arial surpassed Helvetica among system fonts. - Roboto, Figma’s default font, was excluded from the rankings. - Font usage was highly concentrated: 90% of usage came from the top 11 fonts, including Roboto. - Font Awesome ranked 31st, while Times New Roman ranked 55th. The first serif font, Playfair Display, appeared at number 22. - Designers were 13 times more likely to adjust font weight than italicize text, and one-third of files used bold or heavy styles. ## Frame and Device Preferences - Figma offered 36 preset frame options, and 33% of files began with one of them. - The 1440 × 1024 desktop frame was the most popular preset. - iPhone X and iPhone 8 frames followed closely, showing strong interest in both desktop and mobile design. - The ordering was notable given that Windows has much greater global usage than macOS. ## Collaboration Across Teams - Figma’s data reflects its goal of making design an open, collaborative process. - In larger organizations, files averaged six collaborators. - Collaborators could include designers, developers, product managers, writers, and other stakeholders. - A file typically began with one person working independently. - After an average of 19 days, the first collaborator was invited to review, comment, or contribute. ## Overall Direction The data suggests that 2019 design work was shaped by accessible tools, reusable conventions, and increasing teamwork. While designers favored familiar fonts, cool color palettes, and strong type weights, Figma files were also becoming shared product-development spaces involving people beyond design.

Read original(opens in new tab)
FigmaDesign SystemsPrototypingCollaborative Design+2
figma2 min readCurated summary

"The Decade of Design”: How 10 years transformed design’s role in tech | Figma Blog

The 2010s transformed design from a secondary concern into a central function of technology companies. The smartphone, especially the iPhone, made products more complex, generated vast amounts of behavioral data, and raised consumer expectations for polished experiences. As a result, companies began hiring designers at scale and treating design as a driver of product strategy and growth. ## The Mobile Wave ### More Complex Interactions - Smartphones introduced smaller, varied screens and touch-based gestures such as swiping, tapping, and holding. - Users interacted with devices in many contexts—while walking, commuting, or multitasking—forcing teams to design for real-world conditions. - Designers became essential to prioritizing functionality and simplifying complex technical systems. - Mobile effectively made the phone the primary computer people used throughout the day. ### The Rise of Data-Driven Design - Smartphones produced unprecedented volumes of behavioral data. - Product teams began continuously A/B testing interface details, including button colors, wording, and layouts. - These experiments measured outcomes such as sign-ups, purchases, and sharing. - “Growth design” emerged as a distinct discipline, with designers increasingly focused on optimizing user behavior and business metrics. - Smartphone ownership among U.S. adults rose from 35% in 2011 to 81% in 2019. ### Apple Raised the Standard - The iPhone changed expectations for how technology should look and feel, replacing the perception of software as merely functional and bland. - Apple’s design became a benchmark that competitors sought to imitate. - The iPhone’s broader mainstream appeal made high-quality industrial and interface design visible to ordinary consumers, not just creative professionals. - Products such as Tinder adopted mobile-first design conventions influenced by Apple’s operating system. - Even Google reportedly discarded an Android device it had been developing after reassessing its design direction. ## Design’s Expanding Role in Technology - The rapid growth of mobile products exposed the limitations of engineering-only approaches to product development. - Designers were particularly valuable for translating complicated systems into simple, intuitive interactions. - Technology companies that had previously operated with minimal design resources began hiring designers and acquiring design agencies. - Silicon Valley gradually shifted from primarily celebrating engineering expertise to recognizing design as a competitive advantage. The decade’s central lesson is that design became indispensable because technology moved into people’s pockets and daily lives. Companies that want to compete should treat designers as strategic product partners, not merely as people responsible for visual polish.

Read original(opens in new tab)
User ExperienceA B TestingMobile DesignUx Ui Design+2
figma2 min readCurated summary

Design more, resize less, with Auto Layout | Figma Blog

Figma’s Auto Layout brings structural concepts from CSS flexbox into a free-form design environment. It reduces repetitive resizing and repositioning by making frames respond automatically to their content, while preserving designers’ ability to explore layouts freely. The result is a workflow that feels closer to production code without sacrificing visual experimentation. ## Bridging Design and Development - Traditional Figma designs require manual updates when content changes, such as resizing a button and repositioning neighboring elements. - HTML/CSS and SwiftUI handle these relationships automatically, but are less suited to rapid, free-form design exploration. - Auto Layout combines both approaches by adding flexible, code-inspired layout behavior as a property of any Figma frame. ## How Auto Layout Works - Items inside an Auto Layout frame are arranged vertically or horizontally. - The frame automatically sizes itself based on its contents. - Frames can include padding, fills, strokes, and corner radii, allowing designers to create buttons without extra layers. - Changing button text automatically resizes the button and adjusts surrounding elements. - Spacing is controlled at the container level rather than independently between every pair of items. ## Lists, Menus, and Design Systems - Auto Layout simplifies repeated interface elements such as lists and menus. - Items can be reordered through drag and drop instead of manually repositioning them. - Existing components and design-system elements can be converted using **Shift + A** or the Option menu. - The feature supports more generic components that adapt to different content instead of requiring separate variants. ## Nested Frames and Safeguards - Auto Layout frames can be nested to build complex interfaces, similar to nested HTML `div` elements. - Designers can edit content or move elements in and out of layout frames. - Figma includes safeguards against unintended actions, such as placing a large image inside a button. - Holding **Command** on macOS or **Ctrl** on Windows overrides these safeguards when needed. Figma recommends trying Auto Layout through its playground file, video, and documentation. The initial release was presented as a starting point, with further improvements expected based on user feedback.

Read original(opens in new tab)
FigmaDesign SystemsHTMLResponsive Design+3
figma2 min readCurated summary

Humanity at work: Gusto brings a new brand to life with Figma | Figma Blog

Gusto used Figma to turn a brand refresh into a company-wide effort centered on the human experience of work. The collaboration brought marketing, brand, product, and non-design teams into the same workspace, helping them align on the new identity and apply it consistently across Gusto’s platform. Figma’s real-time collaboration, commenting, libraries, and components helped translate the brand into a scalable product system. ## Why Gusto Rebranded - Formerly ZenPayroll, Gusto serves more than 100,000 small businesses with payroll, benefits, and HR tools. - Although customers valued the product, Gusto felt its existing brand did not reflect the human way it served them. - The refresh aimed to unify brand awareness, product development, and customer experience. - Gusto viewed its brand as the sum of every user interaction, not something owned solely by marketing or brand design. ## Bringing the Whole Company Into the Process - A major challenge was aligning roughly 1,000 employees around the new brand. - Gusto chose Figma as a shared workspace where employees could: - See work develop in real time - Communicate and share ideas - Comment directly on designs - Take ownership of the rebrand - Figma also helped non-designers understand the design process and appreciate design decisions. ## Connecting Brand and Product Teams - Brand and product design teams worked as equal partners through brainstorming sessions and workshops. - They jointly developed: - Color palettes - Typography - Brand starter templates - Product applications of the new identity - In collaborative sessions such as “Refresca,” designers applied the new brand to different product areas together in Figma. - Early collaboration made it easier to carry the brand consistently through the entire product experience while highlighting meaningful moments in distinctive ways. ## Building a Scalable Design System - Gusto wanted a reliable “system of record” for how its products should look. - The product design team created a UI kit using Figma libraries and components. - The kit was based on the brand team’s guidelines and provided reusable foundations for multiple products. - This system helped designers work consistently and scale the new brand as Gusto grew. Gusto’s experience shows that a successful rebrand requires more than new visual guidelines. Shared tools and close collaboration can align an entire company, connect brand strategy to product design, and create a cohesive customer experience.

Read original(opens in new tab)
FigmaDesign SystemsCollaborative DesignUser Interface Design+2
figma3 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.

Read original(opens in new tab)
AWSReal Time CollaborationDistributed SystemsPerformance Optimization+2
figma2 min readCurated summary

Opening up the data behind your design systems | Figma Blog

Figma introduced Design System Analytics to help organizations understand how their libraries and components are used across teams. The feature provides usage trends, library comparisons, and component-level data so design system teams can improve what they maintain, guide migrations, and measure adoption without monitoring individual designers. Customer examples show analytics turning usage data into practical design system decisions. ## Improving Components Through Usage Data - Teams can identify components that are widely used, rarely used, or frequently detached. - Microsoft uses this information to determine which Fluent components need maintenance or may no longer be important. - Google found that its button component was detached more than any other component, revealing that the master component was too complex. - The Material Design team responded by creating a simpler button option while preserving flexibility for designers. ## Tracking Library Adoption and Migration - Design System Analytics compares usage trends between libraries over time. - Squarespace planned to replace an older shared library with a new version using Auto Layout. - Analytics helps the team: - Monitor adoption of the new library across teams - Identify which teams are using it - Ensure the old library is gradually deprecated - Reports include component insertions, active teams, total instances, and detachments. ## Understanding Component Usage Across Teams - Analytics allows teams to examine how individual shared components are being used. - Pluralsight planned to use the reports to understand how designers work with components from its design system. - Because reports are available to anyone within an organization, designers and managers can independently investigate usage patterns and learn from other teams’ examples. ## Measuring Design System Impact Earlier - Figma positions analytics as a way to measure design system adoption earlier in the product development process, rather than waiting until implementation. - The article introduces Bukalapak as an example of a company that had previously measured adoption during development, though the provided text ends before describing the full outcome. ## Expanded Capabilities - The original 2019 feature focused primarily on components and library usage. - As of February 2025, Figma Library Analytics also includes styles and variables for Organization and Enterprise customers. - Enterprise customers can access expanded functionality through the Library Analytics API. Design System Analytics is intended to provide feedback for improving and evolving design systems, not to police individual designers. Teams can use the data to prioritize maintenance, simplify components, track migrations, and make adoption measurable.

Read original(opens in new tab)
FigmaDesign SystemsAuto LayoutComponent Libraries+1
figma2 min readCurated summary

Let’s create Figma’s first user conference together | Figma Blog

Figma announced its first user conference, scheduled for February 6, 2020, in San Francisco. The event was designed as an in-person extension of Figma’s growing online community, giving users opportunities to learn from one another, share practical experiences, and build connections. Figma invited the community to help shape the program through speaker proposals and attendee applications. ## A conference built around the Figma community - Figma’s user base had grown from a small beta community to hundreds of thousands of active users worldwide. - The company emphasized that users had always learned from one another through inspiration, knowledge-sharing, and collaboration. - Following the launch of Figma Community, the conference would provide an offline space for users to connect and exchange ideas. ## Community-led programming - The event would feature: - Lightning talks - Workshops - Roundtables - A limited number of keynotes - Sessions could range from 15 minutes to one hour. - Users could submit their own ideas or nominate someone else to speak. - Suggested topics included: - Interesting projects built with Figma - Lessons learned through difficult experiences - Peer discussions - Collaborative activities using Figma - Proposal submissions were due by November 20, 2019, at 11:59 p.m. PST. ## Small, diverse attendance - Figma planned to keep the conference relatively small to encourage meaningful conversations. - The company sought diversity across ability, age, education, ethnicity, gender, race, sexual orientation, and socioeconomic status. - Because capacity might be limited, Figma could use a lottery system to help create a representative attendee group. - Applicants would receive notification after the deadline and have one guaranteed week to purchase a pass. ## Cost and scholarships - Tickets cost $299. - Figma offered scholarships so that financial constraints would not prevent participation. - Attendee applications were also due November 20, 2019. Figma’s announcement positioned the conference as a collaborative event shaped by its users. Prospective speakers and attendees were encouraged to apply and help create an inclusive, community-driven gathering.

Read original(opens in new tab)
FigmaCollaborative DesignFigma PluginsFigma Community+1
figma2 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.

Read original(opens in new tab)
FigmaDesign SystemsReal Time CollaborationPlugins+2
figma3 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.

Read original(opens in new tab)
PostgreSQLReal Time CollaborationRustWebsockets+2
figma3 min readCurated summary

Bringing new life to Figma’s brand | Figma Blog

Figma’s 2019 brand refresh expanded an existing visual language rather than replacing it. The process centered on collaboration, using research and Figma itself to create a brand that could feel both professional and playful. The result emphasized curiosity, vibrancy, honesty, boldness, and the imperfect process of making. ## Evolving an Existing Brand Language - Figma found that its original brand foundations were strong but had been created when the company was much smaller. - The refresh expanded the limited brand guide with additional rules for areas such as blog imagery and illustration. - Existing elements, including geometric shapes, were given new applications while remaining recognizable. - The goal was continuity: the new identity should feel like an extension of Figma’s original character. ## Defining Figma’s Personality - The team treated Figma as a person to clarify how the brand should behave and communicate. - Four personality traits became the main guideposts: - **Curious:** clever, playful, imaginative, and eager to explore. - **Vibrant:** dynamic, confident, energetic, and enthusiastic. - **Honest:** inclusive, empathetic, approachable, and willing to learn. - **Bold:** powerful, unexpected, nonconforming, and authentic. - These traits were intended to let the brand shift between consumer and enterprise audiences, and between reserved and playful expressions. ## Shapes That Represent Collaboration - Figma’s new illustrations use shapes as characters that interact, cooperate, disagree, or simply coexist. - Their positioning creates different compositions and communicates collaboration. - Illustrations vary in complexity: - Simple visuals support learning and clarity. - More abstract arrangements are used when the context allows greater expression. - Basic shapes can combine into complex images, making the construction process visible. - The illustrations deliberately show work in progress, including edited or manipulated elements, rather than presenting only polished final results. - This imperfect quality reflects the messy, evolving nature of design and encourages people to share how they make things. ## A Typeface with Hidden Character - Figma selected **Whyte** by Swiss type foundry Dinamo as its new brand typeface. - The team preferred Whyte’s **inktrap** version, which contains notches historically used in metal type to control pooled ink. - These details are subtle at small sizes but become visible when enlarged, giving the typography an illustrative quality. - The typeface supports Figma’s desired balance between conventional clarity and nonconforming personality. ## Refreshing Figma with Figma - The team created the entire refresh in Figma rather than relying on Photoshop or Illustrator. - Working in its own product challenged the designers to develop new workflows and creative techniques. - Collaboration was central, and Figma’s capabilities sometimes pushed ideas further than initially planned. - The tool became both the subject of the rebrand and the medium through which the new identity was developed. The refresh demonstrates how a growing company can strengthen its brand by extending existing principles, defining a clear personality, and making the creative process itself part of the identity.

Read original(opens in new tab)
FigmaCollaborationTypographyIllustration+3
figma3 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.

Read original(opens in new tab)
FigmaPrototypingReal Time CollaborationComponent Library+2