Create a Figma plugin from 0 to 1 with Figma Console MCP có gì mới?

• Tác giả muốn làm một plugin cho Figma để nối các khung thiết kế bằng mũi tên, thay vì phụ thuộc plugin cũ bị hỏng.
• Figma không cho tạo “connector” trực tiếp bằng API, nên anh ấy phải tìm cách khác.
• Nhờ AI, anh ấy phát hiện có thể sao chép dữ liệu của connector từ FigJam rồi “dán” lại khi cần.
• Sau khi kiểm tra thành công, anh ấy xây được bản đầu tiên của plugin dù chưa có bản thiết kế hoàn chỉnh từ đầu.
• Câu chuyện cho thấy AI giúp thử ý tưởng rất nhanh, nhưng con người vẫn phải biết đặt câu hỏi đúng và hiểu bối cảnh.

Tác giả bài gốc là một designer thường xuyên làm sơ đồ luồng trong Figma. Anh ấy quen dùng một plugin có tên “Give me FigJam Connector” để nối các mockup với nhau, giúp nhìn đường đi của người dùng rõ hơn. Một ngày, plugin đó đột ngột ngừng hoạt động. Vì công việc bị ảnh hưởng, anh quyết định thử làm luôn công cụ của riêng mình, thay vì đi tìm plugin thay thế khác. Điểm đặc biệt là anh không đi theo kiểu lập kế hoạch đầy đủ từ đầu, mà làm cùng AI để vừa nghĩ, vừa kiểm tra xem ý tưởng có khả thi hay không. Bộ công cụ anh dùng gồm Claude Code, Figma Console MCP và Figma Desktop Bridge. Hiểu đơn giản, Claude là AI hỗ trợ viết và sửa code; còn MCP là một lớp kết nối để AI “nhìn thấy” và làm việc với Figma dễ hơn, giống như có một cầu nối giữa người viết yêu cầu và phần mềm thiết kế.

Tạo plugin để chèn connector giữa hai đối tượng trong Figma. Nhưng ngay khi kiểm tra tài liệu, anh gặp rào cản lớn đầu tiên: Figma không có lệnh trực tiếp để “tạo connector” theo cách native.

Thử tìm đường vòng hợp lý. AI đưa ra hai cách.

• Cách 1: Tạo đường nối bằng API thông thường của Figma.
• Làm được, nhưng không phải connector “chuẩn” của FigJam.
• Mũi tên sẽ không tự bám theo khi người dùng kéo khung đi chỗ khác.
• Muốn cập nhật lại thì phải chạy plugin lại.
• Cách 2: Dùng “mẫu có sẵn”.
• Người dùng tự copy một connector từ FigJam trước.
• Plugin sẽ lấy connector đó làm mẫu và gắn vào các khung đã chọn.
• Cách này dùng được connector native, tức là đúng kiểu Figma hiểu và xử lý sẵn.

Tác giả chọn hướng thứ hai, nhưng vẫn muốn đi xa hơn. Anh không muốn người dùng phải làm bước chuẩn bị thủ công trong từng file mới. Mục tiêu là tìm cách “mang theo” connector chuẩn này trong plugin để dùng ở bất cứ file nào. Đây là lúc anh và AI phải đào sâu hơn. Họ không còn hỏi “làm sao tạo connector?” nữa, mà đổi câu hỏi thành “connector thực ra được lưu ở dạng gì khi copy từ FigJam?” Câu hỏi này rất quan trọng, vì nhiều khi công nghệ không thiếu hoàn toàn, mà chỉ là ta chưa tìm đúng cơ chế có sẵn. AI giúp anh xây các công cụ nhỏ để kiểm tra dữ liệu nằm trong clipboard. “Clipboard” ở đây là bộ nhớ tạm khi bạn copy một thứ gì đó rồi paste sang chỗ khác. Nói đơn giản hơn, họ muốn biết khi bạn copy connector từ FigJam, bên trong nó có cấu trúc gì để Figma nhận ra đó là connector. Sau khi bóc tách dữ liệu, họ kiểm tra xem có thể lưu cấu trúc đó lại rồi ghi ngược trở lại clipboard hay không. Kết quả khớp nhau.

Điều đó có nghĩa là plugin có thể “giữ” được dữ liệu của connector và đưa nó ra khi cần.

Không cần Figma phải cho tạo connector trực tiếp, chỉ cần plugin chuẩn bị đúng dữ liệu mà Figma đã hiểu sẵn. Nói theo cách dễ hình dung: thay vì tự đúc ra chiếc khóa mới, họ tìm được chìa khóa đúng chuẩn và cất nó trong túi để dùng khi cần. Sau khi xác nhận ý tưởng chạy được, tác giả bắt đầu làm bản đầu tiên của plugin. Lúc này giao diện chưa phải ưu tiên hàng đầu, nên anh gọi đó là bản “design-less V1” — hiểu đơn giản là bản chạy được trước, đẹp tính sau. Anh đưa cho Claude phần cấu trúc HTML đã trích ra từ connector mẫu, kèm vài yêu cầu cơ bản:

• Chọn màu cho connector, - thêm nhãn chữ, - có nút “Copy” để chép connector ra clipboard, - chọn hai khung rồi dán để nối tự động.

Sau đó, khi bản lõi đã hoạt động, anh mới quay lại chỉnh giao diện. Điểm hay ở giai đoạn này là nhờ Figma Console MCP và Figma Desktop Bridge, việc chỉnh sửa không còn bị phụ thuộc vào việc gửi file qua lại. Anh có thể chọn layer trong Figma, mô tả mong muốn cho AI, rồi AI đọc layer đó và sửa code tương ứng.

