Techlist.io - Korean Tech Blog Curator

figmaJul 19, 20172 min readCurated summary

Photo Filters Come to Figma | Figma Blog

Figma introduced Image Adjustments in 2017, bringing basic photo-filtering capabilities directly into its browser-based design tool. The feature lets designers modify exposure, contrast, saturation, temperature, tint, highlights, and shadows without exporting images to Photoshop or using workarounds. Figma positioned it as a convenience for quick edits—not a replacement for professional image-editing software. ## Figma’s Return to Photo Editing - Figma began partly as a Photoshop competitor, with early experiments involving browser-based photo filters and masks. - The new feature revisited that original direction in a focused, practical way. ## Image Adjustment Features - Designers can adjust: - Exposure - Contrast - Saturation - Temperature - Tint - Highlights - Shadows - Adjustments are available after placing an image on the canvas. - Users access the filtering controls through the **Fill** section of Figma’s right-hand properties panel. ## Designed for Quick Fixes - The feature eliminates the need to export images to Photoshop for simple changes. - Figma carefully balanced adjustment ranges to avoid undesirable results, such as overly blown-out images at high exposure levels. - The tools are intended to simplify common design tasks rather than provide comprehensive photo-editing capabilities. Figma’s Image Adjustments are best understood as a convenient set of in-product controls for fast visual corrections. Professional photographers and advanced editors will still need dedicated software, but designers can now handle routine image tweaks directly in Figma.

Figma Image Processing Photoshop Photo Filters+1

datadogJul 11, 20173 min readCurated summary

Piecewise regression: When one line simply isn’t enough

Piecewise regression models a timeseries with multiple linear segments when one line is insufficient. Datadog’s approach automatically detects both breakpoints and the number of segments, while avoiding a brute-force search of all possible partitions. It starts with an intentionally overfit model and greedily merges neighboring segments until the increase in error indicates that further merging would lose important structure. ## Objectives - **Automated breakpoint detection** - The algorithm identifies where one linear trend changes into another. - This is necessary for running hundreds of regressions per second without manual input. - **Automated segment-count selection** - The number of segments is not specified in advance. - The method must distinguish between data best represented by one line and data requiring several. - **No continuity requirement** - Adjacent regression lines do not need to meet at their shared breakpoint. - This allows the model to represent discontinuous changes in the data. ## Challenges - **Large search space** - A timeseries can be partitioned in exponentially many ways. - Although dynamic programming is more efficient than brute force, it remains too slow for Datadog’s performance requirements. - A greedy heuristic is used to eliminate large portions of the search space quickly. - **Balancing fit and simplicity** - More segments generally reduce the sum of squared errors. - Using one segment per point could produce nearly zero error but would provide little useful information for interpolation or extrapolation. - The goal is therefore to find the fewest segments that model the data accurately. ## Greedy Merging Algorithm - Begin with approximately **n/2 segments** for a timeseries containing *n* observations. - Fit each segment using ordinary least squares regression. - Repeatedly examine every pair of neighboring segments: - Calculate the increase in total squared error if the pair were merged. - Merge the pair producing the smallest error increase. - Continue merging until only one segment remains. - Record the segmentation state immediately before a merge appears to go too far. - If no merge triggers the stopping rule, select one large segment; otherwise, return the last recorded segmentation. ## Stopping Criteria - A merge becomes a potential stopping point when its increase in total squared error exceeds that of every earlier merge. - To avoid stopping prematurely on data that is fundamentally linear, the increase must also be less than **3% of the total error from a single-line regression**. - The 3% threshold is heuristic but was found to work well in practice. - For data generated from one noisy linear trend, error increases gradually as segments are merged, so no merge qualifies as an adequate stopping point and the algorithm ultimately selects one segment. The method provides a practical compromise between exhaustive optimization and model quality: greedy merging makes automated regression fast, while the error-based stopping rule limits overfitting and preserves meaningful changes in trend.

Data Modeling Dynamic Programming Piecewise Regression Timeseries Data+4

datadogJul 11, 20173 min readCurated summary

