Techlist.io - Korean Tech Blog Curator

figmaAug 16, 20232 min readCurated summary

Design’s New Deal | Figma Blog

Brian Chesky’s claim that designers can lead products—and even companies—has sparked debate about the future role of product managers. The article examines whether Airbnb’s design-led approach represents a broader shift or an overstatement of design’s independence from business and product strategy. Five leaders from design and product offer perspectives on how these disciplines should work together. ## Chesky’s Design-Led Vision - At Config 2023, Airbnb CEO Brian Chesky argued that designers are increasingly positioned to work alongside engineers rather than report to or be directed by product managers. - He suggested that designers can help drive products and, in some cases, lead entire companies. - The ultimate goal, in his view, is not organizational status but creating products that people genuinely love. ## Airbnb’s Near-Death Story - Chesky framed Airbnb’s transformation as a story of crisis, recovery, and growth shaped heavily by design. - His conversation with Figma CEO Dylan Field drew attention because it connected design decisions directly to business survival and post-IPO growth. - The talk generated strong reactions among designers, including the impression that Airbnb had eliminated its product management function entirely. ## The Debate Over Product Management - The article questions whether Airbnb’s example signals “the end” of the all-powerful product manager. - It cautions that public reactions may have exaggerated or misinterpreted Chesky’s comments. - Rather than presenting a simple design-versus-PM conflict, the discussion invites a closer examination of how responsibility, decision-making, and leadership are distributed across product organizations. ## Five Industry Perspectives The article brings together leaders from design and product to interpret Chesky’s ideas: - Julie Zhuo discusses the importance of deep domain knowledge. - Steve Johnson argues that design disconnected from business becomes mere decoration. - Sho Kuwamoto considers whether product organizations should favor creative work over layers of middle management. - Lenny Rachitsky explains why capable product managers remain difficult to find. - Yuhki Yamashita explores the value of embracing work in progress. The practical lesson is not that companies should abolish product management, but that design should have a stronger voice in product direction. Effective organizations likely need designers, engineers, and product leaders to share ownership rather than operate through rigid hierarchies.

Read original

User Experience Product Design Product Management Product Strategy+1

figmaAug 9, 20232 min readCurated summary

Navigating the intersection of design and business: a conversation with Airbnb’s Brian Chesky | Figma Blog

Airbnb CEO Brian Chesky argues that design should shape business strategy, not merely product appearance. He describes how Airbnb drifted from its design-led origins as it grew, becoming fragmented, experiment-heavy, and less innovative. By reconnecting with the principles of Apple’s design renaissance, Chesky began reconsidering how the company should be organized and led. ## Pulling Airbnb Back from the Brink of Failure - Airbnb was founded by two designers and an engineer, challenging conventional views that designers do not start companies. - Its original philosophy was to bring design into the boardroom and create a product that felt distinctive and meaningful. - By late 2019, Chesky feared Airbnb had become unrecognizable: - The company had roughly 10 divisions, each with numerous subdivisions. - Product managers and A/B testing dominated decision-making. - More employees and projects produced fewer visible product changes while increasing costs. - Chesky believed he had lost the courage required for creative leadership and that conventional corporate practices had displaced Airbnb’s founding vision. - The timing was especially difficult because Airbnb was preparing for its IPO, making major organizational changes risky. ## Rediscovering Design-Led Leadership - During the 2019 holiday season, Chesky met Hiroki Asai, a former Apple creative director, and Jony Ive, Apple’s former design leader. - Their perspective reminded him of the design-centered culture Steve Jobs had established at Apple. - Chesky began exploring whether Airbnb could return to a similarly integrated model, where design and creative judgment played a central role in how the company operated. ## Design’s Place in Business - Chesky suggests that designers are rarely elevated to CEO roles because businesses tend to favor scientific, analytical, and operational methods. - Creative work requires conviction and risk-taking, qualities that can weaken as organizations become larger and more bureaucratic. - His experience led him to question whether standard corporate structures are compatible with maintaining a company’s original creative vision. The excerpt presents Chesky’s central lesson: sustained growth can dilute a company’s founding principles unless leaders deliberately preserve design, courage, and customer-centered decision-making at the heart of the business.

Read original

Figma User Experience Design Thinking Product Management+2

figmaAug 3, 20232 min readCurated summary

Is your work style written in the stars? | Figma Blog

