Techlist.io - Korean Tech Blog Curator

figmaMay 21, 20182 min readCurated summary

5 ways to use Figma that you probably never thought of | Figma Blog

Figma’s real-time collaboration makes it useful for far more than traditional interface design. The post highlights five applications that use shared editing to organize information, make decisions, divide repetitive work, encourage creative collaboration, and have fun. Its central conclusion is that Figma’s multiplayer capabilities can support nearly any activity involving visual thinking and teamwork. ## Affinity Diagrams for Organizing Ideas - Teams can collect large amounts of research or brainstormed ideas in one shared file. - Participants add concepts simultaneously, then group related items into themes. - This process helps clarify priorities and create structure for complex projects, even when collaborators work remotely. ## Real-Time Voting for Design Decisions - Teams can review multiple design options together and mark their preferences directly in Figma. - Instead of printing designs and using physical stickers, participants place circles or other markers beside favored concepts. - Seeing votes accumulate in real time makes individual preferences clearer and helps teams reach decisions faster. ## Design Assembly Lines for Repetitive Work - Large, repetitive tasks can be divided among several people working in parallel. - ClassPass used this approach to create more than 30 custom maps, with designers placing location pins for gyms and studios in different cities. - Multiplayer collaboration allows teams to complete simple production tasks quickly through coordinated effort. ## Collaborative Comic Creation - Figma can serve as a shared illustration environment where friends or colleagues draw and develop ideas together. - USC students Louis Harboe and Parker Malachowsky used it to turn a presentation about AI and healthcare into an accessible comic. - Reusable components such as speech balloons, caption boxes, and image panels helped organize the longer project. - Figma’s vector networks provided flexibility for drawing and editing illustrations. ## Games for Team Connection - Figma’s multiplayer features can also be used for recreational games and playful activities. - Collaborative play offers a way to lighten the mood and strengthen relationships when teams are not working. - This reflects the influence of cooperative multiplayer video games on Figma’s collaboration model. Figma’s shared canvas is valuable wherever people need to think visually together. Teams can use it not only for design production, but also for research synthesis, group decisions, repetitive workflows, creative projects, and informal team-building.

Figma Real Time Collaboration Vector Graphics Design Sprints+1

figmaMay 9, 20183 min readCurated summary

Material Design + Figma Styles = 🔥 | Figma Blog

Figma’s Styles feature makes Material Design easier to customize for different brands while preserving a shared, systematic foundation. The article presents a Material UI kit that uses global styles and nested components to theme colors, typography, elevation, grids, shapes, and icons across an entire design system. This approach helps teams move beyond generic stock interfaces toward consistent but distinctive branded experiences. ## The Challenge of Theming Material Design - Material Design improves usability and consistency across Google and Android applications. - Using the same components everywhere can make products feel generic and less connected to their brands. - Material’s broad component library creates a challenge: designers need an efficient way to customize an entire system rather than editing components individually. - Themed Material Design aims to preserve the system’s strengths while enabling more memorable brand expression. ## Figma Styles for Global Customization - Figma Styles define reusable global text, fill, stroke, effect, and grid settings. - Updating a style automatically changes every instance across the document. - Styles can be shared through team libraries and reused across projects. - This makes Styles well suited to theming large UI kits and design systems. ## Material Colors, Typography, Elevation, and Grids - **Colors:** Fill styles control primary and secondary colors, typography emphasis levels, and surface swatches. Changing a brand palette can update many components at once. - **Typography:** Text styles cover Material’s type specifications, using Roboto by default but allowing teams to substitute their own typeface. Font changes may require adjustments to size and spacing. - **Elevation:** Preset shadow styles represent Material’s elevation levels, simplifying shadows that may otherwise require combinations of up to three drop shadows. - **Grid:** A reusable 4dp baseline grid can be applied to frames and components, alongside custom desktop, tablet, or mobile grids. ## Combining Styles with Components - Nested components allow teams to globally control the shape of buttons, floating action buttons, and cards. - Designers can switch between sharp corners, cut corners, and rounded corners by toggling nested component visibility. - Changes propagate throughout the system, though updates across hundreds of components may take several seconds. - Individual component instances can still override shared settings when specialized styling is needed. ## Icon Libraries - Material offers five icon styles. - To keep the main kit manageable, each icon style was organized into a separate sticker-sheet document. - Teams can copy icons directly or publish the sheets as shared libraries for use across projects. Figma Styles combined with components provide a practical way to build Material-based systems that are globally consistent, easily maintained, and adaptable to individual brands.

