Techlist.io - Korean Tech Blog Curator

figmaSep 25, 20182 min readCurated summary

Microsoft automates design handoff with Figma’s API [Video] | Figma Blog

Microsoft Dynamics 365 for Talent’s design team used Figma’s API to automate the slow handoff between designers and engineers. By connecting Figma webhooks to their development workflow, saving a new design version automatically generates a pull request for review and approval. The team reported reducing the handoff process by about 70%, allowing designers and engineers to focus on their primary work. ## The Design Handoff Problem - After adopting Microsoft’s Fluent Design System, the team focused heavily on scaling visual design elements. - Even minor design updates required negotiation and prioritization between designers and engineers. - With a large enterprise workload, engineers could take a week or more to move a single design element into production. - The team needed a workflow that could support a high designer-to-engineer ratio while reducing manual coordination. ## Automating the Workflow with Figma’s API - During Microsoft’s OneWeek hackathon, the Dynamics 365 for Talent team built an automation around Figma’s web-based API. - A Figma webhook detects when a designer saves a new version of a file. - That event automatically creates a pull request containing the design change. - Designers and engineers can review, approve, and commit the update through the existing development process. ## Reported Benefits - The automated workflow reduced the overall handoff process by approximately 70%. - Designers gained more time to create and refine designs. - Engineers spent less time processing design requests and more time developing features. - The approach made design-system updates faster and easier to scale. The example demonstrates how integrating design tools directly with engineering workflows can eliminate repetitive coordination and accelerate production changes. Teams facing similar handoff bottlenecks can consider webhook- and API-driven automation to connect design revisions with code review and deployment.

Design Systems Pull Requests Figma Api Webhooks+2

figmaSep 20, 20183 min readCurated summary

Aisle Rocket Studios, the agency behind Whirlpool, masters collaboration | Figma Blog

Aisle Rocket Studios (ARS), a multi-office agency serving brands such as Whirlpool and Maytag, adopted Figma to solve the challenges of remote collaboration and fragmented workflows. By making Figma the shared source of truth, ARS brought designers, writers, developers, and clients into the same browser-based workspace. The result was faster iteration, more inclusive collaboration, and a more efficient creative process. ## Fragmented Files and Remote Collaboration - ARS had more than 250 employees, four offices, and remote associates supporting over 25 brands. - Creative work was scattered across native files in Sketch, Photoshop, and other tools. - When Creative Director Matt Carson joined the Whirlpool account remotely under a tight deadline, the lack of a centralized process became especially apparent. - Figma’s multiplayer functionality offered a real-time workspace for collaboration across locations and time zones. ## Figma as the Shared Source of Truth - The Whirlpool team quickly replaced disconnected workflows with a centralized Figma process. - Team members designed and iterated together in a single file. - They used Figma for internal meetings, stakeholder feedback, and client prototypes. - Clients could review interactive concepts without logging in or waiting for developers to build the experience, shortening review cycles. ## More Inclusive Creative Work - Figma enabled ARS to conduct roughly 80% of its creative process in the browser. - Writers could edit copy directly within designs instead of working separately and handing it off later. - This made copy an active design element and gave non-designers more influence over the final product. - Developers could review designs early, helping identify technical constraints before handoff and reducing back-and-forth. ## A Leaner, More Effective Team - The Whirlpool account team became faster and more collaborative after consolidating its tools and files. - Its success attracted attention across ARS, prompting other teams to adopt the same workflow. - Both ARS and Whirlpool reported savings in time and money without sacrificing creativity. - Open, collaborative design became a standard the agency wanted to apply more broadly. ## Building a Shared Design System - ARS’s next step was to create greater consistency across Whirlpool’s digital brand. - Following atomic design principles, the team planned to build standardized “atoms” in Figma. - These components would be stored in a team library as a central source of truth. ARS’s experience suggests that browser-based collaborative tools can unify distributed teams and make the creative process more democratic. Centralizing design, copy, development input, prototypes, and reusable components in one shared workspace can improve speed, communication, and consistency.

Figma Design Systems Prototyping Sketch+3

figmaSep 19, 20182 min readCurated summary

Figma Feature Highlight: Component Overrides | Figma Blog