Astrology’s renewed popularity reflects people’s desire for recognition, guidance, and connection. Figma’s FigStrology widget brings those qualities into collaborative work by using machine learning to generate astrological personas and horoscopes from activity in FigJam files. The creators present it less as a serious predictive tool than as a playful way to encourage reflection and team interaction. ## Astrology as a Source of Connection - Astrology has existed for more than 4,000 years but was traditionally experienced privately. - Interest has increasingly shifted toward shared, collective experiences through apps such as CHANI and Co–Star. - Jacky Huang became interested during COVID after watching tarot readings on YouTube. - Huang says horoscopes appeal because they can make people feel recognized, understood, and seen. - Willy Wu views astrology as a source of belonging and reassurance in an uncertain world, even when its advice is humorous or not taken literally. ## Divination and Collaborative Design - Figma users are adapting divination practices for social and collaborative settings. - Danielle Baskin created Moonlight, a Figma-designed space for social tarot and reflection. - Figma’s persona quiz attracted more than 26,000 participants. - These projects position astrology and tarot as tools for conversation, self-reflection, and shared rituals rather than solely private practices. ## How FigStrology Was Created - Huang and Wu developed FigStrology as a FigJam widget. - The idea grew from Figma’s Photo Booth widget, which connects user behavior and activity with playful output. - FigStrology analyzes stickies and activity in a FigJam file, along with current “cosmic conditions.” - Machine learning then generates a unique persona and horoscope for the collaborative group or workspace. - The widget is intended as a lighthearted way to wind down a work session and make collaboration more engaging. ## Emphasizing Diversity and Team Strengths - The creators wanted FigStrology’s signs to highlight people and diversity. - Its premise is that individual strengths can complement other people’s weaknesses. - By turning team behavior into an imaginative horoscope, the widget encourages coworkers to notice different working styles and perspectives. Ultimately, FigStrology uses astrology as a playful collaboration device: not a replacement for genuine team communication, but a low-pressure way to spark reflection, humor, and connection at work.

Read original

Figma Machine Learning Figjam Collaborative Design+1

figmaJul 31, 20232 min readCurated summary

John Maeda on Creativity, AI, and the Human Pursuit of Uphill Thinking | Figma Blog

John Maeda argues that AI will transform creative work without eliminating the need for human creativity. While AI excels at efficiency, repetition, and finding the shortest path to an answer, meaningful creative breakthroughs often require experimentation, difficulty, and unconventional thinking. Designers should use AI to remove tedious work while deliberately preserving the human ability to pursue “uphill” paths. ## AI’s Promise and Threat to Creative Work - AI offers creatives greater efficiency and new capabilities, but may also produce large volumes of repetitive, cookie-cutter design. - Designers are learning to “speak machine” by collaborating with AI, training language models, and refining outputs to match their creative intentions. - Any technique developed with AI can potentially be replicated without its original creator, raising concerns about creative ownership and job security. ## Creativity Through Openness and Code - Maeda compares today’s AI concerns with his own experience in the 1990s, when he created distinctive algorithmic artwork. - Rather than keeping his methods secret, he open-sourced them at MIT so others could build their own creative work. - His involvement with MIT Scratch and Processing reflects his belief that programming can be a creative practice accessible to children, artists, and designers. ## Letting Computers Handle the Mundane - Computers are well suited to repetitive tasks such as: - Producing endless slide variations - Generating mockups - Performing image retouching - Automating this work could give designers more time to address emerging problems and develop more original ideas. - Maeda cites artist Jessie Shefrin’s observation that “by the time you come to the perfect solution, the problem has already changed,” emphasizing the need to keep moving rather than over-optimize a fixed answer. ## The Limits of Efficiency - AI is designed to find the shortest and most efficient route through a problem. - It can evaluate thousands or millions of possible paths rapidly and select the most efficient option. - Efficiency does not necessarily produce the most creative, meaningful, or impactful result. - The article presents “uphill thinking”—choosing difficult, indirect, or exploratory paths—as an important human strength in an increasingly automated world. Designers should embrace AI as a tool for reducing tedious labor, while continuing to protect the slower, less efficient processes that generate originality, insight, and meaningful creative work.

Read original

AI Machine Learning Generative AI Creative Coding+3

figmaJul 26, 20232 min readCurated summary

The Future of Design Systems is Semantic | Figma Blog

