Techlist.io - Korean Tech Blog Curator

figmaOct 2, 20192 min readCurated summary

Designing for top feature requests, like Smart Animate | Figma Blog

Figma introduced Smart Animate and Drag in 2019 to support more expressive, realistic prototypes. Smart Animate automatically animates matching objects between frames, while Drag lets users control transitions with finger movement. The features were shaped by customer feedback, recurring interaction patterns, and Figma’s effort to integrate advanced animation into its existing workflow. ## New Prototyping Features - **Smart Animate** automatically animates similar objects across frames. - It improves existing transitions and supports interactions such as: - Dropdowns and pop-ups - Button hover states - Tab changes - Moving or disappearing objects - **Drag** allows users to control a transition by dragging with a finger. - Figma provided a product tutorial and help article to explain how to use the features. ## Learning from User Pain - Figma used in-product NPS surveys as an ongoing source of qualitative feedback. - Rather than focusing only on NPS scores, the team categorized comments to identify recurring problems. - Customers wanted: - Simple, smooth animations for everyday interactions - A way to communicate advanced transitions to developers - Auto-animation and drag or slide transitions without relying on other tools - Several survey respondents became early beta customers. ## Identifying Broad Interaction Patterns - Figma collected animation examples from customer conversations and studied interactive interfaces in everyday products. - The team avoided designing Smart Animate around a single use case so the feature would remain broadly useful. - Two major patterns shaped the first release: - **Objects change while the user remains on the same screen:** for example, hover states, expanding menus, or content revealed after swiping. - **Some elements remain fixed while most content changes:** common in tabbed navigation, where content moves and the tab indicator shifts. - Focusing on these shared patterns helped Figma keep the initial scope manageable while addressing many different customer needs. ## Integrating Animation into Figma - Figma wanted Smart Animate and Drag to feel consistent with its existing prototyping tools rather than like separate systems. - Supporting automatic animation required revisiting fundamentals such as layer naming. - Figma updated how objects are automatically named and renamed during creation and duplication. - Layers can now match for animation based on hierarchy, naming, and order, allowing Smart Animate to work with minimal manual setup. Figma’s approach combined direct customer research with pattern-based product design. The practical recommendation is to start with real user pain, identify common behaviors across use cases, and integrate new capabilities into familiar workflows rather than building isolated features.

Figma Prototyping Interaction Design Smart Animate+2

figmaOct 1, 20192 min readCurated summary

An update on plugin security | Figma Blog

Figma disclosed vulnerabilities in the third-party Realms shim used to sandbox plugins. Although the vulnerabilities could have allowed plugins to escape their security boundaries, Figma found no evidence of exploitation after auditing published plugins. The company patched the issues, paused plugin publishing, and replaced the Realms shim with QuickJS running in WebAssembly. ## Plugin Security Boundaries Figma designed plugins so they can: - Run only after explicit user action. - Display UI in a plugin-specific dialog. - Read and modify data in the current Figma document. - Communicate with external internet services. Plugins should not be able to: - Run automatically or access data when inactive. - Obtain project or team information. - Read files other than the one in which they were launched. - Modify Figma’s interface outside their own dialog. Organization-tier administrators can also restrict plugin use through an allowlist. ## Response to the Vulnerabilities The Realms shim vulnerabilities could have allowed sandboxed code to bypass these restrictions. - Figma halted publication of new plugins and updates to existing plugins. - Existing plugin updates were disabled because live code changes propagate immediately to open clients. - Figma applied the publicly disclosed patch as soon as Agoric released it. - Privately disclosed vulnerabilities were fixed before the coordinated public disclosure. - Figma audited published plugins and found no evidence that the flaws had been exploited. Figma clarified that manual plugin review focuses primarily on user experience. Security is enforced through sandboxing rather than relying on human review, which can miss malicious behavior. ## Replacing the Realms Shim Figma permanently changed its plugin execution technology: - The Realms shim was removed entirely. - Plugins now run using QuickJS, a JavaScript virtual machine written in C and compiled to WebAssembly. - Figma’s architecture allowed the implementation to be swapped quickly because QuickJS had already been prepared as a backup. - The newly discovered Realms-specific vulnerability class no longer applies to the new implementation. Figma’s approach demonstrates the importance of defense-in-depth: sandboxing should enforce security boundaries, while rapid patching, controlled disclosure, plugin audits, and an interchangeable runtime architecture limit the impact of third-party vulnerabilities.

JavaScript Webassembly Sandboxing Plugin Security+2

datadogSep 23, 20193 min readCurated summary

Computing accurate percentiles with DDSketch

