toss·Jun 24, 2026·3 min readCurated summary

es-toolkit: How a Small Internal Library Became a Global Project

es-toolkit began at Toss as a modern alternative to lodash, addressing its outdated architecture, legacy-browser code, lack of native ECMAScript Module support, and inefficient implementations. By removing unnecessary logic and relying on modern browser APIs, es-toolkit achieved 2–10× performance improvements and, in some cases, reduced bundle sizes by more than 30×. Its open-source momentum attracted global contributors, eventually helping it become widely adopted. ## The Beginning of es-toolkit - Toss developers needed dependable utilities such as `throttle`, `debounce`, and `uniq`. - Although lodash was widely used, it had several limitations: - Outdated code structure and implementations. - Defensive logic for legacy browsers such as Internet Explorer. - Little use of native APIs like `Array#map`. - No ECMAScript Modules, making tree-shaking difficult. - `lodash-es` added ESM support but retained much of lodash’s older and inefficient implementation. - Toss’s internal `@toss/utils` library required significant effort to maintain and handle edge cases. - es-toolkit was created to provide a modern, efficient utility library for current web development. - Initial results showed: - At least 2× and sometimes over 10× faster execution. - Bundle-size reductions of more than 30× in some cases. ## Open-Source Adoption and Community Growth - Toss initially announced es-toolkit through its frontend social media channels. - Developers contributed missing functions, bug fixes, and performance improvements. - After gaining attention in Korea, the project was shared on Reddit and received over 100 upvotes and tens of thousands of repository visitors. - International discussions led to coverage in blogs and newsletters. - Community members created bundler plugins and migrated dependencies in established libraries from lodash to es-toolkit. ## From Contributor to Toss Developer - Dayong Lee discovered es-toolkit through Toss’s announcement and began contributing despite not being a Toss employee. - Starting with small pull requests, he gradually became the project’s second-largest contributor. - Code reviews helped him develop stronger skills in: - JavaScript language features. - API and interface design. - Open-source collaboration. - His involvement with es-toolkit eventually contributed to his joining Toss Bank. ## Making Migration Easier with `es-toolkit/compat` - Although the library was becoming more complete, adoption remained slow because many projects depended heavily on older utility libraries. - Migrating individual lodash functions across a large codebase would be tedious and risky. - es-toolkit therefore introduced `es-toolkit/compat`, a drop-in replacement designed to preserve lodash’s interfaces and behavior while modernizing its internal implementation. - This compatibility layer reduced migration effort and allowed projects to gain performance improvements by changing imports rather than rewriting utility usage. - The layer was particularly important because es-toolkit’s streamlined behavior could otherwise differ from lodash in edge cases and cause runtime errors. es-toolkit’s story demonstrates how a focused modernization effort can replace entrenched legacy dependencies. Providing both a faster native-style library and a compatibility layer made adoption more practical while enabling broad open-source participation.

Read original(opens in new tab)

Web DevelopmentJavaScriptEs ToolkitLodash+3

naver·Jun 22, 2026·1 min readCurated summary

Building an Integrated Context Provider for Humans and AI Agents

The content is a minimal NAVER D2 page rather than a substantive technical blog post. It includes a “Hello world” entry and navigation links to D2 News, About D2, NAVER Developers, DEVIEW, OpenSource, and D2 STARTUP FACTORY. No technical argument, explanation, or conclusion is provided. ### Page Navigation - D2 News - About D2 - NAVER Developers - DEVIEW - OpenSource - D2 STARTUP FACTORY ### Footer - Copyright © NAVER Corp. All Rights Reserved. No practical technical recommendation can be derived from the provided content.

Read original(opens in new tab)

Web DevelopmentOpen SourceSoftware Development

figma·May 28, 2026·3 min readCurated summary

4 New Ways to Go From Idea to Product With AI Tools | Figma Blog