Piecewise regression: When one line simply isn’t enough | Datadog

Piecewise regression offers a practical way to model time series whose trends change over time, something a single straight-line regression cannot represent well. The technique divides data into segments and fits a separate regression line to each one, allowing systems such as observability platforms to detect trend shifts more accurately. Its usefulness depends on selecting meaningful breakpoints without overfitting noise. ## Why a Single Regression Line Falls Short - Ordinary linear regression assumes one constant relationship between time and the measured value. - Real-world operational metrics often contain: - Sudden changes in growth rate - Traffic or usage shifts - Deployment-related behavior changes - Periods of increase followed by stabilization or decline - A single line averages these different behaviors, producing inaccurate trend estimates and potentially misleading forecasts. ## How Piecewise Regression Works - The time series is divided into multiple regions by one or more breakpoints. - Each region receives its own regression equation, such as: - Before the breakpoint: one intercept and slope - After the breakpoint: a different intercept and slope - The fitting process searches for the breakpoint that minimizes the combined prediction error across all segments. - Models may require the lines to connect at the breakpoint, preventing unrealistic discontinuities, or allow independent segments when abrupt jumps are meaningful. ## Finding Useful Breakpoints - Candidate breakpoints are evaluated by comparing the residual error produced by different segmentations. - A breakpoint is valuable when it significantly improves the fit rather than merely explaining random fluctuations. - More segments can capture complex behavior, but they also increase the risk of overfitting. - Practical implementations therefore need safeguards such as minimum segment sizes, limits on the number of breakpoints, and validation against noisy data. ## Applications in Observability - Piecewise models can improve the interpretation of infrastructure and application metrics. - They are particularly useful for identifying: - Changes in request volume - Altered resource-consumption patterns - Performance regressions - Long-term growth phases - Recovery or stabilization after an incident - By distinguishing genuine trend changes from normal variation, the method can support better anomaly detection and forecasting. ## Limitations and Tradeoffs - Noisy or sparse data can make breakpoint selection unstable. - A model with too many segments may describe historical noise instead of general behavior. - Sudden outliers can distort regression parameters unless they are handled separately. - Piecewise regression captures trend changes, but it does not automatically explain their causes; engineers still need deployment, traffic, and infrastructure context. Piecewise regression is therefore best treated as a lightweight, interpretable tool for detecting changes in metric behavior. It provides more realistic trend modeling than a single regression line while remaining simpler and easier to operate than highly complex forecasting models.

Kubernetes Datadog Observability Application Performance Monitoring+3

figmaJun 28, 20172 min readCurated summary

Introducing BrowserView for Electron | Figma Blog

Figma introduced BrowserView for Electron to address the performance, stability, and feature bugs it experienced with `<webview>`. BrowserView embeds web apps at the operating-system window level, similar to Chrome tabs, allowing them to perform more like native Chrome content. Although it requires manual positioning and layering, Figma found the trade-off worthwhile and shipped it in Figma Desktop 2.0. ## Why Figma Chose Electron - Figma uses the web to make its design tools broadly accessible. - Its desktop app is built with Electron, extending the web experience to desktop platforms. - Figma had already improved performance through technologies such as WebGL and WebAssembly. - The company also contributed fixes and improvements to Electron and Chromium. ## Problems with `<webview>` - Electron commonly uses `<webview>` to embed remote web applications. - Unlike an iframe, a webview renders content in a separate process, improving security, stability, and performance. - Over time, Figma encountered: - Drag-and-drop bugs - Performance below that of Chrome - Other fundamental reliability issues - Because webview is implemented inside Chromium, fixing its underlying problems would require major Chromium changes. - Figma and Electron maintainers therefore chose to develop an alternative rather than continue waiting for Chromium fixes. ## How BrowserView Works - `<webview>` exists within the page’s DOM hierarchy. - BrowserView lives in the operating system’s window hierarchy, much like Chrome’s browser tabs. - This design benefits from the more mature and actively maintained code paths used for Chrome tabs. - BrowserView eliminates many webview-specific bugs. - Applications embedded through BrowserView can perform similarly to applications running directly in Chrome. ## Trade-offs and Adoption - BrowserViews cannot be positioned or layered using ordinary HTML and CSS. - Developers must manually manage their size, location, and stacking order. - This can be difficult for applications with complex interfaces. - For Figma, converting to BrowserView was relatively straightforward. - At the time of publication, BrowserView was experimental and still planned for further refinement. Figma recommends BrowserView as a promising replacement for `<webview>` when improved performance and reliability outweigh the added layout complexity.