Design systems are moving from static component libraries toward semantic, reusable values that connect design and code. Figma argues that variables extend design tokens by supporting theming, dynamic prototypes, and platform-agnostic reuse. This shift can make large-scale systems more consistent and easier to maintain. ## Variables as the Next Step for Design Systems - Figma variables store reusable values for design properties and prototyping actions. - They reduce repetitive work and help teams manage complex design systems. - Unlike static tokens, variables can change based on context, enabling: - Design theming - Dynamic prototyping logic - Closer alignment between design and code - Figma introduced variables alongside Dev Mode and other features intended to connect designing and building. ## The Design Token Foundation - Design tokens represent repeatable decisions such as: - Colors - Typography - Sizing - Border radii - Numbers and strings - Tokens separate design properties from specific components or implementation details. - A single token can be updated centrally and propagated throughout one or multiple products. - This platform-agnostic structure reduces redundancy and helps maintain consistency. - Salesforce is often credited as an early design-token pioneer, using tokens to apply shared principles across platforms. ## Google Maps and Palette Governance - Google Maps discovered its product used more than 700 colors. - The team reduced the palette to 25 hues by removing subtle tones and transparency effects. - Tokens helped document and distribute the smaller palette. - Centralized values make it easier to prevent a carefully designed system from gradually expanding back into uncontrolled variation. ## From Tokens to Semantic Systems - Tokens codify design decisions, but variables add behavior and flexibility. - Their reusable, changeable values support broader system-level use cases than fixed tokens alone. - Figma presents this evolution as part of a larger industry shift toward design systems that express meaning and relationships rather than merely storing visual values. Teams should treat tokens and variables as shared semantic infrastructure: define reusable values centrally, connect them to implementation, and use contextual variation deliberately for themes and interactive experiences.

Read original

Figma Design Systems Prototyping Design Tokens+2

figmaJul 25, 20232 min readCurated summary

Shopify’s secret for staying ahead of the game | Figma Blog

Shopify encourages teams to pursue bold, unconventional ideas instead of settling for incremental improvements. The company challenges standard practices in product discovery, planning, and decision-making, using visual collaboration tools to create more creative and inclusive discussions. Its approach suggests that deliberately disrupting familiar workflows can produce stronger, more original outcomes. ## Challenge Documentation-First Product Work - Traditional roadmapping often begins with a written document outlining the problem and proposed direction. - Shopify’s Katarina Batina argues that this method can reinforce habits rather than clarify the real problem or uncover broader opportunities. - Starting in a collaborative visual workspace such as FigJam helps teams “break their brains” out of linear thinking. - Roadmap templates make metrics, key problems, proposed solutions, principles, assumptions, and dependencies explicit. - This structure allows teams to explore possibilities more freely instead of simply reacting to a finished document. ## Plan How You Plan - Shopify adapted a FigJam template for an annual in-person planning session among largely remote colleagues. - Team members completed the template beforehand, creating a shared baseline for discussion. - During the meeting, they updated the plan in real time as strategic decisions were made. - The shared workspace preserved the outcomes digitally, avoiding the need to photograph scattered sticky notes. - The team considered this approach its most effective planning session to date. ## Democratize Strategic Discussions - Shopify treats design tools as the primary setting for discussing strategic product decisions. - Visual collaboration gives people more ways to express ideas than written documents alone. - This is especially important for employees who may have strong ideas but do not excel at articulating them in prose. - In large meetings, participants can communicate through links, images, project snapshots, and sketches rather than relying entirely on text. - The approach makes decision-making more inclusive and helps teams develop a forward-looking vision. ## Sketch Ideas Instead of Overexplaining Them - The article begins a further section arguing that sketching can help teams develop ideas that are difficult to express verbally. - The provided text ends before this section is completed. Shopify’s broader recommendation is to intentionally disrupt familiar processes: replace rigid documents with visual exploration, make planning collaborative and continuous, and give teams multiple ways to communicate ideas.

Read original

Figma User Experience Figjam Brainstorming+2

figmaJul 23, 20233 min readCurated summary

The anatomy of launching a Figma open beta | Figma Blog