AI tools are reshaping product development by enabling teams to prototype, test, and refine ideas earlier and across both code and design. The article argues that working prototypes can expose problems that static mockups miss, while preserving design context throughout the path to production. It illustrates this shift through examples from FloQast, Merkle, Affirm, and Accor. ## AI-enabled product workflows - Product teams are: - Prototyping earlier instead of relying solely on traditional requirements documents. - Testing ideas in code before finalizing designs. - Exploring more possibilities at greater scale. - Carrying design-system context into implementation. - Figma presents these practices as ways to balance faster iteration with deliberate product decisions. ## Testing constraints in code AI coding tools make it easier for non-developers and product teams to build functional prototypes involving: - Multi-step workflows. - Conditional behavior based on user permissions or data. - Actions that trigger subsequent actions. - Realistic backend logic and data relationships. A prototype can then be moved into Figma with Codex to Figma for collaborative exploration and refinement. If implementation work continues in code, teams can move the design back through MCP while retaining the relevant design context. ## FloQast’s complex workflow prototype ### The challenge - FloQast needed to redesign an accounting workflow for investigating discrepancies. - Users previously had to move between multiple pages to: - Find an issue. - Investigate it. - Resolve it. - The team wanted one page where users could see tasks, identify blocked work, and take action. - Because the workflow depended on interconnected steps, real data, and business logic, a static mockup could not fully validate the concept. ### The unlock - UX manager Benjamin Ellis built a working prototype with an AI coding tool. - The prototype included: - A simulated backend. - Realistic data based on an actual customer’s workflows. - Clickable scenarios where completing one task affected the next. - Testing the workflow revealed interactions that appeared sound in a design mockup but failed when subjected to realistic conditions. ### The impact - The team and designer committed to a direction only after testing it against real scenarios. - They identified interaction problems earlier. - The approach reduced later surprises and increased confidence in the final design. ### When this approach is useful - When behavior depends on permissions, data, or sequential actions. - When a small fix is faster to make directly in code. - When designers and developers need a working example to scope a complex experience together. ## Exploring with AI on the canvas The next section introduces using AI directly in the Figma canvas to explore product possibilities. The provided excerpt ends before describing the specific workflow or company example. Teams should use code-backed prototypes when logic and real data are central to the experience, then bring those prototypes into collaborative design tools to refine decisions with greater confidence.

Read original(opens in new tab)

Web DevelopmentFigmaDesign SystemsPrototyping+4

line·Apr 10, 2026·4 min readCurated summary

Clearing Review Bottlenecks with AI - Transforming Review Culture with PR Review Support and Internal Workshops

Orchestration Guild member Fukuyama describes how Yahoo! Places addressed PR review bottlenecks by combining AI assistance with standardized processes and team culture. Reviews had become concentrated among a few engineers, creating delays and forcing a trade-off between speed and quality. The team introduced Claude Code–based screening reviews, then expanded the approach into a broader system for improving PR creation, review accuracy, and continuous improvement. ## PR Review Bottlenecks - In late 2024, review responsibilities were concentrated on the tech lead and one other engineer. - Reviewers were simultaneously implementing features and reviewing code, causing PR queues to grow. - The main problems were: - Authors could not move to their next tasks while waiting for reviews. - Review work consumed most of the day. - Large PRs had to be reviewed quickly, increasing the risk of missed bugs. - This created a single point of failure and exposed the trade-off between thoroughness and development speed. - The launch of a dedicated frontend team in early 2025 provided an opportunity to redesign the review process. ## Introducing AI Screening Reviews - The team first tried having AI summarize PR changes before review. - Although summaries made changes easier to understand, AI did not sufficiently reduce the work of tracing dependencies or identifying hidden problems. - Manually pasting prompts for every review also made the approach inconvenient, so it was abandoned after about two weeks. - The introduction of Claude Code in summer 2025 changed the situation because reusable custom commands eliminated repetitive prompt preparation. - AI screening reviews now perform an initial inspection before a human reviewer makes the final judgment. - This changes the process from “humans inspect everything” to a two-stage model: - AI analyzes the PR, its impact, coding conventions, and possible risks. - A human reviewer validates the analysis and makes the final decision. ## Claude Code Custom Review Commands The custom command requests that Claude Code: - Summarize the PR and its affected areas. - Explain the before-and-after changes for each file. - Check coding and naming conventions. - Investigate dependent files and broader codebase impact. - Identify potential bugs, security issues, performance problems, code smells, and unintended side effects. - Suggest concise, respectful review comments for the author. - Classify comments with labels such as `[must]`, `[want]`, `[imo]`, `[ask]`, `[nits]`, and `[info]`. - Determine whether additional tests are needed based on existing project practices. The command uses GitHub CLI operations such as: - `gh pr view --json title,body,files,url` - `gh pr diff` - `gh pr view --comments` - GitHub API calls for line-level comments - `gh pr checkout` when the relevant branch is not currently checked out The review procedure is deliberately structured: 1. Confirm the review requirements. 2. Understand the PR’s overall purpose and background. 3. Review each changed file in detail. 4. Investigate dependencies across the codebase. 5. Produce a final assessment and suggested comments. The same screening process can help both reviewers and PR authors. Reviewers use it to reduce preparation time and understand impact, while authors can run it before requesting review to fix likely issues in advance. ## Expanding Beyond AI Screening After seeing benefits from screening reviews, the team created a broader improvement framework spanning technology and team culture. It was organized around four connected goals: - Improving efficiency. - Establishing a foundation for review accuracy. - Building review-oriented team culture. - Creating a mechanism for continuous improvement. The approach treats review optimization as an ongoing cycle rather than a one-time tool deployment. ## Automating PR Creation The team also uses AI to reduce the effort required to create PRs. - Git operations such as branch creation, commits, and PR creation are automated. - AI analyzes the commit diff to generate: - A PR title. - A summary of the changes. - Background and motivation. - Other required PR template fields. - Standardized and more complete PR descriptions provide better context for both human reviewers and AI screening. - Improving PR quality at the creation stage also increases the accuracy and consistency of later reviews. ## Practical Recommendation AI should support—not replace—reviewer judgment. Teams should begin by standardizing the review workflow, encode that workflow in reusable AI commands, and measure whether review time, PR waiting time, and review quality improve. Combining AI screening with better PR context, dependency analysis, clear comment conventions, and continuous process refinement offers a more sustainable solution than relying on individual reviewers.

