#design-systems

Typed Polymorphic React Component

Bài viết hướng dẫn cách xây dựng một component React đa hình có kiểu (polymorphic) bằng …

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.

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ý.

Introducing Figma Motion: Your canvas now has a timeline

Figma has launched Figma Motion, a native animation timeline integrated directly into the Figma canvas alongside Design, Draw, and Dev modes. Designers can now keyframe position, scale, rotation, and opacity; apply preset animation styles; and use the Figma AI agent to generate keyframes from text prompts. Motion supports animated components that carry animations across design system files, motion variables for consistent easing and timing, and shader property keyframing. For handoff, Dev Mode exposes the full timeline with copyable CSS, JSON, React, and motion.dev code. Animations are also MCP-compatible for coding agents. Export options include MP4, GIF, SVG, and WEBM. 3D transforms are coming soon. Motion is currently in open beta with tiered access by plan.