techlist.io
KREN

Techlist.io - Korean Tech Blog Curator

figma3 min readCurated summary

The Anatomy of a Super Bowl Ad | Figma Blog

Duolingo’s five-second Super Bowl ad succeeded by turning a severe budget constraint into a creative advantage. Its deliberately absurd “unhinged Duo” gag, paired with a real lesson reminder, was designed to create a memorable WTF moment and generate conversation beyond the broadcast. The campaign depended on close coordination between marketing, engineering, and the brand studio. ## Aiming for Culture and Conversation - Duolingo saw the Super Bowl as a chance to reach the year’s largest live U.S. audience. - The goal was not merely exposure, but earned media, virality, and word-of-mouth. - Previous data showed that major broadcasts could drive language-learning activity: - Users completed lessons during Eurovision breaks. - A prior Super Bowl push notification produced the app’s highest engagement. - The team decided to make the ad itself function as a lesson reminder. ## Turning a Budget Constraint into a Format - A 30-second Super Bowl commercial cost about $7 million on average in 2023. - Rather than compete with longer, more expensive ads, Duolingo pursued a five-second spot. - The team looked to short ads such as Reddit’s 2021 commercial as examples of compact ideas that could expand through social media. - The intended result was tens of millions of social impressions generated by a highly shareable moment. ## Designing the “WTF Moment” - The ad featured Duo sitting in a white frame before turning around and revealing an exaggerated, balloon-like backside. - A second Duo emerged with a flatulent sound, followed by the message “Do your Duolingo.” - Simultaneously, users received a push notification reminding them to complete a lesson. - The crude humor built on Duo’s existing reputation as both wholesome and “unhinged,” matching the brand’s relationship with its online community. ## Cross-Functional Brainstorming - The first of three brainstorming sessions began in September after the ad slot was secured. - The brief asked: “How do we hack and own the Super Bowl conversation in 5 seconds?” - Marketing, engineering, and brand teams divided into breakout groups and developed concepts in FigJam. - Ideas were evaluated for whether they would: - Produce a strong reaction and social buzz - Fit Duolingo’s tone and strengthen the brand - Support additional campaign content - Demonstrate Duolingo’s product capabilities - Groups nominated their best ideas, and the wider team voted on them using FigJam stickers. ## Aligning on a Big Idea - One brainstorm was not enough to reach agreement. - The teams reconvened in another FigJam session to evaluate concepts through different strategic approaches, including ways to exploit the five-second television format. - The eventual campaign required several weeks of synchronized work across creative, marketing, engineering, and design. Duolingo’s approach demonstrates how a sharply defined constraint can produce stronger creative work. A short, distinctive concept—when aligned with existing brand behavior, product functionality, and coordinated distribution—can outperform a conventional expensive commercial.

Read original(opens in new tab)
FigjamMobile AppBrainstormingPush Notifications+2
figma3 min readCurated summary

What Is a Design System | Design Systems 101 | Figma Blog

Design systems provide a shared foundation for designing and building consistent digital products. They combine principles, visual standards, reusable components, documentation, and development guidance to reduce duplication and prevent confusing or fragmented user experiences. Rather than limiting creativity, a well-designed system gives teams a common language and lets them focus on solving higher-level product problems. ## What a Design System Is - A design system is a collection of building blocks, standards, resources, and processes that guide product design and development. - It acts as a blueprint for an organization’s product ecosystem, covering: - Design tokens and technical specifications - Documentation and best practices - UX principles and decision-making processes - Brand, accessibility, and usability guidance - Its goal is to make products more consistent while reducing the time spent recreating common elements and patterns. ## The Three-Level Structure ### 1. The Design System - The highest-level container includes the organization’s overall guidance and evolving processes. - It may include design principles, documentation, technical specifications, tokens, and product-development standards. ### 2. Component and Pattern Libraries - Component libraries contain reusable interface elements such as buttons, input fields, and other UI controls. - Pattern libraries describe broader solutions, such as navigation flows, layouts, and data-display approaches. - These libraries can include: - Templates and layouts - Interaction patterns - Design components - Code snippets - Technical specifications - Usage documentation - They connect design and development by translating design intent into implementable code and shared practices. ### 3. Foundational Elements - Foundational elements establish the product’s visual language and voice. - Common examples include: - Color - Typography - Icons and logos - Illustrations - Voice and tone - Brand guidelines - Accessibility standards ## Design Systems Versus Related Resources - A component library focuses on individual UI elements, while a pattern library addresses complete interface solutions or user flows. - A design system is broader than a style guide: - Style guides mainly document visual elements such as colors, typography, and imagery. - Design systems also include components, coding standards, usability guidance, processes, and documentation. ## More Than Visual Consistency - Design systems influence the full user experience, not just appearance. - Consistent colors, icons, button behavior, language, and layouts help users understand and navigate products more easily. - The article challenges the idea that design systems eliminate creativity or force every design to look identical. - Instead, they handle repeated design and implementation decisions so designers can spend more time addressing unique product and user needs. A practical design system should be treated as an evolving shared foundation rather than a static style guide. Combining reusable components with clear standards, documentation, accessibility guidance, and development support helps teams scale product work without sacrificing consistency or usability.