DDSketch was created to compute accurate percentiles from massive, distributed monitoring datasets without storing every value. The post explains why averages and exact percentile calculations are impractical for latency data, and why existing quantile sketches produced too much noise—especially at high percentiles. DDSketch addresses these needs through compact, approximate, and mergeable data structures. ## Why Percentiles Matter for Monitoring - Application latency strongly affects user experience, sales, and revenue. - Averages can hide extreme values and fail to represent users with the worst experiences. - High percentiles, such as the 99th percentile, provide a more useful view of typical “bad” experiences while ignoring extreme outliers. ## Why Percentile Computation Is Difficult - Minima, maxima, sums, and counts can be calculated using constant memory. - Exact percentiles require retaining every value, sorting the collection, and selecting the value at the desired rank. - This approach is infeasible for streams containing millions of monitoring points. - Percentiles are also difficult to aggregate across distributed systems: - Partition-level maxima, minima, sums, and counts can be merged exactly. - Partition-level percentiles cannot determine the global percentile. - Sending all raw values across the network would eliminate the benefits of distributed aggregation. ## Quantile Sketches - Sketches compress data into smaller structures that preserve enough information to answer approximate queries. - They trade some accuracy for significantly lower memory usage. - Quantile sketches estimate percentiles without retaining every input value. - Mergeable sketches allow multiple independently generated sketches to be combined without introducing additional precision loss. - Mergeability supports distributed computation and pre-aggregation, such as processing data at individual hosts before sending it elsewhere. - Datadog initially used the Greenwald-Khanna (GK) sketch for percentile metrics and histogram generation. ## Accuracy Problems with Existing Sketches - Percentile graphs often contain noise and spikes, particularly at high percentiles. - Some variation reflects real changes in latency caused by load or network conditions. - GK approximation errors can add substantial artificial variation. - Comparisons with exact percentiles show that GK-generated errors can create spikes that do not exist in the underlying data. - Errors appear especially pronounced for the 99th percentile, reducing the reliability and usefulness of monitoring visualizations. ## Rank-Error Versus Relative-Error Guarantees - Sketch algorithms generally expose a parameter controlling the accuracy–memory trade-off. - Higher accuracy requires a larger sketch. - The post identifies the need for percentile approximations whose errors are appropriate for noisy, large-scale monitoring data, motivating the design of DDSketch. DDSketch is presented as a purpose-built solution for monitoring systems: it aims to provide accurate percentile estimates with compact storage and support for lossless merging across distributed data sources.

Data Aggregation Dds Sketch Quantile Sketch Distributed Computation+4

datadogSep 23, 20194 min readCurated summary

Computing accurate percentiles with DDSketch | Datadog

Datadog’s post explains why accurately computing percentiles is difficult when monitoring large-scale, distributed systems. Traditional approaches either require retaining every observation or sacrifice accuracy through fixed-size summaries, especially for long-tailed data such as request latency. DDSketch addresses this by providing mergeable percentile estimates with a guaranteed relative-error bound and memory usage that remains effectively constant. ## Why Percentiles Matter - Averages can hide slow requests and do not describe the tail of a distribution. - Percentiles such as p95, p99, and p99.9 are more useful for measuring latency and reliability. - Monitoring systems must calculate these values from enormous numbers of observations across many hosts and services. - Storing every measurement is too expensive, while calculating percentiles independently on each machine and averaging the results is mathematically incorrect. ## Limitations of Common Approaches - Exact percentile calculation requires sorting or retaining all values, which is impractical for high-volume metrics. - Histograms use predefined buckets, making their accuracy dependent on bucket boundaries. - Fixed-width buckets are inefficient for distributions spanning several orders of magnitude: - Small values may require fine-grained buckets. - Large values may require a huge number of buckets. - Many quantile sketches optimize for rank accuracy, but a small rank error can still produce a large value error in heavy-tailed distributions. - Summaries must also be mergeable so that data collected from multiple agents can be combined without losing their accuracy guarantees. ## DDSketch’s Logarithmic Mapping - DDSketch groups values into logarithmically spaced bins rather than equally sized intervals. - Values close together near zero receive finer absolute resolution, while larger values receive wider buckets. - Each value is mapped to a key based on its logarithm: - Positive and negative values are handled separately. - Zero and values sufficiently close to zero use a dedicated zero bucket. - A representative value is chosen for each bucket, typically using the bucket’s geometric center. - Because adjacent buckets have a fixed ratio, the estimated value is bounded by a predictable relative error rather than a fixed absolute error. ## Relative-Error Guarantees - DDSketch is configured with a target relative accuracy, such as 1%. - Its logarithmic base is selected so that the returned quantile is within that relative-error bound of the true value. - Relative error is particularly appropriate for latency data: - An error of a few milliseconds matters greatly for a 10 ms request. - The same absolute error is much less significant for a 10-second request. - The sketch preserves accuracy across a wide range of values without requiring a proportional increase in the number of buckets. ## Distributed Aggregation and Memory Use - DDSketches can be merged by adding the bucket counts from separate sketches. - This allows agents, hosts, containers, and regional services to aggregate measurements into a global percentile. - Merging does not require access to the original observations. - The sketch stores counts rather than individual values, substantially reducing memory and network costs. - Datadog also describes bounded-memory variants that collapse older or less significant bins when necessary, allowing sketches to maintain a fixed storage limit while retaining useful tail information. ## Practical Trade-offs - Higher accuracy requires more buckets and therefore more memory. - Lower accuracy reduces resource usage but produces wider estimates. - The choice of relative accuracy should reflect the metric’s operational needs rather than defaulting to the smallest possible error. - Implementations must account for negative values, zeros, very small values, and values outside the normal range. - Accurate percentile reporting depends not only on the sketch algorithm but also on correct aggregation and consistent configuration across producers. DDSketch is therefore a practical choice for observability systems that need scalable, mergeable, and predictable percentile calculations. Its logarithmic buckets and relative-error guarantees make it especially well suited to latency and other long-tailed measurements where fixed-width histograms or rank-based approximations can be misleading.

