Introducing Figma Motion: Your canvas now has a timeline

Locofy.ai: Build frontend 10x faster with design-to-code AI

Locofy.ai là công cụ AI chuyển đổi thiết kế Figma thành code frontend hoàn chỉnh, tập trung vào developer-first với workflow agentic qua CLI, Cursor và Claude Code. Nó đóng vai trò trung gian giữa Figma và các trợ lý coding AI (Cursor/Claude), đảm bảo độ trung thực UI và cấu trúc thiết kế.

Nếu bạn là lập trình viên Frontend muốn tiết kiệm thời gian và đảm bảo tính chính xác của UI từ thiết kế đến mã, Locofy.ai là công cụ AI mới giúp tự động hóa quá trình chuyển đổi từ Figma sang code mà không cần phụ thuộc vào các nhà thiết kế.

Design Systems, Tokens and AI

AI is reshaping how design systems are built and maintained by automating the generation of design token sets from natural language descriptions. Rather than manually defining hundreds of CSS custom property values, teams can describe a desired aesthetic and let AI produce a complete, internally consistent token hierarchy covering global, alias, and component-specific tokens. Progress ThemeBuilder is used as a practical example, demonstrating how AI-generated tokens can be exported as CSS or SASS and consumed directly by component libraries. The token layer acts as a contract between AI tooling and components, enabling mixed workflows where AI-generated baselines are refined with manual overrides. For enterprise teams, this compresses the time between brand decisions and implementation while keeping governance in human hands.

Figma adds code layers, support for animations, more AI features in new update

Figma has announced a major update introducing code layers directly on the collaborative canvas, enabling teams to clone repositories and extract flows from code to design layers. The update also adds native support for animations, transitions, 3D transforms, and shader effects — previously requiring external tools. AI capabilities are expanded with support for generating assets, shader fills, and custom plugins via text prompts. Users can now connect external tools like Notion, GitHub, and Excel to Figma's AI assistant for richer context. Integration with the acquired Weavy node-based workflow tool is also in progress, with in-canvas Weavy workflow generation coming later this year.

Code on the Figma canvas

Figma is introducing 'code layers' in Figma Design, a new feature currently in closed beta that embeds interactive, runnable code directly onto the Figma canvas. Teams can generate code via the Figma agent, import GitHub repos or local folders, and explore multiple code directions side by side. Code layers can be converted back into editable Figma layers and vice versa, enabling fluid movement between design and code. Teammates can comment, prompt, and iterate on the same layer collaboratively. Once finalized, changes can be pushed back to a repository.

Building Your Design System Workflow: Rituals, Templates

Bài viết hướng dẫn xây dựng quy trình hệ thống thiết kế (design system) hiệu quả, bao gồm quy trình đóng góp (RFC templates), cấu trúc review (Design System Council), tiêu chuẩn tài liệu, giao tiếp định kỳ, chiến lược versioning và triển khai theo giai đoạn. Ngoài ra, tác giả cung cấp mẫu cho RFC, nhật ký quyết định, ghi chú phát hành và tài liệu component, đồng thời chia sẻ cách duy trì quy trình mới thông qua visibility, phản hồi nhanh và cải tiến liên tục.

Lập trình viên nên đọc bài này để hiểu cách tối ưu hóa quy trình phát triển ứng dụng thông qua hệ thống thiết kế (design system), từ đó giảm thiểu sự trùng lặp mã và cải thiện tính nhất quán, giúp công việc trở nên hiệu quả hơn khi hợp tác với các chuyên gia thiết kế và quản lý.

Figma’s design agent, now with custom tools and greater context

Figma's design agent is now in open beta with expanded capabilities. Designers can prompt the agent to build reusable generative plugins and WebGPU-powered shader effects and fills directly on the canvas—no developer setup required. New context features let users attach files, reference other Figma files, search the web, and connect external tools via MCP connectors (GitHub, Atlassian, Slack, Linear, Hex). A new Skills system lets teams save and share reusable prompt-based slash commands to codify design philosophies and workflows. Agent conversations are visible to collaborators by default, turning iteration history into a shared resource.

Config 2026: New materials, new tools and a more expressive canvas

Figma's Config 2026 conference introduced several major platform expansions. Code layers let designers treat code as a design material directly on the canvas, with two-way conversion between design and code. Figma Motion adds a full timeline editor with keyframes, presets, and Dev Mode inspection, exportable as CSS, JSON, React, MP4, WebM, SVG, or GIF. Shader fills and effects can now be generated via the Figma agent using text prompts or image references, with parameterized controls. Generative plugins allow teams to build custom tools by describing behavior in natural language, no API knowledge needed. Figma Weave tools bring node-based generative workflows into the main canvas. The Figma agent now supports Skills, Connectors (Notion, Slack, GitHub, Atlassian, etc.), and shared agent chats for team visibility.