techlist.io
KREN

Techlist.io - Korean Tech Blog Curator

figma2 min readCurated summary

The Long and Short of It: Issue no.7 | Figma Blog

Figma’s “Building better” issue argues that developer experience depends on more than tools or individual teams. Strong cross-functional culture, clear processes, and intentional product principles help engineers stay productive and create better outcomes. The issue highlights approaches from VS Code, Atlassian, Linear, Decathlon, and Crunchyroll. ## Protecting the Developer’s Inner Loop - VS Code distinguishes between: - The **inner loop**: focused coding and heads-down work. - The **outer loop**: bug tracking, support tickets, meetings, and collaboration. - Frequent context switching disrupts productivity. - Teams can improve developer experience by protecting uninterrupted editor time and reducing unnecessary transitions between tools and tasks. ## Measuring Developer Joy - Atlassian extends the idea of developer experience into **“developer joy.”** - The concept emphasizes: - Pride in craft. - Foundational engineering values. - Operational practices that make work satisfying. - Atlassian treats developer joy as a guiding metric and explores how to connect it to business impact and scale it across the organization. ## Building Opinionated Software - Linear believes effective software should have a clear point of view. - Strong product opinions establish default workflows and reduce decision-making for users. - The company deliberately goes against conventional expectations when its principles lead to a better experience. - These opinions influence both Linear’s product design and internal processes. ## Integrating Design and Development with Dev Mode - Decathlon’s engineering team shares lessons from a year of using Figma Dev Mode. - A central recommendation is to start small and pursue quick wins rather than attempting a complete workflow transformation immediately. - Dev Mode can help align design-system work, engineering implementation, and collaboration between designers and developers. ## Managing Complexity with a Universal Design System - Crunchyroll operates across 15 platforms and 12 languages, making consistency difficult. - Its Universal Design System supports: - More consistent experiences across web, mobile, consoles, and other touchpoints. - Greater design-system adoption. - Clearer handoff and implementation workflows in Dev Mode. - A shared system helps teams navigate complexity without sacrificing consistency. ## Bridging Design and Code - Figma’s Toronto meetup featured Simple Design System, a UI kit backed by realistic code. - The project demonstrates how design systems can connect visual components with their implementation. - The discussion also raises a broader concern: bridging the design-development gap is not enough; teams must also maintain implementation quality. Organizations seeking better developer outcomes should treat developer experience as a company-wide practice: protect focus time, establish thoughtful defaults, invest in shared systems, and measure whether tools and processes genuinely improve engineers’ work.

Read original(opens in new tab)
FigmaDesign SystemsDev ModeCode Connect+2
figma2 min readCurated summary

The Infrastructure Behind AI Search in Figma | Figma Blog

Figma’s AI search lets users find designs and components through text, screenshots, or layer selections. It relies on multimodal embeddings, vector nearest-neighbor search, and large-scale indexing of frames and components. The main infrastructure challenge was generating and indexing billions of embeddings efficiently while controlling costs. ## AI-Powered Search Flows - **Search for designs** indexes frames across users’ files, including unlabeled frames buried in complex files. - Users can search designs: - Lexically with a text description - Visually with a screenshot - By selecting similar Figma layers - **Search for components** enhances the Assets panel with semantic matching. - A component representing 😀 can be found with terms such as “smiley,” “happy,” “face,” or “grin.” - Designers no longer need to manually add every possible keyword to component descriptions. - Components can also be found using visual queries. ## Multimodal Embeddings - An embedding model converts text or images into numerical vectors that represent their meaning. - Figma uses the open-source **CLIP** model, which places text and images in the same embedding space. - The embedding for the word “cat” should be numerically close to an embedding generated from an image of a cat. - Figma’s models were not trained on private customer files or data. - Fine-tuning used interface images from public, free Community files. - Search works by: - Generating embeddings for indexed content - Creating an embedding for the user’s query - Finding indexed vectors that are nearest to the query vector - Figma tested embeddings based on textual representations such as JSON, but image-based embeddings produced better results and supported the same workflow as screenshot search. - Layer selections are converted into screenshots before being passed to the embedding model. ## Populating the Vector Search Index - Each searchable item requires: - A thumbnail or rendered screenshot - An embedding - Metadata stored in the search index - Figma uses DynamoDB for metadata and embeddings because the workload primarily requires high-throughput key-value reads and writes. - Identifying searchable frames is difficult because unpublished frames are not directly enumerable. - Figma runs a headless, server-side version of its C++ editor in asynchronous jobs to discover frames within files. - These jobs use server-side sandboxing techniques to safely run the editor. Figma’s approach combines CLIP-based multimodal representations, server-side rendering, asynchronous processing, and scalable vector storage to make visual and semantic search practical across large design systems.