Kubernetes Datadog Observability Application Performance Monitoring+3

figmaSep 9, 20192 min readCurated summary

How to make background patterns for your next design project | Figma Blog

Namika Hamasaki uses a daily pattern challenge to develop creativity through repetition without producing repetitive results. Her process combines observation, unconventional color palettes, layout grids, geometric experimentation, and Figma components to turn simple ideas into seamless patterns. The central lesson is that consistent practice and attention to everyday details can make creative work easier and more adventurous. ## Finding Daily Inspiration - Inspiration can come from ordinary surroundings, including: - Food - Architecture - Furniture - Nature - Landscapes encountered during a commute - Hamasaki photographs interesting shapes, colors, and compositions for later reference. - Maintaining an inspiration library helps prevent the blank-page problem and provides starting points for new designs. ## Building a Color Palette - The challenge allows her to experiment beyond the brand color restrictions common in professional work. - She often derives palettes from inspiring photographs. - Figma’s Image Palette plugin extracts colors from images and generates a usable palette. ## Setting Up a Grid - A grid helps organize pattern elements and ensures that the final design can repeat correctly. - Hamasaki uses Figma’s Layout grid to establish the structure before placing shapes. ## Experimenting with Geometric Shapes - Complex-looking patterns begin with basic forms such as circles, rectangles, and triangles. - She strategically places shapes on the grid, then experiments with: - Rotating circles or semicircles - Shifting elements - Varying rotation angles - Testing different color combinations - The process is intentionally exploratory, allowing unexpected visual results to emerge. ## Creating Seamless Patterns - Once a design feels successful, Hamasaki converts it into a component. - She turns off the component’s **Clip content** option. - She duplicates and arranges the component across a frame to create a repeating pattern. - Editing elements inside the master component lets her quickly test different layouts across all duplicated instances. The practical recommendation is to establish a regular creative exercise, document visual inspiration, and use simple, flexible systems—such as palettes, grids, and reusable components—to explore many possibilities efficiently.

Figma Graphic Design Design Components Color Palette+2

figmaSep 5, 20192 min readCurated summary

An in-depth sneak peak at what 5 plugin developers are cooking up | Figma Blog