Figma Design Systems Design Tokens Responsive Design+2

figmaMay 8, 20182 min readCurated summary

Figma Styles beta: A new way to apply text and layer attributes | Figma Blog

Figma’s 2018 Styles beta introduced a modular system for applying text and layer attributes consistently across documents. Instead of bundling typography, color, and alignment into complex combinations, Styles separated them so each could be managed and updated independently. The feature also allowed different styles within a single text field, making design systems easier to maintain for both individuals and teams. ## Modular Text and Layer Styles - Styles could be created separately for: - Text properties - Fills and colors - Layout grids - Effects - Strokes - Styles were available through team libraries, helping teams share current versions. - Team members could enable shared Styles and receive notifications when they changed. ## Reducing Text Style Complexity - Traditional tools combined font, color, and alignment into a single text style. - A project with three text formats and three colors could require nine separate styles, even before accounting for alignment. - Changing a color—such as an inaccessible light-gray link color—required manually updating every affected style. - Figma separated form, color, and alignment so each attribute could be edited independently. - Updating a source fill style automatically propagated the change throughout the design. ## Applying Multiple Styles Within Text Fields - Other design tools often restricted a text field to one style. - Formatting part of a sentence as a link or section heading could break its connection to the original style. - Figma allowed users to highlight portions of text and apply different text or fill styles. - These partial styles retained their links to the source styles and updated when those styles changed. ## Beta Rollout - The private beta was intended to reduce daily styling problems and support scalable team design systems. - Migration was planned to begin with smaller teams before larger ones. - The migration was one-way, so teams needed to consider the change before participating. Figma recommended Styles as a more flexible foundation for consistent design systems, especially for teams managing shared typography and visual attributes at scale.

Figma Design Systems User Experience Accessibility+2

figmaMay 1, 20183 min readCurated summary

How Mozilla’s Rust dramatically improved our server-side performance | Figma Blog

Figma rewrote the performance-critical part of its multiplayer synchronization server from TypeScript to Rust to eliminate latency spikes and improve scalability. Rust’s low memory usage, lack of garbage collection, and high performance enabled Figma to isolate every document in its own process and make serialization more than ten times faster. However, Rust’s immaturity led Figma to abandon a full-server rewrite and use it selectively where performance mattered most. ## Scaling the Multiplayer Service - Figma’s server ran a fixed number of workers, with each document assigned exclusively to one worker. - The TypeScript server was single-threaded, so one slow operation could block synchronization for every document handled by that worker. - Encoding large documents was a frequent source of unpredictable delays. - Adding hardware or creating a Node.js process per document was impractical because of JavaScript VM memory overhead. - Figma temporarily isolated problematic “heavy” documents onto a separate worker pool, but this required manual monitoring and reassignment. ## Rust-Based Architecture - Figma moved performance-sensitive multiplayer logic into a separate Rust child process. - The Rust process communicates with its host through standard input and output. - Rust’s low memory usage made it feasible to run one process per document, fully parallelizing document operations. - Serialization became more than ten times faster, including for very large documents. - This architecture removed the worst-case blocking behavior of the original worker model. ## Server-Side Performance Improvements - Progressive rollout graphs showed a dramatic reduction in server performance problems after the Rust implementation reached full deployment. - The improvements primarily affected server stability and responsiveness, rather than directly making the client UI faster. - Users were less likely to experience synchronization hiccups caused by unusually large or expensive documents. - Figma reported substantial improvements in peak performance metrics compared with the old server. ## Benefits and Drawbacks of Rust - Rust provided: - Very low memory usage due to fine-grained memory control, no garbage collector, and a minimal standard library. - High performance comparable to lower-level languages such as C++. - Strong compile-time safety that prevents many classes of bugs common in C++. - The language was less mature than conventional server-side languages and still had significant rough edges. - Because of these limitations, Figma abandoned plans to rewrite the entire server in Rust. - Instead, it adopted Rust selectively for the most performance-sensitive components. Figma’s experience suggests that Rust can deliver major production benefits when applied to isolated, resource-intensive workloads, while a gradual or hybrid adoption strategy may be more practical than a complete rewrite.