Read original(opens in new tab)
Multimodal AIVector DbC++Embeddings+2
figma2 min readCurated summary

The Search for Speed in Figma | Figma Blog

Figma’s search investigation revealed that OpenSearch itself was responsible for less than 30% of total search latency. The larger costs came from query construction and especially permission checks before and after searches. By measuring the correct end-to-end metrics, Figma identified misleading monitoring data and established a foundation for improving search performance at scale. ## Diagnosing the Latency Gap - Figma migrated from an older Elasticsearch version to AWS-managed OpenSearch, a fork created after Elasticsearch’s 2021 license change. - OpenSearch reported an average search time of roughly **8 ms**, while Figma’s API showed: - About **150 ms average latency** - **200–400 ms** latency at the 99th percentile - Minimum latency above **40 ms** - Search performance also varied significantly depending on traffic levels, with peak periods much slower than weekends. - Additional instrumentation showed that substantial time was spent both before and after the OpenSearch request. ## Understanding OpenSearch’s Metrics - OpenSearch distributes a query through a coordinator node to worker nodes, typically sending one request per index shard. - It then gathers, sorts, and fetches results during the query and fetch phases. - The reported 8 ms metric measured only the average time for individual shard queries—not the total time required to coordinate hundreds of shard requests. - Figma’s queries could involve as many as **500 shard-level requests**, many of which ran in parallel but not all. - OpenSearch did not provide built-in metrics or logs for overall query duration. - Figma instead extracted the `took` value from each search response, producing a backend latency measure that aligned more closely with application-level timing. ## Permission Processing as the Main Bottleneck - Less than 30% of total query API time was spent waiting for OpenSearch. - Pre-processing: - Retrieved information about files the user could access. - Built an OpenSearch filter intended to exclude inaccessible files. - Post-processing: - Performed additional permission checks on every returned file. - Was especially slow and consumed more time than the search itself. - The investigation demonstrated that optimizing the search engine alone would not solve Figma’s overall latency problem. Figma’s experience highlights the importance of measuring end-to-end request latency rather than relying on subsystem metrics. Accurate coordinator-level and application-level instrumentation is essential, particularly when distributed searches involve many shards and expensive authorization work.

Read original(opens in new tab)
ObservabilityAWSElasticsearchOpensearch+2
figma3 min readCurated summary

Figma on Figma: Our Approach to Designing UI3 | Figma Blog

UI3 is Figma’s two-year effort to make the interface less distracting and keep designers focused on their work. The redesign explored bold changes, including floating panels and a new way to minimize interface elements, but user feedback and performance data led Figma to reverse some decisions. The result balances a long-term vision for a cleaner canvas with practical adjustments based on how people actually work. ## Designing Around Focus and Flow - Figma’s central goal was to put users’ creative work “center stage” and minimize distractions. - The team relied on craft, intuition, feature-adoption data, performance metrics, and extensive user feedback. - Figma emphasizes that redesigning for designers requires establishing a clear destination while bringing users along through iteration. - UI3 was scheduled for general availability on October 10, 2024. ## Docked Panels: Experimentation and Reversal - The team explored unconventional navigation and properties-panel designs: - Panels appearing only on hover - Panels floating above the canvas - A simplified floating-panel system shared across Figma products - Floating panels initially seemed promising but created practical problems for frequent users: - Reduced available canvas space, especially on smaller screens - Made designs appear to sit behind the panels - Increased distraction - Made rulers less useful by moving them farther from the design - Slowed users down, conflicting with Figma’s goal that “speed is a feature” - For the full UI3 rollout, Figma reattached the navigation and properties panels in Figma Design. - The panels remain resizable for flexibility. - Floating UI continues in specific contexts, including: - Minimize UI mode in Figma Design - Grid view in Figma Slides - Default views in FigJam - Bottom toolbars across Figma products ## Minimize UI: Making the Canvas the Center - Figma’s redesign was guided by the belief that work should remain the primary focus of the canvas, even as interface conventions evolve. - The existing Hide UI feature was considered too rigid and “blunt.” - Minimize UI offers a more flexible alternative: - Collapses side panels for distraction-free work - Keeps tools readily accessible - Works better in small windows and split-screen setups - The interface hierarchy was reorganized to accommodate future features more cleanly. - The navigation panel now follows a linear structure: - File name - Branch name - Project name - Pages - Layers - This structure gives future navigation capabilities a logical place without requiring disruptive layout compromises. ## Updating Familiar Interface Conventions - UI3 also examines established interaction patterns, such as keyboard shortcuts, scrollbars, and blend modes. - Figma describes these as “training wheels” or conventions that may no longer match how modern interfaces are used. - The redesign aimed to balance newer interaction trends with users’ existing habits and expectations. UI3 demonstrates that successful redesign is not simply about pursuing a cleaner or more ambitious vision. Figma’s experience suggests that bold experiments should be tested in real workflows, with usability and performance data ultimately determining which ideas remain.

