techlist.io
KREN

Techlist.io - Korean Tech Blog Curator

figma3 min readCurated summary

Bridging design and code with Variants | Figma Blog

Figma’s Variants feature was created to bring component organization closer to how developers structure reusable code. It combines related component versions into component sets, supports multiple property dimensions, and simplifies switching between variations. The feature’s design was shaped through user research and usability testing, which refined both its interface and its name. ## Bridging Design and Code - Designers need freedom to iterate, while developers prioritize rigor, reuse, and scalability. - Figma identified component management as a major opportunity to connect these workflows. - Existing components were difficult to find, switch between, and organize, especially when systems contained many variations. - Variants was designed to make design-system components resemble their code counterparts more closely. ## Aligning Component Organization with Code - Teams often used forward-slash names such as `default/primary/large/icon` to represent component states and properties. - Variants replaced this workaround with key-value properties, such as: - `state="hover"` - `style="secondary"` - The system supports both simple components and components with multiple dimensions, including state, type, color, and size. - Research showed that design-system managers commonly arranged component variations in grids to compare and maintain them. - Figma therefore allows all variations of a component to be displayed side by side. - Existing component variations can be selected and converted into a component set using “Combine Variants.” ## Refining the Interface Through Usability Testing - Figma built a working prototype and conducted four rounds of usability testing over six weeks. - The initial interface displayed all property values as pills, but users found this confusing because pills typically represent multiple tags or attributes. - Figma changed the interaction to: - Use dropdowns and simple input fields when editing a selected variant. - Retain pills when viewing all properties and values in a component set. - Generic default labels such as “Property 1” and “Property 2” proved clearer than predefined labels like “State” and “Style,” because users understood they should customize them. ## Choosing the Name “Variants” - The feature was initially called “States,” reflecting its early focus on interactive states such as hover, active, and disabled. - User feedback showed that “States” understated the feature’s broader capabilities. - Variants can represent any component property, including type, color, and size—not just interaction states. - Testing confirmed that “Variants” better communicated the feature’s flexibility and scope. Variants, combined with updates to Auto Layout and the Inspect panel, is intended to make design systems easier to organize and easier for developers to interpret. Teams should use component properties and sets to model reusable UI elements in a way that matches both design workflows and code structures.

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

Behind the feature: the hidden challenges of autosave | Figma Blog

Figma’s expanded autosave protects offline edits by persisting pending changes even if the browser tab closes. The feature was difficult because Figma combines large, mutable documents with browser performance limits and real-time multiplayer editing. Rather than repeatedly serializing entire files, Figma chose to store and later replay only the changes made while disconnected. ## Why Whole-File Autosave Was impractical - Figma documents are scenegraphs—trees of layers that can reach tens of megabytes compressed and hundreds of megabytes in memory. - Serializing a large document can take seconds; even an optimized 100 ms operation would cause noticeable stutters because JavaScript and WebAssembly are generally single-threaded. - Splitting serialization across browser frames could reduce blocking, but introduces consistency problems if users edit the document while it is being serialized. - Reading from an immutable scenegraph would solve consistency issues, but adopting immutable data structures would require a major rewrite and could increase memory usage and slow writes. - Replacing a cloud file with an offline backup could overwrite newer edits from collaborators. Keeping the backup as a separate copy would also be problematic for files that act as shared sources of truth, such as design-system component libraries. ## Saving Changes as a Delta - Figma already tracks unsent edits as “deltas” for its multiplayer editing system. - When a document goes offline: - User edits accumulate in an in-memory pending-changes buffer. - The buffer is periodically written to disk. - If the document closes, the changes remain available. - On reload, the changes are applied to the latest document version and uploaded to the server. - This approach avoids serializing the entire scenegraph and naturally preserves newer server-side changes. ## Browser Storage and Granularity - Figma uses IndexedDB because it supports: - Large amounts of browser-side data - Storage in smaller chunks - Database indexes - Transactional operations for data integrity - Pending changes are stored per file and per node or layer as property changes. - This granularity balances storage overhead against redundant disk I/O: finer-grained records reduce unnecessary writes but require more metadata and rows. Figma’s autosave demonstrates that reliable offline persistence is not simply a matter of writing files to disk. For large, collaborative applications, storing incremental changes provides better performance and safer reconciliation than saving and restoring complete document snapshots.