Figma’s first Plugin Show & Tell highlighted the creativity and practical value emerging from its newly opened plugin ecosystem. The livestream featured five developers demonstrating tools for design-system quality checks, spell checking, icon management, documentation, typography, and even voice control. Figma encouraged developers to explore its Plugin API, build tools for their own workflows, and participate in future community events. ## Community Plugin Showcase - The event was created to: - Promote community-built plugins. - Encourage developers to experiment with the Figma Plugin API. - Give users an early look at upcoming tools and features. - The recorded livestream included live demos from five plugin developers. ## Design Quality and Productivity Tools - **Toybox Roller**, presented by Jono Kolnik, helps identify and correct design errors and inconsistencies against an organization’s design system. - **Tekeste Kidanu’s Spell Check plugin** brings spelling assistance into Figma. - Tekeste also demonstrated integrating **Cleanmock** directly into Figma. ## Icons, Documentation, and Object Management - **Iconify**, presented by Vjacheslav Trushkin, provides access to hundreds of icon sets for use in both design work and production workflows. - Jackie Chui demonstrated several utilities: - Improvements to **Find & Replace**. - A plugin for adding documentation links to components. - **Paste to Fill**, which converts pasted content into image fills. - A forthcoming tool for managing margins and object sizing within frames using configurable presets. ## Typography and Voice Control - Andrew Goodwin showed a plugin for selecting and applying typography rules. - He also demonstrated a voice interface for controlling Figma. - The project aimed to map the entire Figma Plugin API to voice commands, allowing users to operate many Figma features verbally. ## Resources for Plugin Developers Figma directed developers to several resources: - Setup guides explaining plugin architecture, canvas communication, browser APIs, and development workflows. - Official Plugin API documentation. - Figma Plugin DS, a dependency-free HTML, CSS, and JavaScript design system modeled after Figma’s interface. - Open-source plugin examples on GitHub. - FigPlug for TypeScript, React/JSX, asset bundling, and manifest generation. - A community Slack workspace for questions and collaboration. The event demonstrates that Figma plugins can automate repetitive work, connect external data and services, and tailor Figma to specialized team workflows. Developers interested in extending Figma should start with the API documentation and open-source examples, or build a private plugin for internal needs.

React TypeScript JavaScript CSS+4

figmaSep 4, 20192 min readCurated summary

An ode to OpenType: Fall in love with the secret world of fonts | Figma Blog

OpenType features reveal that fonts often contain far more than their default bold, italic, and character shapes. The post describes how these hidden options—such as alternate digits, ligatures, small caps, swashes, and ornaments—can solve practical typography problems while expanding creative possibilities. Figma’s support for OpenType features makes these capabilities accessible across local, Google, and organization-shared fonts. ## Discovering the Hidden Capabilities of Fonts - The author first encountered OpenType features while studying Warnock Pro. - The font included: - Old-style and tabular figures for better integration with text and tables - Small caps for introductions and emphasis - Alternate letterforms with decorative flourishes - Fractions, ordinals, and the numero sign - Stylistic alternates and ornamental symbols - These options were traditionally hidden in technical menus, making them difficult to discover. - The author initially used them enthusiastically and indiscriminately, comparing OpenType features to spices that could transform otherwise ordinary typography. ## Learning When Features Are Useful - Over time, font PDFs were increasingly replaced by online type specimen pages documenting available features. - Fonts vary widely: - Some offer only a single alternate character. - Others provide dozens of features that can make the typeface appear substantially different. - The author gradually learned to use features intentionally rather than simply enabling them because they were available. - Technical terminology became meaningful in context, including: - Tabular figures for tables - Discretionary ligatures for optional letter combinations - Alternate glyphs and stylistic sets for different visual treatments ## Applying OpenType to Design Problems - At Medium, the team selected different numeral styles for different contexts: - Subdued figures for body text - More expressive, headline-like figures and a flamboyant ampersand for pull quotes - Many fonts also include punctuation and symbol variants optimized for all-caps text. - These adjusted glyphs help uppercase designs feel more balanced and cohesive. ## OpenType Features in Figma - Figma now supports OpenType features for: - Local fonts - Google Fonts - Fonts shared within organizations - Users can access additional ligatures, numeral styles, alternate letterforms, and other font-specific adjustments through Figma’s interface. - The feature is intended not only to expose advanced typography controls, but also to make discovering and experimenting with them approachable. Figma’s OpenType support encourages designers to look beyond a font’s default appearance. The practical recommendation is to treat these features as purposeful tools: choose them according to the context, hierarchy, and visual problem being solved rather than applying them indiscriminately.

Figma Typography Opentype Font Features+2

figmaSep 3, 20194 min readCurated summary

How we do design critiques at Figma | Figma Blog