Launching a product is only the beginning of its go-to-market process. Figma used the two weeks after Dev Mode’s open beta launch as a coordinated research period to measure adoption, understand user sentiment, identify bugs, and prioritize improvements. The central lesson is to define success metrics and responsibilities before launch so teams can quickly turn feedback into product decisions. ## Post-launch work requires cross-functional ownership - Product, marketing, and support shared responsibility for evaluating Dev Mode. - The product team tracked feature usage. - Marketing monitored public sentiment and audience reach. - Support focused on bugs, requests, and potential improvements. - Product manager Avantika Gomes synthesized information from all sources, prioritized actions, coordinated follow-up, and guided iteration. - Constant communication ensured that important social posts and recurring user issues reached the broader team. ## Dev Mode as an open-beta test - Dev Mode is a Figma workspace designed specifically for developers. - It functions similarly to a browser inspector for design files, letting developers collect measurements, specifications, assets, and other information directly from the canvas. - The open beta provided free access to all Figma users through the end of 2023. - Figma used the beta to test whether Dev Mode addressed developer needs and to discover how it could be improved. ## Define metrics before launch - Feedback from developers and designers during the closed beta helped Figma refine core workflows, collaboration features, and newly identified needs. - The team selected a north star metric: the percentage of weekly active users in developer roles who used Dev Mode. - They also established benchmarks before launch, making it easier to judge whether results were strong or weak. - Prebuilt dashboards allowed the team to compare activity before and after the open-beta release. ## Measure adoption, reach, and user reaction - Figma tracked usage of individual features, including: - The Inspect panel - Compare changes - Related links - These measurements showed which capabilities were being adopted and which were most compelling. - To evaluate reach, the team monitored: - Social media impressions - Email open rates - In-product message impressions - Social sentiment and live audience reactions during Config helped reveal which features generated enthusiasm. ## Track problems through multiple feedback channels - Figma monitored Help Center article views to identify areas where users needed clarification. - In-product feedback submissions and support tickets provided direct reports of bugs and improvement requests. - Combining behavioral metrics with qualitative feedback helped the team understand not only what users did, but also where they struggled. The practical recommendation is to treat launch as the start of an intensive learning cycle: assign clear owners, establish benchmarks and dashboards in advance, and combine product analytics, public sentiment, and support data to guide rapid improvements.

Read original

Figma Dev Mode Design Tools User Research+3

figmaJul 18, 20232 min readCurated summary

The Shared Language of Props | Figma | Figma Blog

Design and engineering use the same component vocabulary, but often attach different meanings to terms such as “property,” “variant,” and “button.” Figma properties primarily describe visual variations, while code props may also control behavior, events, data, and rendering. Effective collaboration therefore requires translating concepts across environments rather than assuming identical names imply identical implementations. ## Components and Properties as Shared Concepts - Components are reusable elements governed by rules describing how they can look and behave. - Properties, or “props,” define the possible expressions of a component, including: - Variants - Boolean values - Instance swaps - Text values - In Figma, properties are used mainly to represent visual differences. - In code, props can also represent non-visual concerns such as event handlers and data. - A shared term can conceal different assumptions when designers and developers work in different tools and contexts. ## A Button Is Not the Same Everywhere - Designers and developers both work with buttons, but prioritize different concerns: - Designers focus on visual consistency and maintainability across design files. - Developers focus on interactivity, rendering, accessibility, and implementation. - A Figma button and a code-based button may share a name without sharing the same API or purpose. - Migrating a React and TypeScript application to a design-system-based frontend exposed conflicts between Material UI conventions and the organization’s custom design system. - The component library aimed to be intuitive and lightweight for full-stack engineers who primarily connected frontend and backend systems. ## Divergent Component Models - The design system contained two Figma components: - `Button` - `IconButton` - The codebase contained five button components. - Figma’s `Button` and `IconButton` did not use the same inheritance or primitive-component structure as the codebase. - Some properties, such as size and color variants, were duplicated in Figma because that structure better represented the design model. - Although the components shared names and broad concepts, they did not share the same purpose or complete set of properties. Teams should treat design and code components as related models rather than identical ones. Clear translation of property names, meanings, and responsibilities can preserve each environment’s strengths while reducing misunderstandings during implementation.

Read original

Figma Design Systems React TypeScript+3

figmaJul 12, 20232 min readCurated summary

Paula Scher’s 10 Rules for Play | Figma Blog