Read original(opens in new tab)
JavaScriptWebassemblyAutosaveIndexeddb+3
figma2 min readCurated summary

How Kimberly-Clark brings your favorite paper products into your home | Figma Blog

Kimberly-Clark responded to slowing growth, competition, and rising costs by prioritizing its digital presence. By adopting Figma as a collaborative, browser-based design platform, the company replaced fragmented workflows with a shared source of truth and faster stakeholder feedback. This collaboration produced measurable results, including a 71% increase in signups after redesigning a form. ## Digital transformation at global scale - Kimberly-Clark manages more than 400 consumer websites across 175 countries. - Its digital systems support pricing, manufacturing, distribution, merchandising, sales, and operations. - The company needed a more efficient way to create and localize consistent digital experiences for brands such as Kleenex, Scott, and Huggies. ## Problems with the previous design workflow - Designers spent weeks working individually in proprietary Mac applications. - Files had to be uploaded to separate cloud prototyping tools for review. - Stakeholder feedback created repeated edit-and-review cycles. - Developer handoff was difficult when developers did not use Macs. - These delays slowed the launch of new products and digital experiences. ## Figma as a collaborative design platform - Figma consolidated design, prototyping, feedback, and editing in one browser-based tool. - Files were no longer stored locally, and invited stakeholders could view or edit them easily. - Feedback meetings became real-time working sessions rather than discussions held after designs were completed. - Brand, marketing, design, and other teams could participate directly and see changes immediately. - The approach created a shared “single source of truth” and improved alignment. ## Redesigning for measurable user impact - The UX team tracked metrics such as bounce rates, returning visitors, time on site, and signup rates. - One website’s signup form contained 13 fields because marketing wanted extensive information upfront. - The teams collaborated in Figma to reduce the form to five fields. - After launch, signups increased by 71%. - Faster collaboration helped the company resolve design problems quickly and move products to market sooner. ## Next steps - Kimberly-Clark planned a design system connected across Figma, Storybook, and its code repository. - The company viewed its digital transformation as the beginning of a more design-led phase ahead of its 150th anniversary. The case suggests that collaborative design tools are most valuable when paired with user-focused metrics: they can improve internal workflows while directly increasing customer engagement.

Read original(opens in new tab)
FigmaDesign SystemsUser ExperiencePrototyping+3
figma2 min readCurated summary

Learning and failing as a team | Figma Blog

Config Europe highlighted how better products emerge from better teamwork. Figma argues that inclusive processes, cross-functional collaboration, and a willingness to fail openly help teams build more human-centered experiences. The success of its Variants feature demonstrates that iterative testing and diverse perspectives can turn early shortcomings into meaningful improvements. ## Learning Through Collaboration - Figma’s virtual Config Europe conference explored both product craft and team culture. - Sessions covered: - Accessibility-first design - Keeping design aligned with code - Technology ethics - Collaboration and shared failure - The central theme was balancing product function with human feeling while working more effectively together. ## Expanding the Team - UX designer Declan Talbert presents design systems as services for entire product teams, not merely pattern libraries for designers. - An inclusive design system can contain: - UI components - Accessibility guidance - Data resources - Project-management tools - Designers, developers, product managers, and other contributors should all be able to participate. - Broader collaboration and diverse skills lead to more human-centered products and services. ## Failing Together on Variants - Product Manager Kelsey Whelan and Product Designer Nikolas Klein describe shared failure as a major factor in the development of Figma’s Variants feature. - Early testing showed that the feature was powerful but difficult to approach, contradicting the team’s initial assumptions. - Usability testing expanded from a planned couple of weeks into four rounds over six weeks. - Figma invited employees from different roles—including design advocates, product educators, and engineering managers—to participate remotely through Zoom. - Participants identified usability problems and bugs, while a dedicated Slack channel helped coordinate fixes. - Repeated testing made the feature more intuitive and reinforced the idea of “failing forward”: using visible mistakes to improve the product and strengthen team culture. Figma’s practical recommendation is to open product development to more people, test ideas early, and treat failure as shared information rather than individual blame.