Read original(opens in new tab)
Design SystemsUser ExperienceAccessibilityDesign Tokens+2
figma2 min readCurated summary

Power up your designer-developer handoff with Figma and Jira | Figma Blog

Product teams achieve higher velocity not through speed alone, but through tools, processes, and rituals that keep design and development aligned. Figma argues that reducing communication gaps—especially in hybrid and growing organizations—helps teams preserve “flow” and ship better products faster. High-fidelity prototypes, work-in-progress sharing, and connected workflows such as Figma for Jira are presented as practical ways to support that alignment. ## Building a Shared Understanding with Prototypes - As companies grow, teams tend to become siloed and processes slow down. - Designers and developers may interpret the same requirements differently, making continuous communication essential. - High-fidelity, interactive prototypes provide a shared visual and functional reference: - Developers can understand user flows, pop-ups, dropdowns, and interactive states. - Teams avoid the ambiguity of static mockups or fragmented prototypes spread across many linked pages. - At One.com, designers in Denmark meet regularly with developers in India to review requirements, blockers, and potential problems around a working Figma prototype. - The prototype also preserves meeting context for remote and asynchronous collaborators, allowing people to continue working effectively after the meeting ends. ## Protecting Maker Time and Team Flow - Paul Graham’s “Maker’s Schedule, Manager’s Schedule” is used to illustrate why uninterrupted time matters to designers and developers. - Product teams rarely work in ideal conditions: calendars are crowded, requirements change, and hybrid work introduces additional coordination challenges. - Maintaining velocity therefore requires deliberate foundations: - Clear communication - Shared artifacts - Regular alignment rituals - Processes that reduce interruptions and uncertainty - Daily standups, such as those used by Condé Nast’s product development team, help teams discuss progress, priorities, and possible roadblocks. ## Connecting Design and Development Workflows - Figma positions its Jira integration as a way to keep design context connected to implementation work. - Embedding design information in development workflows helps developers understand not only what to build, but how the intended experience should behave. - The broader goal is to reduce handoff friction and keep different teams working from compatible sources of information. Teams can improve designer-developer handoff by treating prototypes and collaboration processes as part of the product infrastructure—not as final-stage documentation. Use interactive prototypes, share work early, maintain regular alignment, and connect design artifacts directly to development tools such as Jira.

Read original(opens in new tab)
FigmaPrototypingProduct DevelopmentJira+2
figma2 min readCurated summary

An Insider’s Guide to a Seamless Figma Migration | Figma Blog