Read original(opens in new tab)

Web DevelopmentAIDatabase DesignClaude Code+4

figma·Feb 26, 2026·2 min readCurated summary

Building Frontend UIs with Codex and Figma | Figma Blog

Figma’s Codex integration creates a two-way workflow between coding and visual design. Using the Figma MCP server, developers can turn Figma designs into implementation context for Codex, then bring running interfaces back into editable Figma files. The result is a faster cycle for building, comparing, refining, and collaborating on frontend experiences. ## Starting an Application from a Design - Developers can select frames or nodes in Figma Design, Figma Make, or FigJam. - They copy a direct selection link by right-clicking a frame and choosing **Copy as → Copy link to selection**. - The link is provided to Codex with an implementation prompt, such as using existing design-system components. - Codex calls the MCP server’s `get_design_context` tool to retrieve: - Layout information - Styles and visual properties - Component details - Other design context needed for code generation - The MCP server supports additional tools and prompts for extracting information from Figma files. ## Bringing Code Back to the Canvas After iterating on the implementation, developers can import the live interface into Figma rather than recreating it manually. - The application must be rendered locally or on a publicly accessible web server. - Codex uses the `generate_figma_design` tool to convert the running UI into editable Figma frames. - Codex guides users through: 1. Creating or selecting a Figma file 2. Choosing a workspace 3. Setting up the application for capture 4. Opening the application in a browser session - The capture toolbar supports: - **Entire screen:** Captures the currently displayed screen - **Select element:** Captures a specific UI component - **Open file:** Opens the resulting Figma design for inspection ## Iterating Between Code and Design Once the interface is in Figma, teams can use the canvas to explore and refine the product. - Add design-system components. - Convert styles, fonts, and colors into variables. - Adjust layouts and add annotations. - Design interactions, empty states, and alternative flows. - Collaborate on multiple visual directions. - Send the refined design back to Codex through the same MCP workflow. The article presents this round trip as a continuous loop: design informs code, code produces a working interface, and the interface returns to Figma for further exploration. This lets teams begin from either a design or an implementation while preserving context and reducing the friction between developers and designers.

Read original(opens in new tab)

Web DevelopmentFigmaDesign SystemsModel Context Protocol+2

daangn·Feb 23, 2026·3 min readCurated summary

Improving the iOS WebView Input Experience for

