gitlabAug 12, 2026

GitLab Patch Release: 19.2.2, 19.1.4, 19.0.6 | GitLab Docs (opens in new tab)

GitLab released patch versions 19.2.2, 19.1.4, and 19.0.6 on August 12, 2026, addressing multiple security and bug issues in CE and EE. The release fixes vulnerabilities involving cross-site scripting, authorization bypasses, privilege escalation, data exposure, and denial of service. Self-managed installations should upgrade immediately; GitLab.com is already patched, and GitLab Dedicated customers need no action. ## Release Scope and Upgrade Guidance - The patches apply to GitLab Community Edition and Enterprise Edition. - GitLab recommends upgrading all affected self-managed installations to the latest patch for their supported release line. - Patch releases may be scheduled or issued ad hoc for critical vulnerabilities. - Security issues are generally disclosed publicly 90 days after the release containing their fixes. - Unless a deployment type is explicitly excluded, omnibus, source, Helm chart, and other installation types are affected. ## Cross-Site Scripting Vulnerabilities - **CVE-2026-15217** affects Analytics Dashboards table field configuration. - Improper neutralization of user-controlled values could allow XSS in table cell content. - CVSS: **8.7**. - **CVE-2026-15216** affects Analytics Dashboards pagination controls. - User-controlled data could be rendered unsafely and enable XSS. - CVSS: **8.7**. - **CVE-2026-16627** affects the CI manual job confirmation modal. - Authenticated developers could potentially escalate privileges through unsanitized HTML. - CVSS: **7.7**. ## Authorization and Privilege Issues - **CVE-2026-15423** affects the CI/CD pipeline API. - Developer-role users could run pipelines on protected branches without the required push permissions. - CVSS: **8.5**. - **CVE-2026-19228** affects the Duo Workflow Service in GitLab EE. - An authenticated user could attribute AI usage to another namespace. - CVSS: **8.5**. - **CVE-2026-16494** affects the EE ProjectsController. - Missing checks could let authenticated users modify project settings reserved for higher-privileged roles. - CVSS: **7.1**. - **CVE-2026-8667** affects the npm distribution-tags endpoint. - Developers could modify certain package registry metadata without maintainer permissions. - CVSS: **4.3**. ## Information Disclosure and API Access - **CVE-2026-6821** affects the EE merge requests API. - Authenticated users could bypass IP-based restrictions and read limited merge request information from private projects. - CVSS: **4.3**. - **CVE-2026-4879** affects the external status check API. - Developers could view status check configuration restricted to higher-privileged roles. - CVSS: **4.3**. ## Denial of Service - **CVE-2026-7427** affects the GraphQL API JSON parser. - Improper input validation could allow unauthenticated attackers to cause a denial of service. - CVSS: **5.3**. Self-managed GitLab administrators should apply 19.2.2, 19.1.4, or 19.0.6 immediately, depending on their release branch, to receive these security fixes.

npmgitlabci-cdgraphql+3

githubJul 28, 2026

Disrupting supply chain attacks on npm and GitHub Actions (opens in new tab)