Migrating to Figma is presented as an organizational change—not merely a software switch. Success depends on careful planning, cross-functional communication, advocacy, training, and adaptation of existing workflows and cultural norms. The article argues that treating migration as a strategic investment can produce long-term gains in collaboration, transparency, and productivity. ## Planning the Migration - Begin by identifying the reasons for adopting Figma, such as: - Better collaboration - Greater transparency - Streamlined processes - Treat migration as a change-management initiative involving the entire organization. - Plan around team commitments and existing tool-expiration dates. - Use resources such as Figma’s Migration Toolkit for guidance when moving from other design platforms. ## Building a Cross-Functional Advocacy Team - Create a core team with representatives from design, development, product management, and stakeholder groups. - Give the team responsibility for: - Gathering balanced feedback - Configuring the Figma workspace - Managing communications - Coordinating library transfers - Successful examples include: - Wells Fargo’s “Figma Jedis,” combining experts and enthusiastic users - Uber’s integration of Figma training with an existing design-system workshop - JPMorgan Chase’s advocates, nominated by leadership and cross-functional groups - The strongest advocates are engaged, representative of different departments, and connected to existing initiatives. ## Securing Organization-Wide Support - Obtain buy-in from developers, product managers, leadership, and other stakeholders—not only designers. - Present a clear proposal outlining the benefits and drawbacks of migration. - Build support through: - Workshops and demonstrations - Best-practice sharing - Early access to libraries and components - Training and practical guidance - Dropbox’s migration shows the value of sustained outreach and creative engagement, including extensive internal promotion and Figma-themed incentives. ## Learning from Other Organizations - Contact teams that have already completed large-scale migrations. - Their experience can provide: - Training plans - Deployment playbooks - Cover pages and workspace conventions - Warnings about common mistakes - Examples from Wells Fargo, Uber, and Dropbox demonstrate how peer advice can improve rollout planning and reduce avoidable problems. - Large migrations benefit from studying proven approaches rather than designing every process from scratch. ## Establishing a Migration Timeline - Build a schedule that accounts for: - Team availability - Existing project commitments - Expiration dates for current tools - A defined timeline helps coordinate the transition and gives teams a clear path from planning to adoption. The practical recommendation is to manage a Figma migration as a coordinated organizational program: assemble advocates, involve every relevant function, learn from experienced teams, and create a realistic timeline before moving work and libraries.

Read original(opens in new tab)
FigmaDesign SystemsDesign CollaborationDesign Tools+2
figma3 min readCurated summary

Everything You Need to Know About Dev Mode | Figma Blog

Figma built Dev Mode to make the transition from design to code more efficient for developers, who now represent roughly one-third of its weekly active users. Rather than separating developers into different tools or files, Figma created a dedicated space within the same collaborative environment. After an open beta shaped by extensive user feedback and more than 200 updates in its first two months, Dev Mode moved out of beta with a focus on clearer handoff and developer-centered workflows. ## Why Figma Built Dev Mode - Developers were already using Figma alongside designers, product managers, and other collaborators, despite Figma not being optimized for their workflows. - Figma wanted to support varied development roles, including: - Front-end developers working with design systems - Design systems engineers building components - Developers implementing content layouts and exporting assets - In 2021, Figma acquired Visly, a team of eight designers and engineers experienced in React UI development and developer tooling. - The Visly team emphasized that developers should not have to learn every interaction in design mode; the experience should be tailored to their needs. ## An Integrated Development Workspace - Figma considered both fully separate files and tightly integrated design and development experiences. - It ultimately chose a dedicated mode inside Figma: - Developers get tools and workflows optimized for implementation. - They retain access to the design context and collaboration surrounding the work. - The approach avoids forcing teams to switch tools or lose important information during handoff. - Dev Mode launched as an open beta at Config 2023, with customer feedback driving rapid improvements and over 200 requested updates delivered in the first two months. ## Communicating Design Intent - Traditionally, designers had to manually create measurements, callouts, and organized specifications for developers. - Dev Mode introduces annotations that remain connected to the design and update as the design changes. - Designers can: - Click and drag to measure - Highlight important details without cluttering the canvas - Add live specifications and contextual notes - Automate or customize annotations through plugins - Designers can mark a section as “ready for development” without creating a separate file or page. - Developers can use diffing tools to compare changes between versions and stay current with design updates. ## Practical Impact Dev Mode is intended to make design handoff less manual and more collaborative by giving developers a purpose-built workspace without removing them from Figma’s shared context. Teams can use annotations, readiness labels, and frame comparisons to reduce ambiguity and keep implementation aligned with evolving designs.

Read original(opens in new tab)
FigmaDesign SystemsReactDesign To Code+3
figma2 min readCurated summary

The Art and Science of Annotations in Dev Mode | Figma Blog