iOS WebViews can shift the entire page upward when an input receives focus, disrupting users as the virtual keyboard appears. The post describes four progressively refined approaches, ultimately using a single input whose opacity is temporarily set to zero before focus. This avoids iOS’s automatic scroll behavior, though it remains a fragile, version-dependent workaround best reserved for input-critical screens. ## Understanding the iOS WebView Problem - iOS uses two viewport concepts: - **Layout Viewport:** The CSS layout area, which does not shrink when the keyboard opens. - **Visual Viewport:** The area visible to the user, which becomes smaller. - Because the focused input must remain visible above the keyboard, iOS shifts the page upward. - The resulting movement can push important content off-screen, and WebView code cannot fully control this behavior. ## Attempt 1: Restore the Scroll Position - The first approach listened for `visualViewport` `resize` and `scroll` events. - It reduced the wrapper’s height by the keyboard height and called `window.scrollTo(0, 0)`. - This failed because iOS moved the page before the event handler could restore it. - Users saw flickering and shaking as multiple resize events triggered repeated corrections. ## Attempt 2: Follow `offsetTop` - Instead of undoing the movement, the implementation followed it. - `visualViewport.offsetTop` was used to adjust a fixed wrapper’s `top` position. - A short delay was required because iOS updates `offsetTop` asynchronously. - This reduced the visible jump but still caused subtle shaking while the keyboard animated. - Rapidly switching inputs or opening and closing the keyboard made the instability more noticeable. ## Attempt 3: Fake and Real Input Swap - This approach prevented iOS from scrolling to the focused input by focusing a real input positioned off-screen. - A visible, read-only “fake” input received the user’s tap, then focused the hidden real input. - Once the keyboard appeared, the two inputs were swapped so the real input became visible. - The page no longer experienced major upward movement. - However, two inputs required synchronization of values, selection, placeholders, textarea sizing, mentions, and emojis. - Swap timing, keyboard detection, and native bridge dependencies made the implementation increasingly complex. ## Attempt 4: Temporarily Hide the Input with Opacity - The final approach kept only one input. - On `touchstart`, the input’s `opacity` was set to `0` before calling `focus()`. - iOS appeared not to perform its automatic scroll-into-view behavior for an invisible input. - After detecting that the keyboard had opened—using the visual viewport and a keyboard-height threshold—the input’s opacity was restored to `1`. - This preserved the input’s state and avoided synchronization problems. - The technique is still a hack: behavior may change across iOS versions, and it can cause minor timing issues. The recommended compromise is to apply the opacity workaround selectively on pages where writing is central to the experience, rather than across the entire WebView application. It prioritizes uninterrupted user interaction despite the lack of a clean, standard iOS API.

Read original(opens in new tab)

Web DevelopmentUser ExperienceiOSWebview+4

toss·Dec 23, 2025Original article

Creating Always-Up-To (opens in new tab)

Managing complex multi-page onboarding funnels often leads to documentation that quickly becomes decoupled from the actual codebase, creating confusion for developers. To solve this, the Toss team developed an automated system that uses static code analysis to generate funnel flowcharts that are never outdated. By treating the source code as the "Source of Truth," they successfully transformed hard-to-track navigation logic into a synchronized, visual map. ### The Limitations of Manual Documentation * Manual diagrams fail to scale when a funnel contains high-frequency branching, such as the 82 distinct conditions found across 39 onboarding pages. * Traditional documentation becomes obsolete within days of a code change because developers rarely prioritize updating external diagrams during rapid feature iterations. * Complex conditional logic (e.g., branching based on whether a user is a representative or an agent) makes manual flowcharts cluttered and difficult to read. ### Static Analysis via AST * The team chose static analysis over runtime analysis to capture all possible navigation paths simultaneously without the need to execute every branch of the code. * They utilized the `ts-morph` library to parse TypeScript source code into an Abstract Syntax Tree (AST), which represents the code structure in a way the compiler understands. * This method allows for a comprehensive scan of the project to identify every instance of navigation calls like `router.push()` or `router.replace()`. ### Engineering the Navigation Edge Data Structure * A "Navigation Edge" data structure was designed to capture more than just the destination; it includes the navigation method, query parameters, and the exact line number in the source code. * The system records the "context" of a transition by traversing the AST upwards from a navigation call to find the parent `if` statements or ternary operators, effectively documenting the business logic behind the path. * By distinguishing between `push` (which adds to browser history) and `replace` (which does not), the documentation provides insights into the intended user experience and "back button" behavior. ### Tracking Hidden Navigation and Constants * **Custom Hook Analysis:** Since navigation logic is often abstracted into hooks, the tool scans `import` declarations to follow and analyze logic within external hook files. * **Constant Resolution:** Because developers use constants (e.g., `URLS.PAYMENT_METHOD`) rather than raw strings, the system parses the project's constant definition files to map these variables back to their actual URL paths. * **Source Attribution:** The system flags whether a transition originated directly from a page component or an internal hook, making it easier for developers to locate the source of a specific funnel behavior. ### Conclusion For teams managing complex user journeys, automating documentation through static analysis is a powerful way to eliminate technical debt and synchronization errors. By integrating this extraction logic into the development workflow, the codebase remains the definitive reference point while providing stakeholders with a clear, automated visual of the user experience.

Web DevelopmentTypeScriptStatic AnalysisAbstract Syntax Tree+3

figma·Dec 2, 2025·3 min readCurated summary

Double Click: What Does It Mean To Be A Designer In The Age Of AI? | Figma Blog