Read original(opens in new tab)
FigmaDesign SystemsUser ExperienceUser Interface+2
microsoft2 min readCurated summary

Common annotated security keys

GitHub’s improved security-token format demonstrated that fixed signatures and checksums can sharply reduce both false positives and missed secret detections. Microsoft applies these ideas across its services and proposes the open-source Common Annotated Security Standard (CASK), a shared format for identifiable secrets. CASK is intended to make scanning faster, more accurate, and easier to apply across an entire ecosystem without disrupting developers. ## Identifiable Secrets and Better Detection - “Identifiable” keys combine: - A fixed signature that reliably identifies the format. - A checksum that validates whether a detected string is a real key. - These features reduce scanner noise and missed findings. - Microsoft can hard-block identifiable keys from being stored in source code, work items, and similar locations with high confidence. - Scanners can detect the common format first and classify the specific service provider later, if needed. ## The Common Annotated Security Standard - CASK defines platform-agnostic requirements for minted security keys. - It reserves space for individual platforms and providers to encode service-specific metadata. - Microsoft has defined Azure-specific metadata within this reserved area. - A shared standard lowers the effort required for security tools to protect multiple service providers. - Other providers can adopt the same core format. ## CASK Key Requirements ### Alphanumeric Encoding - Keys use only the BASE62 alphabet. - Avoiding special characters allows keys to be transmitted without escaping or additional encoding. ### Strong Entropy - Each key contains 52 randomized encoded characters. - This provides approximately 310 bits of entropy. - The design is intended to prevent brute-force attacks, including in a post-quantum environment. ### Fixed Signatures - Every CASK key includes: - The standard signature `JQQJ`. - A provider-specific signature. - Microsoft observed `JQQJ` to be rare in both open-source and internal code, enabling fast and accurate detection. - Azure DevOps uses `AZDO` as its provider signature. - These signatures allow tools to detect CASK keys generically while still supporting provider-specific classification. ### Metadata and Testing Support - Keys include their creation month and year. - Timestamps support incident response and key-rotation enforcement. - CASK reserves dedicated test keys so developers can test scanners and security controls without exposing real credentials. - Microsoft plans to provide more details about Azure-specific metadata. Microsoft recommends that service providers adopt CASK and contribute feedback as the standard evolves.

Read original(opens in new tab)
CybersecuritySecret ScanningGithub Advanced SecurityAzure Devops+4
figma3 min readCurated summary

Building a better First Draft for designers | Figma Blog