Paula Scher argues that creative “play” comes from freeing the mind to make unexpected connections between existing ideas, not from inventing something completely original. Her approach combines deliberate mental wandering, exposure to history and other disciplines, supportive collaborations, and a willingness to reject trends. The goal is to create conditions where designers can experiment and initiate new directions. ## Creating Space for Ideas - Meet the client, understand the brief, then do a mindless task such as cleaning to clear mental space. - Look through design-history books broadly, without copying or bookmarking ideas; begin the project later. - Use boring or uncomfortable situations—waiting rooms, traffic, offline flights—as opportunities to sketch and let the mind wander. ## Building Conditions for Play - Nurture long-term relationships that allow creative freedom, such as Scher’s decades-long work with the New York Public Theater. - Maintain a healthy mix of projects, support the team, and encourage people to question assumptions. - Treat better work as a way to raise expectations and generate even better work. - Recognize that genuine opportunities to experiment are rare, and consider pro-bono or low-paid projects as spaces for discovery. ## Escaping Familiar Influences - Change tools and leave the computer behind. - Visit bookstores, museums, galleries, or shops, and explore disciplines unrelated to the current project. - Accept that all creative work is influenced by something else; originality comes partly from how influences are combined and from avoiding passing trends. - Avoid mood boards when they merely encourage producing a slightly altered version of existing marketplace styles. ## Starting New Directions - Initiate your own creative “cluster” by doing something daring. - Design trends often become ordinary when others imitate the first bold example, so innovation requires being willing to go first. Designers can cultivate play by creating distance from routine, seeking varied experiences, and protecting relationships and projects that enable experimentation rather than imitation.

Read original

Design Thinking Graphic Design Branding Visual Communication+1

figmaJul 12, 20232 min readCurated summary

How Thumbtack structures their design system | Figma Blog

Thumbtack structures its Thumbprint design system as three layers: design tokens, atomic CSS, and reusable UI components. Each layer trades some flexibility for greater productivity, consistency, accessibility, and quality. The approach lets developers choose the highest-level solution that fits their needs while retaining lower-level escape hatches for custom or native experiences. ## Three-Layer Architecture - **Thumbprint Tokens** - The foundation shared by web and native clients. - Defines granular properties such as colors, typography, spacing, sizing, radii, and shadows. - Offers the greatest flexibility but the least built-in structure. - **Thumbprint Atomic** - An atomic CSS library built on the tokens. - Enables developers to build interfaces without writing custom CSS. - Includes utilities such as aspect-ratio classes for maintaining proportions in responsive or embedded media. - **Thumbprint Components** - Provides accessible, prebuilt implementations of common patterns, including alerts, buttons, date pickers, and star ratings. - Improves development speed, consistency, and accessibility. - Developers can fall back to Atomic or Tokens when no suitable component exists. ## Layered Components and Tokens - Individual layers can contain their own sub-layers for added flexibility. - Thumbprint’s modal system separates: - `ModalCurtain`, which supplies core usability and behavior without visual styling. - `Modal`, which adds the standard visual design on top of `ModalCurtain`. - Developers generally use the more prescriptive `Modal`, but can use `ModalCurtain` for unusual requirements. - Tokens can also inherit from one another. For example, a semantic token such as `button-cta-background-color` may derive from a broader token like `cta-background-color`, which ultimately maps to a raw value such as `blue-400`. - Users are encouraged to select the highest abstraction appropriate for their use case. ## Why the Structure Helps - Higher layers reduce repeated work and improve consistency. - Lower layers preserve flexibility for custom product needs. - Components allow engineers to focus on product functionality instead of rebuilding common UI patterns. - Layered primitives provide a controlled way to support exceptions without abandoning the design system. - The architecture is intended to simplify maintenance and save time for both developers and end users. Thumbprint’s model demonstrates that a design system does not need to choose between standardization and flexibility. A layered structure provides strong defaults while preserving lower-level tools for cases that require customization.

Read original

Design Systems React Accessibility Design Tokens+3

figmaJul 11, 20232 min readCurated summary

Explore the value of play through a new zine | Figma Blog

