techlist.io
KREN

Figma

736 posts

www.figma.com/blog/engineering

Filter by tag

Figma528Design Systems246User Experience140Prototyping135AI110Figjam98Product Design76User Interface63Generative AI47Collaborative Design47Accessibility41React39+1265
figma3 min readCurated summary

Did Snapchat succeed because of its controversial UI? | Figma Blog

Snapchat’s confusing, unconventional interface may have helped rather than hurt its success. By rejecting standard usability rules, it created a product that encouraged exploration, social teaching, creativity, and a sense of insider belonging. Its design was partly accidental, but it also introduced influential mobile interaction patterns that made Snapchat distinctive. ## Breaking Conventional Usability Rules - Snapchat violated the principle of making interfaces immediately understandable. - Its navigation was chaotic: - Stories used both vertical and horizontal scrolling. - The camera screen contained unrelated controls. - There was no consistent navigation bar. - Designers argued that design should solve a problem, even if the result is less polished or intuitive. - Snapchat demonstrated that usability is not always the most important measure of a successful product. ## Tribal Knowledge and Millennial Appeal - Many users initially found Snapchat frustrating and ridiculous. - Its hidden features, such as filters and video calling, were often learned from friends. - This dependence on “tribal knowledge” created: - A sense of belonging among users. - A private space that felt separate from parents and older generations. - A rewarding discovery process. - The app’s messy interface also reflected the informal, chaotic identity its young audience associated with itself. ## Pioneering Mobile Interaction - Snapchat was among the first major social apps to open directly to the camera. - This encouraged users to create content rather than simply consume it. - Gestures such as swiping, tapping, double-tapping, and holding became essential commands. - Swiping to access filters was more fluid than browsing static filter thumbnails. - Its multidirectional navigation arguably suited touchscreen devices better than tiny menu buttons. ## “Shareable UI” Instead of Intuitive UI - Josh Elman described Snapchat’s approach as “shareable UI.” - Rather than making every feature discoverable by individual trial and error, the app encouraged users to learn from friends. - Social products can benefit from features that people want to demonstrate and discuss. - The goal is not always immediate comprehension; a powerful or entertaining product may spread because users teach one another how to use it. ## Accidental Innovation or Deliberate Strategy? - Some designers believed Snapchat’s interface was simply the result of accumulated bad decisions. - Others saw its design as unusually attuned to younger users and mobile behavior. - Regardless of intent, its unconventional choices helped establish new patterns for camera-first apps, gesture-based controls, and socially learned features. Snapchat’s success suggests that products do not always need to be intuitive or conventionally polished. A distinctive, difficult-to-master interface can succeed when it creates social value, rewards discovery, and gives users something worth sharing.

Read original(opens in new tab)
User ExperienceUser InterfaceInteraction DesignMobile Design+3
figma3 min readCurated summary

Realtime Editing of Ordered Sequences | Figma Blog

Figma needed a way for multiple users to edit ordered object sequences simultaneously while ensuring every client eventually reached the same state. Although Operational Transformation (OT) could solve the problem, Figma chose fractional indexing because it is simpler, supports efficient reordering, and was sufficient for design documents. The trade-offs—such as possible interleaving and growing index lengths—were acceptable in Figma’s use case. ## The Realtime Ordering Problem - Figma documents contain ordered children inside groups, components, and other compound objects. - Users can insert, delete, or reorder objects while edits are applied locally and propagated asynchronously. - Because clients may receive operations in different orders, the system must guarantee eventual consistency: every client must end up with the same document. ## Operational Transformation - OT transforms concurrent operations so they preserve the intended result regardless of application order. - For example, an insertion before a deletion may require adjusting the deletion’s index so it still removes the intended characters. - OT offers: - Strong performance and low memory usage for very large sequences. - Linearized concurrent insertions rather than interleaved content. - However: - It is difficult to understand and implement correctly. - Reordering is typically represented as a delete followed by an insert. - Supporting more operation types increases implementation complexity substantially because operations must be transformed against one another. - Figma considered OT excessive because its sequences were not enormous, interleaving was acceptable, and reordering was especially common. ## Fractional Indexing - Each object receives a numeric position, and children are ordered by sorting these positions. - To insert between two objects, Figma assigns the new object the average of their positions. - Positions are arbitrary-precision fractions between 0 and 1, stored as strings to preserve precision. - Figma uses a compact base-95 representation, omitting the leading `0.` and using the full ASCII range. - Reordering requires changing only one position value. ## Trade-offs and Conflict Handling - Fractional indexes are easy to understand and implement, but: - Index strings can grow after many insertions. - Concurrent insertions may interleave. - Averaging fails if two neighboring objects have identical indexes. - Index growth is not a practical concern for Figma because document sizes and user-driven reorder operations are limited. - Interleaving is generally acceptable for design objects, which often do not overlap; users can manually correct unusual ordering. - If two clients insert between the same objects, the server assigns a unique position to prevent duplicate indexes. Figma’s experience suggests that a simpler, stable algorithm can be more valuable than a theoretically stronger one. Fractional indexing made collaborative ordering easier to maintain and extend while meeting the practical needs of a design tool.