Figma reintroduced its AI design-generation feature as **First Draft**, repositioning it as a starting point rather than a finished product. After disabling the original Make Designs feature because its outputs too closely resembled existing apps, Figma rebuilt the system with improved design libraries and safeguards. First Draft was later folded into Figma’s more powerful design agent, which adds iterative prompting, bulk edits, and live feedback. ## The Purpose of First Draft - First Draft is designed to reduce the tedious work required to turn an idea into an initial design. - It helps designers: - Express an idea through a simple prompt - Start productive discussions - Explore multiple design directions - Move more quickly from concept to prototype - Figma presents it as an additional way to explore possibilities, not a replacement for design judgment or craft. ## How the AI Generates Designs - First Draft uses off-the-shelf AI models, including OpenAI’s GPT-4 and Amazon Titan. - It combines three elements: - **Model:** The underlying AI system - **Context:** Figma’s proprietary mobile and desktop design systems, components, and assembly examples - **Prompt:** The user’s description of their design goal - The AI selects, arranges, and customizes components from the relevant design system to produce an initial design. ## Lessons from Make Designs - Figma originally introduced the feature as **Make Designs** during Config 2024. - The company disabled it after discovering that problems in the underlying design system caused generated mockups to resemble existing applications too closely. - Following analysis, testing, and iteration, Figma relaunched the feature under the name **First Draft**. - The new name emphasizes that the output is meant to be a flexible jumping-off point rather than a polished final design. ## Design Libraries and Future Customization - Users can choose among four libraries tailored to different needs: - Low-fidelity wireframes - More visually expressive, high-fidelity designs - Site-oriented patterns - App-oriented patterns - This contrasts with Visual Search, which helps users find exact existing files or components. - Figma’s longer-term goal is to let organizations use their own custom libraries and company-specific design languages. - The company is also exploring code-backed systems such as Google Material 3 to help designers and product teams iterate more closely with implementation. ## From First Draft to Figma’s Design Agent - First Draft is now incorporated into Figma’s purpose-built design agent. - The agent extends the original concept with: - Re-prompting and deeper iteration - Automated bulk edits - Live feedback on designs and user flows - Direct interaction through chat on the canvas Figma’s approach is to use AI to accelerate early exploration while keeping designers in control. The current recommendation is to use the design agent as an iterative partner for generating, refining, and evaluating ideas rather than treating AI output as a finished solution.

Read original(opens in new tab)
Design SystemsUser ExperienceGenerative AIFigma Ai+2
datadog1 min readCurated summary

How we optimized LLM use for cost, quality, and safety to facilitate writing postmortems | Datadog

The provided content does not include the blog post itself; it consists primarily of Datadog’s navigation menu and a promotional banner announcing its Gartner recognition. As a result, the article’s argument, technical details, and conclusion cannot be reliably summarized. ## Visible Page Content ### Datadog’s Gartner Recognition - Datadog promotes being named a **Leader in the Gartner Magic Quadrant for Observability Platforms**. - The linked resource appears to concern the **2026** observability-platform evaluation. ### Datadog Product Areas - Infrastructure and application monitoring - Logs, metrics, databases, and data pipelines - Security and cloud protection - Real user monitoring and digital experience - CI/CD and software delivery - Incident response and service management - AI capabilities, including Bits AI, agent observability, and GPU monitoring ### Article Reference - The URL path indicates an article titled **“LLMs for Postmortems.”** - However, no article text or sections about large language models, incident analysis, or postmortem generation are included in the supplied content. Please provide the full article body for an accurate summary.

Read original(opens in new tab)
AI AgentsKubernetesObservabilityApplication Performance Monitoring+4
datadog3 min readCurated summary

How we optimized LLM use for cost, quality, and safety to facilitate writing postmortems

Bits AI uses large language models to generate first drafts of incident postmortems from Datadog Incident Management metadata and Slack discussions. The goal is to reduce documentation effort without replacing the human-led reflection that makes postmortems valuable. Datadog found that production-quality LLM features require extensive prompt experimentation, safeguards against hallucinations, careful model selection, and strong privacy and feedback mechanisms. ## Why LLMs Are Difficult to Use for Postmortems - Postmortems must remain factual, consistent, and useful, unlike more creative LLM applications. - LLMs can ignore instructions, produce inconsistent formatting, repeat information, or hallucinate plausible but false details. - More than 100 hours were spent refining section structures and instructions so they worked across varied incidents. - Building these systems requires a combination of software engineering, product management, data science, and technical writing. ## Balancing Structured and Unstructured Incident Data - Structured Datadog data includes incident metadata, alerts, graphs, and manually entered fields such as customer impact. - Slack discussions provide current, detailed, and unstructured context from the incident response process. - Manually maintained fields are often more reliable but can become outdated, while LLMs can continually reassess live discussions. - Combining both sources helped the model understand the full incident and prioritize information appropriately. ## Cost, Speed, and Quality Trade-offs - Datadog compared models including GPT-3.5 and GPT-4. - Results varied by as much as 50 times in cost and speed. - GPT-4 generally produced more accurate output but was substantially slower and more expensive. - Model choice therefore depended on the required balance between quality, latency, and operating cost. ## Preserving Human Control and Privacy - AI-generated drafts were intended to support authors, not become final documents automatically. - Keeping engineers involved preserves the discovery and learning process that postmortems are meant to encourage. - Because incidents may contain sensitive information or secrets, Datadog scrubbed data before sending it to an LLM. - The system was designed to ensure authors remained responsible for reviewing and improving the draft. ## Experimentation and Reliability Safeguards - A custom API extracted and structured incident data from Datadog, Slack, and other sources. - The framework enabled rapid testing of different datasets, models, input configurations, and output token limits. - Datadog refined prompts and instructions to guide the model toward useful recommendations while retaining author agency. - Lowering model temperature and tuning other parameters reduced irrelevant or fabricated content. - A related feature generated concise incident summaries for responders joining Slack channels, providing a faster testing environment for LLM-based incident analysis. ## Evaluating Generated Drafts - Datadog used both qualitative and quantitative evaluation methods. - Authors of earlier postmortems compared their human-written documents with AI-generated drafts for the same incidents. - Evaluation included criteria such as factual accuracy and conciseness, with the provided article ending before the full evaluation approach was described. - Continuous feedback was used to refine prompts, models, and the overall drafting workflow. Overall, reliable AI-assisted postmortems require more than selecting a capable model. The strongest approach combines carefully prepared incident data, privacy controls, model and prompt experimentation, systematic evaluation, and mandatory human review.