• Chọn một thành phần trên Figma, - nói cho AI biết muốn nó giống gì, - AI đọc bối cảnh và sửa code, - xem ngay kết quả trong plugin.

Điều này giúp anh chỉnh icon, bố cục và chi tiết giao diện nhanh hơn rất nhiều. Với người không chuyên code, đây là cách làm khá thân thiện: thay vì phải tự đọc toàn bộ code, designer chỉ cần mô tả nhu cầu bằng ngôn ngữ tự nhiên. Tuy nhiên, làm giao diện đẹp cũng nảy sinh vấn đề riêng. Anh dùng bộ chọn màu và menu thả xuống tùy biến thay vì input có sẵn của trình duyệt, để giữ đúng phong cách của plugin. Nhưng vì các thành phần này nằm trong cửa sổ plugin nhỏ, chúng dễ bị cắt mất nếu không đủ chỗ hiển thị. AI đề xuất giải pháp là tự động thay đổi kích thước cửa sổ khi mở các menu này. Cách đó giải quyết được phần bị che, nhưng lại khiến giao diện hơi “nhảy” và chiếm diện tích trên màn hình Figma. Sau khi thử, tác giả thấy trải nghiệm chưa thật mượt nên chuyển sang bố cục gọn hơn.

• Những gì anh rút ra từ giai đoạn này:
• Làm nhanh bản đầu tiên quan trọng hơn làm đẹp ngay từ đầu.
• AI rất hữu ích để kiểm tra ý tưởng có khả thi hay không.
• Nhưng một giải pháp “chạy được” chưa chắc đã là giải pháp “dễ dùng”.
• Đôi khi phải sửa giao diện nhiều vòng mới ra trải nghiệm ổn.

Sau connector, anh tiếp tục mở rộng tính năng sang các phần khác. Vì cơ chế “capture” dữ liệu đã hoạt động, anh áp dụng nó cho các shape trong FigJam và cả container.

Các hình khối mà người dùng hay dùng để vẽ sơ đồ cũng cần hiển thị gọn, sạch và đúng kiểu Figma hiểu. Tác giả chọn cách lấy bản native từ FigJam thay vì chỉ tạo shape bằng API thường, vì bản native trông gọn hơn khi dán sang Figma. Anh cũng thêm tính năng “cursor”, tức là một công cụ giúp mô tả tương tác rõ hơn. Với người làm flow hoặc prototype, điều này giúp diễn giải ý tưởng trực quan hơn thay vì chỉ dùng hình và mũi tên. Điểm đáng chú ý của bài viết không nằm ở việc tạo ra plugin nào quá “đột phá”, mà ở cách tác giả làm việc với AI. Anh không xem AI như công cụ tự động làm hết, mà như một người cộng sự để thử ý tưởng, kiểm tra rào cản, rồi đi đến giải pháp khả thi.

• Bài học thực tế mà tác giả nhấn mạnh:
• AI giúp kiểm tra ý tưởng rất nhanh, nhất là khi bạn chưa rõ giới hạn kỹ thuật.
• Nhưng bạn cần hỏi đúng câu hỏi, nếu không sẽ đi lòng vòng rất lâu.
• Biết một chút về kỹ thuật sẽ giúp bạn dẫn AI đi đúng hướng.
• Nên tách bài toán lớn thành từng phần nhỏ, làm lõi trước rồi mới thêm tính năng phụ.
• Công cụ kết nối giữa Figma và AI, như Figma Console MCP, giúp quá trình chỉnh sửa tự nhiên hơn nhiều.

Nếu nhìn từ góc độ người làm thiết kế, câu chuyện này khá hữu ích. Nó cho thấy designer không nhất thiết phải chờ có team lập trình riêng mới thử được một ý tưởng. Khi có AI và các công cụ kết nối phù hợp, việc biến một nhu cầu thiết kế thành prototype hoặc plugin đơn giản trở nên gần hơn rất nhiều. Tuy vậy, bài viết cũng khá thực tế khi thừa nhận rằng AI không tự giải quyết mọi thứ. Có lúc anh đưa quá nhiều yêu cầu cùng lúc, khiến giải pháp sinh ra tuy hợp lý về mặt kỹ thuật nhưng lại không đúng trải nghiệm anh muốn. Đó là lý do việc đặt vấn đề rõ ràng quan trọng không kém việc viết code.

Insight giúp bạn nắm ý chính của một bài dài chỉ trong vài phút, thay vì phải đọc hết cả bài gốc. Với những nội dung như câu chuyện làm plugin, công cụ AI hay quy trình thiết kế, phần quan trọng thường nằm ở ý tưởng, bài học và cách tác giả ra quyết định — chứ không phải ở từng chi tiết kỹ thuật.

• Bài viết nói về gì, - tác giả đã làm như thế nào, - điểm đáng học là gì, - và liệu nội dung đó có đáng để bạn đọc sâu hơn hay không.

Điều này đặc biệt hữu ích nếu bạn không làm công nghệ nhưng vẫn cần theo dõi xu hướng mới trong thiết kế, sản phẩm, và AI. Insight lọc bớt phần rườm rà, chuyển ngôn ngữ chuyên môn sang cách nói dễ hiểu, giúp bạn bắt kịp thông tin mà không bị ngợp. Nếu cần, bạn có thể đọc thêm bài gốc sau khi đã biết trước khung nội dung và biết mình đang tìm điều gì.