--- title: Figma Config 2026 drops code layers and motion,... description: Figma's Config 2026 keynote was the main event today, announcing code layers on the canvas, a full timeline animation system, shader fills, and a broadly... canonical: https://daily.dev/posts/figma-config-2026-drops-code-layers-and-motion-litert-js-claims-60x-gpu-speedup-over-tensorflow-js-wa8mgxyx6 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Figma Config 2026 drops code layers and motion, LiteRT.js claims 60x GPU speedup over TensorFlow.js | daily.dev og:description: Figma's Config 2026 keynote was the main event today, announcing code layers on the canvas, a full timeline animation system, shader fills, and a broadly... og:url: https://daily.dev/posts/figma-config-2026-drops-code-layers-and-motion-litert-js-claims-60x-gpu-speedup-over-tensorflow-js-wa8mgxyx6 og:image: https://api.daily.dev/og/posts/Wa8MgxYx6.png og:image:alt: Figma Config 2026 drops code layers and motion, LiteRT.js claims 60x GPU speedup over TensorFlow.js og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Figma Config 2026 drops code layers and motion, LiteRT.js claims 60x GPU speedup over TensorFlow.js **[Web Digest](https://daily.dev/sources/webdev_digest)** · 4 min read · 4 upvotes · 0 comments ## Summary Figma's Config 2026 keynote was the main event today, announcing code layers on the canvas, a full timeline animation system, shader fills, and a broadly launched Figma Agent with GitHub and Notion connectors. Google separately released LiteRT.js, a WASM-based ML inference runtime that benchmarks at 3x faster than TensorFlow.js on CPU and up to 60x on GPU/NPU workloads. On the CSS front, a detailed walkthrough shows how CSS Subgrid cleans up the FIFA standings bracket layout that the official site handles with fragmented DOM hacks. AVAL is a new open-source format for interactive web animations with a built-in state machine and packed-alpha transparency, compiling to AV1/VP9/H.265/H.264 codec bundles. ## Content **TLDR:** Figma's Config 2026 keynote was the main event today, announcing code layers on the canvas, a full timeline animation system, shader fills, and a broadly launched Figma Agent with GitHub and Notion connectors. Google separately released LiteRT.js, a WASM-based ML inference runtime that benchmarks at 3x faster than TensorFlow.js on CPU and up to 60x on GPU/NPU workloads. On the CSS front, a detailed walkthrough shows how CSS Subgrid cleans up the FIFA standings bracket layout that the official site handles with fragmented DOM hacks. AVAL is a new open-source format for interactive web animations with a built-in state machine and packed-alpha transparency, compiling to AV1/VP9/H.265/H.264 codec bundles. --- ## Figma Config 2026: code layers, timeline animation, shaders, and a broadly launched agent The Config 2026 keynote landed a lot at once. Code Layers puts your codebase directly on the Figma canvas with GitHub import and multi-codebase comparison — closed beta with July onboarding. Figma Motion is a full keyframe timeline with easing and 3D transform previews, now in open beta. Shaders add custom mesh gradients, lens distortion, and particle effects buildable through the agent. The Figma Agent launched broadly with connectors to Notion, Slack, and GitHub, plus reusable slash-command skills. Weave Tools and Generative Plugins (no-code, agent-built) round out the release, both in open beta. [Read more](https://daily.dev/posts/IPBVXNAS5) ## Google releases LiteRT.js: WASM ML inference claiming 3x CPU and up to 60x GPU speedup over TensorFlow.js LiteRT.js is Google's JavaScript binding for its on-device inference runtime, using optimized native kernels compiled to WebAssembly rather than JavaScript kernels like TensorFlow.js. It supports CPU via XNNPACK with SIMD, GPU via WebGPU, and NPU via WebNN. Google's own benchmarks show 3x faster inference on CPU/GPU and up to 60x on specific GPU/NPU workloads. A demo real-time 3D motion capture app hit 120 FPS on WebGPU versus 38 FPS on CPU. Existing TFLite and PyTorch models port directly, and a future LiteRT LM.js for in-browser LLM inference is already announced. [Read more](https://daily.dev/posts/ngRtpPqPD) ## CSS Subgrid fixes the FIFA standings layout that the official site handles with DOM hacks The FIFA World Cup standings bracket splits related elements into separate DOM nodes just to mirror the visual design — a pattern that makes semantic markup and alignment painful. The proposed fix uses a parent grid with 8 columns and 4 rows, then applies subgrid on nested round elements so start and end match columns share the same grid tracks. Flexbox handles vertical distribution within each column. The result is cleaner markup, proper connector alignment, and a single-column responsive collapse without extra breakpoint logic. [Read more](https://daily.dev/posts/DiDQlh9Rj) ## AVAL: open-source interactive video format with built-in state machine and packed-alpha transparency AVAL is a new format and runtime for short prerendered interactive animations. It compiles to codec bundles (AV1, VP9, H.265, H.264) and ships a custom aval-player web component that picks the best supported codec via ordered source elements. A JavaScript API handles state transitions without any media seeking code. The compiler requires FFmpeg and supports per-codec CRF quality settings. Node.js 22.12+ is required. [Read more](https://daily.dev/posts/JamCPuVsT) --- ## Also notable - **First-party analytics on Cloudflare D1 with a single SQLite events table, no cookie banners:** A practical walkthrough replaces Google Analytics with a flat SQLite events table on Cloudflare D1, using navigator.sendBeacon for client-side tracking, TypeScript-whitelisted event names, and a cookie-stored src parameter for campaign attribution — full data ownership with no third-party scripts. [Read more](https://daily.dev/posts/P5rK4jWPz) - **Dokploy self-hosted PaaS cuts deployment cost from ~$140/month on AWS to ~$40/month on DigitalOcean:** A detailed walkthrough deploys a .NET 10 Web API and two React frontends to a DigitalOcean droplet using Dokploy, with Traefik/Let's Encrypt for SSL, Cloudflare R2 for zero-egress storage, and GitHub Actions for off-droplet builds to avoid 90% CPU spikes. [Read more](https://daily.dev/posts/zFFvxwRUF) - **Standard Schema playground lets you compare Zod, Valibot, ArkType, Effect Schema, and Joi side by side:** A browser-based tool runs schemas from five libraries through the shared ~standard.validate interface, showing issue format differences, JSON Schema projections, and seeded fake data — fully client-side. [Read more](https://daily.dev/posts/h7FEDLKiZ) - **superwhite npm package renders 5000-nit white on HDR displays via a 1 KB embedded HEVC video:** The package embeds a looping 10-bit HEVC video as a data URL to push HDR-capable displays (iPhone, Mac) to peak brightness, falling back to normal white on SDR screens. [Read more](https://daily.dev/posts/EBs4Fealb) ## Similar posts on daily.dev - [Figma adds code layers to the canvas and lets users build custom AI plugins at Config 2026](https://daily.dev/posts/figma-adds-code-layers-to-the-canvas-and-lets-users-build-custom-ai-plugins-at-config-2026-b5lrum3hj) · The Next Web · 0 upvotes · 0 comments - [Config 2026: New materials, new tools and a more expressive canvas](https://daily.dev/posts/config-2026-new-materials-new-tools-and-a-more-expressive-canvas-mtp8laipq) · Figma · 1 upvotes · 0 comments - [Figma adds code layers, support for animations, more AI features in new update](https://daily.dev/posts/figma-adds-code-layers-support-for-animations-more-ai-features-in-new-update-2drvuw2lb) · TechCrunch · 0 upvotes · 0 comments --- Tags: [#webassembly](https://daily.dev/tags/webassembly), [#figma](https://daily.dev/tags/figma) [View this post on daily.dev](https://daily.dev/posts/figma-config-2026-drops-code-layers-and-motion-litert-js-claims-60x-gpu-speedup-over-tensorflow-js-wa8mgxyx6) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/figma-config-2026-drops-code-layers-and-motion-litert-js-claims-60x-gpu-speedup-over-tensorflow-js-wa8mgxyx6","headline":"Figma Config 2026 drops code layers and motion, LiteRT.js claims 60x GPU speedup over TensorFlow.js","text":"Figma's Config 2026 keynote was the main event today, announcing code layers on the canvas, a full timeline animation system, shader fills, and a broadly launched Figma Agent with GitHub and Notion connectors. Google separately released LiteRT.js, a WASM-based ML inference runtime that benchmarks at 3x faster than TensorFlow.js on CPU and up to 60x on GPU/NPU workloads. On the CSS front, a detailed walkthrough shows how CSS Subgrid cleans up the FIFA standings bracket layout that the official site handles with fragmented DOM hacks. AVAL is a new open-source format for interactive web animations with a built-in state machine and packed-alpha transparency, compiling to AV1/VP9/H.265/H.264 codec bundles.","url":"https://daily.dev/posts/figma-config-2026-drops-code-layers-and-motion-litert-js-claims-60x-gpu-speedup-over-tensorflow-js-wa8mgxyx6","datePublished":"2026-07-20T04:19:54.578Z","dateModified":"2026-09-13T21:33:27.447Z","author":{"@type":"Organization","name":"Web Digest","logo":"https://media.daily.dev/image/upload/s--C833eNQW--/f_auto,q_auto/v1773839396/logos/webdev_digest?_a=BAMAMiiu0","url":"https://daily.dev/sources/webdev_digest"},"interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/sources/webdev_digest","name":"Web Digest"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Web Digest","item":"https://daily.dev/sources/webdev_digest"},{"@type":"ListItem","position":3,"name":"Figma Config 2026 drops code layers and motion, LiteRT.js claims 60x GPU speedup over TensorFlow.js"}]} ```