Figma argues that design critiques should be motivating, useful, and psychologically safe—not intimidating or discouraging. After identifying problems in its own critique process, the team redesigned critiques around clear goals and several formats suited to different stages of design work. The result is a more flexible practice focused on unblocking designers, improving quality, sharing context, and encouraging collaboration. ## Improving the Critique Process Figma began by “critiquing critiques” and gathering feedback from its design team. Common problems included: - Overcrowded meetings - Shallow or unactionable feedback - Complex problems squeezed into short time limits - Groupthink, excessive agreement, and reluctance to be honest - Critiques that failed to help designers move forward The team documented issues in a shared Figma file, identified the productive and creative energy in that workshop, and continued iterating through a dedicated Slack channel. ## Goals of Design Critique The team aligned on four primary purposes: - **Unblocking problems and generating ideas:** Helping designers overcome difficult problems or explore early possibilities. - **Elevating quality:** Improving visual design, interaction details, and broader product direction. - **Encouraging consistency:** Reusing established patterns and identifying when new patterns are needed. - **Sharing context:** Keeping the design team informed about company, product, and project developments. ## Standard Critiques Standard critiques are structured sessions in which a designer presents work and receives feedback from peers. They are most useful when the presenter explains the project’s context, goals, and specific questions before discussion begins. - The facilitator keeps the discussion focused and balanced. - Feedback should be concrete, honest, and actionable. - Participants should critique the work rather than the person. - The format works best when the group size and scope are limited. ## Jams and Workshops Jams and workshops are collaborative formats for situations that need ideas rather than evaluation. - Designers work together actively instead of simply commenting on a presentation. - They are useful for early-stage exploration, brainstorming, and complex problems. - The shared activity reduces the pressure placed on one presenter. - Their informal, energetic quality can produce the kind of creative collaboration Figma wanted in regular critiques. ## Pair Design Pair design places two designers together to solve a problem collaboratively. - One designer can explain their thinking while the other contributes ideas and challenges assumptions. - The format encourages deeper discussion and immediate iteration. - It is particularly useful for focused problems that benefit from sustained attention. - Pairing can produce more actionable feedback than a large-group discussion. ## Silent Critiques In a silent critique, participants review work and write feedback before discussing it aloud. - Everyone has time to inspect the work carefully. - Written comments reduce the influence of the most vocal participants. - The approach helps limit groupthink and “+1” feedback. - Discussion can focus on patterns and themes that emerge from the individual responses. ## Paper (“Print-Out”) Critiques Paper critiques use printed screens or designs placed around a room for participants to annotate. - Designers can review work at their own pace. - Feedback is often more detailed and specific than verbal comments. - The physical format encourages participants to engage directly with the work. - It is useful for reviewing multiple screens or flows without a presentation dominating the session. ## FYI Critiques FYI critiques are informational rather than feedback-driven. - A designer shares work mainly to provide context or visibility. - Participants are not expected to solve the problem or offer extensive critique. - This format avoids turning every design review into a decision-making meeting. - It helps the team stay informed while preserving critique time for work that needs active input. ## Principles for Effective Critiques Figma’s recommendations emphasize adapting the format to the work and creating a constructive environment: - Define the purpose of the session in advance. - Invite only people who can contribute relevant perspective. - Share context and specific questions before asking for feedback. - Match the critique format to the project’s stage and needs. - Use a facilitator to manage time, participation, and focus. - Encourage direct, respectful, actionable feedback. - Avoid groupthink and uncritical agreement. - Separate critique from final decision-making when appropriate. - Keep sessions focused enough that participants can engage deeply. - Treat the process as something to continually evaluate and improve. The practical recommendation is to stop treating critique as a single meeting format. Teams should establish clear goals, experiment with methods such as workshops, pair design, silent reviews, and FYI updates, and regularly assess whether critiques are genuinely helping designers feel inspired, challenged, and empowered.

Figma Product Design Slack Collaboration+1

figmaAug 27, 20192 min readCurated summary

How Microsoft built plugins to improve their workflow | Figma Blog

Microsoft uses private and community Figma plugins to integrate its Fluent design system into everyday design work. These tools reduce repetitive tasks, provide approved content, and make it easier to manage hundreds of product-specific libraries. The broader conclusion is that customized tooling helps large design organizations improve consistency, accessibility, and efficiency while giving designers more time for creative work. ## Integrating Approved Design Content - Microsoft created an internal version of **Content Reel**, a plugin that inserts approved text strings, avatars, and icons into designs. - This replaces generic placeholder content and reduces the need for designers to search for or request approval of assets. - The approach can be adapted by other organizations to provide company-specific, reusable content. ## Switching Between Product Libraries - Microsoft maintains hundreds of Figma libraries, with different products requiring distinct themes and styles. - Jackie Chui built **Themer** to let designers quickly switch between product themes such as Work and Outlook. - The publicly available version swaps published styles from different libraries, reducing the manual effort required to adapt designs across products. ## Automating Repetitive Design Tasks Microsoft designers built plugins to eliminate routine work and support more creative problem-solving: - **Find and Replace** searches for text on a page and replaces it like a standard text editor. - **Paste to Fill** turns a copied image or image URL into a fill for selected layers. - **Button Resizer** adjusts button dimensions to fit their labels. - These tools reflect Microsoft’s broader investment in the Figma platform as a foundation for extending its design workflow. ## Making Accessibility Part of the Workflow - Tiffany Chen, part of Microsoft’s Modern Input and Accessibility team, develops tools intended to make accessibility more visible during design. - Her work challenges the common practice of treating accessibility as a final-stage addition. - Embedding accessibility support into design tooling can help teams identify and address inclusive-design concerns earlier. Microsoft’s example shows that plugins are most valuable when they are tailored to an organization’s real processes. Teams can improve consistency and productivity by connecting Figma to approved assets, design systems, automation, and accessibility checks.