Read original(opens in new tab)
FigmaDesign SystemsAccessibilityRemote Collaboration+3
figma3 min readCurated summary

Reflections on Figma’s inaugural Student Fellowship | Figma Blog

Figma’s inaugural Student Fellowship was created in response to the disruption caused by the COVID-19 pandemic and the shift away from campus-based education. Rather than organizing local meetups, Figma worked with students to build accessible resources, communities, and programs for remote learning and collaboration. Over 10 weeks, the fellowship successfully produced classroom tools, student-focused content, and virtual community experiences while establishing a model for future student programs. ## Rethinking the Student Program - Figma originally planned to make on-campus meetups central to its education efforts. - As students faced remote semesters and uncertain campus plans, the team reconsidered how to support them beyond physical classrooms. - Student conversations focused on: - Recreating classroom and campus collaboration online - Supporting extracurricular projects - Helping educators adapt to new teaching environments - Understanding students’ changing needs - The program centered on classroom resources, student stories, the Virtual Campus Slack Community, and hackathons. ## Setting a Broader Vision - The fellowship aimed not only to ship content but also to establish a foundation for future fellowship programs. - Figma considered how the program could complement: - On-campus student ambassadors - The Friends of Figma community - The broader design ecosystem - The group prioritized resources that were both accessible to students and aspirational. - Although fellows worked across separate workstreams, they operated as a cohesive team and intended their work to reach Figma employees and professional designers as well as students. ## Classroom Resources - The fellows created six classroom templates usable both online and in person. - Examples included: - A research-project toolbox - A playground file for learning Figma’s editor - An assignment-creation template - They also curated a broader collection of community resources to help teachers and students learn, create, and use Figma effectively. ## Student Stories and Career Questions - Conversations with students revealed widespread uncertainty about whether to take a gap year. - Figma responded with a “Back To School?” interview series featuring: - Dylan Field - Marc Andreessen - May-Li Khoe - Karlie Kloss - John Maeda - Laura Deming - The interviews explored gap years, education, and alternative paths through higher education. - Fellow Abigail Africa also published guidance on pitching and presenting, emphasizing audience awareness, confidence, and storytelling. ## Virtual Campus and Camp Figma - More than 1,000 students joined Figma’s Virtual Campus Slack Community during the summer. - The community enabled students to connect, teach, learn, and socialize remotely. - Figma also hosted Camp Figma, a two-day virtual make-a-thon involving hundreds of students across dozens of time zones. - Featured winning projects included FigmAdventure and Slice. ## Overall Impact - The fellowship demonstrated that student programming could extend beyond campus events through digital communities and reusable resources. - Its success gave Figma a practical foundation for developing future fellowships and strengthening its broader education initiatives. - The program also showed the value of involving students directly in designing services intended for their own community.

Read original(opens in new tab)
FigmaPrototypingCollaborative DesignSlack+2
figma2 min readCurated summary

Power up your design system with Figma’s agency partners | Figma Blog