Figma’s Dev Mode annotations aim to make designer–developer collaboration clearer and less manual. The feature centralizes design context, keeps specifications synchronized with changing designs, and avoids cluttering the design canvas. Its core conclusion is that annotations should be dynamic, connected to design properties, and presented in a developer-focused workspace. ## Solving Designer and Developer Needs - Designers need to document information that visuals cannot fully express, including: - Accessibility requirements - Interaction behavior - Rationale behind design decisions - Developers need more than access to an entire design file; they need a curated engineering specification that identifies the relevant work. - Figma placed annotation workflows in Dev Mode so designers can: - Annotate from the same perspective developers use - Create a focused specification - Share a direct Dev Mode link with developers - Dev Mode is intended to involve the broader product team rather than isolate developers after design work is complete. ## Dynamic Annotations That Stay Current - Traditional annotations are manually created and quickly become outdated as designs evolve. - Figma explored connecting annotations directly to design properties so they update automatically when the underlying design changes. - Measurement indicators can also respond dynamically to layout or dimension changes. - Referencing actual variables and components from a design system reduces ambiguity and helps keep specifications aligned with implementation. - This approach supports the constantly changing nature of product development, where developers need visibility into ongoing design updates. ## Positioning Annotations Without Canvas Clutter - Manual annotations often force designers to move frames and rearrange the canvas to make room for notes and pointers. - Figma wanted annotations to remain visible to developers without consuming space in the design itself. - The proposed solution was to position and display annotations automatically. - This required handling complex interactions such as: - Zooming and panning - Scaling - Selecting and hovering - Minimizing annotations - Engineering worked through numerous prototypes and tuned the display logic to make automatically positioned annotations usable in practice. Figma’s approach treats annotations as a living, developer-oriented specification rather than static notes on a canvas. Connecting them to design properties and displaying them dynamically can reduce maintenance for designers while giving developers clearer, more reliable implementation context.

Read original(opens in new tab)
FigmaDesign SystemsAccessibilityDev Mode+2
figma2 min readCurated summary

Peter Yang: 10 Rules for Making Products that Customers Love | Figma Blog

Peter Yang argues that great product management is a craft, not an instinct or checklist. Product managers must continually develop product sense, deeply understand customers, think strategically before executing, and protect quality through difficult trade-offs. The goal is to build products customers genuinely value, even when that requires delaying milestones or abandoning a beloved project. ## Product Sense Must Be Cultivated - Product sense is the ability to create products or changes that have the intended impact on users. - It is not a permanent, intuitive skill; markets and customer needs constantly change. - PMs should continually improve through: - Empathy - Creativity - Attention to craft - Humility and ongoing learning ## Use Empathy to Diagnose the Problem - Teams often rush into solutions before clearly understanding the customer or business problem. - Peter cites empathy as a product manager’s superpower. - PMs can build empathy by: - Treating customers like members of the team - Speaking directly with them - Personally using the product as customers do, even for just an hour - Accurate problem diagnosis should come before defining a vision or solution. ## Start with Big Ideas Before Daily Execution - Once the problems are understood, teams should pause before getting absorbed in execution. - Collaboratively define: - Mission - Vision - Strategy - Brainstorm ambitious, “blue-sky” ideas and prioritize them. - Seek simple solutions—potentially a few clear steps—that best address customer needs. - New learning may require changing priorities and making trade-offs. ## Protect Quality and Know When to Change Course - Quality may require missing a launch date or short-term OKR. - In one example, Yang chose to add an important feature identified through customer conversations, even though it meant missing a quarterly deadline. - Craft means obsessing over details, trade-offs, bugs, and the extra work required to create a worthwhile experience. - Product managers must also recognize when a project should be canceled. - At Reddit, Yang worked on Reddit Talk, a well-loved live audio product, but the project was ended during an economic downturn because it did not improve the company’s most important metrics. - Good product judgment includes considering the company’s broader needs rather than becoming attached to a particular product. The practical recommendation is to keep customer understanding and product quality at the center of decision-making, while remaining flexible enough to delay, redirect, or stop work when the evidence demands it.

Read original(opens in new tab)
User ResearchProduct ManagementBrainstormingProduct Strategy+3
figma2 min readCurated summary

Six Myths Holding You Back from Embracing Design Systems | Figma Blog