Figma Design Systems Accessibility Figma Plugins+2

figmaAug 26, 20192 min readCurated summary

Keeping your data in Figma safe and secure: SOC 2 Type 2, SSO, and more | Figma Blog

Figma presents security as a core part of its infrastructure and product development, emphasizing protection of customer data and design intellectual property. Its efforts include SOC 2 certification, privacy compliance for European customers, secure plugin architecture, and enterprise SAML single sign-on. An update later confirmed that Figma completed SOC 2 Type 2 certification and obtained a SOC 3 report. ## SOC 2 Certification - Figma initially achieved SOC 2 Type 1 certification after auditing its infrastructure, software, HR processes, and customer-data policies. - Type 1 evaluates controls at a specific point in time. - Type 2 provides stronger assurance by examining whether those controls operate effectively over an extended period. - By January 2020, Figma had completed SOC 2 Type 2 certification and secured a publicly downloadable SOC 3 report. ## European Data Protection - Figma highlights its readiness for growing European usage. - It complies with relevant data-protection requirements and was certified under: - The EU–U.S. Privacy Shield Framework - The Swiss–U.S. Privacy Shield Framework ## Security-First Product Development - Security is considered during the design of new features, not added afterward. - Figma’s plugin system deliberately limits access: - A plugin can access only one design file at a time. - Plugins cannot access a user’s entire account. - Plugins are isolated from one another’s data. - Plugins cannot modify Figma’s user interface, reducing phishing and user-misdirection risks. - These restrictions sometimes reduced available capabilities, but Figma prioritized security, stability, and performance. ## SAML Single Sign-On - SAML integrations help organizations deploy Figma securely and manage user access centrally. - Figma supported Okta and Microsoft Azure Active Directory, and added OneLogin. - Enterprise administrators can simplify authentication while maintaining organizational access controls. Figma’s overall approach is to combine independent compliance audits, privacy frameworks, careful product architecture, and centralized enterprise authentication. Organizations evaluating Figma should review its security and privacy documentation and consider enterprise SSO controls for managing access.

Cloud Security Saml Security Compliance Soc 2+2

figmaAug 22, 20192 min readCurated summary

Bring real content into your designs in seconds | Figma Blog

Designing with realistic content helps teams stress-test layouts and better predict how interfaces will look in production. This 2019 Figma article highlights plugins that populate designs with text, images, maps, and custom data, reducing the need for manual entry. It concludes that real or organization-specific data can improve accuracy, while private plugins support sensitive internal information. ## Google Sheets Sync - Syncs spreadsheet data directly into Figma layers. - Uses unique column headers such as `Name` or `Address`. - Layers reference columns with names like `#Name` and `#Address`. - Supports formulas and future spreadsheet updates. - Can use image URLs to populate image fills. ## Unsplash - Provides access to more than one million free, high-resolution photographs. - Users can browse categories, select random images, or search the collection. - Images can be inserted directly onto the canvas or applied as image fills to selected elements. ## Data Lab - Populates text using customizable variables such as `{NAME}`, `{EMAIL}`, and `{DATE}`. - Variables can be combined into formatted strings, for example `{NAME} · {EMAIL}`. - Supports names, numbers, dates, phone numbers, emails, and comma-separated lists. ## Content Reel - Includes names, phone numbers, addresses, numbers, emails, URLs, companies, usernames, and countries. - Offers drag-and-drop customization for formatting data, including address fields and comma placement. - Provides access to the Segoe MDL2 icon library. - Its compact mode keeps the plugin available without taking up much workspace. - Planned image-content support would extend it to profile pictures and similar assets. ## Mapsicle - Adds Mapbox maps as image fills inside selected design elements. - Supports custom Mapbox themes and presets such as Light, Dark, Satellite, and Streets. - Allows control over zoom, pitch, and camera rotation. - Existing maps can be refreshed for new dimensions while preserving zoom settings. - Maps placed inside scrolling frames can support horizontal and vertical panning in prototypes. - A Mapbox access token is especially useful for custom themes. Using realistic content makes mockups more credible and exposes layout problems earlier. For sensitive or proprietary data, teams on Figma’s Organization plan can create private plugins connected to internal APIs.

Prototyping Figma Plugins Google Sheets Unsplash+2

figmaAug 21, 20193 min readCurated summary