GitHub describes a layered approach to disrupting npm and GitHub Actions supply-chain attacks, which typically compromise one project, steal credentials, and spread malware across many others. Rather than relying on one defensive feature, GitHub is targeting several links in the attack chain—from initial compromise through credential theft and malicious publishing. Recent protections add account recovery delays, safer workflow defaults, credentialless publishing, network monitoring, and stronger publishing approvals. ## Anatomy of Supply-Chain Attacks - Attacks commonly: - Compromise a maintainer account or CI/CD workflow. - Escalate access by stealing credentials. - Use those credentials to infect additional packages and projects. - GitHub says effective defense requires multiple mitigations that disrupt the most damaging steps in the chain. ## Preventing Initial Compromise - **High-impact npm account protection** - Accounts enter read-only mode for 72 hours after an email change or use of a 2FA recovery code. - The delay gives maintainers time to detect phishing-related account takeover and recover access. - **Safer `pull_request_target` checkout defaults** - `actions/checkout` now prevents commonly exploited workflows from checking out untrusted code from forks by default. - This reduces exposure to “pwn requests,” where fork-provided code executes with workflow privileges. - **Workflow execution policies** - Enterprise, organization, and repository administrators can control who may trigger workflows and which trigger types are permitted. - These policies provide configurable least-privilege controls for Actions. - **Read-only Actions cache for untrusted triggers** - Less-trusted workflows can no longer modify caches shared with more privileged workflows. - This blocks cache poisoning attacks intended to escalate access to release and publishing credentials. ## Limiting Credential Exfiltration - **npm trusted publishing for CircleCI** - CircleCI can now use trusted publishing, allowing packages to be published without long-lived credentials stored in CI/CD. - Removing persistent tokens reduces the value of compromised workflows. - **Actions network firewall** - The technical preview logs outbound network traffic from workflow runs. - This can expose suspicious downloads or credential exfiltration to unfamiliar domains. - Planned restrictions will allow organizations to block unauthorized network destinations. ## Slowing Attack Propagation - **Staged npm publishing** - Publishing credentials alone are insufficient to immediately release a new package version. - Packages remain staged until an additional approval and 2FA authentication occur through npm’s CLI or website. - This opt-in control separates automated publishing credentials from final authorization, giving maintainers a chance to detect malicious releases. Together, these measures reduce the opportunities for attackers to enter projects, obtain powerful credentials, and rapidly publish malware. GitHub’s recommendation is effectively to combine safer workflow configuration, short-lived or trusted authentication, network visibility, and additional publishing approval rather than depending on any single control.

npmci-cdgithub-actionssupply-chain-security+3

tossJun 22, 2026

es-toolkit: How an Internal Little Library Became a Global Library (opens in new tab)

es-toolkit began as Toss’s effort to create a modern alternative to lodash, removing legacy code and optimizing for current JavaScript environments. By focusing on common use cases, it achieved 2–10× faster performance and reductions in bundle size of more than 30×. Community adoption, compatibility tooling, and contributions to major projects eventually pushed it beyond 20 million weekly npm downloads. ## Why es-toolkit Was Created - Developers frequently needed utilities such as `throttle`, `debounce`, and `uniq`, but existing options had drawbacks. - lodash contained legacy implementations, Internet Explorer workarounds, and limited ECMAScript Modules support. - Even `lodash-es` mainly added ESM support without modernizing the underlying code. - Toss had maintained its own `@toss/utils`, but handling utility-function edge cases internally was burdensome. - es-toolkit’s goal was to remove unnecessary logic, improve performance, and produce smaller bundles for modern web applications. ## Performance and Bundle-Size Improvements - Reimplementing core lodash-style functions produced: - At least 2× faster execution for some functions. - More than 10× faster execution for others. - Using modern built-ins such as `Array#map` eliminated compatibility code. - Bundle sizes were reduced by more than 30× in some cases. - The project was designed around the most common use cases rather than every historical edge case supported by lodash. ## Growth Through the Open-Source Community - The first release was shared through Toss’s frontend social channels and quickly attracted users and contributors. - Contributors added missing functions, fixed bugs, and optimized implementations. - After promotion on international developer communities, the project received more than 100 recommendations and tens of thousands of repository visitors. - Blogs and newsletters helped extend its reach. - Community members created migration plugins and independently replaced lodash dependencies in other libraries. ## From Contributor to Maintainer - Toss Bank developer Dayong first joined as an external contributor, submitting small pull requests. - Reviewing and designing interfaces for es-toolkit provided valuable experience with JavaScript and API design. - Continued contributions eventually made her the project’s second-largest contributor and helped lead to her joining Toss Bank. - The project also demonstrated how an open-source initiative can connect contributors across companies and countries. ## Lowering the Migration Barrier with `es-toolkit/compat` - Adoption was initially slow because applications often imported many lodash functions throughout their codebases. - Replacing every import manually would make migration expensive and risky. - es-toolkit’s standard implementations also differed from lodash in some edge cases. - `es-toolkit/compat` was introduced as a drop-in replacement: - It preserves lodash-compatible interfaces and behavior as much as possible. - It modernizes the internal implementations. - Projects can gain performance and bundle-size benefits with minimal code changes. - This helped major projects such as Storybook, Mermaid, Yarn Berry, and Recharts adopt es-toolkit. ## Future Direction - es-toolkit plans to help more JavaScript libraries reduce their bundle sizes and improve efficiency. - It aims to add modern utilities, including: - `filter`-style functions for `Map` and `Set`. - Promise-based helpers such as `delay`. - Server-oriented utilities for Node.js, Deno, and Bun. - New functions such as `exec` are intended to provide essential functionality with smaller implementations than competing libraries. - The project plans to maintain its core principle: optimize for more than 80% of common use cases while remaining small, fast, and high quality. es-toolkit’s success shows that a focused, modern implementation can replace widely used legacy utilities when it combines measurable technical benefits with strong migration support and active community participation.