Design systems are not reserved for large companies or teams with advanced design practices. Figma argues that the best system is practical, goal-oriented, and tailored to an organization’s brand, users, and needs—not copied from industry trends or famous examples. By challenging common assumptions, teams can adopt design systems more confidently and incrementally. ## Design Systems Benefit Teams of All Sizes - Small organizations can use design systems to improve efficiency, consistency, and collaboration. - The system’s scale and appearance may vary, but its core purpose remains the same. - Mixpanel’s redesign is cited as an example of using a design system to reduce costs, improve consistency, and make analytics more accessible. ## A Design System Does Not Need Every New Technique - Design trends change constantly, and no single approach is universally correct. - Teams should learn from industry practices without becoming distracted by building a “perfect” or fashionable system. - A useful design system should serve clear organizational goals rather than imitate the latest trends. ## Material Design Is Not a Universal Solution - Google’s Material Design is influential, but it is not automatically suitable for every organization. - Design systems should reflect a company’s brand identity, user needs, and business objectives. - Teams should balance established standards with solutions appropriate to their current context. - Examples such as Uber Base, Spotify Backstage, Pipedrive, Microsoft Teams, and Salesforce Lightning demonstrate that successful systems can differ significantly. ## You Do Not Have to Build Everything From Scratch - The article begins addressing the misconception that every design system must be created internally from the ground up. - Open-source design-system resources and existing UI kits can provide a starting point. - Reusing proven foundations can help teams move faster while adapting components to their own requirements. The practical recommendation is to start with the problems your team needs to solve, then adopt or create only the structure necessary to address them.

Read original(opens in new tab)
Design SystemsOpen SourceDesign ThinkingComponent Library+3
figma2 min readCurated summary

What’s next for Dev Mode: Annotations, Compare Changes, Plugins, and More | Figma Blog

Figma is moving Dev Mode out of free beta on January 31, 2024, while adding features designed to improve design-to-development handoff. The update introduces connected annotations, richer visual and code comparisons, customizable plugins, Jira integration, and a redesigned VS Code experience. Dev Mode will require a paid seat after the beta ends. ## Annotations for clearer handoff - Designers can add measurements, properties, specifications, and contextual notes directly to design layers. - Annotations update automatically when the associated design changes. - They appear or disappear at different zoom levels, keeping designs informative without cluttering the canvas. - Teams can use plugins to create and manage annotations in bulk. ## Visual and code-based change comparisons - The compare changes experience has been redesigned to show differences both visually and in code. - The Figma for Jira app brings design context into Jira issues. - Jira users can receive notifications when related designs change. ## Custom code generation with plugins - Codegen plugins let teams generate code for technologies such as HTML, React, Tailwind, and Bootstrap. - Organizations can customize generated output around their frameworks, design systems, component libraries, and internal APIs. - Plugins can validate design-system usage, link to documentation, and identify existing code components. - Enterprise administrators can pin plugins and configure them to run by default across organizational files. - Figma highlights custom implementations such as Razorpay’s RazorSharp plugin. ## Improvements to Figma for VS Code - The extension makes it easier to inspect designs without switching between tools. - A redesigned navigation experience replaces difficult canvas panning with a grid of frames. - Developers can open individual frames in a focused view. - Plugins can now run directly in VS Code, including private and customized tools. Teams using Dev Mode should prepare for the paid-seat requirement and evaluate annotations, plugins, Jira integration, and the VS Code extension to fit their existing handoff and design-system workflows.

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

Improving Performance with Incremental Frame Loading | Figma Blog

Figma redesigned its prototype player because loading entire documents caused slow startup times, high memory use, and frequent mobile crashes. Its incremental frame loading strategy loads only the currently visible frame and nearby reachable frames, then fetches more as users navigate. This improves time to interactive while reducing the amount of prototype data held in memory. ## Problems with Full-Document Loading - The original system loaded the entire prototype document into memory before displaying the starting screen. - As Figma files grew to include more pages, design systems, and component variants, prototypes became substantially larger. - Mobile devices, particularly iPhones, often exceeded their memory limits, causing the operating system to terminate Figma. - Large prototypes could take minutes to load, creating both performance and stability problems. ## Loading Frames Incrementally - Figma defined “incremental frame loading” as loading only the prototype content needed at a given moment. - The initial load includes: - The first frame. - Frames immediately reachable through prototype interactions. - When a user navigates to another frame, Figma loads that frame’s adjacent destinations. - Previously loaded frames remain available so users can navigate backward without reloading them. - This approach reduces both startup time and peak memory consumption. ## Adapting Multiplayer Document Sync - Implementing partial loading required extending Figma’s real-time multiplayer system to synchronize only selected portions of a document. - The system had to support querying specific subtrees instead of always synchronizing the complete file. - A client sends a `query` identifying a document node. - The server returns a `reply` containing the requested subtree, including its ancestors and descendants. - Later modifications to the subscribed content are delivered through `changes` messages. ## Handling Dynamic Document Changes - The protocol continues to work while designers edit the source file in real time. - Changes to subscribed nodes are sent directly to clients. - If a node is moved under a subscribed node, the client is informed about the newly available node. - If a subscribed node is moved outside the client’s subscribed descendants, the client receives a removal update. - This keeps the partially loaded prototype consistent with the live document while avoiding unnecessary data transfer. Figma’s solution combines navigation-aware preloading with fine-grained real-time synchronization. Loading only the frames users need provides a practical way to make large prototypes faster and more reliable, especially on memory-constrained mobile devices.

