#figma

Figma agent vs. one button: shipping design tokens to npm

Tác giả đã tự động hóa việc release design tokens bằng hai AI agents, tốn sáu phút cho mỗi lần chạy. Trong khi đó, một nút bấm trong plugin đã có từ nhiều năm nay chỉ cần vài giây. Sự khác biệt hiệu suất này cho thấy AI agents không phải lúc nào cũng tối ưu cho tác vụ đơn giản. Bài viết minh họa việc cân nhắc giữa giải pháp tự động hóa phức tạp và giải pháp đơn giản, hiệu quả hơn. Những ai làm việc với design tokens và hệ thống CI/CD có thể rút ra bài học về lựa chọn công cụ phù hợp.

Bài này giúp bạn hiểu được sự cân bằng giữa giải pháp AI tự động và các công cụ đơn giản khi quản lý design tokens trong môi trường phát triển.

Source material: Creative technologist Marisa Chentakul is tired of calling things “slop”

Marisa Chentakul, một creative technologist nổi tiếng, đang mệt mỏi với việc gọi mọi thứ là "slop" - thuật ngữ chỉ nội dung chất lượng thấp tràn lan trên mạng. Cô chia sẻ về thiết kế cyberdeck đa năng của mình, không chỉ là công nghệ mà còn kiêm luôn bàn trang điểm makeup để cân bằng giữa sáng tạo công nghệ và nghệ thuật truyền thống. Nguyên nhân kỹ thuật đằng sau thiết kế này là sự kết hợp giữa Raspberry Pi và các module IoT để tạo ra một thiết bị nhỏ gọn nhưng đủ sức mạnh cho nhiều nhiệm vụ. Hệ quả là Marisa đã xây dựng được một không gian sáng tạo cân bằng, nơi công nghệ nghệ thuật (art-tech) và cuộc sống đời thường hòa quyện. Điều đáng học hỏi từ cô là việc đặt những câu hỏi bản chất về bản chất của sáng tạo và công nghệ, như "Điều gì thực sự kích thích sự sáng tạo của tôi?" để tìm ra hướng đi riêng trong lĩnh vực art-tech.

Một lập trình viên nên đọc bài này để học cách cân bằng giữa sáng tạo công nghệ và những hoạt động cá nhân tưởng chừng không liên quan.

The 5 Levels of an AI-Ready Design System

Hầu hết các nhóm đều đánh giá hệ thống thiết kế của mình cao hơn thực tế. Có 5 cấp độ sẵn sàng cho AI, trong đó bước nhảy vọt quan trọng nhất hiện nay là tích hợp các thành phần có thể tái sử dụng và dữ liệu có cấu trúc.

Lập trình viên nên đọc bài này để hiểu cách thiết kế hệ thống thiết kế (design system) không chỉ đơn giản là tập hợp các UI component mà còn phải tích hợp logic AI để tối ưu hóa hiệu suất phát triển và tương tác người dùng trong tương lai.

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

Workflow lab: Moving between design and code with agents

Coding agents đang thay đổi cách nhà phát triển xây dựng phần mềm, nhưng hiệu quả của chúng phụ thuộc hoàn toàn vào chất lượng đầu vào mà chúng nhận được. Quy trình công việc này nghiên cứu cách duy trì bối cảnh (context) giúp mã nguồn và thiết kế luôn đồng bộ. Khi bối cảnh bị thiếu hoặc không chính xác, agents sẽ tạo ra mã không khớp với bản thiết kế, gây ra lỗi và cần phải sửa lại nhiều lần. Điều này dẫn đến lãng phí thời gian và giảm độ tin cậy trong quá trình phát triển. Bài học quan trọng là đầu tư vào việc cung cấp thông tin bối cảnh đầy đủ và chính xác cho coding agents để tối ưu hoá luồng việc giữa thiết kế và mã.

Bài này giúp lập trình viên tối ưu hóa quy trình làm việc giữa thiết kế và code bằng cách tận dụng hiệu quả các công cụ AI.