npmopen-sourcetypescriptjavascript+3

githubApr 10, 2026

GitHub Copilot CLI for Beginners: Getting started with GitHub Copilot CLI (opens in new tab)

GitHub Copilot CLI brings Copilot’s agentic coding capabilities directly into the terminal, allowing developers to inspect projects, generate code, run tests, and correct errors without switching tools. The post introduces the tool, explains installation and authentication, and demonstrates how to use it for project overviews, coding tasks, and delegated work. Its central message is that Copilot CLI can preserve development flow while supporting increasingly autonomous coding workflows. ## What GitHub Copilot CLI Does - Runs Copilot from a command-line interface with context from the current repository. - Can autonomously: - Build or modify code - Run tests - Detect and correct errors - Explore project files and documentation - Lets developers review results and request follow-up changes directly in the terminal. - Can delegate well-defined tasks to the Copilot cloud agent. ## Installing Copilot CLI - The primary cross-platform installation method, assuming Node.js is available, is: ```bash npm install -g @github/copilot ``` - Users can also install it through package managers such as Homebrew or WinGet. ## First-Time Setup - Launch the tool by entering `Copilot` in the terminal. - Authenticate with GitHub using: ```plaintext /login ``` - Authentication connects the CLI to the user’s Copilot account and the read-only GitHub MCP server. - Copilot must be granted permission to access the current folder so it can inspect or modify files. - Folder permissions can apply only to the current session or be saved for future sessions. ## Common Development Tasks - **Understand an existing project** - Prompt Copilot with: ```plaintext Give me an overview of this project ``` - It examines important files and summarizes the project structure and purpose. - **Generate new code** - For example: ```plaintext Let’s add a new endpoint to return all categories ``` - Copilot reviews existing conventions, documentation, and examples before proposing or creating files. - It requests permission before making changes. - **Delegate work to the cloud agent** - A task can be sent using: ```plaintext /delegate Let’s deal with issue #14 to add the rest of the CRUD endpoints to games ``` - The cloud agent retains the current context, creates a branch, opens a draft pull request, and performs the work in the background for later review. ## What Comes Next The broader beginner series will cover interactive mode, non-interactive mode using the `-p` flag, slash commands, and MCP server integration. These features expand Copilot CLI from an interactive coding assistant into a flexible terminal-based automation tool. Copilot CLI is recommended for developers who want AI assistance without leaving the shell: install it with npm, authenticate, grant project permissions, and begin with exploratory prompts before assigning code changes or delegated tasks.

npmmcpgithub-copilot-clinode.js+3

figmaApr 2, 2026

Build With More Context and More Control in Figma Make | Figma Blog (opens in new tab)

Figma’s Make kits and Make attachments add structured context to AI-generated prototypes, helping them start closer to production reality. Make kits provide design-system guidance through code packages, libraries, styles, and tokens, while attachments bring in project-specific data and requirements. Together, they reduce cleanup and make generated designs more consistent with how products are actually built. ## Make Kits Teach Make About the Design System - Make kits are reusable packages that combine components or styles with guidelines explaining how they should be used. - They can use: - JavaScript components from public npm packages - Packages from Figma’s secure private registry - Styles and design tokens from Figma libraries - Guidelines tell Make not only which components exist, but also how to apply them. - Instead of starting with generic UI and repeatedly correcting spacing, patterns, and components, Make can begin with production-aligned structures. - This helps: - Maintain consistency across forms, dashboards, settings, and onboarding - Let teams generate work in parallel without drifting from the design system - Reduce preparation and correction before review - Engineers can more easily recognize familiar components and focus on evaluating the proposal rather than translating it into their system. - Figma plans to expand kits to represent more design-system structure, including component structures from Figma libraries. ## Make Attachments Ground Prototypes in Project Context - Design systems do not capture every project-specific constraint, such as: - Real data - Migration requirements - Edge cases - Compliance rules - Legal copy and content - Make attachments allow users to provide source material directly instead of describing everything in a long prompt. - Supported materials include: - PDFs and Markdown files - CSV and JSON datasets - Screenshots and images - Brand guidelines - Legal copy - Media and SVG files - Code and other project assets - Attachments help Make create prototypes that reflect actual data, validation states, content, and requirements rather than producing an idealized version that omits complexity. - For example, an onboarding flow can be grounded in real user data, complete legal requirements, and multiple validation states instead of shortened copy and simplified edge cases. ## A More Production-Aligned Starting Point - Make kits provide the reusable design and code foundation. - Attachments add the details and constraints unique to a specific project. - The combination is intended to shorten the distance between an AI-generated prototype and a shippable product, allowing teams to spend less time rewriting and more time refining the experience.