Read original(opens in new tab)
Large Language ModelsDatadogSlackData Science+4
figma3 min readCurated summary

The VS Code Method: Tightening a developer’s inner loop | Figma Blog

The post argues that developers are most productive when they can sustain the “inner loop”: writing, compiling, debugging, and iterating without disruptive context switching. VS Code’s approach is to bring more outer-loop activities—collaboration, project management, design inspection, and AI assistance—into the editor. The result is not only faster development, but better code quality, greater energy, and improved developer satisfaction. ## The Inner Loop and Flow - The inner loop is the repeated cycle of writing code, compiling, debugging, and continuing in the code editor. - The outer loop includes activities outside the editor, such as: - Checking bug trackers - Updating tickets - Responding in Slack or Teams - Reviewing documentation - Switching between projects and terminals - Staying in the inner loop builds “inertia,” increasing speed and productivity over time. - Interruptions also cause developers to lose mentally loaded context, including edge cases and future plans for the code. ## Reducing Distractions in VS Code - VS Code uses features and extensions to help developers remain focused inside the editor. - Zen Mode hides interface elements and creates a distraction-free workspace. - Even small UI changes, such as collapsing a sidebar, can interrupt concentration as the brain recalibrates. - Developers can customize VS Code with extensions that match their preferred workflows. ## Bringing Outer-Loop Work into the Editor - The broader goal is to move as many tasks as possible into the developer’s existing workflow. - Integrations can reduce switching between: - VS Code and GitHub - Code and project-management tools - Development tools and design platforms - The Figma for VS Code extension lets developers access and inspect designs without leaving the editor. - AI tools such as GitHub Copilot provide proactive, non-intrusive code suggestions. - GitHub reports that Copilot increases coding speed by 55%, while 75% of AI-using developers report greater fulfillment. ## Collaboration Without Breaking Focus - Collaboration is essential but often disruptive when it requires meetings or prolonged chat exchanges. - VS Code integrates GitHub features so developers can manage issues, review code, and submit pull requests from the editor. - The ideal collaboration model lets multiple people remain in their own inner loops rather than requiring constant synchronous interaction. - Direct comments and embedded collaboration can preserve focus while keeping teams connected. ## A More Connected Developer Workflow The VS Code team envisions an inner loop that eventually includes all the tools developers need. Until then, teams should prioritize integrations that eliminate unnecessary switching and tedious manual work. Keeping developers in flow improves productivity, code quality, energy, and overall happiness.

Read original(opens in new tab)
FigmaGenerative AIGithubGithub Copilot+3
figma2 min readCurated summary

Figma on Figma: Our Latest Brand Refresh | Figma Blog