Finding room for play is presented as an essential part of design, helping people stay curious, experiment, and discover unexpected solutions. To explore this idea, Figma and It’s Nice That created *The Playbook*, a printed zine combining essays, advice, visual commissions, and hands-on activities. Debuted at Config 2023, it encourages readers to treat play and iteration as practical parts of creative work. ## A Collaboration About Play - *The Playbook* was produced jointly by Figma and It’s Nice That. - It explores spontaneous thinking, curiosity, and experimentation across different design practices. - The publication reflects Figma’s belief that play supports learning and helps collaborators connect ideas. ## Essays on Iteration and Collaboration - Figma Chief Product Officer Yuhki Yamashita discusses how to embrace endless iteration and work productively while ideas remain in flux. - Chief Technology Officer Kris Rasmussen examines collaborative engineering, arguing that engineers should work beyond strict role boundaries. - Together, the essays present iteration and cross-functional collaboration as central to modern product development. ## Creative Advice and Rules for Play - The zine features conversations with creatives about staying curious when possibilities feel unlimited. - Paula Scher contributes ten rules for play drawn from her career, including advice on sketching, influence, and creative experimentation. - The publication encourages readers to look for “what if?” moments that can unlock new directions. ## Interactive Activities and Visual Commissions - Readers can onboard themselves into the zine and take a quiz about their meeting-hosting style. - A design challenge built around “How might we?” offers a hands-on break from reading. - Shawna X visualizes a “lightbulb moment” in a risograph print. - Manshen Lo interprets Bruno Munari’s 12-step design methodology. - The publication combines essays and activities with a range of playful visual work. ## Printed Format and Config Debut - The Playbook was printed as an A5 zine and wrapped in compostable cellophane. - Two essays by Yamashita and Rasmussen appeared together in a complementary A6 zine. - Copies were distributed to Config 2023 attendees when they arrived. *The Playbook* treats play not as a distraction from serious design work, but as a method for learning, collaborating, and generating better ideas. Its combination of reflection and practical exercises encourages designers and teams to make experimentation a regular part of their process.

Read original

Figma Collaboration Product Development Design+1

datadogJun 30, 20233 min readCurated summary

How we migrated our acceptance tests to use Synthetic Monitoring

Datadog’s Frontend Developer Experience team migrated 565 flaky, maintenance-heavy Puppeteer acceptance tests to Synthetic Monitoring. The change replaced manually scripted browser interactions with recorded tests that could run reliably from CI through a dedicated CLI. The year-long migration improved maintainability and built engineer confidence through documentation, gradual adoption, and non-blocking rollout tooling. ## Why the Existing Acceptance Tests Were Failing - Tests ran in Node.js on a custom Puppeteer-based runner. - End-to-end tests were flaky because they depended on browsers, virtual graphics, dedicated machines, navigation, and application timing. - Even simple actions required extensive scripting: - Confirming an element existed - Checking that it was enabled - Performing the interaction - Handling compatibility with Puppeteer - Custom UI elements, such as dropdowns, made reliable automation substantially harder. - Product changes frequently required updates to both tests and the testing infrastructure. - The six CI jobs took up to 14 minutes, with total machine time reaching 35 minutes per commit. ## Synthetic Monitoring as the Replacement - The team adopted Datadog’s own Synthetic Monitoring product to record page interactions rather than manually script them. - They created `synthetics-ci`, a CLI that: - Finds files named `*.synthetics.json` - Accepts configuration overrides - Triggers Synthetic tests - Polls for result statuses - Prints human-readable output - Because the tool represented a broader pattern for using Datadog from CI/CD, it was generalized into `datadog-ci`. ## Scope of the Migration At the start of the migration in June 2021, the frontend repository had: - 300 engineers working in one repository - Approximately 90 new pull requests and 1,120 commits every day - Six acceptance-test CI jobs - 35 minutes of machine time per commit - 84 relevant files - 565 tests - About 100,000 lines of test and infrastructure code The scale of the repository and its rapid development activity meant the migration needed to be gradual and carefully coordinated. ## Building Trust and Adoption - The team wrote documentation covering: - How to write effective Synthetic tests - Which behaviors were worth testing - Which testing patterns to avoid - They demonstrated the system in company-wide and frontend-focused meetings. - Teams learned how to: - Record tests through the UI - Use scheduled tests in CI - Replace existing acceptance tests - Reduce ongoing maintenance - The team worked directly with groups that owned the largest test collections. - Jira tickets tracked the migration of every acceptance test and assigned ownership to the appropriate team. ## Gradual CI Integration - A non-blocking CI job allowed teams to introduce Synthetic tests without risking the entire pipeline. - Failures appeared as pull-request comments rather than blocking merges. - This gave engineers time to understand and trust the new system. - Once tests ran reliably, the team made the pipeline blocking. - The old acceptance-testing platform could then be retired progressively instead of being removed all at once. The migration took roughly one year and succeeded through a combination of better tooling, clear communication, incremental rollout, and shared ownership across frontend teams. For large organizations replacing a critical testing system, introducing the new workflow safely before enforcing it can make adoption far less disruptive.