Figma’s component overrides let designers balance consistency with contextual flexibility. Designers can customize individual instances—such as changing text, colors, effects, or visibility—without detaching them from the original component. This means updates to the parent component continue to propagate while preserving each instance’s unique changes. ## Balancing Consistency and Flexibility - Design systems rely on reusable components such as lists, avatars, buttons, and status bars. - Real interfaces still require variations based on context, including different text, colors, and interaction states. - Overrides avoid rebuilding these variations from scratch or breaking instances away from their shared component. ## How Component Overrides Work - An instance remains connected to its parent component after properties are changed. - Parent-component updates continue to flow into the instance. - Customized properties remain distinct in that particular instance. - Overridable properties include: - Colors, fills, opacity, and blend modes - Text and type alignment - Strokes and styles - Effects such as shadows and blurs - Visibility ## Practical Design Examples - **Information lists:** Create one cell component, then override the text in each instance with unique data. - **Button states:** Use one button component and alter its background, opacity, shadow, or other properties for hover, pressed, or inactive states. - **Address books:** Reuse a circular avatar component while overriding its fill with different profile photographs. - **Creative compositions:** Multiple flipped and duplicated instances can be combined into effects such as a kaleidoscope. ## Creating a Kaleidoscope - Convert an illustrated frame into a component. - Duplicate instances to the right and below, flipping them horizontally or vertically. - Place a final duplicate in the remaining space to form a 2×2 arrangement. - Edit the original component and watch the changes appear across the connected instances. Component overrides are most useful when a design system needs reusable foundations without eliminating meaningful variation. Use shared components for structure, then apply overrides for content, states, and context-specific styling.

Figma Design Systems Prototyping User Interface+1

figmaSep 4, 20182 min readCurated summary

Figma Feature Highlight: Sketch Import | Figma Blog

Figma’s Sketch Import feature helps designers move from Sketch to Figma without rebuilding existing work. The post argues that it supports migration, cross-platform collaboration, and hybrid workflows while preserving much of a Sketch file’s structure and fidelity. Users can import files through drag-and-drop, the toolbar, or keyboard shortcuts. ## Why Sketch Import Matters - **Eases the transition to Figma** - Designers switching from Sketch can bring over previous projects instead of recreating them. - This lowers the cost and friction of adopting Figma. - **Supports cross-platform teams** - Sketch is Mac-only, while Figma works across platforms. - Developers and teammates on Windows or Linux can import Sketch files to review designs and specs. - **Enables flexible workflows** - Designers can continue working independently in Sketch and move files into Figma for critiques, comments, and collaboration with remote stakeholders. ## Fidelity and Design-System Support - The importer preserves: - Pages - Resizing constraints - Vectors and other design elements - Sketch symbols are converted into Figma components. - This is particularly useful for teams creating or maintaining shared design systems. - Figma presents the importer as highly accurate, while recommending in-app support if a file does not import correctly. ## How to Import a Sketch File Users can import Sketch files in three ways: - Drag and drop the file into Figma. - Use the import option in the toolbar. - Use: - **Command + Shift + K** on Mac - **Control + Shift + K** on Windows Figma automatically creates a new Figma file containing the imported content. Sketch Import is a practical bridge for teams adopting Figma: it preserves existing work while making collaboration and cross-platform access easier.

Figma Design Systems User Experience Sketch+2

figmaAug 28, 20183 min readCurated summary

The University of the Arts London’s Accidental Path to a Design System | Figma Blog