How to build a plugin system on the web and also sleep well at night | Figma Blog

Figma’s plugin system had to let untrusted third-party JavaScript interact with a powerful, browser-based design editor without compromising security, performance, or stability. The team evaluated several isolation strategies, ultimately favoring JavaScript Realms because they supported synchronous APIs and avoided the performance costs of a full interpreter. Figma later replaced that implementation with a JavaScript VM compiled to WebAssembly after a vulnerability was found in the third-party Realms shim. ## Why Plugin Isolation Was Difficult - Plugins needed access to Figma’s document model while remaining isolated from: - User data and credentials - Figma’s internal application state - Other plugins - The host page and browser APIs - Simply calling `eval(PLUGIN_CODE)` would execute arbitrary code in Figma’s main environment. - Figma’s architecture added constraints: - The editor relied heavily on WebGL and WebAssembly. - Parts of the interface used TypeScript and React. - Multiple users could edit files simultaneously. - Plugins also needed to remain performant and avoid breaking as Figma evolved. ## Attempt 1: The `<iframe>` Sandbox - The team first considered the browser’s standard isolation mechanism: sandboxed `<iframe>` elements. - An iframe could separate plugin code from Figma’s main page and restrict access using browser security policies. - Communication between the plugin and Figma would use mechanisms such as `postMessage`. - However, this created an important limitation: iframe communication is asynchronous. - Figma’s plugin API needed synchronous access to document operations, making an iframe-based architecture awkward and potentially expensive. - The iframe approach also introduced additional browser contexts and messaging overhead. ## Attempt 2: A JavaScript Interpreter Compiled to WebAssembly - The second approach was to run plugin code inside a JavaScript interpreter rather than the browser’s native JavaScript engine. - The interpreter could expose only explicitly approved Figma APIs, providing a strong security boundary. - Compiling the interpreter to WebAssembly offered a way to integrate it efficiently with Figma’s existing WebAssembly-heavy architecture. - The drawbacks included: - Interpreted JavaScript would be slower than native execution. - The interpreter would require ongoing maintenance and compatibility work. - Supporting the full JavaScript language and modern features would be difficult. - Although attractive from a security perspective, this approach appeared to impose too much performance and implementation cost at the time. ## Attempt 3: JavaScript Realms - Realms provided a separate JavaScript global environment within the same browser process. - Figma could execute plugin code in a distinct Realm while exposing a carefully controlled plugin API. - Unlike iframes, Realms allowed plugin calls to remain synchronous. - Unlike a custom interpreter, plugin code could use the browser’s native JavaScript engine. - The implementation required carefully controlling built-in objects and preventing plugins from escaping their isolated environment. - This approach offered the best balance of: - Native JavaScript performance - Synchronous API access - Isolation from Figma’s application state - A relatively small integration surface ## Later Security Change - After publication, Figma discovered a security vulnerability in the third-party Realms shim used by its original implementation. - The vulnerability was fixed before public disclosure, and Figma reported no evidence that it had been exploited. - Figma subsequently changed its sandbox to use a JavaScript VM written in C and compiled to WebAssembly. Figma’s experience shows that plugin systems require more than simply restricting access to browser APIs. The isolation boundary must also preserve performance and API usability, while being robust enough to withstand vulnerabilities in the underlying sandbox technology.

React TypeScript JavaScript Webassembly+3

figmaAug 15, 20192 min readCurated summary

Tackle accessibility in your designs with these useful plugins | Figma Blog

Accessibility should be integrated into the design process so products do not exclude users with visual or motor impairments. Figma highlights four plugins that help designers evaluate color contrast, simulate color blindness, and plan keyboard focus order. Together, these tools make accessibility issues easier to identify and address before implementation. ## Color Contrast and WCAG Compliance - **Able** analyzes two selected objects and checks whether their contrast meets WCAG AA or AAA standards. - It updates dynamically as selections change and provides: - Text/background previews - Color-swapping controls - Simulations of different types of color blindness - Statistics showing how many people are affected by each condition - **Contrast Checker**, created by Stark, displays the contrast ratio between selected objects. - It provides contextual previews based on whether a layer contains text and shows: - AA/AA+ and AAA/AAA+ ratings - Contrast requirements for different font sizes - An indication of whether text larger than 18 points meets the relevant standard ## Simulating Color Blindness - **Color Blind** creates canvas-based simulations rather than only previewing colors in a separate interface. - It duplicates selected design elements and organizes them into named groups representing different types of color vision deficiency. - This lets designers inspect how an entire interface may appear to users with varying visual perceptions. ## Designing Keyboard Focus Order - **Focus Orderer** helps designers document the order in which a browser should move focus between interactive elements. - Designers can: - Add focus points to selected elements - Reorder them by dragging in the plugin interface - Automatically renumber annotations on the canvas - Tab through elements to test the intended navigation flow - The plugin connects accessibility planning directly with the design-to-development process. Designers should use these plugins alongside the Web Content Accessibility Guidelines (WCAG) to catch accessibility problems early. Teams can also explore Figma’s Plugin API to build custom accessibility tools.