Read original

Datadog CI/CD Synthetic Monitoring Node.Js+3

datadogJun 30, 2023Original article

How we migrated our acceptance tests to use Synthetic Monitoring | Datadog (opens in new tab)

Datadog’s Frontend Developer Experience team migrated their massive codebase from a fragile, custom Puppeteer-based acceptance testing framework to Datadog Synthetic Monitoring to address persistent flakiness and high maintenance overhead. By leveraging a record-and-play approach and integrating it into their CI/CD pipelines via the `datadog-ci` tool, they successfully reduced developer friction and improved testing reliability for over 300 engineers. This transition demonstrates how replacing manual browser scripting with specialized monitoring tools can significantly streamline high-scale frontend workflows. ### Limitations of Puppeteer-Based Testing * Custom runners built on Puppeteer suffered from inherent flakiness because they relied on a complex chain of virtual graphic engines, browser manipulation, and network stability that frequently failed unexpectedly. * Writing tests was unintuitive, requiring engineers to manually script interaction details—such as verifying if a button is present and enabled before clicking—which became exponentially more complex for custom elements like dropdowns. * The testing infrastructure was slow and expensive, with CI jobs taking up to 35 minutes of machine time per commit to cover the application's 565 tests and 100,000 lines of test code. * Maintenance was a constant burden; every product update required a corresponding manual update to the scripts, making the process as labor-intensive as writing new features. ### Adopting Synthetic Monitoring and Tooling * The team moved to Synthetic Monitoring, which allows engineers to record browser interactions directly rather than writing code, significantly lowering the barrier to entry for creating tests. * To integrate these tests into the development lifecycle, the team developed `datadog-ci`, a CLI tool designed to trigger tests and poll result statuses directly from the CI environment. * The new system uses a specific file format (`.synthetics.json`) to identify tests within the codebase, allowing for configuration overrides and human-readable output in the build logs. * This transition turned an internal need into a product improvement, as the `datadog-ci` tool was generalized to help all Datadog users execute commands from within their CI/CD scripts. ### Strategies for High-Scale Migration and Adoption * The team utilized comprehensive documentation and internal "frontend gatherings" to educate 300 engineers on how to record tests and why the new system required less maintenance. * To build developer trust, the team initially implemented the new tests as non-blocking CI jobs, surfacing failures as PR comments rather than breaking builds. * Migration was treated as a distributed effort, with 565 individual tests tracked via Jira and assigned to their respective product teams to ensure ownership and a steady pace. * By progressively sunsetting the old platform as tests were migrated, the team managed a year-long transition without disrupting the daily output of 160 authors pushing 90 new PRs every day. To successfully migrate large-scale testing infrastructures, organizations should prioritize developer trust by introducing new tools through non-blocking pipelines and providing comprehensive documentation. Transitioning from manual browser scripting to automated recording tools not only reduces technical debt but also empowers engineers to maintain high-quality codebases without the burden of managing complex testing infrastructure.

Datadog Web Development Synthetic Monitoring Node.Js+2

figmaJun 20, 20233 min readCurated summary

Figma & Chromebook expand to K12 and Japan | Figma Blog