Read original(opens in new tab)
Distributed SystemsOperational TransformationEventual ConsistencyFractional Indexing+3
figma3 min readCurated summary

Can designers make a political difference? | Figma Blog

The post argues that designers can make a political difference by applying their skills, platforms, and creative work to support vulnerable communities and challenge political ideas. After Trump’s election, many designers moved from grief to action through pro-bono services, fundraising, public art, and political satire. Their work may not change policy directly, but it can strengthen organizations, shape public conversation, and build solidarity. ## Visible: Design Support for Grassroots Organizations - Portland agency The Beauty Shop responded to the 2016 election by offering free design work to organizations serving women, people of color, Hispanic, Muslim, immigrant, and LGBTQ communities. - The response quickly grew: - Their Instagram following quadrupled in two days. - Around 300 designers and studios volunteered, including a Facebook design team. - The founders created Visible, a coalition connecting designers with grassroots organizations. - Its initial twelve partners included: - The Iowa Abortion Access Fund - Nightingale, a healthcare-focused publication - The Yemen Peace Project, whose website had been attacked by hackers - The designers argued that strong branding and visual structure can make organizations appear more legitimate and help them succeed. ## Creative Action Network: Celebrating Shared Values - Creative Action Network (CAN) organizes artists around social-good campaigns for groups such as the National Parks Conservation Association and the New York Public Library. - After the election, CAN launched a project to publish one poster per day for the first 100 days of the Trump administration. - The posters celebrated elements of American life including jazz and religious freedom. - Rather than focusing only on protest, CAN emphasized celebrating the values and communities people wanted to preserve, creating common ground. ## Hallie Bateman: Art as Fundraising and Personal Resistance - Illustrator Hallie Bateman questioned whether her usual focus on ordinary moments still fit a changed political reality. - After reflecting on art’s role during periods of conflict, she began using her illustrations to raise money. - She sold a limited-edition drawing and donated the proceeds, excluding printing costs, to Planned Parenthood, raising $2,000. - She later created another print to support the Sierra Club. - Bateman acknowledged that her approach was informal and could become more strategic, but viewed creative fundraising as a meaningful way to contribute. ## Ben Barry: Political Satire Through Design - Former Facebook designer Ben Barry accepted a freelance assignment from The New York Times to design a satirical job application mocking Trump. - He explored several visual directions, including: - A poorly formatted elementary-school field-trip flyer - A document styled like an internal Russian government memo - An exaggerated, gold-and-brassy design reflecting Trump’s public image - The project allowed Barry to use design and humor in one of the country’s largest newspapers to criticize an administration he opposed. Designers can contribute politically by offering practical expertise, amplifying causes, raising funds, celebrating shared values, and using visual communication to expose or ridicule political power. The examples suggest that meaningful action does not require a single grand strategy; individual creative efforts can support broader movements.

Read original(opens in new tab)
Web DesignGraphic DesignIllustrationSocial Media+1
figma3 min readCurated summary

Team Libraries in Figma | Figma Blog