Webassembly Electron Webgl Chromium+3

figmaJun 25, 20172 min readCurated summary

Figma Now Has Guides | Figma Blog

Figma introduced Guides in response to frequent user requests for faster alignment and positioning tools. The feature adds draggable horizontal and vertical ruler guides that complement Layout Grids, with options for frame-level organization, pixel nudging, and undo support. ## Creating and Using Guides - Enable rulers through **Main menu → View → Show rulers**. - Hover over the top or side ruler to see the offset, then click to create a Guide. - Guides appear as thin red lines and can be dragged to new positions. - Multiple Guides can be added by clicking several ruler offsets. ## Managing Guides - Delete a Guide by selecting it and pressing **Delete**, or drag it off the canvas. - Guides disappear when ruler view is disabled. - Accidental changes can be undone with **Command-Z**. - Arrow keys allow pixel-by-pixel nudging. ## Frame-Level Guides - Dragging a Guide into a frame converts it into a frame-level Guide. - This keeps the overall canvas cleaner when using many Guides. - Frame-level Guides work only on top-level frames; moving such a frame into another frame causes the Guides to disappear. The feature provides a lightweight, flexible alternative to Layout Grids for aligning designs. Users can enable rulers and create Guides as needed, while frame-level support helps organize complex canvases.

Figma User Interface Layout Grids Design Editor+1

figmaJun 19, 20172 min readCurated summary

Combine is taking on the design venture capitalist world | Figma Blog

Combine is a new seed-stage venture firm founded by former Facebook and Airbnb design leaders Soleio Cuervo and Adam Michela. Rather than relying on publicity, it plans to build an elite, design-focused portfolio and provide hands-on support through an in-house team of design partners. The firm’s model combines early investment with design-studio services, reflecting the growing importance of user experience in competitive software markets. ## A Quiet Venture Launch - Combine launched with little publicity, sharing only cryptic images of its warehouse office and no formal Medium announcement. - Despite its low profile, Silicon Valley insiders were watching closely. - The founders’ understated approach reflects their belief that reputation should come from past work rather than promotional claims. ## Founders with Deep Design Experience - Soleio Cuervo was Facebook’s second design hire. - He helped shape the company’s early design culture. - He led work on Facebook Messenger, Groups, and the original Like button. - Adam Michela joined Facebook after Cuervo’s departure. - He created Facebook’s first design system. - He later built a design system at Airbnb. - Their contrasting personalities complement each other: - Cuervo is an expressive, relationship-oriented connector. - Michela is a quieter, methodical operator. - Both share a strong interest in design and people, along with a reluctance to self-promote. ## A Venture Firm Built Around Design - Combine had raised more than $12 million for its first fund. - The firm planned to maintain a small, selective portfolio. - It intended to hire a team of highly experienced design partners. - These partners would work directly with portfolio companies on: - Branding and marketing - User research - Product design - Recruiting and team-building - The model resembles Andreessen Horowitz’s service-oriented venture approach, but with an unusually strong focus on design. ## The Growing Importance of Design - Combine was launching as startups increasingly compete through user experience. - Cloud infrastructure has made software cheaper and easier to build, giving consumers more alternatives. - As functional differences narrow, thoughtful design can become a company’s strongest competitive advantage. - Users increasingly blame a product—not themselves—when they cannot understand how to use it, making usability central to business success. Combine’s approach represents a shift from venture capital as primarily financial support toward venture capital as an active operating partnership. Its success would depend on whether elite design expertise can meaningfully improve early-stage companies and establish a repeatable model for design-driven investing.