UAL’s fragmented history across six colleges created inconsistent digital experiences and made collaboration difficult. Midway through a website redesign, the UX team switched from Sketch to Figma, gaining real-time collaboration and a shared source of truth. That change unexpectedly led to a flexible design system that aligned designers, developers, stakeholders, and external agencies while accelerating delivery. ## A Fragmented Digital Identity - UAL consists of six colleges, each with its own history, identity, and website practices. - Individual teams preferred implementing their own styles, resulting in inconsistent digital experiences. - As part of a 2017 Digital Transformation Program, UAL began redesigning its core website to become more user-centric. - Although a design system was not initially the main objective, it emerged naturally during the project. ## Switching from Sketch to Figma - The team struggled with Sketch’s siloed files, versioning problems, syncing delays, and limited collaboration. - These issues were especially difficult because stakeholders and agencies were distributed across 14 campuses. - Figma enabled browser-based, real-time collaboration and allowed the team to import Sketch files easily. - Designers, developers, executives, and other stakeholders could work from one centralized source of truth. - The shared workspace improved transparency and helped repair the disconnect between design and development. ## Building the Design System - Since the website had to be built largely from scratch, the team prioritized creating reusable design-system foundations. - The design system was intended to unify not only the website but also UAL’s broader digital channels. - Workshops with students and business partners helped identify essential features, components, and inconsistencies. - The system had to support UAL’s complex brand, including variations in color, typography, and visual personality. - Figma’s team libraries created a living, accessible version of the brand guidelines. - Figma Styles allowed color, text, and effect styles to be managed independently, providing additional flexibility. ## Faster Delivery Through Reusable Components - The team used components to create base pages that served as templates for future pages. - Developers could build new pages more quickly and see how designs translated into code. - Designers and developers worked from the same system, reducing communication gaps and improving coordination. - The design system became both a visual foundation and a practical workflow for speeding up website production. UAL’s experience shows that a design system can emerge from solving everyday collaboration and consistency problems. Centralized tools, reusable components, shared libraries, and close designer-developer collaboration helped transform an unwieldy redesign into a faster and more unified digital process.

Figma Design Systems User Experience Web Development+2

figmaAug 22, 20182 min readCurated summary

The finale of Prototyping Week: Interactions | Figma Blog

Figma concluded Prototyping Week with **Interactions**, allowing prototypes to respond to user behavior more realistically. Designers can now model hover, pressed, mouse, touch, and timed behaviors, making prototypes more suitable for realistic testing. The release also rounded out a week of updates focused on navigation, device presentation, and external linking. ## Interactions for More Realistic Prototypes - New interaction types include: - On Click - While Hovering - While Pressing - Mouse Enter - Mouse Leave - Mouse Down - Mouse Up - After Delay - “While Hovering” and “While Pressing” can show button hover states or pressed list-item states. - “Mouse Enter” and “Mouse Leave” provide finer control, such as keeping a dropdown menu open until another interaction occurs. - On device frames, some interactions appear as On Tap, Touch Down, and Touch Up. ## Timed Transitions with After Delay - “After Delay” automatically transitions between screens after a specified duration. - It can simulate notifications, splash screens, and automatic redirects. - The transition applies only from one screen to another, rather than from a specific layer within a frame. ## Other Prototyping Week Releases ### Landscape Device Frames - Figma added device frames for screens designed to be viewed in landscape orientation. - This expanded the device-frame support introduced with Figma 3.0. ### Clickable URLs - Prototype frames can link to external websites or other Figma files. - For example, a presentation can link directly to a designer’s portfolio. ### Back Transitions - Users can return to the previous screen without duplicating screens or transitions. - Back navigation preserves the user’s starting point when a screen is reachable from multiple locations. - If the original navigation used animation, the back action plays that animation in reverse. Figma’s updates make prototypes better representations of real application behavior. Designers can use the new interaction triggers, timed transitions, links, and back navigation to create more accurate and flexible user-testing experiences.

Figma Prototyping Interaction Design User Interface Design+2

figmaAug 21, 20182 min readCurated summary

#FigmaTip Roundup 10.0 | Figma Blog

#FigmaTip Roundup 10.0 highlights practical features that make everyday design work faster and cleaner. Inspired by Charli Marie’s independent review of Figma, the post shows how shortcuts, automatic cleanup, selective property copying, flexible image fills, and vector networks reduce friction compared with tools such as Sketch and Illustrator. ## Faster Layer Arrangement - **Command + Left Bracket** moves layers backward, while the corresponding bracket shortcut moves them forward. - The shortcut mirrors Photoshop’s controls and avoids manually rearranging items in the layers panel. - Figma’s menus display keyboard shortcuts, making them easier to remember. ## Automatic Cleanup of Groups - Figma automatically deletes a group when all of its contents are removed. - This prevents empty groups from accumulating and keeps design files organized. - The behavior addresses a common source of clutter in Sketch documents. ## Selective Property Copying - Designers can copy all properties from one object or transfer only specific attributes. - Individual properties include fills, fonts, and strokes. - This makes it easy to reuse a successful style without overwriting unrelated settings on the target shape. ## Image Fills Instead of Masks - Imported images are placed as fills inside rectangular shapes. - Cropping, tiling, and positioning can be adjusted through the fill settings. - This avoids creating multiple masks merely to size or manipulate images. ## Complex Shapes with Vector Networks - Figma’s vector networks allow a point to connect to more than two paths. - This differs from traditional vector tools and supports more complex shapes. - The feature can reduce the need to switch to Illustrator for advanced vector work. The roundup presents these small workflow improvements as evidence that learning Figma’s built-in behaviors can make design work quicker, cleaner, and less dependent on other applications.