Team Libraries bring shared, synchronized components to Figma, addressing the difficulty of maintaining design systems across separate files. The feature builds on Figma’s components, constraints, and web-based collaboration to create a single source of truth that teams can reuse and update efficiently. Its workflow—Publish, Insert, and Update—combines engineering-style structure with an accessible design workflow. ## The Problems with Traditional Design Tools - Many design tools were modeled on print and illustration software rather than interactive applications. - They lack meaningful support for application behavior, platform constraints, and reusable interface structures. - Copying symbols between files creates disconnected versions that must be updated manually. - Large organizations such as Facebook, Google, and Airbnb have had to build custom tools and dedicate staff to maintaining design systems. - Designers need synchronized, compounding component structures to create scalable systems. ## Bridging Design and Dynamic Interfaces - Figma’s earlier features established the foundation for reusable design systems: - Reliable vector editing - Constraints that reflect system behavior - Dynamic, reusable components - Team Libraries extend these capabilities across files and team members. - Because Figma operates online, shared components have effectively no synchronization delay. - Teams can reuse structured components across devices, platforms, layouts, and user flows. ## An Engineering-Inspired Design Workflow - Figma draws on software concepts such as modular composition and frameworks like React. - Structuring interfaces from discrete, clearly defined parts makes products easier to maintain. - The feature adapts engineering principles for designers rather than copying programming workflows directly. ## Publishing Components - Designers select components and choose **Add to Library** in the inspector sidebar. - Multiple components can be collected and reviewed before being published. - Permissions separate the source of truth from its consumers: - Editors of the source file can modify the original components. - Anyone with view access can use the published components. - This lets specialized teams control assets such as icons, colors, or brand guidelines while others reuse them without changing the rules. ## Inserting and Nesting Components - Published components are available in any file for users who can view the source file. - Users insert them through Figma’s components tool. - Components can be nested inside larger components or modules. - Nested structures allow teams to build complex views from reusable source elements while preserving a predictable single source of truth. ## Updating Shared Components - Changes are made to the original component and published again. - Figma provides a confirmation step and a visual diff showing what changed. - Deleting a component from the source file and publishing removes it from the team library. - The update process includes an additional safeguard because changes may affect multiple design explorations and could otherwise cause users to lose work.

Read original(opens in new tab)
FigmaDesign SystemsUser InterfaceReact+3
figma3 min readCurated summary

Components in Figma | Figma Blog

Figma’s 2016 Components release applies software-engineering ideas such as composition, inheritance, and overrides to interface design. Components let designers reuse shared elements as linked instances, so updates remain consistent while local customizations are preserved. The result is a design workflow that supports both systematic reuse and creative flexibility. ## Designing with Components - Components help designers break complex interfaces into smaller, understandable parts. - Reusable elements can appear in multiple locations, at different sizes and with local modifications. - Unlike duplicated copies, component instances remain connected to their source. - Updates to the original component are automatically reflected across all instances, improving consistency and reducing repetitive work. - Examples include repeated address-book rows containing shared typography, spacing, icons, and graphics. ## Figma’s Design Goals Figma aimed to make Components: - Easy for new users to learn. - Powerful enough for advanced design systems. - Flexible throughout the design process. - Low-overhead, so systematic design improves speed without limiting experimentation. ## Creating and Using Instances - Any frame or selected object can be converted into a component through the toolbar. - Duplicating, copying, pasting, or Alt-dragging a component creates instances rather than independent copies. - Instances can move independently on the canvas while retaining their connection to the source component. - Changes made to the main component propagate immediately to its instances. - Certain internal properties, such as the position and size of nested objects, are restricted to make components easier to maintain. ## Style and Property Overrides - Instance changes are treated as overrides of the original component’s properties. - Designers can override fills, strokes, colors, widths, and properties of nested layers. - Overrides remain intact when the source component changes. - Properties that were not overridden continue to update from the source component. - Overrides can be removed with the “Reset Instance” action. ## Complex and Nested Components - Components can contain instances of other components. - Combining nested components makes it possible to build larger systems from smaller, reusable parts. - Designers can add instances to an existing component or create a new component from selected instances. - Nested components are intended to work like other Figma objects, keeping complex systems manageable. ## Constraints - Components can be combined with Figma’s Constraints feature. - Constraints allow elements to respond to changes in size and position. - Together, components and constraints support reusable designs that adapt more intelligently across layouts. Components provide a practical bridge between design and software development: create shared building blocks once, reuse them widely, and preserve controlled customization through overrides. Teams building consistent, evolving interfaces can use them to reduce duplication while keeping designs adaptable.

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

Delete and Heal for Vector Networks | Figma Blog