Figma Design Systems User Experience Product Design+1

datadogJun 15, 20173 min readCurated summary

Hackathon project: Viewing Datadog metrics in Minecraft

Datadog engineers used a two-day hackathon to display real-time Datadog metrics inside Minecraft. They connected Minecraft’s Python API with Datadog’s metrics API, then built configurable, live-updating graphs and monitor indicators in the game world. The project demonstrated that even an unconventional visualization environment can be practical to prototype with familiar tools. ## Controlling Minecraft with Python - The team used Raspberry Juice and a Minecraft Pi Edition server to expose Minecraft controls. - They ran the setup on laptops for better performance and faster development. - The `py3minepi` library enabled Python code to create, remove, and query blocks. - Creating a block required only a connection to the server and a call such as `mc.setBlock(...)`. ## Retrieving Datadog Metrics - The Datadog Python library provided access to the Metrics API. - The prototype authenticated with an API key and application key. - It queried recent data, such as average system CPU idle time over the previous five minutes. - The Minecraft and Datadog components were then combined so metric values could be rendered as blocks and structures. - Monitor status indicators changed between green and red depending on whether an alert was active. ## YAML-Based Dashboard Configuration - The team moved dashboard definitions out of Python code into YAML files. - Configuration specified: - Graph position, size, and orientation - Visual properties such as colors, transparency, and borders - Datadog queries and time ranges - Monitor IDs and display locations - This allowed complete dashboards containing multiple graphs and monitor indicators to be updated in real time. ## Handling Minecraft’s Persistence - Minecraft blocks remain in the world after being created, while metric graphs change constantly. - Early experiments left behind random cubes that made the world difficult to navigate. - The team implemented “vacuum” functions to remove everything generated by the visualization code before redrawing it. ## Rendering and Performance Challenges - Without browser technologies such as JavaScript and CSS, graphs had to be reduced to rows of data and represented with Minecraft blocks. - Large graphs could overwhelm the data pipeline. - Caching was added to reduce bandwidth usage and avoid repeatedly requesting the same data. - The performance concerns mirrored Datadog’s everyday engineering work, where caching and efficient data handling are essential. ## Hackathon Experience - The first four hours focused on configuring the environment and connecting the systems. - The remaining time was spent experimenting with building, viewing, destroying, and rebuilding metric displays. - The project’s main value was creative exploration rather than production monitoring. The prototype shows how quickly APIs can be combined to create unusual monitoring interfaces. While Minecraft is not intended to replace conventional dashboards, the project is a playful demonstration of real-time data visualization and rapid experimentation.

Database Design Datadog Python API+3

datadogJun 15, 20171 min readCurated summary

Hackathon project: Viewing Datadog metrics in Minecraft | Datadog

The provided content does not include the blog post itself. It contains Datadog’s navigation menu and a link titled “Hackathon Project: Viewing Datadog Metrics in Minecraft,” but no article text describing the project, implementation, or conclusions. ## Available Information - The linked post appears to cover a hackathon project involving: - Datadog metrics - Minecraft - A likely visualization or integration between the two - The surrounding content is primarily Datadog’s product navigation, covering: - Infrastructure and application monitoring - Logs, security, and digital experience - Software delivery and service management - AI products and platform capabilities ## Conclusion The article body is missing from the supplied material, so a reliable technical summary cannot be produced. Please provide the post’s full text or relevant excerpt.

Kubernetes Datadog Observability Application Performance Monitoring+3

figmaJun 8, 20172 min readCurated summary

Design conference Vectors sold out in two days | Figma Blog