Figma User Experience Sketch Vector Graphics+2

figmaAug 15, 20183 min readCurated summary

Learn how a Microsoft designer built an Icon Library in his spare time | Figma Blog

Jackie Chui, a Microsoft designer, built a browser-based library containing more than 4,000 company icons in just three weeks. The tool unified icons across design applications, made them searchable through designer tags and engineering class names, and supported reverse searches using pasted icons. Its success came from focusing on practical user needs, leveraging familiar web technologies, and distributing a simple first version quickly. ## Researching Users and Existing Tools - Jackie interviewed Microsoft designers and observed their workflows to identify problems with existing icon management. - He evaluated IconJar, which offered organization and copy/paste functionality but lacked: - Shared, crowdsourced tagging - Browser and cloud access - Windows compatibility - These limitations led him to build a custom internal solution after hours. ## Designing and Building the Library - Jackie first created the interface in Sketch, borrowing ideas from IconJar and applying Microsoft’s Fabric design language. - With existing HTML, CSS, and JavaScript experience, he used Meteor.js to build both the frontend and backend. - A Meteor React tutorial helped him adapt a simple to-do-list database into an icon database. - Working on a concrete problem allowed him to learn development concepts while building the product. ## Extracting and Organizing Icons - Microsoft’s icons were stored in a font file, requiring users to copy and paste special Unicode icon characters into their designs. - Jackie extracted the icon files and retrieved each icon’s Unicode character. - He found Microsoft documentation containing the corresponding engineering class names. - The names were collected in Excel, converted to JSON, and imported into the application. - The resulting library let designers search for icons and copy their characters from one central location. ## Distribution and Adoption - Jackie hosted the application on Microsoft Azure. - He initially emailed the link to his team, after which word-of-mouth spread it throughout the design studio. - Users helped identify bugs and suggest features for version two. - The library quickly became part of many designers’ regular workflows. ## Future Plans - Jackie planned to convert all 4,000-plus icons into Figma components with a single click. - This would let Microsoft teams organize and search icons directly in Figma rather than through a separate browser tool. - He also hoped to release the converter more broadly so anyone could turn an icon font file into Figma components. The project demonstrates that an effective internal tool can start with focused user research, modest technical foundations, and a rapid first release. A browser-based, searchable library is a practical way to eliminate design-tool silos and create a shared source of truth for icons.

Figma React JavaScript CSS+4

figmaAug 14, 20183 min readCurated summary

With Figma’s new SVG Exports, less = more | Figma Blog