TypeScript Rust Node.Js Garbage Collection+3

figmaApr 25, 20182 min readCurated summary

Introducing: Figma to React | Figma Blog

Figma introduced an open-source Figma-to-React converter that uses the Figma API to turn designs into React components. The project aims to keep visual design in Figma while preserving application functionality in separate code, allowing designers to update interfaces without overwriting custom logic. It also seeks to make functional code reusable across multiple designs, much like reusable React components. ## Motivation and Goals - The converter builds on growing interest in automatically transforming Figma documents into React code. - Figma identified two main objectives: - Keep component design primarily in Figma so design updates can be synchronized to a website or app. - Separate generated visual code from custom functional code, preventing design updates from overwriting application behavior. - Existing functional code should be attachable to new designs, enabling reuse across different UI layouts. - Figma open-sourced the implementation in its `figma-api-demo` GitHub repository. ## From Figma to CSS - The first technical challenge is accurately reproducing the appearance of Figma designs in React components. - The example used is a sortable list interface with multiple list items, icons, and a dark visual style. - The converter must translate Figma’s visual properties into CSS and React structure. - The article notes that there are multiple possible strategies for reproducing a design, setting up a discussion of the implementation choices that follow.

React JavaScript CSS Design To Code+2

datadogApr 24, 20183 min readCurated summary

Using Datadog APM to improve the performance of Homebrew

Andrew Robert McBurney describes using Datadog APM to diagnose and optimize Homebrew’s slow `brew linkage` command. Instrumentation identified `LinkageChecker#check_dylibs` as the main bottleneck, and replacing repeated dynamic-library processing with persistent caching reduced execution time from 11.5 seconds to 182 milliseconds for 106 packages. A later implementation used Ruby’s built-in PStore instead of SQLite3 to avoid an additional gem dependency. ## Finding the Bottleneck with APM - Homebrew is widely used at Datadog, so improving its performance provides broad benefits. - The `brew linkage` command checks the library links of installed formulas and can identify when a reinstall is needed. - The target was to scan roughly 50 packages, including large packages such as Boost, in under five seconds. - The author instrumented Homebrew with Datadog’s Ruby `ddtrace` gem. - Flame graphs showed that most execution time was spent in `LinkageChecker#check_dylibs`. ## Why Multithreading Was Not Effective - The author tested Ruby threads as a way to process libraries concurrently. - Ruby’s Global Interpreter Lock limited the achievable parallelism. - Threading failed to meet the required performance target, so a different approach was needed. ## SQLite3-Based Caching - The expensive library-processing results were stored in an on-disk SQLite database. - A `linkage` table recorded: - Formula names and library paths - Linkage categories such as `system_dylibs`, `broken_dylibs`, `undeclared_deps`, and `brewed_dylibs` - Optional labels for selected linkage types - A uniqueness constraint on `(name, path, type, label)` prevented duplicate cache entries. - Homebrew could insert and retrieve linkage data using SQL queries. ## Performance Improvements - Without caching, processing 106 packages took 11.5 seconds. - Boost alone required about 1.01 seconds for dynamic-library checks. - With caching enabled: - The full command completed in 182 milliseconds. - Boost’s check took approximately 1.38 milliseconds. - The cached implementation significantly exceeded the original five-second performance requirement. ## Moving to PStore - After submitting the SQLite3 implementation for review, Homebrew maintainers recommended Ruby’s PStore. - PStore provides file-based persistence built around Ruby’s `Hash` data structure. - Its main advantage is avoiding a third-party SQLite3 gem dependency while preserving the benefits of caching. The central lesson is that profiling should guide optimization: rather than adding ineffective threading, the author located the true bottleneck and achieved a dramatic speedup through persistent caching. For similar command-line performance problems, instrument the complete execution path first, then choose the simplest cache or storage mechanism that satisfies both speed and dependency constraints.