npmdesign-systemsreactjavascript+3

githubApr 1, 2026

Securing the open source supply chain across GitHub (opens in new tab)

Attackers increasingly target GitHub Actions workflows to steal secrets, publish malicious packages, and spread into additional projects. GitHub recommends reducing credential exposure, hardening workflows, and using automated tools such as CodeQL and Dependabot. It is also expanding trusted publishing, malware detection, and GitHub Actions security improvements in response to campaigns such as Shai-Hulud. ## How attacks begin - Many supply-chain attacks start by exploiting insecure GitHub Actions workflows. - Stolen API keys and other secrets can let attackers publish packages from their own machines. - Malicious packages can then compromise downstream projects and propagate the attack. ## Securing GitHub Actions today - Enable CodeQL’s GitHub Actions queries, which are free for public repositories, to identify workflow security weaknesses. - Avoid triggering workflows with `pull_request_target`. - Pin third-party Actions to full-length commit SHAs. - Updates should be made by maintainers or Dependabot. - Treat pull requests that change pinned Actions with suspicion. - Protect workflows against script injection when using pull-request or other user-submitted content. - Monitor GitHub’s Advisory Database and use Dependabot malware alerts to detect compromised or vulnerable dependencies. ## Replacing secrets with trusted publishing - GitHub recommends using short-lived OpenID Connect tokens containing a workflow’s workload identity instead of storing long-lived secrets. - Cloud providers, package registries, and hosted services can use these tokens to authorize workflow activity. - Through collaboration with OpenSSF, trusted publishing is supported by npm, PyPI, NuGet, RubyGems, Crates, and other registries. - Trusted publishing both removes credentials from build pipelines and provides a signal when a package unexpectedly switches away from it. ## Detecting malicious packages - npm publishes more than 30,000 packages daily and scans every package version for malware. - Hundreds of newly published packages contain malicious code each day. - Human review confirms detections before action is taken, helping avoid disrupting legitimate maintainers. - Even a 1% false-positive rate would affect hundreds of valid package releases daily at npm’s scale. ## GitHub’s upcoming security work - Attacks such as Shai-Hulud accelerated npm’s security roadmap. - GitHub is expanding trusted publishing, malware detection and removal, and collaboration with maintainers. - The company is also revisiting and accelerating its GitHub Actions security roadmap. - New protections may require workflow changes or create compatibility concerns, so GitHub aims to make the transition gradual and solicits community feedback. Projects should audit their Actions workflows immediately, eliminate long-lived publishing credentials where possible, pin dependencies, and enable CodeQL and Dependabot. Adopting trusted publishing provides both stronger protection and useful evidence for identifying suspicious package releases.

npmgithub-actionssupply-chain-securitycodeql+3

tossApr 1, 2026

97% Smaller, 2x Faster: How es-toolkit Reached 10 Million Weekly Downloads (opens in new tab)