Figma refreshed its visual identity to reflect its evolution from a designer-focused tool into a collaborative platform for entire product teams. The new language moves beyond static cursors and heavy outlines, using flexible primitives, dynamic compositions, broader color, custom typography, and motion. Its central idea is to portray Figma as a shared space where people from different roles create together. ## Expanding Beyond a Designer-Centric Identity - Figma’s earlier branding was rooted in “vector vernacular,” including static cursors and bold black outlines. - As developers, product managers, and other contributors became part of the platform, the brand needed to represent more than traditional design work. - The refresh emphasizes the many people involved in turning ideas into finished products. ## Four Foundations of the New Visual Language - **Versatile primitives:** Visual building blocks represent the diverse individuals involved in co-creation. - **Dynamic compositions:** Layouts reflect different ways of making, experimenting, and building. - **Expanded color palette:** Color variables make the system easier to adapt across contexts. - **Integrated motion:** Animation expresses actions and flows within the creative process. ## Typography and Custom Fonts - Figma partnered with Grilli Type to create **Figma Sans**, described as an opinionated grotesque. - The broader type system includes: - Figma Sans - Figma Condensed - Figma Mono - Figma Hand, created with OH no Type - Together, the fonts support different modes of communication, from product design and engineering to brainstorming and collaboration. ## Starting in the Sandbox - Brand Studio began by studying how people use Figma across the entire process: - Brainstorming and ideation - Inspecting elements - Refining and polishing work - The team explored the idea of activities happening simultaneously in a shared environment, similar to “parallel play.” - Playgrounds designed by Isamu Noguchi and Mitsuru Senda inspired the concept of the Figma canvas as a place where people gather, experiment, and create. - Other references included carefully crafted tile work and infrastructure, suggesting a visual system that could combine playfulness with structure. Figma’s new identity is designed to make collaboration visible: a flexible, colorful, and animated system that reflects both the individuality of contributors and the shared space where product ideas take shape.

Read original(opens in new tab)
FigmaDesign SystemsDesign TokensTypography+2
figma2 min readCurated summary

Just Our Type: The Story of Creating Figma Sans | Figma Blog

Figma created Figma Sans as part of a broader brand refresh responding to its expanding audience and product ecosystem. Replacing Whyte, the new typeface was designed with Grilli Type to combine a distinctive, opinionated character with flexibility, legibility, and performance across many contexts. The process favored a bespoke solution over existing fonts and used exploratory concepts to define the final direction. ## A Typeface for an Expanding Brand - Figma’s visual identity was evolving across color, illustration, pattern, motion, and typography. - Its previous typeface, Whyte—with its distinctive inktrap variation—had served the brand since 2019. - The broader audience now included designers, developers, product managers, and newcomers, requiring a typeface that could communicate widely. - Figma sought a contemporary grotesque: a sans serif style that could support varied weights, optical sizes, and applications. ## Finding a Fresh Approach - The Brand Studio prioritized: - Flexibility across display and text use - Strong legibility - Effective performance in places such as the Help Center - A visual personality aligned with Figma’s new, more complex brand language - The team evaluated existing typefaces, including Marr Sans and Agipo, but found that none fully met the brief. - They chose to commission a custom typeface so the collaboration itself could help clarify Figma’s typographic needs. - Grilli Type was selected for its design expertise, narrative focus, and willingness to develop a concept rather than follow current trends or historical models. ## Defining an “Opinionated” Typeface - Grilli Type began by creating a mood board to identify the central tension in the brief. - “Opinionated” became a guiding idea: the typeface should feel confident, purposeful, and free of unnecessary decoration. - The design team explored references including: - Karl Gerstner’s work - 1920s German typography - Bell Centennial, designed for phone books by Matthew Carter - Two initial directions were presented: - A more straightforward approach with simplified forms - A more unconventional and expressive direction - Rather than choosing one option outright, Figma used the concepts to discuss the desired design space. - Feedback favored the simpler shapes of the first direction while incorporating some of the distinctive character of the second. Figma Sans emerged from treating typography as a central part of Figma’s evolving brand—not merely as a replacement font. Its recommended role is both expressive and practical: a recognizable voice for brand communication that remains readable and versatile throughout Figma’s products and content.

Read original(opens in new tab)
FigmaTypographyBrandingTypeface Design+2
figma2 min readCurated summary

Breaking In: A Guide To Landing Your First Product Design Role | Figma Blog