Figma and Google for Education are expanding their Chromebook partnership to make Figma and FigJam freely available to all K–12 districts in the US, with Japan as the first international expansion. The initiative aims to give students industry-standard design and collaboration tools while helping educators create more visual, interactive learning experiences. Figma argues that the tools can improve technical skills, classroom engagement, confidence, inclusion, and students’ ability to express ideas. ## Expanding Figma access in schools - A beta program previously gave Figma and FigJam access to students in 50 US school districts. - The program included large urban districts and smaller rural districts. - Figma is now offering free access to all K–12 districts across the US. - Students of every age can use Figma on Chromebooks, including younger learners. - Districts can receive free Figma Enterprise access, giving administrators: - Greater control over school environments - Visibility into usage - Class-management features - Support for student safety - The Chromebook partnership is expanding globally, beginning with Google schools in Japan. ## Design tools as a foundation for future skills - Figma is intended to help students develop: - Problem-solving skills - Iterative thinking - Collaboration - Empathy - Its infinite canvas lets students combine diagrams, images, mind maps, videos, and other media. - Students can demonstrate understanding visually rather than relying only on traditional written assessments. - Beta participants created projects such as nonprofit design concepts and app prototypes for improving local government services. ## Reimagining classroom collaboration - Teachers used FigJam for lesson plans, group projects, study guides, and interactive curricula. - The tools created a shared space where students and educators could build learning experiences together. - Projects included prototypes, visual explanations, and other forms of digital storytelling. - Figma describes the impact as extending beyond academic work to classroom culture and students’ sense of belonging. ## Supporting student voices and inclusion - Teachers reported that quieter students became more confident expressing ideas in digital spaces. - Features such as sticky notes, comments, reactions, and other collaborative interactions gave introverted students more ways to participate. - Digital collaboration helped some students build connections after years of remote learning. - The visual and flexible format was especially valuable for neurodiverse students who may find traditional tools difficult. - One special education teacher reported improvements among autistic students in: - Social skills - Executive functioning - Self-regulation - Collaboration ## Encouraging engagement and creative learning - Teachers said students were more excited to attend class and engage with coursework. - Some students continued working on Figma projects at home. - Figma enabled alternative forms of assessment, including: - Infographics - Storyboards - Prototypes - The platform functions as a creative sandbox where students can construct and communicate their own understanding. - In some classrooms, previously disengaged students rediscovered interest in learning through design. Figma’s recommendation is to make collaborative, visual design tools a normal part of K–12 education. By combining broad Chromebook access, administrative controls, and flexible creative workflows, the company aims to help every student participate more actively and become better prepared for a digital future.

Read original

Figma Figjam Design Thinking Digital Design+2

figmaJun 20, 20233 min readCurated summary

Config 2023 in Review: The Complete Recap | Figma Blog

Figma’s Config 2023 announcements reposition the platform as a workspace for the entire product development team, not just designers. The major launches—Dev Mode, variables, and advanced prototyping—aim to connect design more directly with code, development workflows, and real product behavior. Supporting updates to auto layout, fonts, and file discovery further improve everyday work, while Figma also signals a major investment in AI through its acquisition of Diagram. ## Dev Mode Connects Design and Development - Dev Mode is a dedicated Figma workspace designed around developers’ needs. - It helps developers: - Translate designs into code more quickly. - Connect Figma to Jira, GitHub, Storybook, and other tools through plugins. - Track designs and changes that need to reach production. - Inspect Figma files alongside code in VS Code. - Dev Mode launched in beta and was available free through 2023. ## Variables Bring Design Systems Closer to Code - Figma introduced variables to make design systems more flexible and scalable. - Variables can store reusable: - Colors - Numbers - Text values - Boolean values - They support aliasing and scoping, allowing teams to organize and contextualize values. - Variable modes enable themes such as light and dark designs. - Plugin and REST API support allows teams to manage variables programmatically. - The goal is to connect design tokens and systems more directly with the code that implements them. ## Advanced Prototyping Makes Designs More Dynamic - Variables can now be used in prototypes to represent changing application state. - Designers can use mathematical expressions and conditional logic, such as: - Increasing a number variable after each click. - Navigating to different screens depending on a variable’s value. - These capabilities let teams test realistic interactions before development begins. - In-context editing and inline preview allow designers to edit and play back prototypes in the same view. ## Quality-of-Life Improvements - Auto layout gained wrapping and minimum/maximum width and height controls. - The font picker now supports search, filtering, and previews displayed in each font. - The file browser makes it easier to locate files and projects shared by external teams. ## Figma’s Investment in AI - Figma expects AI to help people express ideas visually, speed up workflows, and create strong first drafts. - The company argues that turning a good draft into a world-class product will still require human judgment and expertise. - Figma acquired Diagram, founded by Jordan Singer, to accelerate AI development across the platform. - Diagram had previously built AI-assisted design tools on Figma’s platform. Overall, Config 2023 presents Figma as a shared environment spanning design, prototyping, development, and increasingly AI-assisted creation. Teams should consider Dev Mode and variables as the most significant changes for improving handoff, design-system management, and collaboration with engineering.

Read original

Figma Design Systems Prototyping Design Tokens+4