Vectors, a new San Francisco design conference, sold out 300 tickets in just two days because it offered perspectives missing from conventional tech events. Rather than focusing on business trends, its program addressed vulnerability, unconscious bias, and inclusion. Organizer Gabriel Valdivia argues that diverse experiences improve design and that people with privilege should actively invite perspectives unlike their own. ## A Different Kind of Design Conference - Vectors was created as an alternative to typical technology conferences centered on “thought leaders” and commercial design topics. - Its talks focused on: - Vulnerability - Unconscious bias - Divergent perspectives - The event attracted enough interest to leave 150 additional people on the guest list. ## Diversity as an Invitation, Not a Label - Organizers deliberately avoided presenting Vectors explicitly as a “diversity” conference. - Traditional diversity initiatives can become limited to people who already identify with the issue. - Valdivia wanted people who were not already concerned about diversity—especially white men in tech—to attend and reconsider how they use their influence. - The goal was for privileged attendees to understand the practical value of including different perspectives. ## Experience Shapes Design - Valdivia describes his Cuban and Costa Rican background, including working low-wage jobs after immigrating to the United States. - Experiences such as cleaning car dealerships, working in a call center, and waiting tables exposed him to challenges many technology leaders may not have encountered. - He believes these experiences developed resilience and provide useful insight in product design. ## Small Inclusive Choices Create Value - Valdivia argues that products inevitably reflect their creators’ backgrounds. - Because many products disproportionately reflect white male perspectives, other useful viewpoints can remain overlooked. - At a previous startup, he added Spanish subtitles to a product video, making it accessible to Spanish-speaking audiences. - Such seemingly minor decisions can significantly expand a product’s usefulness and reach. Vectors’ success suggests that designers and technology professionals want more than conventional industry perspectives. Building better products requires actively including people with different backgrounds and turning their experiences into concrete design decisions.

Figma Product Design Localization Inclusive Design+2

datadogJun 8, 20171 min readCurated summary

Protobuf parsing in Python | Datadog

The provided content does not include the blog post itself. It contains Datadog’s site navigation and a link whose URL suggests the article concerns Protobuf parsing in Python, but no technical claims, explanations, or conclusions are available to summarize. ## Available Information - The linked article appears to be: - **“Protobuf parsing in Python”** - Located on Datadog’s engineering blog. - The rest of the content is primarily Datadog product navigation, covering: - Infrastructure and application monitoring - Logs, security, digital experience, CI, and AI products - A separate banner promotes Datadog’s recognition as a Leader in the Gartner Magic Quadrant for Observability Platforms. Please provide the article’s body text or a complete page extract for a substantive summary.

Python Serialization Protobuf Parsing

datadogJun 8, 20172 min readCurated summary

Protobuf parsing in Python

Protocol Buffers provides a compact, efficient binary format for structured data, making it suitable for APIs and inter-machine communication. The post introduces Protobuf through a Python metrics example and explains how to serialize and deserialize messages. It also shows how to stream multiple messages by prefixing each with its length, since Protobuf messages are not inherently self-delimiting. ## Protocol Buffers Basics - A `.proto` file defines the structure of a message. - The example `Metric` message contains: - A name - A type - A floating-point value - Repeated string tags - The `protoc` compiler generates language-specific code, such as Python’s `metric_pb2.py`. - Python can serialize a message with `SerializeToString()` and restore it with `ParseFromString()`. ## Streaming Multiple Messages - A single Protobuf message can be parsed directly, but consecutive messages need delimiters. - Protobuf does not automatically indicate where one message ends and the next begins. - The recommended approach is to prepend each serialized message with its byte length. - The length is encoded as a Varint, which uses fewer bytes for smaller integers. - This mirrors Java’s `writeDelimitedTo` and `parseDelimitedFrom` behavior and is also how the kube-state-metrics API chains messages. ## Varints and Python Implementation - Python’s Protobuf library does not provide public convenience methods for delimited messages. - The implementation uses internal helpers: - `_VarintBytes` to encode message lengths - `_DecodeVarint32` to read them - Serialization writes the length followed by the message bytes. - Deserialization reads the length, extracts the corresponding byte range, and parses it as a `Metric`. - The example loads the entire stream into memory, though a production implementation could process data incrementally. For APIs that exchange sequences of structured records, length-prefixed Protobuf messages offer an efficient and interoperable alternative to plain-text formats. Teams should account for message framing explicitly and use generated code plus appropriate streaming logic when handling multiple messages.