Read original(opens in new tab)
Multiplayer CollaborationMemory OptimizationIncremental LoadingReal Time Sync+2
figma2 min readCurated summary

The Long and Short of It: Issue no.3 | Figma Blog

Figma’s “The Handoff,” published January 22, 2024, reflects on how collaboration turns ideas into products. Using the handoff as a metaphor for the continuous exchange between teammates, the issue reviews Figma’s major 2023 work and explores the evolving relationship between people, technology, and AI. It also highlights stories intended to help readers work better and stay curious in 2024. ## Collaboration as an Ongoing Handoff - Figma compares product design to an American football handoff: ideas repeatedly move between people as they are developed and refined. - This concept is closely tied to Figma’s multiplayer approach to collaboration. - The issue serves as a retrospective on the launches, lessons, and ideas Figma is carrying from 2023 into 2024. ## Best of Figma - Figma revisits the top 10 things it shipped in 2023. - The selection includes both small details with significant impact and major product launches. - The “MVP” label is used playfully to mean “Most Valuable Players,” rather than “Minimum Viable Products.” ## Reconsidering Our Relationship with Technology - “Looking 4 love” presents 36 questions about people’s relationships with technology. - Topics include first usernames, finding community online, and innovations that inspire optimism. - The feature acknowledges digital oversaturation and uncertainty while asking what might help people reconnect with technology. ## Building AI Features That Matter - The issue argues that AI will remain a major force in 2024, but its potential depends on thoughtful product management. - Leaders from Duolingo, LinkedIn, and Asana discuss how to move beyond hype. - Their focus is on building AI features that address real user needs and earn trust. ## Designing Better Tools for Work - Figma highlights its collaboration with Work Louder on the Figma Creator Micro mechanical keyboard. - The device includes 12 keys and two rotary encoders, providing up to 48 shortcuts. - The story presents the keyboard as both an efficiency tool and a celebration of the tactile, creative culture surrounding mechanical keyboards. Overall, the issue encourages readers to view work as a collaborative exchange: ship thoughtfully, use technology intentionally, and carry the most valuable lessons from the past year into the next.

Read original(opens in new tab)
FigmaAIProduct DesignCollaboration+1
datadog4 min readCurated summary

.NET Continuous Profiler: Under the hood