Figma announced partnerships with leading digital and design agencies to help organizations build, migrate, and scale design systems. The post argues that effective design systems connect design and code, creating consistency, efficiency, and a shared source of truth. Figma’s agency partners provide both implementation support and strategic guidance for improving collaboration, workflows, and brand expression. ## Why Design Systems Matter - Modern design systems are more than pattern libraries or sticker sheets. - They create a shared language between design and development. - They support creative exploration while adding the structure and rigor needed for implementation. - A well-managed system helps teams work faster, maintain consistency, and establish a single source of truth. - Designing and implementing such a system can be challenging, especially when migrating tools or scaling across teams. ## How Agency Partners Help ### Setting Up a Design System - Agencies can help organizations migrate their existing design-tool stack to Figma. - For existing Figma users, they provide recommendations for organizing systems around specific brand and team needs. - Their support covers architecture, implementation, and initial setup. ### Improving Design and Development Processes - Building a system is only the beginning; teams must also determine how it will be used and maintained. - Partners can define guiding principles, recommend operating processes, and improve collaboration between designers and developers. - Their goal is to reduce inefficiencies caused by gaps between tools, teams, and workflows. ### Defining and Scaling a Brand - Design systems translate a brand into practical design decisions and reusable components. - Agency partners offer strategic brand guidance in addition to technical and process expertise. - This helps organizations maintain a consistent identity as their products, teams, and brands grow. ## Figma’s Agency Partner Network - Figma initially partnered with eight agencies: - BASIC® - frog - HUGE - Idean - One North - R/GA - Instrument - Work & Co - These agencies serve organizations across industries and company sizes. - Examples include BASIC®’s work with brands such as Google, Airbnb, Patagonia, Apple, Beats by Dre, and Herman Miller. - Partner testimonials emphasize faster collaboration, greater transparency, improved organization, and stronger client relationships through Figma. Figma’s recommendation is to use experienced service partners when a team needs help migrating to Figma, structuring or scaling a design system, improving design-to-development workflows, or translating a brand consistently across products.

Read original(opens in new tab)
FigmaDesign SystemsDesign ToolsDesign To Development+1
datadog2 min readCurated summary

How we wrote a Python profiler | Datadog

The post explains how Datadog built a low-overhead statistical profiler for Python. Rather than tracing every function call, the profiler periodically samples running threads and reconstructs their Python and native call stacks. The main challenge is collecting accurate stack data without pausing applications for too long or introducing unsafe behavior inside CPython. ### Why Traditional Profiling Is Expensive - Deterministic profilers instrument every function call and return. - This provides detailed data but can significantly slow production workloads. - A statistical profiler reduces overhead by sampling execution at regular intervals instead of observing every event. ### Sampling Python Threads - The profiler interrupts running threads to capture their current execution state. - Python’s signal-handling model complicates this because signals are generally processed by the main thread. - The implementation must coordinate native threads, operating-system signals, and the Python interpreter to sample worker threads reliably. - Sampling must avoid interfering with application locks or triggering unsafe operations in signal handlers. ### Reconstructing Call Stacks - A useful profile needs both Python-level frames and native stack information. - The profiler walks Python frames to identify functions, files, and line numbers. - It also handles time spent in native extensions and the interpreter itself. - Collected samples are aggregated into call stacks, allowing Datadog to show CPU usage and hotspots across the application. ### Balancing Accuracy and Overhead - Sampling frequency affects the trade-off between detail and runtime cost. - More frequent samples improve visibility into short-lived work but consume more resources. - The profiler is designed to operate continuously in production, so it prioritizes low overhead, safe memory handling, and resilience across Python versions and deployment environments. The central recommendation is to use statistical sampling for always-on production profiling. It provides actionable performance data with far less impact than call-by-call instrumentation, provided the implementation carefully accounts for CPython’s threading, signal, and native-extension behavior.

Read original(opens in new tab)
KubernetesDatadogObservabilityApplication Performance Monitoring+3
datadog3 min readCurated summary

How we wrote a Python profiler