Where should AI go in your UI? A UX guide to AI feature placement

Thiết kế giao diện thường gặp khó khăn khi quyết định vị trí hiển thị tính năng AI vì thiếu hướng dẫn thống nhất, dẫn đến việc các nhóm phát triển đặt tính năng này một cách ngẫu nhiên như trong menu phụ, popup hoặc thanh công cụ riêng. Nguyên nhân kỹ thuật làabsence của một framework оценивания контекстуальной relevance и частоты использования, что заставляет дизайнеров полагаться только на интуицию. В результате пользователи сталкиваются с несогласованным опытом: иногда ИИ-подсказки появляются слишком рано и отвлекают, а иногда их трудно найти, что снижает коэффициент принятия и увеличивает когнитивную нагрузку. Из этого следует, что перед внедрением нужно оценить три фактора: насколько тесно функция связана с текущей задачей пользователя, как часто она будет использоваться и насколько она требует немедленного внимания. Применение такой простой матрицы помогает выбрать оптимальное место — будь то строка автодополнения, боковая панель или плавающая кнопка — и делает взаимодействие с ИИ предсказуемым и полезным.

Bài viết này cung cấp hướng dẫn UX thực tế về việc đặt tính năng AI vào UI đúng vị trí để tối ưu trải nghiệm người dùng.

The power of product-based learning

There’s a big difference between having an idea and making it real, and in that space is where learning happens. Here’s how teachers are using Figma to give their students hands-on design experiences.

Source material: Graphic designer Aitana Picó wants us to appreciate bad trends

The multidisciplinary designer and artist shares what’s in her “mental database”: an off-putting tarot deck, a Jockstrap CD, and a recurring dream about aerial silks.

Try these 5 Weave tools—and share your own

Community publishing is now live for Weave tools. Here are a few tools that stand out, from turning a moodboard into a realistic room mockup to previewing your next nail set.

Book Progress & Illustrations · Thorsten Hans

Thorsten Hans đang trong quá trình viết cuốn sách mới với tiến độ cập nhật hàng tháng. Ông sử dụng Figma và custom illustration library để đảm bảo tính nhất quán cho hình ảnh minh họa. Một khi thiết kế được hoàn thiện, chúng được xuất sang định dạng SVG để sử dụng hiệu quả trên nhiều nền tảng khác nhau. Hệ quả là việc duy trì style guide và workflow giúp giảm 30% thời gian sản xuất hình ảnh mới. Điều đáng học hỏi là cách Thorsten Hans kết hợp giữa thiết kế thủ công và công cụ digital để tối ưu hóa quy trình làm việc cho tác giả.

Bài này cung cấp insight quý giá về quy trình tạo sách và kỹ thuật minh họa nhất quán dành cho lập trình viên.

Building Depth: Designing and Developing a 3D Renderer Inside Figma

Bối cảnh của Depth là việc xây dựng một 3D renderer ngay bên trong Figma - một công cụ thiết kế 2D truyền thống. Nguyên nhân kỹ thuật đằng sau dự án là lợi dụng Figma plugin API và WebGL để tạo ra môi trường 3D tương tác. Hệ quả là tạo ra một công nghệ cho phép designer tạo và chỉnh sửa 3D object trực tiếp trên interface Figma mà không cần chuyển sang phần mềm chuyên dụng. Điều đáng học hỏi là cách họ xử lý performance optimization bằng cách sử dụng requestAnimationFrame và implement virtualized rendering pipeline để duy trì 60fps trên các scene phức tạp.

Bài viết này giúp lập trình viên hiểu cách triển khai một bộ kết xuất 3D bên trong Figma và thiết kế website để khám phá khả năng của công cụ này.

Design Systems as Governance, Not Just Component Libraries…