Datadog Application Performance Monitoring Performance Optimization Caching+4

datadogApr 24, 20181 min readCurated summary

Using Datadog APM to improve the performance of Homebrew | Datadog

Datadog announces that Gartner named it a Leader in the 2026 Magic Quadrant for Observability Platforms. The provided content is primarily the website’s navigation menu and does not include the blog article’s substantive discussion, methodology, or supporting evidence. ## Gartner Recognition - Datadog highlights its position as a Leader in Gartner’s Magic Quadrant for Observability Platforms. - The linked resource appears to support or explain the recognition. ## Datadog’s Observability Portfolio The navigation indicates that Datadog’s platform spans: - **Infrastructure:** infrastructure, container, network, serverless, GPU, storage, and cloud-cost monitoring. - **Applications:** APM, profiling, dynamic instrumentation, and service monitoring. - **Logs and data:** log management, database monitoring, data-stream monitoring, and observability pipelines. - **Security:** cloud security, SIEM, vulnerability management, workload protection, and code security. - **Digital experience:** real-user monitoring, session replay, synthetic monitoring, product analytics, and error tracking. - **Software delivery and service management:** CI visibility, testing, incident response, SLOs, workflow automation, and internal developer portals. - **AI capabilities:** agent observability, AI integrations, investigation agents, and GPU monitoring. The supplied excerpt does not provide enough article text to summarize Datadog’s specific strengths, Gartner’s evaluation criteria, or the company’s evidence for being named a Leader.

Kubernetes Datadog Observability Application Performance Monitoring+4

figmaApr 18, 20182 min readCurated summary

Want Figma API inspiration? Here’s 8 community-powered projects | Figma Blog

Figma’s 2018 Web API launch quickly inspired developers and designers to build integrations beyond the core product. The projects showcased range from no-code utilities, such as PDF export and style-guide generation, to developer tools for GraphQL, React rendering, and design-to-code workflows. Together, they demonstrate the API’s potential to connect Figma with everyday design and engineering processes. ## Integrations for Designers - **PDF exporter:** Gweltaz Calori created a website that exports selected Figma frames as PDFs from a pasted file URL. The project is open source on GitHub. - **Style-guide generator:** Freighter’s tool analyzes a Figma document and generates a style-guide page containing its fonts, colors, and other styles. - **Alexa integration:** Jon Gold built a voice interface capable of reading Figma comments through Alexa, illustrating unconventional uses of the API. ## Tools for Developers - **Figma.js:** Jon Gold also released an unofficial JavaScript wrapper to simplify building Figma API integrations. - **GraphQL connector:** Bernardo Raposo, with Sara Vieira, used the JavaScript library to create an open-source connector that lets developers query Figma through GraphQL. - **Figma-to-React workflows:** PageDraw introduced a React integration, while Sara Vieira demonstrated rendering React components directly from Figma through the GraphQL connector. - **Additional converter:** Florian Nagel built another Figma-to-React converter, with plans to open-source it. ## Broader Implications - The API makes design-to-development handoff easier to automate. - Community projects show potential for exporting Figma designs into other formats and frameworks. - Open-source libraries and integrations allow others to build on early experiments rather than starting from scratch. - These are third-party projects, so users must consider their permissions, reliability, and ongoing maintenance. Figma’s early API ecosystem suggests strong potential for automated design workflows, especially integrations that translate Figma files into documentation, code, and developer-ready assets.

React JavaScript Design To Code GraphQL+2

figmaApr 17, 20182 min readCurated summary

5 steps to nailing your portfolio presentation in design interviews | Figma Blog