Figma’s “delete and heal” feature removes a vertex while preserving the surrounding shape as much as possible. What begins as a simple graph-editing operation becomes complex for curved segments and vector networks, where vertices may connect to many edges. Figma addresses this by fitting replacement Bézier curves and pairing edges according to their geometry. ## Basic Deletion and Healing - Standard deletion removes the selected vertex, its incident edges, and any fills that depend on those edges. - “Delete and heal” instead attempts to connect the neighboring vertices. - If a vertex touches only one edge, that edge is removed because no meaningful healing is possible. - Triangles and other small paths require special-case decisions about whether healing produces one edge or multiple edges. - The behavior differs between open and closed paths. ## Preserving Curvature - Curved segments are represented as cubic Bézier curves. - Deleting a vertex joins two cubic curves into one replacement curve. - Figma keeps the original endpoints fixed but adjusts the neighboring control handles to preserve the original curvature. - The algorithm: - Samples points along both original Bézier curves. - Treats the shared vertex as a single point. - Fits a new cubic Bézier curve through the resulting samples. - Figma uses a curve-fitting technique from Philip J. Schneider’s “An Algorithm for Automatically Fitting Digitized Curves,” published in *Graphics Gems*. ## Healing Vector Networks - Unlike traditional path-based editors, Figma models vector objects as undirected multigraphs with edge identity. - A vertex can therefore have more than two incident edges. - If the vertex has an odd number of connected edges, Figma removes all incident edges because no complete pairing is possible. - With an even number of edges, the edges are paired and replaced with new edges. - To determine which edges are “opposite,” the incident edges are sorted by their angles around the deleted vertex. - This graph-based approach allows delete-and-heal to work on branching vector networks, not just simple paths. Figma’s implementation combines graph topology, geometric pairing, Bézier sampling, and curve fitting to make deletion feel intuitive while retaining as much of the original design as possible.

Read original(opens in new tab)
Vector GraphicsBezier CurvesComputational GeometryGraph Theory+2
figma2 min readCurated summary

Debugging Data Corruption with Emscripten | Figma Blog

Figma encountered intermittent save-file corruption caused by an elusive C++ memory-safety bug. Conventional debugging tools failed because the web app’s asynchronous behavior made the problem nondeterministic. A keyboard-and-mouse fuzzer eventually produced reproducible failures, while understanding Emscripten’s C++-to-JavaScript memory model helped narrow the investigation. ## Detecting the Corruption - Invalid save files appeared occasionally and could not be reliably reproduced. - Figma’s files used ZIP containers around Google FlatBuffers documents. - The serialized bytes looked mostly valid, but some offsets were unexpectedly zeroed. - Data being written to the wrong location suggested a memory-safety violation such as: - Use before initialization - Use after free - Out-of-bounds access ## Why C++ Made the Bug Difficult - C++ was valuable for Figma because it provided: - Access to libraries such as FreeType, HarfBuzz, and Skia - Low-level control suitable for graphics software - Mature debugging and optimization tools - However, C++ offers no built-in protection against memory errors. - The team tried avoiding deallocation, enabling malloc diagnostics, fixing Valgrind and Clang Analyzer findings, and upgrading the compiler, but none exposed the corruption. ## Reproducing the Failure with Fuzzing - The team planned to eliminate nondeterminism by recording user events and replaying them deterministically. - Building a complete session recorder was too large a project, so they limited inputs to keyboard and mouse events. - A fuzzer generated random event sequences and ran them against the application. - After several days, it produced multiple save failures, providing reproducible cases for debugging. ## Emscripten’s Emulated Memory Model - Figma’s C++ editor ran in the browser through Emscripten, which compiled C++ into JavaScript. - JavaScript typed arrays and shared `ArrayBuffer` storage allowed Emscripten to emulate contiguous C++ memory. - In the generated code: - Pointer loads became typed-array reads. - Pointer stores became typed-array writes. - Registers became local variables. - Shared buffers enabled pointer reinterpretation between types. - Emscripten generated asm.js-style JavaScript, using type annotations and operations optimized for JavaScript JIT compilers. The combination of deterministic fuzzing and knowledge of Emscripten’s low-level memory representation provided the path toward isolating the corruption, even though the ultimate fix was reportedly only a three-line change.