Datadog’s .NET profiler is designed for continuous, low-overhead production monitoring rather than occasional diagnostic runs. It collects CPU, wall time, exceptions, lock contention, and allocation data, aggregates it into compact `.pprof` files, and links profiles to traces and services through runtime metadata. The post introduces the architecture and emphasizes preserving application performance as a central design requirement. ## What a Continuous Profiler Does - Profiling analyzes runtime performance and method call stacks. - It complements APM, which focuses on request latency, throughput, and errors. - The profiler also measures: - CPU usage - Wall time and method duration - Exceptions - Lock contention - Memory allocations and potential leaks - Unlike tools such as PerfView, dotTrace, dotMemory, and Visual Studio profilers, Datadog’s profiler is intended to run continuously in production with negligible overhead. - Continuous profiling avoids the need to recreate production traffic, security settings, hardware, and load in a separate environment. ## Datadog’s .NET Profiler Architecture - The profiler is composed of specialized profilers for different resource types. - Each profiler includes: - A sampler that collects raw data - A provider that exposes the collected samples - An aggregator combines samples from all profilers. - An exporter serializes the data into Google’s `.pprof` format and uploads it through the Datadog Agent. - Datadog’s backend processes the profiles for visualization and analysis. ## Sample Aggregation and Storage Each sample contains: - A call stack made up of method frames - Key-value labels, such as thread identifiers - A numeric value vector representing measurements like CPU consumption or wall time Samples with identical call stacks and labels are merged, and their numeric values are added together. This reduces duplication and produces smaller profile files—for example, repeated exceptions from the same code path and thread can be stored as one aggregated sample. The aggregation and `.pprof` serialization code is implemented in Rust and shared across Datadog’s Ruby, PHP, and other runtime profilers. ## Connecting Profiles to Traces and Services - Each uploaded profile includes process ID, host name, and runtime ID metadata. - The runtime ID uniquely identifies a .NET service running within a process. - This is important because a single .NET process can host multiple services, such as separate IIS applications running in different AppDomains. - The tracer communicates the mapping between runtime IDs, AppDomains, and service names. - Service names come from `DD_SERVICE`; if it is unset, the process name is used. - Datadog sends one profile per runtime ID every minute, so multiple profiles from one process may share a timestamp while representing different services. - Runtime IDs allow the backend to associate profiles with the correct traces and spans. ## Making .NET Call Stacks Easier to Read The .NET profiling API can expose compiler- and runtime-generated names that differ from the original source code. Datadog rewrites these frames to make visualized call stacks more understandable. - Constructors named `.ctor` are displayed using the class name. - Compiler-generated anonymous methods are rendered as the enclosing method followed by `_AnonymousMethod`. - Lambdas and local methods use an enclosing-method name with the `_Lambda` suffix. - Nested named methods such as `<DefiningMethodName>g__InnerMethodName|yyy_zzz` are displayed as `DefiningMethodName.InnerMethodName`. - Compiler-generated state-machine methods such as `MoveNext` are mapped back to the original source-level type and method names. ## Native and Managed Implementation Considerations - The team considered using Microsoft’s `TraceEvent` NuGet package to receive and parse CLR events in C#. - That approach would execute managed profiling code on the same CLR as the application being profiled. - Allocations made by the profiler could therefore increase garbage-collector pressure. - The post begins discussing how this performance concern influenced the implementation, but the provided excerpt ends before that design is explained. A production profiler must not only collect useful data but also minimize the memory and CPU costs of collecting it. Datadog’s architecture addresses this through specialized samplers, aggregation, compact serialization, runtime-aware trace association, and source-oriented call-stack cleanup.

Read original(opens in new tab)
Database DesignDatadogDotnetGarbage Collection+4
datadog2 min readCurated summary

.NET Continuous Profiler: Under the hood | Datadog

Datadog is presented as a Leader in the 2026 Gartner® Magic Quadrant™ for Observability Platforms. The page highlights Datadog’s broad platform, spanning infrastructure, applications, data, logs, security, digital experience, software delivery, service management, and AI. However, the supplied content contains mostly navigation links rather than the blog post’s substantive analysis. ## Gartner Recognition - Datadog’s featured announcement is its designation as a **Leader** in the Gartner® Magic Quadrant™ for Observability Platforms. - The linked resource appears to provide the full Gartner-related announcement and evaluation details. ## Broad Observability Platform The listed Datadog capabilities cover: - **Infrastructure:** infrastructure, container, network, serverless, GPU, storage, and cloud-cost monitoring. - **Applications:** APM, universal service monitoring, continuous profiling, dynamic instrumentation, and agent observability. - **Data and logs:** database monitoring, data-stream monitoring, job and quality monitoring, log management, and observability pipelines. - **Security:** cloud security, SIEM, vulnerability management, code security, workload protection, and application/API protection. - **Digital experience:** browser and mobile RUM, session replay, synthetic monitoring, product analytics, and error tracking. - **Software delivery and service management:** CI visibility, test optimization, feature flags, incident response, SLOs, workflow automation, and case management. - **AI:** GPU monitoring, AI integrations, Bits AI agents, investigation tools, and an MCP server. ## Overall Takeaway The available material positions Datadog as a unified observability and operations platform with capabilities extending well beyond traditional infrastructure monitoring. For the Gartner evaluation criteria, supporting evidence, and detailed rationale behind the Leader designation, the full linked article or report would be required.

Read original(opens in new tab)
DatadogObservabilityApplication Performance MonitoringInfrastructure Monitoring+2
figma4 min readCurated summary

How Razorpay Sharpened Developer Workflows | Figma Blog