Figma redesigned its SVG exporter around a simple principle: producing less markup makes files easier for people and more compatible with other tools. Its older exports prioritized storing as much structural information as possible, but this created bloated SVGs that many importers—including Android Studio—handled poorly. The new exporter favors pragmatic, compact markup while preserving the visual result. ## Why SVGs Render Differently Across Tools - SVG describes instructions for drawing an image, unlike bitmap formats that store a fixed snapshot. - Although SVG is an open standard, there is no single standardized implementation for converting SVG markup into pixels. - Design tools and importers often support only subsets of the complex specification, sometimes with bugs. - Features such as reusable definitions in `<defs>` referenced through `<use>` are not reliably supported; Android Studio frequently failed to handle them. - Figma’s previous output was difficult to read and unnecessarily large, forcing users to run tools such as SVGO or manually clean up files. ## A More Pragmatic Export Strategy - Figma originally hoped SVG would become a universal interchange format between design tools. - Feedback from users led the team to abandon that idealized assumption and optimize instead for compatibility with real-world tools. - A simple rectangle example illustrates the change: - The old exporter generated deeply nested groups, clipping paths, masks, reusable definitions, and verbose path data. - The new exporter reduced the same design to a direct `<rect>` element with a fill and stroke. ## Using SVG Primitives - Simple shapes such as rectangles and circles are now exported using native SVG elements. - For example, a verbose rectangle path like: ```markup <path d="M0 100V0H100V100H0Z"/> ``` becomes: ```markup <rect width="100" height="100"/> ``` - Primitive elements are smaller, clearer, and more likely to be understood by other software. ## Simplifying Inside and Outside Strokes - SVG natively supports centered strokes, but design tools also need inside and outside stroke behavior. - Figma previously simulated these effects with doubled stroke widths plus masks, substantially increasing complexity and file size. - The new exporter adjusts path coordinates so the original stroke width produces the desired visual result. - This removes unnecessary masks and makes the resulting geometry easier to inspect and process. ## Removing Unnecessary Markup - Informational elements such as `<title>` and `<desc>`, grouping elements such as `<g>`, and attributes like `id` and `version` are omitted when they do not affect rendering. - Clipping paths are generated only when clipping is actually needed rather than for every clipped frame. - Figma also inlines elements that were previously deduplicated through `<use>` references in `<defs>`. - Although inlining sacrifices some deduplication, the simpler structure improves compatibility with limited SVG importers. Figma’s updated exporter demonstrates that SVG output should prioritize practical interoperability over preserving every possible piece of design-tool metadata. Simpler primitives, fewer masks and references, and only meaningful markup produce files that are smaller, easier to understand, and more broadly usable.

Figma Vector Graphics Svg Android Studio+2

datadogAug 13, 20182 min readCurated summary

Introducing Kafka-Kit: Tools for scaling Kafka | Datadog

Datadog’s “Kafka Kit” is a collection of operational tools designed to make Apache Kafka easier to scale and manage. The post argues that Kafka’s built-in administrative mechanisms become difficult to use safely as clusters grow, particularly when rebalancing partitions or adding and removing brokers. Kafka Kit automates these workflows while emphasizing balanced assignments, controlled changes, and operational visibility. ## Why Kafka Scaling Becomes Difficult - Growing Kafka clusters require frequent partition movement and broker rebalancing. - Native Kafka reassignment workflows can involve large, complex JSON configurations. - Poorly planned changes can create: - Uneven storage and traffic distribution - Excessive network and disk I/O - Overloaded brokers - Extended recovery times - Operational changes must account for replication, leadership, broker capacity, and rack or availability-zone placement. ## Kafka Kit’s Approach - Kafka Kit provides reusable tooling for common Kafka administration tasks. - The tools generate and apply partition assignments instead of requiring operators to construct them manually. - Assignments can be optimized for more even distribution of: - Partitions - Replicas - Leaders - Storage and traffic - The tooling is intended to support both routine balancing and larger cluster changes, such as adding or decommissioning brokers. ## Safer Partition Reassignment - Reassignments can be performed incrementally rather than moving all partitions at once. - Changes can be throttled to limit their effect on production workloads. - Operators can inspect proposed assignments before applying them. - Controlled movement reduces the risk of saturating Kafka brokers, disks, or network links. - The approach makes long-running migrations easier to monitor and interrupt if necessary. ## Operating Kafka at Scale - Datadog built the tools from its experience running Kafka as a critical part of its data infrastructure. - At large scale, Kafka administration needs to be repeatable and automatable rather than dependent on manual intervention. - Separating planning from execution allows teams to validate capacity and placement before changing the cluster. - Standardized tooling also helps reduce the chance of configuration errors during high-risk maintenance operations. Kafka Kit is most useful for teams operating Kafka clusters large enough that manual partition management is unreliable or disruptive. Automating assignment generation, throttling, validation, and broker lifecycle changes can make scaling more predictable and safer.

Kubernetes Datadog Observability Application Performance Monitoring+4

datadogAug 13, 20183 min readCurated summary

Introducing Kafka-Kit: Tools for scaling Kafka