Kubernetes Datadog Python Metrics+4

figmaJun 7, 20173 min readCurated summary

Figma is powered by WebAssembly | Figma Blog

WebAssembly reduced Figma’s load time by more than three times after replacing its asm.js-based C++ runtime. The improvement came primarily from faster parsing, native-code compilation, and caching—not from a major reduction in compressed download size. Figma’s experience demonstrated that WebAssembly could deliver substantially faster, desktop-quality web applications, though browser support and implementation differences remained limitations. ## What WebAssembly Changes - WebAssembly is a compact binary format for machine code designed specifically for browsers. - Figma’s C++ code was a strong candidate because C++ can be compiled directly to WebAssembly. - Before WebAssembly, Figma used asm.js, a restricted JavaScript subset that represents memory as a large numeric array. - WebAssembly preserves asm.js’s limitations: - It primarily loads and stores numbers. - It must call JavaScript for browser APIs such as the DOM and networking. - It remains subject to the browser sandbox. ## Why WebAssembly Is Faster Than asm.js - **Smaller and faster to parse:** WebAssembly’s binary format transfers efficiently and parses around 20 times faster than asm.js. - **Ahead-of-time optimization:** LLVM optimizes the C++ code before compilation, allowing browsers to translate it directly to native code. - **Effective caching:** Browsers can cache the translated native code, making subsequent loads nearly free. - **Native 64-bit integer support:** WebAssembly avoids the slower emulation required by JavaScript’s 53-bit integer limitation. - **Less runtime optimization work:** Unlike JavaScript, WebAssembly does not require extensive browser optimization passes for code that was already compiled and optimized. ## Figma’s Load-Time Results - Figma measured load time from application initialization through downloading and rendering an entire design for the first time. - Switching from asm.js to WebAssembly improved load time by more than three times across document sizes. - The gain was especially meaningful because Figma users often work with large documents and switch between them frequently. - Subsequent loads could benefit further from cached WebAssembly-to-native translations. - The compressed download size improved only slightly because compressed asm.js was already close in size to compressed WebAssembly. ## Browser Support Limitations - At the time of publication, WebAssembly was enabled by default in Firefox and Chrome. - Edge and Safari were still developing their implementations. - Figma enabled WebAssembly only in Firefox because Chrome’s implementation had blocking issues, including the lack of caching for translated WebAssembly code. - These browser-specific differences affected whether the performance benefits could be consistently delivered. Figma’s results suggested that teams with substantial C or C++ code should seriously consider WebAssembly for performance-sensitive web applications. The largest benefits were faster startup and reusable native-code caching, while download-size improvements were comparatively modest.

JavaScript Webassembly Webgl C Plus Plus+3

figmaJun 4, 20172 min readCurated summary

How one designer escaped the export-upload abyss | Figma Blog

The post argues that traditional designer-developer handoff creates unnecessary work, outdated files, and communication problems. At Pivotal, designer Colby Sato replaced repeated image exports and uploads with Figma’s browser-based, collaborative workflow. This saved roughly two days per project and made design critiques more focused and efficient. ## The Export-and-Upload Problem - Colby exported design frames as images and uploaded them to Pivotal Tracker engineering cards. - He repeated this process 15–20 times per project as designs evolved. - Searching through hundreds of engineering cards was time-consuming. - Missed updates sometimes caused engineers to implement outdated designs. - The process wasted developer time and made collaboration frustrating. ## Figma as a Shared Source of Truth - Figma files were accessible in the browser, always current, and shareable through links. - Colby could add a Figma link when creating an engineering card instead of updating images repeatedly. - Comments attached directly to design frames provided functional context. - The workflow eliminated uncertainty about which design version engineers should use. - Colby estimated it saved him two days of work per project. ## More Effective Design Reviews - Pivotal’s weekly critiques had previously relied on post-it notes and verbal explanations. - Figma comments stayed attached to the relevant design, making feedback easier to understand. - Colby could observe where engineers were focusing in the file through their cursor activity. - He could redirect reviewers toward areas where feedback was most valuable. - Reviews became faster, more contextual, and more collaborative. Figma ultimately shifted Pivotal’s focus from tracking files and feedback to improving the product itself. The post recommends using a shared, continuously updated design workspace to reduce handoff friction and enable stronger collaboration between designers and engineers.