es-toolkit is a modern, TypeScript-first JavaScript utility library designed as a faster and smaller alternative to lodash. Built around ES Modules and independent functions, it can reduce bundle sizes by up to 97% and improve runtime performance by more than 2x. Its `es-toolkit/compat` package provides a 100% lodash-compatible migration path with little or no code changes. ## Why es-toolkit was created - Toss’s frontend team saw an opportunity to modernize the utility-library ecosystem. - lodash was designed before ES Modules, advanced JavaScript engines, TypeScript, and bundle size became central concerns. - es-toolkit was built from scratch with: - Native ES Module support - Tree-shaking-friendly independent functions - Built-in TypeScript definitions - Modern runtime optimizations ## Bundle size and runtime performance - lodash-es can include internal helper dependencies even when importing a single function. - es-toolkit functions are designed to be independent, avoiding hidden dependencies. - A sample set of five functions—`groupBy`, `keyBy`, `pick`, `omit`, and `debounce`—adds roughly: - 30 KB with lodash-es - 1 KB with es-toolkit - The library reports up to 97% smaller bundles and more than 2x faster execution. - Specific benchmarks include: - `sample`: approximately 2,000 bytes in lodash versus 88 bytes in es-toolkit - `omit`: approximately 11.8x faster at runtime ## Adoption and ecosystem support - es-toolkit surpassed 10 million weekly npm downloads within 18 months. - It has been adopted by Microsoft, Yarn, Storybook, IBM, Recharts, Ink, and Dify. - The article emphasizes that adoption came through independent evaluations and benchmarks rather than major promotional campaigns. ## Migration from lodash - Most imports can be changed directly: ```ts import { pick } from 'es-toolkit'; ``` - `es-toolkit/compat` provides a drop-in lodash replacement with full compatibility, validated against lodash’s test suite. - Existing projects can redirect the `lodash` dependency without changing source code: ```json { "dependencies": { "lodash": "npm:es-toolkit@^1.44.0" } } ``` - Teams can later migrate from compatibility imports to native es-toolkit imports for additional bundle and performance benefits. - An official `@es-toolkit/codemod` tool is available to automate migration. ## TypeScript and maintenance - Type definitions are shipped alongside the implementation and are kept synchronized. - This avoids the version mismatches and inaccuracies possible with lodash’s separately maintained `@types/lodash` package. - The project is actively maintained, with regular additions and responsive issue and pull-request handling. ## Project direction - es-toolkit is part of Toss’s broader open-source initiative. - Related projects include: - `overlay-kit` for Promise-based React overlays - `use-funnel` for type-safe multi-step flows - `suspensive` for React Suspense primitives - The library is MIT licensed and installable with `npm install es-toolkit`. For most lodash users, the recommended approach is to start with the compatibility alias for an immediate, low-risk upgrade, then progressively adopt native es-toolkit imports to maximize bundle-size and performance improvements.

npmtypescriptes-toolkitlodash+4

githubMar 19, 2026

How Squad runs coordinated AI agents inside your repository (opens in new tab)

Squad is an open-source GitHub Copilot project that places a preconfigured team of AI agents directly inside a repository. Rather than relying on a single chatbot or complex orchestration infrastructure, it coordinates specialized agents for design, implementation, testing, documentation, and review. Its core argument is that repository-native, versioned context makes multi-agent development more accessible, inspectable, and resilient. ## Coordinating Specialized Agents - Install Squad with `npm install -g @bradygaster/squad-cli`, then run `squad init` in a repository. - The setup creates roles such as lead, frontend developer, backend developer, tester, and documentation specialist. - A coordinator interprets natural-language requests, loads repository context, and assigns work to specialists. - Agents can work in parallel, create files and branches, write tests, and open pull requests. - They use shared decisions and project history rather than requiring every detail to be repeated in prompts. - Testing and review happen within the workflow: - Testers evaluate implementations and reject failing code. - A rejected author is prevented from revising its own work. - Another agent must address the problems, providing a more independent review. - Developers still answer questions, correct assumptions, and review and merge pull requests; Squad is collaborative orchestration rather than full autonomy. ## Repository-Based Shared Memory - Squad uses a “drop-box” model instead of depending on live chat synchronization or complex vector databases. - Architectural decisions, library choices, and conventions are appended to a versioned `decisions.md` file. - This creates: - Persistent shared knowledge - An understandable audit trail - Recovery after disconnects or restarts - Memory that can be reviewed and changed like code ## Replicating Context Across Agents - The coordinator remains a thin router instead of attempting to manage all implementation work. - Each specialist runs in its own inference call with an independent context window. - This replicates relevant repository context across agents rather than splitting one limited context among multiple roles. - Parallel, independent contexts reduce the risk that project-management instructions and other agents’ reasoning crowd out the actual coding task. - Supported models may provide context windows of up to 200,000 tokens. ## Versioned Agent Identities and History - Each agent’s behavior is primarily defined by repository files: - A charter describing its role and responsibilities - A history recording previous work - Shared team decisions - These files live in `.squad/` alongside the application code. - Cloning a repository also restores the team’s accumulated knowledge, making the agents effectively pre-onboarded. - Keeping memory in plain text makes it inspectable, versioned, and independent of hidden model state. ## Lowering the Barrier to Multi-Agent Development Squad’s main goal is to make agentic workflows practical without requiring users to build orchestration layers, configure databases, or master advanced prompt engineering. Its repository-native design favors simple setup, transparent memory, independent review, and recoverable project context. Developers interested in this approach can install Squad and experiment with it directly in the project repository.