AI is blurring the boundaries between design, development, and product management, making traditional job titles less stable. Figma argues that titles still matter, however: they communicate expertise, shape expectations, support career development, and contribute to professional identity. As AI changes the tasks within jobs, people may increasingly identify as generalists or combinations of roles rather than occupying a single fixed profession. ## The rise of hybrid roles - Figma reports that **64% of product builders identify with two or more roles**. - AI is taking on increasingly specialized tasks, increasing the value of people who can connect ideas across disciplines. - Designers, developers, and product managers are increasingly working across traditional boundaries. - Jobs can be understood as “bundles of tasks” whose importance changes as technology and industry needs evolve. ## Why titles still matter - Titles provide shorthand for understanding someone’s expertise, responsibilities, and status. - They help establish expectations when people meet or collaborate for the first time. - Professional titles can support career ladders and communicate alignment with the values of an industry. - Research cited from Adam Grant found that allowing employees to choose their own titles improved psychological safety and reduced emotional exhaustion by up to 10% over five weeks. - Professional organizations and certifications reinforce the importance of titles in fields such as architecture, engineering, and medicine. ## Titles evolve with technology - The meaning of “designer” has changed from a focus on physical objects and print to digital products and software. - “Software engineer” emerged in the 1960s as the industry confronted the complexity of building software for increasingly powerful computers. - New technology continually creates, reshapes, and sometimes eliminates roles; “prompt engineer” is presented as a recent example. - During the dot-com era, some professionals combined responsibilities spanning product management, program management, development, and art. ## Roles shape expectations and identity - Titles influence how others perceive a person’s expertise and what work they are expected to perform. - Nikolas Klein describes himself as “a product designer in a PM trenchcoat,” showing how people may retain one identity while operating in another role. - Moving into product management made Klein’s strategic and service-design skills more visible and reduced assumptions that his work centered mainly on visual design. - Developer advocate Jake Albaugh views roles as potentially limiting because their definitions change as expertise grows. - At the same time, adopting the title “software engineer” after working as a web designer gave Albaugh a sense of confidence and recognition. Organizations and individuals will likely need to treat titles as flexible signals rather than rigid boundaries. The most durable professional identity may come from the value someone creates and the connections they make—not from a single fixed job label.

Read original(opens in new tab)

Web DevelopmentFigmaAIProduct Design+3

figma·Jun 16, 2025·2 min readCurated summary

Make your site interactive with code layers | Figma Blog

Figma’s new code layers let designers add custom React-powered interactions directly within Figma Sites. They bridge the gap between static canvas designs and production-like experiences by combining AI-assisted coding, direct code editing, and reusable components. The feature is intended to make advanced interactions—such as drag-and-drop systems, animations, calculators, maps, shaders, and 3D effects—accessible without external developer support. ## Customizing Existing Designs - Code layers extend Figma Sites’ built-in responsive elements and interactions. - Designers can convert an existing element into a code layer through the Figma Make icon in the Design panel. - AI chat can then generate or modify behaviors such as: - Spinning or bouncing animations - Animated counters and text effects - Loan calculators and price estimators - Hover effects, ripples, and color changes - Code layers can be duplicated with **Command D** to create and compare multiple interaction variations. - Example use case: a flower shop could let visitors duplicate, drag, rotate, and layer flower images to create custom bouquets. ## Creating Code Layers from Scratch - Designers can use the Make tool or press **E** to draw a standalone code layer on a blank canvas. - A modal opens for generating the layer through AI prompts or writing code directly. - Suggested prompts and starter components—such as buttons, image galleries, and navigation menus—provide ready-made starting points. - These components can be used as-is or customized to match an existing design. ## Reusable and Extensible Components - Code layers support customizable properties, including strings, numbers, and references to other components. - AI can generate these properties automatically, or users can request specific controls. - A code layer can be converted into a reusable Figma component for use across pages, projects, and team design systems. - Designers can import npm packages such as `motion` and `@react-three/fiber` to add advanced animation, 3D rendering, and other functionality. ## Code Layers Compared with Figma Make - **Figma Make** is suited to building a functional app from a prompt without relying heavily on precise canvas design. - **Code layers in Figma Sites** are designed for adding custom interaction and motion to an existing visual design. - Together, the tools support both prompt-first development and design-first experimentation. Code layers are available to all Figma Sites users, offering a practical way to prototype and publish richer web experiences directly from the Figma canvas.

Read original(opens in new tab)

Web DevelopmentAIPrototypingReact+4

figma·Jun 16, 2025·2 min readCurated summary

Welcoming Payload to the Figma Team | Figma Blog