Figma’s guide explains how aspiring product designers can land their first role by presenting strong work, communicating their thinking, and showing how they learn from challenges. It emphasizes that a portfolio should be personal but focused on clear storytelling, accessible navigation, and evidence of design impact. The strongest projects are those where candidates can explain their decisions, trade-offs, constraints, and outcomes. ## Crafting a Portfolio - Portfolios do not need to follow one prescribed format or use a specific website builder. - The priority is to: - Showcase your best work. - Tell compelling project stories. - Make the portfolio easy to navigate. - Represent your individual perspective and skills. ### Lead with Your Best Work - Your first project creates the initial impression, so lead with work that best demonstrates your: - Design skills - Creativity - Process - Product impact - If choosing between projects, feature the one you can discuss most naturally and explain most compellingly. - Strong case studies should include: - A clear problem statement - Important project milestones - An insightful conclusion - Relevant metrics and learnings - What you would change in retrospect - A project does not need to have been an overwhelming success. Honest reflection and lessons learned can create a stronger narrative. - Explain the reasoning behind design decisions, not just the final visuals. - Discuss the trade-offs, advantages, disadvantages, constraints, and implications of choices involving colors, components, styles, and copy. - Figma designer Tammy Taabassum argues that explaining “why” demonstrates product thinking more effectively than simply showing “what” was designed. ## Figma’s Early-Career Opportunities - Figma welcomes interns and new graduates onto its product design team. - Early-career designers are encouraged to contribute actively and bring new ideas rather than merely observe. - The guide is intended to explain what Figma looks for and how aspiring designers can prepare for its interview process. A practical approach is to build a portfolio around a few well-developed case studies, prioritize the work you can explain most clearly, and make your decision-making and learning as visible as the final design.

Read original(opens in new tab)
FigmaUser ExperienceGenerative AIProduct Design+3
figma2 min readCurated summary

A Year With Dev Mode: 10 Lessons From An Engineering Manager | Figma Blog

After a year using Figma Dev Mode at Decathlon, Laurent Thiebault found it transformative for connecting design and development workflows. The biggest improvement came from Code Connect, which links Figma components to real implementation code and helps resolve mismatches in properties, naming, and states. His overall recommendation is to adopt Dev Mode incrementally, using design tokens, advanced inspection, and embedded documentation to build trust and alignment. ## Start Small, Think Big - Developers may resist adding another tool to established workflows, so the team began with small wins rather than a full process overhaul. - Figma variables helped the team improve design-token handoff. - Variable aliasing creates a clear token hierarchy and supports semantic theming. - Variable scoping prevents incorrect usage, such as applying background colors to text or spacing values to corner radii. - Customized code syntax allows token names to match developer conventions across platforms. - Token changes can expose the corresponding implementation changes directly to developers. ## Use Advanced Inspection Capabilities - Dev Mode handles complex layouts, including Flexbox, and generates implementation-ready code. - Teams can inspect CSS, SwiftUI, UIKit, Android XML, and Jetpack Compose properties. - These inspection tools help designers verify that components are implemented according to specifications. - The Figma VS Code extension adds autocompletion and makes it easier to navigate CSS, Compose, and SwiftUI implementations. ## Define What “Done” Means - Keeping design-system documentation current is difficult, and design intent can be lost during handoff. - Dev Mode documentation and annotations keep requirements closer to the designs themselves. - Designers can add free-text explanations, defined values, measurements, alignment details, and sizing guidance. - Developers can be linked directly to relevant annotations for additional context. - The team documents components with links to GitHub source code, README files, and related playgrounds. ## Code Connect as the Central Improvement - Code Connect connects Figma components directly to the components used in production code. - It helps reconcile differences between how components are structured in design files and how they are implemented in code. - The feature improves consistency around component properties, naming conventions, and state management. - Combined with design tokens and inspection tools, it makes Dev Mode a more reliable bridge between design systems and engineering. Teams adopting Dev Mode should start with focused improvements—especially token management and documentation—then expand toward deeper code integration with Code Connect.

Read original(opens in new tab)
Design SystemsDesign TokensSwiftuiFlexbox+4
figma3 min readCurated summary

How Crunchyroll Clarified Confusing Workflows with Dev Mode | Figma Blog