Read original(opens in new tab)
JavaScriptWebglC Plus PlusMemory Safety+4
figma3 min readCurated summary

Multiplayer Editing in Figma | Figma Blog

Figma’s multiplayer editing release made real-time collaboration a core part of its design workflow. The company replaced a simple whole-document save-and-upload model after it caused overwrites, stale links, and confusing collaboration problems. Although multiplayer required major changes to conflict resolution, undo/redo, layout behavior, file formats, and performance, Figma concluded that it ultimately simplified the user experience. ## Why the Original Saving Model Failed - Early Figma downloaded documents locally, let users edit in the browser, and periodically uploaded the entire document. - This approach was easy to build and familiar to users of syncing services such as Dropbox. - In team settings, however: - Users could unknowingly overwrite one another’s work. - Shared links could display an outdated version while changes were still saving. - Version history preserved data, but did not prevent collaboration mistakes. - Alternatives such as “baton-passing,” where only one person could edit at a time, lacked the simplicity and flexibility Figma wanted. ## How Figma’s Multiplayer Engine Works - Each user’s changes are sent to the server and broadcast to other participants in real time. - Independent simultaneous changes can coexist. - When users modify the same property on the same object, Figma resolves the conflict by selecting the latest change. - Implementing this model required changing fundamental parts of the editor rather than adding multiplayer as a separate synchronization layer. ## Undo, Redo, and Conflict Resolution - Undo becomes ambiguous when other users modify the same objects afterward. - Figma adopted a guiding principle: undoing actions, copying something, and redoing back to the present should leave the document unchanged. - Redo therefore cannot simply reapply the original edits, since that might overwrite newer work by collaborators. - Conflict resolution also had to account for: - Related properties that must be changed together. - Actions that indirectly affect multiple objects. - Layout operations where apparently unrelated edits can interact. - These requirements led Figma to revise aspects of its layout system. ## Performance and File-Format Changes - Professional-quality multiplayer required extensive measurement and tuning. - Figma overhauled its file format because the previous representation was inefficient for transmitting small incremental messages. - The team expected additional challenges as new collaborative features were introduced. ## A Simpler Collaborative Experience - Multiplayer reduced UX complexity by eliminating workarounds for stale files, overwrites, and coordination. - Users can see collaborators’ mouse cursors and selections, providing immediate context about who is present and where they are working. - Cursors can also serve as lightweight communication tools, such as pointing at an object or getting someone’s attention. - Each participant appears as an avatar in the top-right corner. - Clicking an avatar lets one user present to another, making presentations opt-in rather than forcing a single presenter and synchronized viewing mode. Figma’s experience suggests that real-time collaboration is best treated as a foundational part of the editor. Despite the substantial engineering investment, multiplayer editing can make collaborative software both more powerful and easier to use.

Read original(opens in new tab)
FigmaReal Time CollaborationOperational TransformationWeb Browser+3
figma2 min readCurated summary

Introducing Figma’s Integration with Framer | Figma Blog

Figma announced a one-click integration with Framer in August 2016, responding to strong user demand for better prototyping workflows. The integration lets designers import Figma assets directly into Framer instead of exporting layers individually and uploading them manually. Together, the tools connect Figma’s rapid UI design and iteration with Framer’s expressive, code-based prototyping. ## The Need for Better Prototyping - Static mockups are insufficient for designing mobile and interactive experiences. - Designers need to: - Design within the context where a product will be used. - Demonstrate how screens respond to user input. - Add motion, transitions, and other interactive details. - Earlier workflows often required After Effects or manually building HTML, JavaScript, and CSS prototypes. - These approaches were cumbersome, involving remote servers, FTP uploads, mobile testing over 3G, and browser compatibility issues. ## Figma and Framer Integration - Figma users can import assets into Framer with one click. - The integration removes the need to export and upload layers individually. - It creates a faster path from visual UI design to interactive, code-based prototypes. - The feature was especially significant because Framer was the prototyping tool most frequently requested by Figma users. ## Complementary Strengths - Figma supports quick UI design and team iteration. - Framer enables open-ended, code-based prototypes, particularly for complex single-page interactions. - The combined workflow helps designers move ideas into code faster, test them in realistic interactions, and ship better products sooner. - The partnership also reflects Figma’s belief that code-based prototyping can be accessible to a broader generation of designers. The integration was intended to make prototyping more efficient by combining Figma’s collaborative design workflow with Framer’s flexibility and expressive coding environment.