Figma Design Systems User Interface Design Collaboration+2

figmaMay 25, 20172 min readCurated summary

Tips for using Constraints in your workflow

Figma’s constraints feature helps designers build layouts that adapt across different screen sizes and contexts. By anchoring elements to edges, centers, or grids, designs can remain structurally consistent instead of requiring separate manual adjustments. The post presents five practical applications, from simple button placement to flexible navigation bars, table cells, and playful illustrations. ## Pinning Buttons to Corners - Set an action button’s constraints to the bottom and right sides of its parent frame. - This keeps floating action buttons in a consistent location as the screen expands. ## Combining Components and Constraints - Constrain important elements within a frame, then convert the frame into a reusable component. - Duplicate the component for different screen sizes. - Changes to the original—such as colors or text sizes—propagate to all instances, making responsive variations easier to manage. ## Building Flexible Navigation Bars with Grids - Nest a navigation bar frame at the bottom of a phone-screen frame. - Set its constraints to **left & right** and **bottom** so it stretches with the screen. - Apply a layout grid with the **stretch** type. - Place buttons in grid columns and center-constrain them so they reposition as the screen changes. ## Creating Reusable Table Cells - Group related content, such as an avatar and text, and constrain it to the center-left of the cell. - Group action text and a rounded rectangle into a button, then constrain it to the center-right. - The cell’s contents remain attached to their intended sides across different frame widths. ## Experimenting with Illustrations - Horizontal and vertical constraints can also be applied creatively to illustrations. - Stretching constrained artwork can produce humorous distortions and playful effects. Constraints are most useful when combined with components and grids. Setting them thoughtfully allows one design to adapt across many screen sizes while reducing repetitive layout work.

Figma User Interface Responsive Design Components+3

figmaMay 21, 20172 min readCurated summary

How Braintree Cut Time Spent on Design Critiques by 50% | Figma Blog

Braintree redesigned its critique process by replacing static presentations and follow-up meetings with real-time collaboration in Figma. Designers worked together in the same file during Slack audio calls, making and demonstrating changes immediately. This cut critique time by roughly 50% while also improving collaboration and simplifying developer hand-offs. ## Challenges with Traditional Critiques - Designers typically presented work, collected feedback, and worked alone afterward. - Feedback could be misunderstood or difficult to apply correctly. - Follow-up meetings were needed to review revisions and address new issues. - After PayPal acquired Braintree, multiple design teams, style guides, services, and developer groups increased coordination complexity. ## Finding Figma - Braintree’s Developer Experience team experimented with new critique methods. - Figma’s browser-based, collaborative files allowed designers to work together regardless of device or location. - Designers joined an audio Slack call and opened the same file instead of scheduling several in-person meetings. - Figma’s observation mode let one designer follow another’s screen and move through different frames in real time. ## Collaborative Work Instead of Static Feedback - Designers could duplicate an artboard and make changes while discussing the design. - Feedback became concrete and immediately understandable rather than being recorded as notes for later. - Team members brainstormed, explored alternatives, and combined the strongest elements of multiple designs. - Craig Wattrus estimated that critiques took 50% less time because collaborators could demonstrate ideas directly. - The process often produced better results than one designer working independently and applying feedback later. ## Faster Developer Hand-off - Designers shared a single link with developers instead of repeatedly exporting updated files. - Designers could explain interactions and demonstrate behavior directly in the shared file. - Developers received answers immediately, reducing long message exchanges. - Design and engineering teams needed fewer meetings to clarify how interfaces were intended to work. Braintree’s experience suggests that real-time, shared design files can turn critiques into productive collaboration sessions. Teams looking to reduce review cycles and improve design-to-development communication should consider working together directly in the design artifact rather than relying on presentation-based feedback.

Figma User Experience Slack Real Time Collaboration+2