A strong portfolio presentation is less about showing every project and more about communicating your strengths clearly and engagingly. New designers often lose interviewers by starting too ambitiously, overexplaining complex work, or failing to clarify their individual contribution. The article recommends presenting authentic projects with a simple structure, while avoiding attempts to imitate the interviewing company’s brand. ## Start with a Clear Introduction - Begin slowly by stating your name and primary design strength. - Focus on the area that best distinguishes you, such as: - Typography - UX/UI design - Communications design - Motion graphics - Front-end development - Acknowledge other skills without presenting yourself as an expert in everything. - Experienced designers with broad expertise can instead emphasize their range. ## Lead with Work You Care About - Choose the project you loved most rather than the one that took the longest. - Passionate, playful projects tend to feel more authentic. - These projects reveal your design sensibility and personality more effectively than large, overly complicated assignments. - Save secondary or less personally meaningful work for later. ## Explain Each Project with the Four Ws Keep project explanations concise. Provide the context, problem, process, outcome, and then allow interviewers to ask for more detail. - **What:** Briefly explain what the project is, using language accessible to everyone in the room. - **Who:** Clearly identify your role and distinguish your contribution from that of teammates. - **Why:** Describe the problem or need the project addressed, especially for work created for a client or organization. - **Where:** Explain how the design was used and what impact it had. Include metrics such as signups or other results when possible. - If the project was never implemented, explain how it might have created value. ## Be Careful with the Interviewing Company’s Brand - Using the company’s visual identity in your presentation may seem flattering, but it can easily become inappropriate. - You may not know the company’s brand guidelines and could unintentionally misrepresent its design system. - The designers who created the company’s branding may be among the people interviewing you, making inaccurate imitation especially risky. A successful portfolio presentation should be focused, personal, and easy to follow. Lead with work that reflects genuine enthusiasm, explain your role and results plainly, and let the interview panel guide deeper discussion through questions.

Figma CSS HTML Typography+3

datadogApr 16, 20181 min readCurated summary

Cgo and Python | Datadog

The provided content does not include the blog post itself. It contains Datadog’s navigation menu and a link to an engineering article titled “CGO and Python,” but no article text from which to produce a reliable summary. Please provide the post’s body or a readable URL extract, and I can summarize it in the requested format.

Kubernetes Datadog Observability Application Performance Monitoring+3

datadogApr 16, 20182 min readCurated summary

Cgo and Python

Embedding Python in Go lets applications gradually migrate from Python, reuse existing libraries, and load scripts dynamically without recompiling. Datadog uses this approach in its Go-based Agent so checks can remain in Python while the core application moves to Go. The key is combining cgo with a Go-friendly wrapper around CPython’s C API. ## Why Embed Python in Go? - Supports incremental migration from an existing Python codebase. - Reuses mature Python libraries without reimplementing them in Go. - Enables runtime loading and execution of custom or updated Python scripts. - This dynamic extensibility is especially important for Datadog checks. ## Introducing cgo - CPython exposes a C API, while Go requires a Foreign Function Interface to call C code. - cgo provides that integration while preserving the normal `go build` workflow. - A C preamble placed immediately before `import "C"` can include headers and C code. - The pseudo-package `C` exposes C constants, functions, and types to Go. - `go build -x` reveals how cgo generates intermediate C and Go files, compiles them, and links the final binary. ## Initializing the CPython Interpreter - A Go program must initialize Python with `Py_Initialize()` before executing Python code. - It should shut down the interpreter with `Py_Finalize()` when finished. - `Py_GetVersion()` demonstrates retrieving Python information through the C API. - `#cgo` directives can use `pkg-config` to locate Python development headers and libraries, such as `python-2.7`. - The examples use Python 2, but the same approach largely applies to Python 3. ## Using a Go Wrapper - Direct cgo interaction is mostly boilerplate, so Datadog uses the `go-python` library. - The wrapper exposes operations such as: - `python.Initialize()` - `python.PyRun_SimpleString(...)` - `python.Finalize()` - This hides cgo details and makes embedded Python code look more idiomatic from Go. ## Importing and Calling Python Code - A Python module can be imported with `PyImport_ImportModule`. - Go retrieves a function using `GetAttrString`. - The function is invoked through the Python API, passing empty tuple and dictionary objects even when it accepts no arguments. - The Go code must check for failures when importing modules or locating functions. - A simple `foo.py` module containing a `hello()` function can therefore be loaded and executed from disk. Embedding CPython through cgo provides a practical bridge between Go and Python. A wrapper such as `go-python` makes the integration easier to maintain, while allowing applications like the Datadog Agent to combine a Go core with dynamically executed Python components.