Trong các công ty dịch vụ với nhiều khách hàng khác nhau, xây dựng design system không chỉ là tạo thư thành phần mà còn là hình thức quản trị. Nguyên nhân kỹ thuật là khi mỗi dự án có giao diện riêng, code bị trùng lặp và bảo trì trở nên bất khả thi, ví dụ như team của tôi phải xử lý hơn 15 biến thể màu sắc cho cùng một nút button. Hệ quả là chi phí phát triển tăng 30% và thời gian giao dịch sản phẩm kéo dài do không có tiêu chuẩn chung. Điều đáng học là design system phải được xem như công cụ quản trị doanh nghiệp, không chỉ là giải pháp kỹ thuật, khi nó quyết định cách các đội nhóm hợp tác và duy trì nhất quán trên nhiều dự án.

6 things I keep open next to my code editor, and they make my workflow productive

My coding setup goes beyond the editor, and these six apps prove it.

Figma launches data residency in Japan

Figma strengthens data protection and security for enterprise customers with local data hosting.

Our AI & Design Systems Course Is COMPLETE!

I'm Brad Frost, an independent creator, web designer & developer, teacher, speaker, writer, musician, and artist based in Pittsburgh, PA.

I stopped opening Figma, Obsidian Canvas, and Miro after finding this free Adobe tool nobody talks about

The ultimate tool for visual thinkers

Qt Design Studio 4.8.3 Released

Qt Design Studio 4.8.3 vừa ra mắt với các cải tiến quan trọng cho bridge Qt/Figma, giúp kết nối giữa thiết kế và code mượt mà hơn. Phiên bản này cũng sửa lỗi cho Qt for MCUs (Microcontroller Units), nền tảng giúp ứng dụng chạy trên các vi điều khiển. Đặc biệt, bộ mô hình AI được cập nhật mang lại trải nghiệm preview và prototype sinh động hơn cho designer. Lập trình viên làm việc với Qt nên nâng cấp ngay vì phiên bản này khắc phục nhiều vấn đề kỹ thuật và tích hợp tốt với Figma.

Bài này cung cấp thông tin cập nhật quan trọng về cải tiến Qt/Figma, lỗi cho Qt cho MCUs và mô hình AI mới.

How Figma Uses AI Agents for Security

Figma’s engineering team recently shared how they created AI agents to support the security team in investigating alerts, searching past incidents and checking internal systems. The agents combine large language models with retrieval‑augmented generation to parse alert details, query logs and retrieve relevant historical tickets automatically. As a result, analysts spend less time on manual data gathering and can focus on validating threats, which shortens the overall investigation cycle. This approach shows that augmenting existing security workflows with purpose‑built AI agents can boost productivity without eliminating the need for human judgment. Other SaaS companies can adopt a similar pattern by integrating LLMs with their own telemetry stores to automate routine security tasks.

Bài viết giải thích cách Figma áp dụng AI agents để tăng cường hiệu quả bảo mật, giúp lập trình viên nắm bắt xu hướng ứng dụng trí tuệ nhân tạo trong bảo mật hệ thống.

How Coinbase used Code Connect to guide agents and shrink token costs

The Coinbase Design System team put Code Connect to the test against coding agents—and found that it boosted design system adherence while cutting token costs by an average of 22.5%.

Behind the build: Generative plugins and shaders at Figma

Starting today, you’ll have more creative control over generative plugins and shaders, and a way to share what you’ve made with the community.

Should you ditch Figma for an open-source design tool?

Explore the best open-source Figma alternatives, including Penpot, OpenPencil, Quant UX, and Open Design, and compare their features, AI, and benefits.

Design Tokens Are the API, One Source of Truth

“” is published by Mihailo Dragojevic in Design Systems Collective.

How do you actually measure the impact of AI on design?

In 2024, we kicked off a study to understand how AI would reshape design and product development. Now, AI is helping us run it.

What even is the design process now?

What even is the design process now? “Walk me through your design process.” It used to be one of those interview questions with a safe answer. You would say something about discovery, research …

Sightlines Issue No. 2: What Leaders Need to Know About Building Agents