Read original(opens in new tab)
FigmaPrototypingJavaScriptCSS+4
figma2 min readCurated summary

How to do content design / UX writing in Figma | Figma Blog

Figma enables content designers and UX writers to work alongside visual designers instead of contributing only after interfaces are defined. Its web-based, real-time collaboration makes content decisions visible, supports earlier iteration, and helps teams design what a product looks like and communicates at the same time. The post presents five lessons for using Figma to integrate content into the design process. ## Use Real Content to Inform the UI - Add real or near-real copy as soon as a screen, modal, or interaction is created. - Testing actual content early reveals: - Whether the interface communicates the intended message - Whether there is enough space for the copy - Whether the UI needs to be redesigned - Designing content and UI together prevents late-stage copy changes from breaking established interactions or flows. - This is particularly valuable when content designers join a project after visual design has already begun. ## Start Content-First with Written Conversations - Model interactions as real-world conversations before designing them visually. - Use a dedicated Figma frame or comments to script exchanges between the system and the user. - Role-playing conversations helps teams: - Identify goals and edge cases - Understand flow and information hierarchy - Use natural, human language instead of system terminology - These scripts may not become a final blueprint, but they provide a useful reference throughout iteration. ## Map the Entire User Journey - Content designers need visibility into the complete journey, including what happens before and after a specific screen. - Map the journey collaboratively in Figma, then document the content needs beneath each stage. - This encourages visual design to begin with the user’s content and context. - Shared files make the process more iterative than isolated slide decks, sketch files, or physical whiteboards. - Real-time visibility also helps engineers, product owners, and designers understand the content designer’s contribution across the journey. ## Collaborate and Document with Comments - Figma comments provide a shared space for discussing content and recording the reasoning behind content decisions. - Because the work is visible in the same file as the UI, collaborators can respond to copy choices in context rather than reviewing content separately. - The provided excerpt ends before this section’s detailed examples and remaining lessons. Figma is most effective for UX writing when teams use it from the beginning: write realistic content, model conversations, map journeys, and collaborate directly within the design file.

Read original(opens in new tab)
FigmaUser InterfaceCollaborative DesignUx Writing+2
figma2 min readCurated summary

Introducing Vector Networks | Figma Blog

Figma’s vector networks replace the traditional path model with a more flexible structure that lets users connect, split, and manipulate geometry naturally. The system remains compatible with existing cubic Bézier curves while improving direct editing, strokes, and fills. The result is a vector tool that behaves more like physical drawing and avoids several long-standing limitations of pen-based editors. ## Vector Networks vs. Traditional Paths - Traditional paths are chains of lines and curves connecting two endpoints. - Vector networks allow lines and curves between any points, without requiring one continuous chain. - Users can: - Connect any points together - Delete geometry anywhere - Split and recombine shapes naturally - Attach three or more lines to a single point - Stroke caps and joins work consistently, including at multi-line junctions. ## Direct Curve Manipulation - Existing vector tools typically use cubic Bézier curves with control handles positioned away from the curve. - Figma preserves Bézier compatibility but adds a bend tool for direct manipulation. - Holding Command on macOS allows users to drag the curve itself. - Figma automatically adjusts the underlying control handles to match the desired bend. ## More Intuitive Fills - Traditional vector engines use the winding number rule, where fill behavior depends on curve direction. - This makes fills difficult to understand because users generally cannot see whether curves were drawn clockwise or counterclockwise. - Vector networks automatically fill enclosed regions. - A paint bucket-style tool lets users toggle individual enclosed areas to create holes directly. - Developing this fill system was the most difficult part because earlier approaches required users to manually manage negative space. ## Design Through Iteration - Figma’s team initially explored more advanced curve types but chose to remain compatible with existing vector formats. - User studies showed that many people did not consciously notice vector networks; they simply found the tool behaved as expected. - The contrast became clear when users returned to conventional vector editors and encountered their limitations. - Despite many abandoned approaches and doubts during development, Figma concluded that vector networks offered a meaningful improvement over paths. Figma’s recommendation is implicit: vector editing should prioritize direct manipulation and intuitive geometry rather than forcing users to understand the underlying path mechanics. Vector networks preserve compatibility while making drawing, editing, strokes, and fills substantially more natural.