Datadog operates Kafka at extreme scale, ingesting trillions of data points daily and requiring petabytes of NVMe storage. To manage frequent data movement caused by scaling, recovery, and capacity changes, the company built Kafka-Kit, a set of operational tools that improve partition placement and replication control. Its primary tools, `topicmappr` and `autothrottle`, automate safer and more predictable Kafka operations. ## Kafka-Kit - Kafka-Kit addresses two major operational areas: - Data placement across brokers - Replication auto-throttling - Its main tools are: - `topicmappr`, for generating partition-to-broker mappings - `autothrottle`, for automatically controlling replication bandwidth ## Partition Placement with `topicmappr` `topicmappr` replaces Kafka’s `kafka-reassign-partitions.sh --generate` functionality while adding operational safeguards and placement controls. - Produces deterministic output: identical inputs generate the same partition map. - Supports minimal-movement broker replacement: - Failed brokers can be replaced without unnecessarily moving healthy partitions. - Partitions with complete in-sync replicas are normally left untouched. - Provides rack-aware placement using Kafka’s `broker.rack` metadata and ZooKeeper. - Supports placement based on: - Partition count - Storage size, enabling bin-packing and storage rebalancing - Allows replication factors to be increased or decreased while topics are running. - Generates clear summaries of: - Brokers being removed or added - Partition-level changes - Broker distribution before and after reassignment - Warnings and resulting partition-map files The tool is written in Go and can run from any system with access to Kafka’s ZooKeeper cluster. It requires topic names and broker IDs, then verifies that the brokers are live, sufficiently numerous, and properly distributed across configured localities. ## Replacing Failed Brokers For a failed broker, `topicmappr` can rebuild affected topics while limiting movement to the necessary partitions. - Existing replicas are preserved whenever possible. - Replacement brokers fill the gaps left by failed brokers. - The generated report makes the proposed changes visible before execution. - The example replaces broker `1002` with brokers `1003` and `1004`, showing the updated replica assignments and broker totals. ## Placement Strategies `topicmappr` offers multiple strategies for deciding where replicas should live, including `count` and tunable `storage` placement. ### Count Placement Strategy - The default strategy. - Balances leadership and the number of partitions held by each broker. - Works well when traffic is expected to be distributed evenly across partitions. - Does not require metrics data, allowing maps to be generated quickly. - Also attempts to maximize the number of distinct broker-to-broker replica relationships. - This avoids concentrating a broker’s partitions with the same small subset of peers, improving distribution across the cluster and its racks. ## Storage-Aware Placement - The storage strategy uses partition size when assigning replicas. - It supports storage bin-packing and rebalancing, which is important when brokers have uneven disk utilization. - This is particularly useful for Datadog’s large Kafka clusters, where storage capacity—not just partition count—can determine when data must be moved. Datadog’s approach demonstrates that Kafka’s flexible primitives can be extended with purpose-built tooling. For large deployments, deterministic assignments, rack awareness, minimal movement, and storage-based balancing can make scaling and failure recovery substantially safer and more predictable.

Database Design Apache Kafka Zookeeper Kafka Kit+4

figmaAug 12, 20182 min readCurated summary

File loading, dragging & zooming is up to 3x faster | Figma Blog

Figma argues that performance is central to making a design tool feel like an extension of the user’s mind. A months-long effort to restructure its renderer and fix WebAssembly issues produced major gains, including up to 3× faster loading, zooming, and dragging in dense files. The improvements were measured not only by average speed, but also by interaction smoothness and frame-time consistency. ## Performance as a Core Product Requirement - Delays undermine the feeling of direct manipulation, much like a hammer lagging behind the user’s hand. - Figma continuously profiles real user documents to identify targeted optimizations. - Larger organizations increasingly use complex files with deeply nested components and many permutations, making performance more challenging. - The latest work focused on restructuring the document renderer and resolving WebAssembly bugs. ## File Loading: Up to 3× Faster - A large Microsoft Fluent Design document improved from approximately 29 seconds to under 8 seconds. - WebAssembly optimizations and other renderer changes reduced computational overhead. - WebAssembly support was enabled across: - Figma’s desktop app - Chrome - Firefox - Safari - macOS and Windows - The improvements were especially valuable for dense design-system files containing deeply nested components. ## Smoother Zooming and Dragging - Zooming and dragging are continuous interactions where responsiveness matters more than total operation duration. - Figma reduced visible “hitches” in these interactions, with improvements of up to 3×. - Dense files containing many bitmap images benefited substantially. - Figma also worked directly with customers such as N3TWORK to diagnose performance issues and test the new renderer. - Users reported immediately noticeable improvements in component publishing and file loading. ## Measuring Smoothness with Frame Time - A 500 ms operation can feel very different depending on whether it provides continuous visual feedback or freezes until completion. - Figma tracks two metrics: - **Average frame time:** Indicates overall choppiness or low frame rate. - **Maximum frame time:** Reveals occasional long pauses or “hitches.” - High maximum frame times feel like sudden interruptions, while high average frame times make motion consistently choppy. - Monitoring both metrics gives a more complete view of interaction quality than measuring total operation time or average frame rate alone. - Although a steady 60 frames per second is the ideal, tracking these metrics over time helps Figma evaluate progress toward that goal. Figma’s work demonstrates that performance optimization should focus on both raw speed and perceptual smoothness. For interactive tools, renderer architecture, WebAssembly execution, and detailed frame-time measurement are all essential to making complex documents feel responsive.