Datadog built a Python continuous profiler because Python lacked Java-style, always-on production profiling tools. The post argues that deterministic profilers such as `cProfile` impose too much overhead for continuous use, while statistical profiling can provide representative performance data with minimal disruption. Datadog’s profiler addresses this through modular collectors, recording, scheduling, and data export. ## Profiling Versus Tracing - **Profiling** measures resource consumption such as CPU time and memory allocation to reveal performance problems. - **Tracing** records individual operations—such as SQL queries or HTTP requests—within a request timeline. - Tracing explains request latency, but profiling provides deeper insight into code-level execution and operating-system resource usage. ## Limitations of Deterministic Python Profilers - Python’s `cProfile`, available since CPython 2.5, records every function call and the time spent in each call. - It can provide a complete execution flow, but its usefulness depends heavily on code structure: - A program built around a few large functions produces little actionable detail. - A program containing thousands of functions can incur two- or three-times runtime overhead. - This overhead makes deterministic profiling unsuitable for always-on production environments. ## Why Profile in Production? - Optimizing without profiling is essentially guessing; real workloads often differ from development environments. - Production systems vary from developer machines in hardware, concurrency, input data, and workload behavior. - Continuous profiling captures how an application actually consumes resources under authentic conditions. - These requirements lead to statistical rather than deterministic profiling. ## Statistical Profiling in Python - Statistical profilers sample program activity periodically instead of recording every function call. - Individual short-lived calls may be missed, but repeated sampling over hours produces a reliable picture of resource consumption. - Lower overhead allows the application to run closer to its normal, unprofiled behavior. - Datadog evaluated numerous open-source Python profilers but found limitations involving platform support, collected data, or presentation-focused designs. - The team therefore developed its own statistical profiler, incorporating ideas from the tools it studied. ## Datadog Python Profiler Design The profiler was designed around three constraints: - Keep runtime overhead as low as possible. - Make deployment simple. - Support common operating systems and environments. Its architecture, inspired by the JDK Flight Recorder, consists of: - **Collectors:** Gather data such as CPU usage and memory allocation. - **Recorder:** Stores events produced by collectors. - **Exporter:** Sends profiling data outside the application. - **Scheduler:** Invokes components at appropriate intervals, such as exporting data every 60 seconds. - **Profiler:** Provides the high-level interface used by applications. ## Stack Collection - The stack collector is the primary built-in collector. - It wakes 100 times per second and captures the execution stack of every Python thread. - For each thread, it gathers information including: - The currently executing function - CPU time consumed - Exceptions being handled - The collector monitors the time required to inspect the application so it can control and limit its own CPU overhead. A statistical profiler with low overhead is the appropriate foundation for continuous production profiling, giving teams evidence about real application behavior without substantially changing that behavior.

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

Creating moments of connection | Figma Blog

The Figma post reflects on Config Europe and argues that design’s greatest value lies in creating meaningful human connections. Across organizational change, personal branding, and digital products, the contributors emphasize that successful design combines function with empathy, emotion, and purpose. The central conclusion is to develop technical mastery without losing sight of humanity. ## Designing Beyond a Single Product - Posti Group, Finland’s postal service, used digital transformation to rethink its entire customer journey—not merely build a new app. - The organization established four guiding principles: - **Grow:** Adapt as users’ needs change. - **Delight:** Turn frustrating experiences into positive ones. - **Reduce:** Deliver reliable, efficient services. - **Listen:** Give customers ways to express their needs. - Design became a company-wide framework for defining “what great means.” - Posti’s work recognizes that postal services carry emotional significance, supporting important communications such as love letters, tax documents, and newborns’ social security cards. ## Character Matters as Much as Skill - ConvertKit’s Charli Marie Prangley argues that a designer’s reputation depends on more than technical ability or visual craft. - Personal brand is shaped by character: kindness, creativity, authenticity, and how others experience working with you. - Designers should consider how they want people to describe them and assess whether their public presence reflects their values. - Sharing work and participating in the design community can help build an authentic reputation. - Her advice is to remain genuine because there is an audience that will value an individual perspective. ## Combining Function with Feeling - Halli Thorleifsson of Ueno encourages designers to create work with meaning rather than treating products as “just” websites, apps, or tools. - Design systems and software matter because of the work, relationships, and experiences they enable. - Technology can help people feel connected and that they belong, especially while working remotely. - Config Europe’s virtual format demonstrated this potential by bringing nearly 10,000 participants from more than 150 countries together through talks, chats, networking, and community groups. The practical recommendation is to master your craft while deliberately developing empathy, authenticity, and a sense of purpose. Design is most powerful when it improves both what people can do and how connected they feel.