Crunchyroll’s global scale—15 platforms, 12 languages, and many legacy workflows—makes consistent product design difficult. Its Universal Design System helps standardize experiences and improve delivery speed, but outdated processes and fragmented documentation created confusion. Moving handoff and implementation guidance into Dev Mode has made design-to-development collaboration faster, clearer, and easier to maintain. ## Crunchyroll’s Design Complexity - Crunchyroll serves around 15 million fans across: - Web and mobile applications - Smart TVs, game consoles, set-top boxes, and Roku - Nine living-room platforms - Supporting multiple languages and complex licensing requirements increases product complexity. - The company also extends beyond streaming through the Crunchyroll Store and Game Vault. - Its goal is to create a deeply relevant experience for anime fans rather than a generic service for everyone. ## Measuring Design Success - James Hsu defines successful design through two baseline criteria: - It looks good, using sound typography, grids, spacing, and visual hierarchy. - It works well, with clear content, thoughtful interactions, and no frustrating edge cases. - A design can be visually polished but still fail if users become trapped in confusing flows or loops. ## The Role of the Universal Design System - The design system promotes consistency across devices, reducing cognitive load caused by inconsistent fonts, grids, spacing, or responsive behavior. - Reusable components improve team efficiency, much like meal preparation: - Teams can build from existing solutions. - New components can be evaluated based on their cost and value. - Shared patterns speed up product delivery and help product teams validate ideas quickly. - Engineers also benefit from avoiding duplicated implementations, reflecting the “Don’t Repeat Yourself” principle. ## Adapting the Design System to Reality - Crunchyroll uses: - A foundational design layer - Separate component libraries for individual clients - The system still contains many one-off components, numerous variants, and an underdeveloped type system. - The team rejects treating the existing system as an unchangeable process. - The design system should serve current product needs, not constrain teams because of decisions made by previous teams. - Different designers are at different stages of understanding and adopting the system, making education and early investment important. ## Problems with the Previous Workflow - Design and code parity was managed through complicated Jira workflow triggers. - Component changes generated automated alerts, but time-zone dependencies and convoluted processes meant stakeholders often lacked the latest information. - Documentation was split across separate Zeplin projects for iOS, Android, tvOS, and Android TV. - Finding the right flow required invitations, navigating branches, and comparing against outdated designs. - Searching for a specific payment signup flow could take several minutes per artboard, making implementation research slow and frustrating. - Handoff statuses were ambiguous: - Designers submitted work for review. - Reviewers moved it back to “in progress.” - Exported designs were not necessarily final. - Engineers had to rely on labels such as “ready for development.” ## How Dev Mode Improved Handoff - Dev Mode gives engineers direct access to design values and helps them identify the correct component. - Designers now create a dedicated, organized page when work is ready for development. - The page is labeled “ready for development,” and engineers receive a link directly to it. - Engineers no longer need to sift through ideation or outdated explorations. - Faster loading and parsing removed a major pain point from the previous tool. - The team supported adoption through documentation and onboarding workshops for developers. - Crunchyroll is also interested in integrating Code Connect to make its existing design-system code more accessible. Crunchyroll’s experience suggests that a design system is most effective when paired with clear ownership, focused documentation, and a streamlined handoff process. Dev Mode helped replace fragmented legacy workflows with a faster path from approved design to implementation.

Read original(opens in new tab)
FigmaDesign SystemsUser ExperienceDesign To Code+4
figma2 min readCurated summary

The Three Cs of Figma: A Beginner’s Guide to Success | Figma Blog

Figma beginners should focus less on memorizing individual features and more on building practical skills through three stages: creation, customization, and collaboration. The author argues that this framework makes learning more structured and helps users progress from making simple designs to creating reusable resources for their teams. Learning by doing, seeking help, and setting realistic milestones are central to that progression. ## Establishing Goals, Timelines, and Mindset - Define what you want to learn and how Figma fits into your role, whether in design, development, product management, or education. - Suggested milestones: - **30 days:** Learn basic tools, collaboration practices, and file organization. - **60 days:** Pilot projects and identify knowledge gaps. - **90 days:** Add more advanced features to your workflow. - Adopt a hands-on learning approach by experimenting, making mistakes, and rebuilding. - Share work and ask questions through coworkers, Slack, social media, or the Figma Community Forum. - Take breaks and allow time for unfamiliar tools and processes to become natural. ## The Three Cs of Figma - **Creation:** Learn to make a basic design element. - **Customization:** Use advanced features to make the element flexible and reusable. - **Collaboration:** Share the work with teammates and provide components or documentation they can use. - The three stages function like rungs on a ladder: users first create something, then improve its adaptability, and finally make it useful to others. - Figma’s Help Center, YouTube channel, virtual events, and community resources support this learning process. ## Applying the Framework to a Button - A button provides a practical example of the three Cs: - Create a basic button. - Turn it into a reusable component. - Publish it so teammates can use it in their own files. - This approach connects individual feature knowledge to real design workflows and team collaboration. - Figma provides a playground file for practicing the progression. The practical recommendation is to learn Figma through small, complete projects rather than isolated feature tutorials. Build something, make it reusable, and share it with others while progressing at a sustainable pace.

Read original(opens in new tab)
FigmaDesign SystemsPrototypingUser Interface+2