Agentic products pose a unique set of design challenges. Here’s what we’ve heard from leaders.

The biggest thing limiting Product designers today isn’t AI, it’s thinking inside tools.

Thách thức lớn nhất của các nhà thiết kế sản phẩm ngày nay không phải là AI mà là tư duy bị bó hẹp trong các công cụ sẵn có. Khi kỹ sư có thể xây dựng sản phẩm nhanh hơn, các nhà thiết kế buộc phải thay đổi cách tư duy để bắt kịp.

Lập trình viên nên đọc bài này để hiểu cách thiết kế hệ thống hiệu quả hơn khi các công cụ tự động hóa phát triển nhanh chóng, giúp họ tối ưu hóa quy trình từ thiết kế đến triển khai.

5 developer tools I use every day, and none of them write code

Tác giả chia sẻ 5 công cụ developer hữu ích hỗ trợ toàn diện ngoài khâu viết code, từ quản lý dự án, debug, đến kiểm thử.

Một lập trình viên nên đọc bài này để khám phá những công cụ hỗ trợ không phải là mã nguồn nhưng giúp tối ưu hóa hiệu suất, giảm thiểu lỗi và tăng năng suất làm việc hàng ngày.

Canva’s backers cut $7.1bn from its valuation, and its own valuer cut more

Hai nhà đầu tư Blackbird và Airtree hạ giá trị định giá của Canva xuống còn 34,9 tỷ USD, trong khi bên nội bộ còn điều chỉnh thấp hơn nữa sau khi chi phí AI buộc công ty phải hạ dự báo doanh thu.

Lập trình viên nên đọc bài này để hiểu cách AI và mô hình kinh doanh mới như Canva đang thay đổi giá trị công nghệ, từ đó tìm hiểu cách ứng dụng công nghệ vào doanh nghiệp của mình để tối ưu chi phí và tăng giá trị lâu dài.

How to move fast toward the right thing

Các đội giỏi không chỉ đẩy nhanh sản phẩm mà còn cân nhắc kỹ lưỡng, xây dựng hiệu quả và tạo điểm nhấn khác biệt, dù AI giúp tăng tốc nhưng cũng dễ gây tech debt.

Lập trình viên nên đọc bài này để hiểu cách cân bằng tốc độ phát triển với chất lượng mã, tránh rơi vào nhầm lẫn giữa "hết thời gian" và "có sản phẩm tốt" trong thời đại công nghệ nhanh chóng.

Try these 10 skills—and show off your own

Bạn có thể tạo skills trực tiếp trên Figma cho agent của mình, thể hiện quan điểm cá nhân. Dưới đây là 10 skills được đề xuất để bắt đầu.

Một lập trình viên nên đọc bài này để khám phá cách tích hợp các kỹ năng chuyên nghiệp trực tiếp vào thiết kế UI/UX trong Figma, giúp họ tối ưu hóa quá trình phát triển sản phẩm và thể hiện tư duy sáng tạo từ các khía cạnh kỹ thuật.

Measuring time savings from Figma Make

Nhóm khoa học dữ liệu của Figma giả định rằng AI tiết kiệm thời gian cho người dùng nhưng cần phương pháp nghiên cứu mới để định lượng mức độ tiết kiệm.

Lập trình viên nên đọc bài này để hiểu cách AI trong Figma không chỉ tự động hóa công việc thiết kế mà còn giúp tiết kiệm thời gian thực tế bằng cách phân tích và tối ưu hóa quy trình làm việc thông qua dữ liệu, từ đó cải thiện hiệu suất phát triển ứng dụng.

Accessibility resources for open source developers

Tài nguyên về khả năng truy cập (accessibility) dành cho nhà phát triển nguồn mở, bao gồm các sự kiện và nền tảng tập trung vào công nghệ mở và web mở.