Figma Performance Optimization Webassembly Rendering+1

figmaAug 11, 20182 min readCurated summary

Designer Q&A: Camellia Neri’s five catalysts for creativity | Figma Blog

Camellia Neri, Lead Illustrator at Gusto, draws creative energy primarily from childhood memories and nostalgic places. Her five inspirations—from Disneyland to San Francisco’s hidden history—teach her to value research, surprise, storytelling, collaboration, and overlooked details. Together, they form a creative practice focused on making illustrations feel both genuine and richly imagined. ## Main Street, Disneyland - Neri’s childhood memories of Disneyland began with watching a parade from her father’s shoulders. - Main Street’s detailed storefronts, gold-leaf lettering, and carefully constructed world showed her how craft creates authenticity. - She applies the same principle to illustration by researching subjects thoroughly and approaching each visual decision intentionally. ## Pee-Wee’s Playhouse - The show inspired her through its combination of comedy, puppetry, life lessons, unusual artwork, and unexpected details. - Its creators included animator Ric Heitzman, cartoonist Gary Panter, and painter Wayne White. - Neri believes strong illustrators add surprising moments and personal “easter eggs” that reveal their individuality and delight the audience. ## The Los Angeles Museum of Natural History - The museum’s taxidermy dioramas influenced her because they function like large, three-dimensional illustrations. - Carefully arranged animals, painted backgrounds, lighting, and ecosystem-specific color palettes create complete visual stories. - She sees the same qualities in effective landing pages: strong storytelling, impactful visuals, and dynamic design working together as one experience. ## Quentin Blake and Roald Dahl - Neri kept her Roald Dahl books illustrated by Quentin Blake even after giving away most of her childhood collection. - Blake’s drawings strengthened Dahl’s whimsical narratives and helped define the books’ characters and shared creative identity. - She compares the illustrator-writer relationship to a marriage, emphasizing the importance of choosing collaborators carefully and nurturing a productive partnership. ## San Francisco’s Hidden History - San Francisco’s obscure historical stories provide Neri with an ongoing source of ideas and conversation. - She illustrates these discoveries on a Medium blog and uses Figma to maintain a consistent visual brand across the project. - Her work reflects the illustrator’s role in making unseen or forgotten worlds visible, such as the city’s buried ships and other historical oddities. Neri’s approach recommends looking closely at personal memories, cultural influences, collaborators, and overlooked details. Creative inspiration can come from anywhere, but it becomes most powerful when transformed through research, craftsmanship, and a distinctive personal perspective.

Figma User Experience Graphic Design Illustration+2

figmaAug 9, 20183 min readCurated summary

Why transparent, open design leads to happier clients | Figma Blog