Figma has welcomed the team behind Payload, an open-source headless CMS and application framework, to strengthen its developer tools and connect design more closely with development. Payload will remain open source, with continued investment and no immediate changes for users. The partnership supports Figma’s broader vision of letting teams design, build, and deploy digital products within a collaborative ecosystem. ## Why Figma Chose Payload - Payload is known for its highly customizable architecture, extensibility, and strong developer experience. - It has become one of the leading open-source projects in its category and is used by several Fortune 100 companies. - Figma was especially impressed by Payload’s active open-source community and its practice of incorporating developer feedback into the product. - Both companies emphasize collaboration, community participation, and continuous improvement. ## What Happens to Payload - Payload will remain an open-source product. - There will be no immediate changes for existing users. - Figma plans to continue investing in the project and improving it. - Figma and Payload users will receive ongoing communication as the combined CMS strategy and product roadmap develop. ## Bridging Design and Development - Figma aims to become a central hub where teams can create and deploy digital products. - Payload’s CMS and framework capabilities can help connect Figma’s design tools with production websites and applications. - As AI accelerates the generation of code and content, controlling deployments and refining user experiences across channels becomes increasingly important. - The partnership is intended to reduce the traditional gap between designers and developers. ## The Broader Context - The announcement follows Figma’s push into web publishing through Figma Sites. - Payload’s flexibility and developer-focused tools could expand what developers can build across Figma’s platforms. - The companies expect their combined teams and communities to create more integrated design, development, and content workflows. Figma’s acquisition of the Payload team is positioned as a long-term investment in collaborative, developer-friendly product creation, while preserving Payload’s open-source identity and existing user experience.

Read original(opens in new tab)

Web DevelopmentFigmaAIOpen Source+4

figma·May 6, 2025·3 min readCurated summary

Publish Your Designs On The Web With Figma Sites | Figma Blog

Figma Sites is an all-in-one tool for designing, building, and publishing responsive websites directly within Figma. It replaces the traditional handoff-heavy workflow with an iterative process that combines design, prototyping, interaction, and production. The product is aimed at both designers and teams with limited development resources, while offering advanced customization through responsive layouts, animations, and upcoming AI-powered features. ## Design and Publish Directly in Figma - Users can create live websites without exporting designs or switching to separate development tools. - The workflow supports portfolios, event websites, landing pages, and other interactive web experiences. - Templates, responsive web elements, and ready-made interactions provide starting points for teams with limited design or development resources. - A planned chat-to-code feature, powered by Figma Make, will let users describe interactions or animations for Figma to generate. - Published design libraries can be connected through the inserts panel, allowing teams to reuse components and styles from their design systems. - Figma also provides common building blocks such as navigation, hero sections, and complete page layouts. ## Responsive Design and Prototyping - Figma Sites automatically adapts layouts, text, and designs across breakpoints. - Multi-edit enables simultaneous changes across multiple screen sizes. - Text styles can define different sizing and spacing for each breakpoint without relying on variables. - Designers can preview a fully responsive site rendered in HTML and CSS before publishing. - The preview supports resizing the browser window, observing layout reflow, and switching between breakpoints. - Interactive previews can be shared with collaborators for feedback. ## Built-In Interactions and Motion Figma Sites includes pre-built effects for creating more dynamic websites, including: - Mouse parallax - Lightboxes - Infinite spinning objects - Draggable elements - Typewriter text - Scrambled text reveals - Marquee, reveal, and scroll-based effects The product also introduces interactions not currently available in Figma Design, such as scroll parallax, scroll transforms, and hover or pressed states that do not require interactive components. ## Future Customization and AI Features - Upcoming code layers will allow designers to create interactive experiences without plugins or external tools. - AI chat will help turn static frames into interactive elements, such as draggable lists or geographically accurate clocks. - Code layers will eventually support reusable components and instances, similar to Figma Design libraries. - These features are intended to let designers create increasingly complex web experiences while staying within the Figma workflow. Figma Sites is best suited to teams that want a direct path from visual design to a published, responsive website. Its templates and built-in interactions simplify production, while code layers and AI features are intended to expand its capabilities for more advanced experiences.

Read original(opens in new tab)

Web DevelopmentAIDesign SystemsPrototyping+4

figma·May 6, 2025·2 min readCurated summary

Config 2025 Launches Deepen Figma's Design Capabilities As Its Platform Expands | Figma Blog