Read original(opens in new tab)
FigmaDesign SystemsUser ExperienceRemote Collaboration+1
figma2 min readCurated summary

Building an open and inclusive design process | Figma Blog

The post argues that inclusive products emerge from inclusive design processes built on trust, empathy, transparency, and collaboration. Teams should look beyond ideal users, involve localization and accessibility perspectives early, and create open working practices—especially in remote environments. These approaches improve both the product and the way teams understand one another. ## Designing for More Than the “Perfect” Use Case - User research should include diverse users, situations, and challenges—not only the primary persona. - Designers are encouraged to experience products “in the field,” such as considering delivery workers dealing with broken elevators or unreliable GPS. - Inclusive thinking can reveal accessibility needs that are: - Permanent, such as visual or motor limitations - Temporary or situational, such as hearing difficulties in crowded spaces or using a phone with a shattered screen - Small improvements to copy, color contrast, font size, and layout are useful, but accessibility requires broader organizational prioritization. - Teams should establish clear ownership for accessibility. - Designing for essential needs often produces features that benefit everyone. ## Making Localization Part of Product Design - Localization involves more than translating text; it requires attention to syntax, cultural nuance, and how designs adapt across languages. - Deliveroo replaced a siloed handoff process with the Phrase Figma plugin, allowing designers and localization teams to review localized prototypes earlier. - Localization experts can identify inaccurate translations or insufficient space before engineers build the final pages. - Seeing the complete user journey gives localization teams more context and improves collaboration. - Localization becomes an integrated part of product development rather than a transactional final step. ## Creating Transparent Team Processes - Remote work increases the need for visibility into teammates’ work, availability, and priorities. - Kate Pincott’s Team Capacity Template helps teams map weekly schedules and identify meeting or workload gaps. - Regular meetings and short stand-ups can replace informal office interactions and maintain personal connection. - Teams should make room for what matters during difficult periods rather than optimizing only for efficiency. - Shared working sessions, such as open Zoom rooms, can recreate some of the spontaneous collaboration of an office. Inclusive design is ultimately a process practice: broaden the perspectives involved, invite feedback early, and make work visible. Teams that build these habits are better equipped to create products that work across users, cultures, and circumstances.

Read original(opens in new tab)
FigmaAccessibilityRemote CollaborationUser Experience Design+2
figma3 min readCurated summary

When fonts fall | Figma Blog