Citrusbyte argues that sharing unfinished design work with clients creates better collaboration, faster workflows, and stronger project outcomes. Using Figma’s cloud-based, real-time environment, clients can observe progress, provide precise feedback, and participate directly instead of waiting for polished presentations. Although transparency can expose messy creative stages, Citrusbyte manages expectations through clear communication and finds that openness ultimately produces happier clients. ## Why Transparency Matters - Citrusbyte, a 90-person strategy, design, and development firm, shares raw, in-progress design files with clients. - The company moved away from traditional siloed design, where designers work privately and present finished deliverables. - Earlier tools such as Sketch and Photoshop made continuous transparency difficult, requiring teams to export and email files or use file-sharing services. - Figma enables: - Always-current cloud files - Link-based sharing - Simultaneous collaboration - Real-time visibility into design changes - Clients gain a stronger sense of security and involvement because the work is not hidden in a “black box.” - Citrusbyte explains that unfinished work is part of the process, comparing it to seeing a bicycle being assembled rather than expecting a finished bike immediately. - Bringing clients directly into the project increases buy-in and improves their understanding of the work. ## Faster Feedback and Fewer Handoffs - Before Figma, clients often reviewed PNGs or PDFs and responded through email or Slack. - Vague feedback created unnecessary back-and-forth because clients could not clearly identify which design element they meant. - Prototype tools such as InVision required designers to save, flatten, and re-upload new versions whenever designs changed. - With Figma: - Prototypes update automatically as the source design changes. - Clients can experiment with content, such as headline copy, themselves. - Designers spend less time handling minor text revisions and file management. - Figma’s observation mode allows clients and teams to follow a presenter’s screen directly during reviews, eliminating the need to prepare specially polished presentation files. - Citrusbyte designer Sam Small estimates that Figma saves him 30–50% of his previous workflow time. ## Business and Client Benefits - Removing repetitive steps allows Citrusbyte to handle more work and meet aggressive deadlines. - Regular reviews—sometimes daily—keep clients closely aligned with project progress. - Faster review cycles and continuous visibility improve trust and collaboration. - The approach helped Citrusbyte grow from primarily serving startups to working with major companies including Apple, Sony, Intel, and AT&T. Citrusbyte’s experience suggests that transparent, collaborative design works best when paired with clear expectations. Teams should expose work early, use tools that support real-time collaboration, and treat clients as active participants rather than occasional reviewers.

Figma Prototyping Collaborative Design Real Time Collaboration+1

figmaAug 8, 20182 min readCurated summary

On the road: How two designers got rid of their hardware baggage | Figma Blog

A simple Samsung-based setup can replace a laptop for user research, design collaboration, and even editing Figma files while traveling. By combining a Samsung phone or tablet with Chrome, a Bluetooth keyboard and mouse, and either a DeX dock or Chromecast, designers can work from almost any monitor or TV. The approach reduces equipment, cost, and barriers to entering the design profession. ## A Lightweight Mobile Figma Setup - Recommended hardware includes: - Samsung Galaxy S8/S9 models or a Samsung Tab 2 - A DeX dock, USB-C-to-HDMI converter, or Chromecast - Bluetooth keyboard and mouse - Designers can open Figma in Chrome on a mobile device and broadcast it to a larger display. - Prototype links can be shared with users or clients, who open them on their own computers or tablets. ## Remote User Research Without a Laptop - Josh Goodwin previously carried multiple laptops and tablets loaded with Sketch or Adobe software for medical user testing. - With Figma, he can connect his phone to an available hospital monitor and let doctors interact with prototypes in their own browsers. - Feedback can be incorporated immediately during testing, allowing development teams to move faster. ## Lowering the Cost of Design Work - The setup can provide a practical alternative for students, designers in emerging markets, or anyone on a limited budget. - A smartphone and inexpensive television may be enough to design and collaborate without a high-end laptop. - Tyrale Bloomfield uses a Samsung tablet alone for creative-direction work, sometimes commenting with his fingers instead of using a mouse. ## Why Hardware Compatibility Matters - Samsung devices performed best in the authors’ testing because they adjust DPI when projecting to a larger screen, providing an appropriate amount of workspace. - The device, browser, and input hardware must correctly distinguish mouse clicks from finger touches. - Some systems interpret all input as touch, preventing essential actions such as resizing objects, using bounding boxes, or clicking and dragging. - The designers tested many phones and roughly 30 browsers before finding a reliable combination. The article’s practical recommendation is to prioritize a compatible Android device, browser, and pointing device rather than assuming any mobile setup will work. With the right combination, a browser and Internet connection can support much of a designer’s full workflow while eliminating substantial hardware baggage.

Figma User Experience Android User Research+3