Figma’s Config 2025 announcements expand the platform from collaborative design into a broader product-development environment. New tools combine AI, code, visual design, websites, and marketing workflows, enabling teams to move from ideas to production within Figma. The company’s conclusion is that design and AI can help more people contribute throughout the development lifecycle. ## New Products - **Figma Make** turns written prompts or existing designs into working prototypes and applications. - **Figma Sites** lets designers build and publish dynamic websites with customizable interactions, code, and AI. - **Figma Draw** adds advanced vector editing and illustration tools to Figma Design. - **Figma Buzz** helps brand and marketing teams produce visual assets at scale while preserving brand consistency, with integrated AI features. ## Expanded AI Capabilities - New image-generation and image-editing tools support faster visual exploration. - Contextual auto-suggestions provide workflow guidance and help users work more efficiently. - FigJam receives additional AI features for brainstorming and collaboration. - Together with Figma Make, these tools are intended to make ideas easier to visualize and turn into functional outputs. ## Responsive Design and Developer Handoff - **Grid** introduces responsive layouts that adapt across screen sizes. - Grid can generate CSS code in Dev Mode, improving communication between designers and developers. - The feature supports Figma’s broader effort to connect design work more directly with implementation. ## Figma’s Expanding Platform - The new offerings join Figma Design, FigJam, Dev Mode, and Figma Slides. - About two-thirds of monthly active users in Q4 2024 worked outside traditional design roles, including roughly 30% who identified as developers. - The announcements reflect Figma’s shift from a design tool toward an integrated platform for ideation, design, development, publishing, and marketing. ## Global Growth - Figma announced full localization for Brazil, including Portuguese translation, culturally adapted interfaces, and dedicated language support. - Brazilian support joins existing Japanese, Spanish, and Korean localization. - Approximately 85% of Figma’s monthly active users were outside the United States in Q4 2024, while more than half of its 2024 revenue came from non-U.S. markets. - The company now employs more than 1,600 people worldwide. The new products and features will roll out over the following weeks. Overall, Figma is positioning itself as a unified environment where designers, developers, marketers, and other collaborators can take products from early concepts through launch.

Read original(opens in new tab)

Web DevelopmentFigmaPrototypingGenerative AI+4

figma·Apr 9, 2025·3 min readCurated summary

Finding a Forever Home for FigPals | Figma Blog

FigPals were temporary customizable companions in Figma files, designed to make long hours of creative work feel more playful and social. Inspired by nostalgic virtual pets and toy culture, they quickly became a hit, with users creating emotional connections to their pixel-based friends. Although FigPals will not remain permanently active, Figma is preserving them through sticker packs and other commemorative experiences. ## What FigPals Were - Users could create, customize, and name companions across Figma products. - More than 9,000 combinations were possible, including animals, food, colors, and accessories. - FigPals followed users’ cursors and interacted with other companions in the same file. - Users could pose them in a photobooth and save images as keepsakes. - Easter eggs included feeding pals layers and nodes and surprising them by detaching components. ## Nostalgia and the April Fun Day Launch - FigPals launched on April 1 as part of Figma’s annual April Fun Day tradition. - The concept drew on nostalgia for products such as Pet Rocks, Tamagotchis, Neopets, and Furby commercials. - Figma partnered with Night Shift to create a deliberately zany, vintage-style promotional video. - The goal was to make work feel less lonely and repetitive by giving designers playful companions. ## From Maker Week to FigPals - FigPals evolved from internal Maker Week experiments: - **Figmagotchi** featured Tamagotchi-inspired creatures fed with sticky notes. - **FigPets** introduced pixelated pets that moved around Figma toolbelts. - A small team across engineering, product, and design developed the limited-release version. - The project reflected Figma’s emphasis on experimentation, play, and building enjoyable web experiences. ## The FigPal Frenzy - Users saved more than 1.5 million FigPals within a week. - They fed their companions more than 250,000 times. - Five FigPals were saved as the only examples of their particular model, color, and accessory combination. - One user created and saved 210 pals, while the most popular design—a pink cat with a heart speech bubble—accounted for 13% of saved pals. - Community members became emotionally attached, with some modeling their FigPals after real pets. ## Preserving FigPals Through Stickers - A petition seeking to make FigPals permanent attracted more than 2,000 signatures. - Figma extended the feature by one additional week but ultimately chose not to keep the companions active indefinitely. - Instead, it released FigPal sticker packs so users could continue displaying them in Figma files. - Additional FigPal-related surprises were planned for attendees of Config. Figma’s response shows how a short-lived playful feature can create lasting community engagement. While the interactive FigPals have ended, sticker packs provide a simple way to preserve the experience and keep the characters present in users’ work.

Read original(opens in new tab)

Web DevelopmentFigmaUser ExperienceFigjam+3

figma·Jan 27, 2025·2 min readCurated summary

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