Font fallback is the mechanism that lets computers display characters a font does not contain. It explains familiar problems such as missing-character boxes, broken emoji, shifted lines, inaccessible decorative “fonts,” and inconsistent kaomoji. Rather than random bugs, these effects arise from the gap between text data and the fonts available to render it. ## Everyday Symptoms of Font Fallback - Missing characters may appear as boxes, question marks, or other placeholder symbols. - Emoji can look assembled differently across devices when platforms support different glyphs or emoji sequences. - Decorative social-media “fonts” are often alternate Unicode characters, not actual font changes. - These characters can create accessibility problems for screen readers and display as empty boxes on unsupported systems. - Adding an emoji or unsupported character can change line height or spacing because a fallback font has different metrics. - Kaomoji and other symbol combinations may render differently depending on the available fonts. ## Why Fonts Cannot Contain Everything - A glyph is the visual form used to represent a character. - Even basic Western fonts require hundreds of glyphs for letters, numbers, punctuation, accents, symbols, ligatures, and OpenType alternatives. - Fonts supporting Chinese, Japanese, or other writing systems may contain thousands of glyphs. - Supporting additional languages and writing systems continually expands the required character set. - Font designers must eventually decide which characters their font will not support. ## The `.notdef` Glyph - Fonts include a special last-resort glyph called **`.notdef`**, used when a requested character is missing. - It commonly appears as a rectangle, sometimes with a cross or question mark. - `.notdef` is not a Unicode character; it is a visual substitute produced by the font. - The original character remains intact in the underlying text, so changing fonts or updating the font may reveal it correctly later. - Designers can choose how `.notdef` looks, from a simple blank square to more elaborate warning-like designs. ## Font Fallback as a Computer-Typography Problem - In physical typography, a piece of metal type inherently belonged to a specific font, so this mismatch was impossible. - Digital text can originate from another person, device, era, or font, creating a separation between the character and its visual representation. - Font fallback exists to bridge that gap by searching for another way to render unsupported characters—or displaying `.notdef` when no suitable glyph is available. Understanding font fallback makes many seemingly arbitrary typography failures predictable: the text is usually still present, but the chosen font lacks the glyph or the system’s fallback behavior differs.

Read original(opens in new tab)
TypographyScreen ReadersUnicodeOpentype+3
figma2 min readCurated summary

Six integrations to help your product team collaborate in Figma | Figma Blog

Figma argues that its open platform and API help product teams connect design work with the tools used for documentation, development, feedback, and production. The integrations described keep designs current across workflows, reduce handoff friction, and help teams validate ideas with users before investing heavily in implementation. ## Confluence: Keep Documentation and Designs in Sync - Live Figma files and prototypes can be embedded in Confluence pages. - Product specifications and requirements remain connected to the latest designs. - Teams no longer need to manually replace screenshots whenever designs change. - Developers can review current designs directly within the documentation they use as a source of truth. ## GitLab: Connect Designs to Development Tasks - The GitLab plugin lets teams upload Figma designs directly into GitLab issues. - Developers can review designs alongside tasks, issues, and code changes. - Designs can be versioned and discussed in context, improving collaboration during sprints. - The integration reduces the need to move manually between tools. ## Avocode: Simplify Design Handoff - The Avocode plugin syncs finished Figma designs to Avocode projects. - Developers can inspect layers, export assets, and retrieve measurements and color values. - It supports copying code snippets in languages including CSS, CSS-in-JS, and React Native. - Designers can continue exploring in Figma while developers work from a stable, production-ready version. ## Pendo: Gather Feedback from Real Users - Pendo can embed live Figma wireframes and prototypes into targeted areas of a product. - Product teams can expose proposed features to specific user segments before development. - Feedback can be collected through surveys, open-text responses, and scheduled user interviews. - Early testing helps teams identify customer needs and problems before launch. ## Bubble: Turn Designs into Web Apps - Bubble allows teams to import Figma designs into a no-code web app workflow. - Each Figma frame becomes a page in the Bubble application. - Vectors are uploaded as images during the import process. - The integration shortens the path from visual design to implementation without requiring traditional coding. Overall, these integrations extend Figma beyond design by connecting it to documentation, issue tracking, developer handoff, user research, and no-code development. Teams can use them to maintain a shared source of truth and move more efficiently from concept to shipped product.

Read original(opens in new tab)
FigmaGitlabDesign CollaborationReact Native+3
datadog3 min readCurated summary

The Old Datadog and the Sea