npmai-agentgithub-copilotprompt-engineering+4

gitlabFeb 19, 2026

GitLab Threat Intelligence Team reveals North Korean tradecraft (opens in new tab)

The GitLab Threat Intelligence Team has detailed its efforts to disrupt North Korean (DPRK) cyber campaigns, specifically focusing on "Contagious Interview" malware distribution and fraudulent IT worker schemes. By analyzing internal platform data, GitLab identified that these state-sponsored actors leverage legitimate tools and fake recruitment scenarios to compromise software developers and generate illicit revenue for the regime. The report concludes that while these operations are sophisticated and persistent, proactive monitoring and cross-industry intelligence sharing are essential to mitigating these evolving threats. ### Contagious Interview Mechanics * Threat actors pose as recruiters to trick software developers into executing malicious JavaScript projects under the guise of technical interviews. * The primary goal is to deploy malware families such as BeaverTail and Ottercookie, which facilitate credential theft and provide remote control of the victim's device. * A notable evolution in tradecraft includes the use of "ClickFix," a compiled BeaverTail variant identified in late 2025. * Malicious repositories often use a specific execution pattern where base64-encoded URLs and secret headers are hidden within `.env` files, masquerading as benign configuration variables. * To execute the payload, actors utilize `Function.constructor` to load strings as executable code, often triggered by custom error handlers designed to source remote content. ### 2025 Campaign Trends and Infrastructure * GitLab banned 131 unique accounts linked to these campaigns in 2025, with activity peaking in September and averaging 11 bans per month. * Nearly 90% of malicious accounts were created using Gmail addresses, and actors typically accessed the platform through consumer VPNs or dedicated VPS infrastructure. * In more than 80% of cases, malware payloads were not stored on GitLab. Instead, actors used concealed loaders to fetch content from legitimate hosting services, most commonly Vercel. * Recent tactics include the creation of malicious NPM dependencies immediately before use and the exploitation of VS Code tasks to pipe remote content into native shells. ### IT Worker Campaigns and Sanctions Evasion * Beyond malware distribution, DPRK actors use GitLab to support "IT worker" cells that generate revenue and evade international sanctions. * One identified pipeline involved the creation of at least 135 synthetic identities, automated to generate professional connections and contact leads at scale. * Threat actors have been observed adding their own images to stolen U.S. identity documents to bypass employment verification processes. * Forensic analysis revealed financial records from cell managers detailing revenue proceeds from 2022 through 2025, often earned while operating from locations like Moscow, Russia. Organizations should remain vigilant against recruitment-themed social engineering and scrutinize unexpected requests to run external code. GitLab recommends that the security community use the provided indicators of compromise to update defensive posture, as these actors continue to refine their ability to hide malicious intent within legitimate development workflows.

npmdatabase-designgitlabjavascript+3

figmaNov 17, 2025

Gemini 3 Is Now Available In Figma Make | Figma Blog (opens in new tab)