Razorpay built Blade, a cross-platform design system, to create consistent, accessible experiences across its many products while accelerating collaboration between designers and developers. Its success depends not only on reusable components, but also on adoption metrics, advocacy, developer tooling, and tight integration between design and code. Tools such as Blade Coverage, RazorSharp, Dev Mode, Storybook links, and Figma variables have significantly reduced handoff friction and improved productivity. ## Blade’s Cross-Platform Structure - Razorpay has around 70 designers and 100 front-end developers. - Three designers and five engineers work full-time on Blade. - Blade supports desktop web, mobile web, iOS, and Android through a shared API and common properties. - This allows developers to transfer knowledge between platforms without rebuilding the system for each one. ## Problems Blade Solved - Before Blade, teams frequently hard-coded custom components and missed details such as: - Button states - Text-field error handling - Accessibility requirements - Repetitive, ad hoc development led to inconsistent user experiences across Razorpay’s products and domains. - Blade provides: - A shared design and development language - More consistent experiences across products - Built-in accessibility - Faster collaboration and shorter time to market - Designers and developers are treated as Blade’s customers, while end users benefit from the resulting consistency and reliability. ## Driving Design System Adoption - Razorpay uses several strategies to reduce adoption friction: - Securing leadership support for funding and organizational adoption - Tracking metrics such as onboarded projects and the percentage of apps using Blade components - Holding office hours and maintaining a support Slack channel - Creating an advocacy group of designers from consumer teams - Announcing new components through demo videos and status-page updates - These practices make Blade visible, supported, and easier for individual teams to adopt. ## Measuring Impact and Coverage - Blade’s north star is enabling teams to ship polished interfaces while the system handles common design and implementation work. - Its adoption targets are: - 70% Blade usage for new features - 50% usage for existing product surfaces - Razorpay discovered that adoption begins during design, not just development. - The Blade Coverage plugin shows designers where their designs diverge from Blade components, helping them: - Identify issues earlier - Predict launch timelines more accurately - Reduce handoff friction - Quantitative metrics are supplemented with surveys and focus groups measuring speed, documentation, training, collaboration, and user experience. - These findings contribute to an annual Net Promoter Score for the design system. ## RazorSharp and Improved Developer Handoffs - Before Dev Mode, developers had to inspect designs manually, identify components and properties, and reproduce them in code. - A developer created RazorSharp as a private plugin that automatically generated equivalent code for designs. - Initially, Figma required edit access to run plugins, forcing developers to clone shared files before using RazorSharp. - When Figma introduced Dev Mode, Razorpay adapted RazorSharp to work there in just two days. - Developers can now inspect designs and generate implementation code without editing or duplicating files. - Dev Mode also includes links to Storybook, allowing developers to move directly from a design component to its code playground. ## Variables and Design Tokens - Razorpay is transitioning its design tokens to Figma variables. - This makes token copying more seamless and supports developer-friendly naming such as `surface.text.subtle`. - Spacing tokens are now mapped to variables, addressing a frequent request from consuming teams. - Variables make light and dark modes easier to implement without duplicating entire designs. - Previously, multiple themes and modes caused Blade files to consume large amounts of memory and slowed designers down. - Consolidating Blade into a single theme with variables has substantially improved design performance. Razorpay’s approach shows that a design system is most effective when it is treated as an internal product: it needs leadership support, measurable adoption goals, user support, and tooling that connects design directly to implementation. Teams building similar systems should invest in both component quality and the workflows that make those components easy to discover and use.

Read original(opens in new tab)
FigmaDesign SystemsDesign TokensWeb Development+3
datadog1 min readCurated summary

Scaling Self-Serve Analytics: The Tools Empowering 5,000 Employees | Datadog

The provided content does not include the blog post itself. It contains Datadog’s navigation menu and a promotional banner announcing its position as a Leader in the 2026 Gartner® Magic Quadrant™ for Observability Platforms, but no technical discussion from the article. ## Available Content - The page appears to be a Datadog engineering blog post related to a CrunchConf talk on self-serve analytics. - The supplied text primarily lists Datadog products across: - Infrastructure and application monitoring - Data and log management - Security - Digital experience - Software delivery - Service management - AI capabilities - A separate banner promotes Datadog’s recognition by Gartner. ## Missing Article Details - No article title, introduction, body sections, technical examples, architecture, or conclusions are included. - The available text is insufficient to accurately summarize the post’s arguments or implementation details. Please provide the blog post’s main text or a complete extraction of the page for a substantive summary.

Read original(opens in new tab)
KubernetesDatadogObservabilityApplication Performance Monitoring+4