Issue no. 9 of Figma’s blog presents six “memos” about preserving craft, purpose, and creativity amid blurred roles, rapid product cycles, and emerging technology. The collection argues that digital creation should become more personal, emotionally resonant, adaptable, expressive, and inclusive. Rather than prescribing one method, the memos invite teams to question established approaches as they plan for 2025. ## Personalize the Web - Product Designer Chia Amisola argues that the internet has become increasingly standardized as it serves broader audiences. - She calls for a more personal and poetic web, inspired by the resurgence of small, handcrafted websites. - The accompanying essay, “Making space for a handmade web,” suggests that participating in this movement can begin simply by creating a site of your own. ## Build an Emotional Competitive Moat - Head of Insights Andrew Hogan argues that product differentiation cannot rely on features alone. - As software becomes more ubiquitous, emotional resonance can make an app feel distinctive and meaningful. - Teams should treat emotional response as part of product strategy and put “resonance on the roadmap.” ## Leave Room to Depart from the Roadmap - Director of Product Avantika Gomes challenges the idea that successful products must follow a fixed vision or predefined sequence of solutions. - Unexpected changes and discoveries can shape a product as much as its original roadmap. - Teams should avoid becoming overly attached to specific solutions and create room to pivot when circumstances or user needs change. ## Reclaim Creative Coding - Developer Jake Albaugh encourages developers to use the web’s expressive capabilities more fully. - He points to creative coding and the work of Henry Desroches as examples of how code can support experimentation and artistic expression, not just functional interfaces. ## The Value of Generalists - Content Strategist Carly Ayres revisits the discussion around generalists and hybrid roles. - As collaboration increasingly crosses design, development, writing, analysis, and product management, people who operate across disciplines may become especially valuable. ## Expand the Definition of Design - Another memo makes the case for greater inclusivity in design. - It suggests that the industry should reconsider narrow assumptions about who design serves and what design work includes. The collection’s practical message is to build with greater openness: make room for individuality, emotional connection, unexpected direction, creative experimentation, and broader participation. Teams planning new products should treat their process as adaptable rather than predetermined.

Read original(opens in new tab)

Web DevelopmentFigmaUser ExperienceProduct Development+2

figma·Jan 8, 2025·3 min readCurated summary

Six Memos for the Future of Digital Creation | Figma Blog

The article presents six Figma “memos” about the future of digital creation in 2025. Drawing on the tradition of influential workplace memos, it argues that documenting observations, strong opinions, and emerging opportunities can stimulate dialogue and change. The themes range from creative coding and broader definitions of design to emotional differentiation, handmade websites, and generalist careers. ## The Memo as a Tool for Shaping the Future - Figma frames the memo as a concise way to communicate ideas, critique strategy, and encourage organizational change. - The article references influential examples, including Bill Gates’s advocacy for graphical interfaces and Stewart Butterfield’s “We don’t sell saddles here” memo for Slack. - Memos can be strategic, metaphorical, playful, or reflective documents that preserve how thinking develops over time. - Figma’s six contributors use the format to examine trends across design, development, product, writing, analysis, and community work. ## Developers Should Embrace Creative Coding Again - Modern browsers now support capabilities that often exceed those available in conventional design tools. - Developers are encouraged to move beyond templates and standardized production workflows. - The memo calls for renewed experimentation with the web as a creative medium. - Creative coding is presented as a way to explore the browser’s full expressive and interactive potential. ## Expanding the Definition of Design - The second memo argues for a broader understanding of what design encompasses. - Its inclusion reflects the article’s wider focus on how digital creation crosses traditional professional boundaries. ## When to Leave the Product Roadmap - The third memo examines when teams should move beyond planned roadmap work. - It suggests that product development may require responding to unexpected opportunities rather than following predetermined priorities exclusively. ## Emotion as a Competitive Advantage - The fourth memo identifies emotion as an emerging source of competitive differentiation. - As digital products become increasingly similar in function, how they make people feel may matter more to their success. ## Making Space for a Handmade Web - The fifth memo advocates preserving room for distinctive, human-made experiences on the web. - It contrasts this idea with increasingly standardized, templated, and automated digital production. ## The Rise of the Generalist - The final memo focuses on the growing importance of people who work across disciplines. - Its inclusion reinforces the article’s view that future digital creation will depend on collaboration between design, development, product, writing, and other fields. The article’s practical recommendation is implicit: observe emerging patterns, write down strong ideas, and share them. Memos can turn informal workplace thoughts into conversations that influence products, teams, and the broader direction of digital creation.

Read original(opens in new tab)

Web DevelopmentProduct DesignDesign ToolsCreative Coding+2