Figma Accessibility JavaScript Wcag+3

figmaAug 11, 20192 min readCurated summary

How to wireframe | Figma Blog

Wireframes are simple blueprints for websites and digital products that clarify structure, functionality, and user experience before visual details are finalized. Their low-detail nature encourages feedback from designers, developers, stakeholders, and users without distracting them with colors or branding. The article recommends choosing the appropriate fidelity, keeping visuals deliberately simple, and using wireframes to communicate and iterate on ideas. ## What Is a Wireframe? - A wireframe represents the skeletal framework of a digital product, similar to a building blueprint. - It shows the shape, layout, and structure without defining final visual details. - Wireframes should be understandable to the entire team, including designers, developers, stakeholders, and users. - Because they are not treated as final designs, they support usability research, stakeholder feedback, and rapid iteration. - Their simplicity keeps discussions focused on functionality and user experience rather than aesthetics. ## Types of Wireframes ### Low-Fidelity Wireframes - Low-fidelity wireframes use basic layouts and high-level interactions. - They are typically grayscale and represent UI elements with simple shapes, lines, and placeholders. - Pen and paper can be sufficient, though tools such as Figma make sharing and updating designs easier. - They are useful for exploring ideas quickly before investing in detailed design work. ### High-Fidelity Wireframes - High-fidelity wireframes develop the low-fidelity structure with more realistic visual elements. - They may include colors, graphics, branding, typography, textures, shadows, images, and copy. - Designers can move from low-fidelity wireframes directly to prototypes, or treat high-fidelity wireframing as an intermediate step. ## Best Practices for Creating Wireframes - Keep aesthetic elements simple, generally using grayscale rather than full color. - Use no more than two fonts to establish information hierarchy. - Create hierarchy through font size, weight, and styles such as bold or italic. - Represent images with boxes or rectangles, often marked with an X. - Represent video placements with a box and a play-button triangle. - Focus on communicating layout and function instead of producing polished visuals. ## Designing for Different Screens - Wireframes should account for the practical contexts in which a design will be used. - Consider how layouts adapt between desktop and mobile devices. - Plan for both portrait and landscape orientations when relevant. - Different screen sizes and orientations may require separate wireframe versions. ## Practical Recommendation Start with a low-fidelity wireframe to test structure and interactions, gather feedback, and refine the concept. Add visual detail only when the layout and user experience are sufficiently clear.

Figma User Experience Prototyping Responsive Design+2

figmaAug 8, 20192 min readCurated summary

5 utility Figma plugins to speed up your workflow | Figma Blog

Figma highlights five utility plugins designed to eliminate repetitive design tasks and make workflows more efficient. They support responsive frame testing, component duplication, text manipulation, bulk replacement, and selection of similar layers. A keyboard shortcut tip further speeds up plugin access. ## Viewports - Resizes frames to common device dimensions. - Requires constraints to be configured on elements beforehand. - Displays estimated global market share for each device viewport. - Future versions were expected to include desktop sizes. ## Component Cloner - Duplicates master components, selected instances, or both. - Useful for testing variations such as icon colors and building icon sprites. - Removes the manual work of recreating components and their instances. ## Nisa Text Splitter - Converts lines in a text box into separate text objects. - Supports reordering, including alphabetical or reverse order. - Can also merge multiple text boxes into one. ## Find and Replace - Finds and replaces text throughout a Figma document. - Can also search and rename layers by name. - Supports case sensitivity and matching anywhere, at the beginning, at the end, or across the entire string. - Particularly useful for large copy or content revisions. ## Similayer - Selects layers based on chosen matching properties. - Can match attributes such as fill, stroke, border radius, and drop shadow. - Extends Figma’s native “Select all with same…” functionality while reducing repetitive clicks. ## Faster Plugin Access - Press `⌘ + /` on Mac or `Ctrl + /` on Windows to search the menu and launch a plugin by name. - Press `⌘ + ⌥ + P` on Mac or `Ctrl + Alt + P` on Windows to run the previous plugin. These plugins are practical additions for reducing repetitive work in Figma. Designers can adopt them immediately, while developers interested in creating similar tools can consult Figma’s Plugin API documentation.

Figma User Experience Web Development Figma Plugins+1