Database Design Python Go Datadog Agent+4

figmaApr 8, 20182 min readCurated summary

#FigmaTip Roundup 7.0 | Figma Blog

FigmaTip Roundup 7.0 collects small, community-shared techniques for working faster and more precisely in Figma. The tips focus on creating symmetrical shapes, controlling selection behavior, zooming directly to layers, and improving frame visibility. Together, they show how shortcuts and view settings can make everyday design tasks more efficient. ## Creating Symmetrical Shapes with Components - Draw a rough outline of one side of a shape, such as a vase or flask. - Convert it into a component with **⌥⌘K**. - Duplicate it with **⌘D**, then mirror the duplicate horizontally with **⇧H**. - Position the mirrored copy beside the original. - Edit the component to refine the shape while preserving symmetry. ## Freezing Selection Bounds - Pressing the **spacebar** freezes the bounds of the current selection. - This helps prevent the selection box from changing while moving or adjusting elements. ## Zooming Directly to a Selection - Enable **“Keyboard Zooms Into Selection”** in Figma’s settings. - This makes it easier to zoom quickly to a selected layer, especially when choosing it from the layers panel. - The feature is useful for navigating complex files with many objects. ## Making Frames Easier to See - The roundup also highlights Figma’s **“Frame Outlines”** view option. - Frame outlines improve visibility and make it easier to distinguish frame boundaries while designing. These shortcuts and settings are simple to adopt but can significantly improve speed, precision, and navigation in Figma.

Figma User Interface Keyboard Shortcuts Components+1

figmaApr 3, 20183 min readCurated summary

How Figma helped Sounds app reach 150k likes on Facebook | Figma Blog

Sounds app grew its Facebook page from a neglected channel with 14,000 fans and roughly 20 likes per post to more than 150,000 likes in under five months. Instead of hiring an agency, the company used audience research, reusable Figma templates, and modest targeted ad spending to create more engaging content in-house. The result was stronger organic reach at a fraction of the projected agency cost. ## Starting with Limited Resources - Sounds app’s marketing lead also handled community management, artist relations, and customer support. - An outside agency would have cost approximately $3,000–$5,000 or more per month, excluding advertising. - Facebook initially produced about 20 likes per post and reached only around 500 of the page’s 14,000 followers. ## Building a Repeatable Content Process - The team analyzed successful Facebook pages in the music, media, and app categories to identify high-performing content formats. - The designer created branded templates that could be quickly adapted with different artist images. - Templates were built in Figma rather than Photoshop so a non-designer could edit them easily. ## Figma Enabled Faster Collaboration - Figma worked across platforms, avoided expensive software licenses, and offered an approachable interface. - After a Slack session and a short screen-recorded tutorial, the marketing lead could create and publish content independently. - This eliminated delays caused by coordinating with a designer in another time zone and made it possible to act on ideas immediately. ## Measuring Results with Small Ad Budgets - The team began publishing Figma-created content in late October 2017 and used custom Branch links to track app downloads. - Posts that previously received 10–20 likes began generating thousands of likes, comments, and shares. - Weekly reach exceeded one million, and Facebook page likes grew to 60,000 by February 2018 and more than 150,000 the following month. - The team typically spent about $5 per post, increasing to $10 for especially successful content, with daily Facebook and Instagram spending capped at $25. - Paid reach generated additional organic sharing, increasing overall visibility. ## Lessons for Small Marketing Teams - Non-designers can produce effective social content when given channel-specific templates and accessible tools. - Successful social marketing depends more on understanding the audience and its preferred content than on formal marketing credentials. - Limited budgets can still produce substantial growth when teams experiment, measure results, and refine their approach. - The in-house strategy cost less than $3,000 in ad spending, compared with an estimated $20,000 for an agency over the same period. For lean teams, the article recommends combining reusable templates, audience research, tracking links, and controlled experimentation instead of assuming social growth requires an expensive agency.

Figma Slack Spotify Photoshop+4

figmaApr 2, 20182 min readCurated summary

Desperately seeking squircles | Figma Blog