Wouter de Bie describes upgrading his 1992 Hunter Legend sailboat, *Second Wind*, into a connected, data-driven vessel. His goals were to unify onboard instruments, improve safety with vessel tracking, add accurate wind measurements, and collect data for later analysis. The central solution was an NMEA 2000 network, which allowed compatible devices to share data and power over a single backbone. ## Building a Unified Instrument Network - The boat originally had a depth sounder, speedometer, autopilot, chartplotter, and GPS, but the systems were not centrally connected. - The existing Raymarine equipment used SeatalkNG, which is compatible with NMEA 2000 despite having different cables and connectors. - The older speed and depth displays used NMEA 0183 rather than NMEA 2000. - Instead of adding protocol converters, Wouter replaced the older displays with new NMEA 2000-compatible instruments. - Once connected to the backbone, speed and depth data appeared on the chartplotter. ## Why NMEA 2000 Was Chosen - NMEA 2000 is similar to the CAN bus used in automobiles. - Devices connect to a shared backbone and broadcast small data messages for other equipment to consume. - The network operates at 250 kbit/s, which is sufficient for marine instruments. - Its cables carry both power and data, reducing wiring complexity. - Most marine electronics vendors support the standard. ## Improving Safety with AIS - Wouter added an Automatic Identification System (AIS) transponder to detect nearby vessels. - AIS broadcasts a vessel’s name, identifier, speed, heading, and coordinates over VHF radio. - The system only detects AIS-equipped vessels within line of sight, but offers a lower-cost alternative to radar. - After installing the transponder and routing its antenna cable to the stern, nearby ships appeared on the chartplotter. - The transponder’s built-in GPS also supplied positioning data to the NMEA 2000 network. ## Adding Wind Measurements - The original wind indicator was only an analog vane, requiring Wouter to look up at the mast and providing no wind-speed measurement. - He purchased a NMEA 2000 wind transducer and cockpit display. - The transducer measures wind angle with a vane and wind speed with a rotor, typically from the top of the mast. - Installation required routing a cable through the mast and boat. - A friend was hoisted up the mast on a calm evening to drill the mounting hole and install the sensor. The project demonstrates how replacing incompatible legacy instruments and connecting modern devices through NMEA 2000 can turn a boat into an integrated safety and analytics platform. Once all sensor data is centralized, it can support both better sailing decisions and longer-term analysis of performance and conditions.

Read original(opens in new tab)
Database DesignData AnalysisWireless CommunicationNmea 2000+4
figma2 min readCurated summary

Inside Figma: my time as a new grad | Figma Blog

The post argues that choosing a first job should involve more than checking boxes such as “interesting problems,” “smart people,” and “good culture.” Josh Shi reflects on joining Figma as a new graduate and encourages readers to examine how work fits into their broader lives, interests, and changing goals. His conclusion is that the most useful job-search framework is built around personal questions rather than universal criteria. ## Rethinking Work-Life Balance - Work and life are not opposing forces in a zero-sum equation. - The hours spent working and not working together constitute a person’s life, and each affects the other. - Job satisfaction can influence life outside work, just as personal circumstances can affect satisfaction at work. - Measuring balance only by the number of hours worked ignores the nature and meaning of the work. - The author acknowledges that treating work as a career is a privilege, especially during economic hardship or when employment is uncertain. - People who have the opportunity to choose should ask: - What kinds of work interest me? - Does this workplace support those interests? - Will I be able to learn and develop? - Can the role adapt as my interests change? - What skills or crafts can I build? - Does the job leave room for other interests? ## Learning as a New Graduate - At Figma, Shi gained new technical experience, including: - Full-stack development - Writing C++ for the web - More significantly, he learned to own features and participate in the full product-development process. - This included scoping projects, clarifying ambiguous goals, and taking ideas from inception through launch. - Mentorship and support from colleagues made it possible for him to challenge himself and take ownership. - The same people he met during his interview continued to provide guidance and expertise after he joined. ## Company Growth and Change - Figma had changed substantially during Shi’s first few years as the company and product expanded. - The company began transitioning toward a hybrid model, illustrating that workplaces evolve over time. - This reinforces the importance of considering not only whether a company fits current interests, but also whether it can accommodate future growth and changing priorities.

Read original(opens in new tab)
Design SystemsWeb DevelopmentProduct DevelopmentC+++1