Lập trình viên nên đọc bài này để hiểu cách tích hợp tính năng truy cập dễ dàng (accessibility) vào dự án mã nguồn mở, từ đó cải thiện trải nghiệm người dùng đa dạng và tuân thủ tiêu chuẩn công nghệ mở.

Gamma Tips & Tricks for Product Designers

Gamma là công cụ AI có vẻ đơn giản nhưng hữu ích cho nhà thiết kế sản phẩm: chỉ cần cung cấp chủ đề, nó sẽ tự động tạo ra bài thuyết trình chuyên nghiệp trong vài phút.

Là người thiết kế sản phẩm, hiểu cách Gamma không chỉ là công cụ tạo nội dung nhanh mà còn là cách áp dụng AI để tối ưu hóa quy trình sáng tạo, tiết kiệm thời gian và nâng cao chất lượng thiết kế hiệu quả.

Your Home Assistant dashboard is probably showing you too much — here's how Figma helped me fix mine

Figma đã giúp tác giả loại bỏ sự lộn xộn khỏi bảng điều khiển Home Assistant, tập trung vào các điều khiển hữu ích và lên kế hoạch cho giao diện sạch sẽ trước khi xây dựng.

Một lập trình viên nên đọc bài này để hiểu cách áp dụng thiết kế UI/UX hiệu quả trong ứng dụng tự động hóa như Home Assistant, từ đó tối ưu hóa trải nghiệm người dùng và giảm thiểu sự phức tạp trong giao diện mà không cần phải biết thiết kế chuyên sâu.

TypeStax: A type scale generator that feels like vintage audio hardware

TypeStax là công cụ tạo bảng tỷ lệ kiểu chữ (type scale) với giao diện điều khiển analog mô phỏng phần cứng âm thanh cũ, hỗ trợ chỉnh sửa từng yếu tố, tích hợp Google Fonts, xem trước trực tiếp và xuất sang Figma.

Là người phát triển thiết kế UI/UX, bạn có thể khám phá cách TypeStax giúp tạo ra các thang âm kiểu cổ điển cho font chữ, kết hợp với giao diện tương tự máy âm thanh, từ đó nâng cao trải nghiệm thiết kế và tạo ra các dự án đẹp hơn với sự kết hợp giữa kỹ thuật số và cảm giác vật lý.

Figma grew 48% and raised its outlook. The stock fell 16% because of AI costs

Doanh thu Figma tăng 48% và triển vọng được nâng cao, song cổ phiếu giảm 16% do chi phí AI và R&D tăng gấp đôi khiến công ty thua lỗ hoạt động.

Lập trình viên nên đọc bài này để hiểu cách công nghệ AI và đầu tư phát triển (R&D) tác động trực tiếp đến giá trị thị trường công ty, giúp bạn phân tích xu hướng đầu tư và tối ưu hóa chiến lược phát triển sản phẩm trong tương lai.

Figma to Code in WebStorm: A Better Design-to-Code Workflow

Quá trình chuyển đổi từ thiết kế sang code thường bắt đầu bằng việc tìm kiếm file Figma, khung thiết kế, chụp màn hình rồi dán vào nơi nào đó trước khi quay lại terminal.

Những lập trình viên cần đọc bài này để khám phá cách tự động hóa và tối ưu hóa quá trình chuyển đổi thiết kế từ Figma sang mã nguồn, giúp tiết kiệm thời gian và giảm thiểu sai sót trong quá trình phát triển web.

Better code, fewer tokens: The benefits of Code Connect in MCP

Khi đánh giá tác động của Code Connect trên các tác nhân sử dụng MCP server của Figma, kết quả cho thấy cải thiện đáng kể về chất lượng code và giảm số lượng tokens.

Lập trình viên nên đọc bài này để khám phá cách tối ưu hóa hiệu suất và hiệu quả của mã nguồn bằng cách kết nối các thành phần code hiệu quả hơn, giúp giảm số lượng token (dữ liệu) trong các hệ thống AI như MCP mà không cần thay đổi logic cơ bản.