Figma engineer Daniel Furse describes the search for an accurate mathematical model of Apple’s iOS “squircle” shape. The project illustrates Charles Eames’s idea that good design depends on recognizing and working enthusiastically within constraints. Although a superellipse initially appeared to be the answer, careful comparison showed that it was only an approximation, prompting further investigation into Bézier-based constructions. ## Design Through Constraints - Eames defined design as “a plan for arranging elements to accomplish a particular purpose.” - Furse applies this principle to engineering, where code must balance: - Time - Simplicity - Maintainability - Aesthetic quality - The squircle project became a mathematical example of design involving research, false starts, hidden constraints, and refinement. ## Why Squircles Look Different - Apple’s iOS 7 icons replaced conventional rounded squares with more organic-looking squircles. - A rounded square has an abrupt transition between its straight edges and curved corners. - A squircle has continuous curvature around its perimeter, producing a smoother, more unified appearance. - Similar curvature continuity appears in industrial design, such as MacBook corners and earbud cases, where it prevents harsh changes in reflected highlights. ## Modeling the Shape with a Superellipse - To add squircles to Figma, the team needed a precise mathematical description. - Early research suggested that Apple’s shape was a superellipse, a generalized ellipse described by parameters `a`, `b`, and `n`. - With `n = 2`, the formula produces an ellipse; with equal axes, it produces a circle. - Increasing `n` makes the shape increasingly resemble a rounded rectangle, approaching a sharp-cornered rectangle as `n` approaches infinity. - A value around `n = 5` produced an image that looked very similar to an iOS squircle. ## The First False Start - Despite its visual similarity, the superellipse did not match Apple’s actual icon geometry. - Detailed follow-up analysis found a small but consistent discrepancy for every value of `n`. - This meant that simply approximating the superellipse with Bézier curves would not produce the authentic shape. - The investigation therefore moved toward alternative constructions, including sequences of Bézier curves for the corners. The main lesson is that visual resemblance is not enough when reproducing a design precisely: mathematical elegance must be tested against the real artifact, and constraints often reveal the need for a more complex solution.

Figma iOS Vector Graphics Bezier Curves+2

datadogMar 23, 20182 min readCurated summary

What product designers can learn from explanatory journalism

Explanatory journalism offers product designers a useful model: prioritize important context over the latest information, prevent context from being lost, and explain decisions clearly to different audiences. The author argues that thorough research and documentation make design communication more concise and persuasive. A well-maintained “papertrail” becomes the foundation for better decisions and explanations. ## Favor the Important Over the New - Constantly updating feeds encourage people to value recent information over significant information. - Designers face the same bias when reacting to the latest: - Support ticket - Meeting summary - Customer call - Feedback should be collected in one place and labeled by source so it can be weighted appropriately. - Tracking how many customers or teams request something helps identify common needs and prioritize them. ## Prevent Context Collapse - Sharing tools make it easy to distribute mockups and updates, but recipients may lack the background needed to evaluate them properly. - Product decisions often draw on many sources: - Customer support conversations - Product managers’ customer meetings - Sales requirements - Design research interviews - Executive goals - Designers should assemble this context over time and preserve it in one accessible location. - During reviews, the designer must explain not only the proposed solution but also how it responds to—or intentionally excludes—the concerns of each audience. ## Use the Available Space - Digital publishing and podcasts are not constrained by the same space limitations as traditional media, making background and context easier to provide. - The author describes design work as two phases: - **Expansion:** Gather research, precedent, data, requirements, and evidence. - **Contraction:** Distill that material into concise explanations and decisions. - A thorough, organized research record makes short summaries, presentations, and conversations more accurate and effective. - Links from concise explanations to the underlying research preserve context without overwhelming the main narrative. ## Build and Maintain a Design Papertrail - Documentation benefits the designer even when nobody else reads every detail. - A papertrail should be: - Created during the research process - Kept up to date - Revisited regularly - Used as the canonical source for design decisions - The work focuses primarily on product usability, workflows, and interaction design, while product managers may focus more on pricing, prioritization, timelines, and business considerations. The practical recommendation is to document broadly, organize the evidence, and explain selectively. Designers who maintain strong context will make better decisions and communicate them more effectively.

User Experience Product Design Interaction Design Social Media+4