Figma has made Gemini 3 Pro available as an experimental model in Figma Make, positioning it as a tool for turning design ideas into polished, interactive prototypes. Early tests suggest it is particularly strong at exploring varied visual styles, layouts, motion, and interaction patterns while preserving functional fidelity. Figma’s broader conclusion is that AI expands designers’ creative range rather than replacing their role in directing and refining ideas. ## Bridging the Design-to-Code Leap - Gemini 3 Pro was tested on a Thanksgiving gratitude board designed in Figma Design. - It generated animated SVG leaves with on-screen physics, creating a calm, organic motion. - A Supabase connection allowed visitors to submit gratitude notes. - New notes appeared as leaves that revealed their messages on hover. - The example demonstrated how a visual concept could quickly become a functional, code-backed experience. ## Exploring Distinct Visual Styles - A New Year’s Eve RSVP page was used to test Gemini’s stylistic flexibility. - The model first created a Y2K-inspired design with: - Retro-futuristic visuals - Dark chrome styling - A functioning RSVP form - It then transformed the same experience into a “concrete poetry” treatment featuring: - Severe typography - Brutalist tension - Minimal decoration - Gemini maintained the core interaction and form functionality across both radically different aesthetics. - Motion and interactive details were adapted to match each visual direction. ## Working Within Design Systems - Figma tested Gemini 3 Pro in a mature UI environment using Make kits, npm imports, and Figma’s UI3 library. - Starting with a FigJam template, the team asked it to add a canvas background-style switcher. - Gemini produced 12 background styles using the correct UI3 components and functional interactions. - It also added unexpected refinements, including: - Animated transitions between textures - Sticky-note layering - Scaling effects - The result showed that the model could extend an existing design system rather than only generate isolated concepts. ## A Wider Canvas for Design - Figma argues that AI can increase the range of ideas designers are able to explore. - Gemini 3 Pro combines rapid iteration with visual and interaction fluency. - Gemini 3 Flash is also available as a faster, lighter option for quick ideation and refinements. - Both models can be enabled through Figma’s settings under the experimental models section, marked by the lab icon. Overall, Figma presents Gemini 3 Pro as a practical bridge between design, code, and experimentation. It is most valuable when designers use it to explore possibilities quickly while continuing to guide the creative direction and quality of the final result.

npmaidesign-systemsfigjam+4

figmaJun 16, 2025

Make your site interactive with code layers | Figma Blog (opens in new tab)

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.

npmaiprototypingreact+4

figmaApr 15, 2024

The Right Code for Your Design System | Figma Blog (opens in new tab)

Code Connect is Figma’s beta tool for improving design system adoption by connecting design mockups directly to production code. It replaces generic, auto-generated CSS snippets in Dev Mode with an organization’s actual component code, documentation, and usage guidance. Figma argues this can help developers build faster, use components correctly, and avoid creating duplicate one-off solutions. ## The Design System Adoption Problem - Design systems create a shared language between designers and developers. - Figma has already improved the design-to-code connection through: - Auto layout - Variables - Component properties - Dev Mode - A persistent challenge is adoption: - Developers may not know everything a design system contains. - Components and patterns may be used incorrectly. - Teams may create and maintain redundant custom components. - A design system succeeds only when it is used consistently and according to its intended guidelines. ## Code Connect’s Approach - Code Connect lets teams customize the code snippets shown in Figma Dev Mode. - Developers see real design system code rather than automatically generated CSS. - The feature is intended to: - Speed up implementation - Increase design system adoption - Encourage consistent component usage - Reduce duplicated, one-off components ## Connecting Design and Code - Design and development traditionally use different tools and optimize for different goals: - Designers focus on exploration and deciding what to build. - Developers focus on structure, implementation, and maintainability. - Figma presents Code Connect as another step toward allowing both disciplines to move smoothly between creative exploration and systematic implementation. - The tool is designed to address the broader disconnect between design workflows and coding workflows, rather than merely changing individual developer habits. ## Meeting Developers Where They Work - Code Connect is distributed through familiar development ecosystems: - npm for JavaScript and TypeScript projects - Swift Package Manager for SwiftUI projects - Setup instructions and the package are available on GitHub. - Developers can install and configure it through a command-line workflow. - Figma plans to add support for more platforms. - Once installed, design system teams can attach best practices and documentation directly to components and mockups, reducing the need for developers to search through separate documentation or code repositories. Code Connect’s practical recommendation is to bring production-ready component code and guidance into the developer’s existing design-inspection workflow, making the approved design system implementation the easiest option to use.

npmfigmadesign-systemstypescript+4