Read original(opens in new tab)
FigmaVector GraphicsBezier CurvesVector Networks+2
figma2 min readCurated summary

From Furniture to Screens | Figma Blog

Furniture design taught Figma designer Sayer Pease that tools should support people’s activities without becoming the focus themselves. Figma applies this principle through simple, versatile tools, tactile controls, and a restrained visual system that helps designers concentrate on their work. The broader lesson is that useful design principles can come from disciplines far beyond digital product design. ## Tools - A small, well-designed toolset can support both simple and complex work, much like a hammer can build anything from a cabinet to a house. - Figma’s pen tool was designed to feel more like a physical pen. - Its vector objects use networks of connected points rather than traditional paths, enabling more flexible and natural drawing. - The editor is intended to resemble an organized workbench, with essential tools easy to find and use. ## Control - Familiar, tactile interactions help users feel in control of digital tools. - Keyboard shortcuts provide both physical familiarity and greater efficiency. - Figma’s Command-drag selection heuristic distinguishes containers from their contents. - Users can select nested elements—such as icons inside a toolbar—without selecting the toolbar itself, reducing the need to think about layer hierarchy. ## Color as Semantic Guidance - Figma initially used an almost entirely monochromatic, “unskinned” interface so the product would fade behind users’ designs. - As functionality increased, the lack of visual differentiation made UI components harder to distinguish. - The revised approach uses color without making the interface visually dominant. - Colors add semantic meaning: green indicates actions, while blue indicates selection. - This helps users understand what they are doing at a glance rather than focusing on how the interface works. ## Learning Across Disciplines - Product designers should challenge the assumptions and conventions of their immediate field. - Valuable solutions can come from both historical design practices and unrelated disciplines. - Furniture design provides Figma with principles centered on utility, organization, control, and unobtrusive support. Ultimately, digital tools should enable users’ creativity rather than compete with it. Designers can improve products by studying how other disciplines create tools and environments that quietly support meaningful work.

Read original(opens in new tab)
FigmaDesign SystemsUser ExperienceUser Interface+2
figma2 min readCurated summary

Slack From the Start | Figma Blog

Figma chose to build its collaboration experience around Slack rather than recreate messaging and notification features. User research showed that Slack was already central to designers’ daily workflows and correlated with more transparent collaboration. By making a Figma team a Slack team and routing notifications through Slack, Figma aimed to reduce tool fragmentation and strengthen its core product. ## Why Slack Mattered to Figma’s Users - Figma interviewed many designers about file storage, specifications, and product decisions. - More than half of the designers surveyed reported using Slack throughout the day. - Slack adoption was associated with more open and transparent design processes. ## Building on Slack Instead of Duplicating It - Figma considered recreating communication features inside its own product. - The team rejected that approach because it would create another inbox and require users to manage teams in two places. - Instead, Figma built its collaboration model on top of Slack: - A Figma team corresponded to a Slack team. - Figma file notifications were delivered through Slack. - Communication about design remained connected to users’ existing workflows. ## A Strategic Platform Bet - Figma viewed Slack as a platform well before Slack formally celebrated its platform launch. - Deep integration was considered a significant product and business bet. - Early results suggested the strategy was working, and Figma expected other companies to adopt similar integrations. The practical lesson is to integrate with tools users already rely on rather than reproducing their functionality. For Figma, treating Slack as foundational reduced friction and made collaboration feel like part of an existing workflow.

Read original(opens in new tab)
FigmaSlackCollaborationApi Integration+2
figma3 min readCurated summary

Grid Systems for Screen Design | Figma Blog

Swiss grid design remains relevant to digital products, but traditional fixed-page tools do not handle fluid screen sizes well. The post argues that flexible grids can preserve visual coherence while adapting to different devices. Figma’s solution combines constraints, layout grids, and nested frames to create responsive design systems with precise alignment. ## From Fixed Pages to Fluid Screens - Swiss designers such as Joseph Müller-Brockmann and Karl Gerstner systematized printed-page layouts using rational grid structures. - Traditional grids assumed fixed page dimensions and precise control over typography, margins, and spacing. - Digital interfaces must accommodate changing screen sizes, shapes, and pixel densities. - Designers often compensate with multiple artboards, repetitive adjustments, or guesswork when tools are built around static layouts. ## The Core Building Blocks Figma proposes three complementary features: - **Constraints:** Define how an object responds when its containing frame changes size. - **Layout grids:** Provide detailed alignment and sizing rules across a design. - **Nested frames:** Allow different parts of a design to use their own layout systems. The greatest flexibility comes from combining all three rather than using them independently. ## Constraints for Responsive Behavior - Objects can be anchored to the left, right, or center of a frame. - Objects can also stretch to fill available space. - Constraints provide a basic way to preserve relationships as a frame expands or contracts. ## Stretchable Layout Grids - Grids provide more granular control than simple edge or center constraints. - A box spanning two grid columns can grow or shrink while remaining aligned to those columns. - Column grids can organize text, toolbar icons, and other interface elements—not just web-page content. - Stretching grids allow layouts to respond naturally to changing screen dimensions. ## Frames Within Frames - Nested frames let different sections of a design use separate grids and alignment rules. - This makes it possible, for example, to keep toolbar icons aligned to one grid while allowing the main content to follow another layout. - Frames provide more functionality than static artboards because they support responsive relationships and hierarchical layout systems. - The structure resembles nested HTML `<div>` elements, making it closer to how designs are implemented in code. ## Toward Better Design Tools - Responsive layout systems are only a starting point for improving digital design tools. - The post encourages designers to reassess inherited conventions and look to historical design practices for useful ideas. - Modern tools should combine the coherence of traditional grids with the flexibility required by variable screens. Figma’s recommended approach is to build designs from nested frames, stretchable grids, and well-defined constraints, creating systems that remain organized without being tied to a single screen size.

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

Building a professional design tool on the web | Figma Blog

Figma set out to prove that a professional, high-fidelity design tool could run reliably in the browser. The challenge was that the web exposed specialized features rather than general-purpose graphics primitives, so Figma effectively had to build “a browser inside a browser.” Its solution combined C++ compiled through Emscripten with a custom rendering engine, enabling tighter control over memory, performance, and cross-platform consistency. ## Building Beyond the Web’s Original Design - The web was originally designed for documents, with application features added later as isolated APIs. - This limits advanced applications: - CSS provides sophisticated text layout but does not expose or customize the layout process. - Browsers have optimized GPU compositors, but developers cannot directly modify compositing or add custom blend modes. - Image decoders are highly optimized but offer limited control over details such as EXIF orientation and color-space handling. - Technologies such as WebGL and asm.js began exposing lower-level access to hardware, making demanding browser-based graphics applications practical. ## C++ and Emscripten - Figma’s editor was written in C++ and cross-compiled to JavaScript using Emscripten. - Emscripten targeted asm.js, allowing JavaScript engines to generate predictable and compact machine code. - This approach provided: - Direct control over memory layout, including compact 32-bit floats and bytes instead of JavaScript’s 64-bit numbers. - Manual allocation that avoids garbage-collection pauses and helps maintain 60 fps. - LLVM optimization and C++ template specialization for performance approaching native code. - More predictable execution because asm.js avoids the deoptimization points common in regular JavaScript. ## Memory Constraints and Indirect Buffers - Large contiguous typed-array allocations caused problems, especially in 32-bit Chrome on Windows, where address-space fragmentation from ASLR could prevent allocations as small as 256 MB. - Figma created an `IndirectBuffer` API to reference external typed arrays from C++. - Moving large image and geometry buffers outside the main heap: - Reduced fragmentation during long sessions. - Allowed better use of limited 32-bit address space. - Helped bypass typed-array size limits in 64-bit browsers. - The post also points toward future improvements from WebAssembly, which would reduce asm.js parsing costs, and shared typed arrays, which would enable shared-memory multithreading. ## Custom Rendering - Figma implemented its own rendering engine to achieve fast, consistent output across platforms. - Rather than relying entirely on browser graphics implementations, the team began building the rendering layer needed for a professional design application. Figma’s broader recommendation is to use low-level browser capabilities such as WebGL and compiled code when standard web APIs cannot provide the required performance or control.

Read original(opens in new tab)
WebassemblyC++WebglAsm Js+3