Figma Make: Những Hạn Chế Cần Biết

Posted on November 15, 2025November 15, 2025 by Dai Ha

Sau khi tự khám phá, Figma Make vừa khiến tôi ấn tượng, vừa khiến tôi không muốn sử dụng nó.
Lời hứa về tự động hóa thiết kế bằng AI là có thật, nhưng những giới hạn của nó cũng rõ ràng. Dưới đây là những điều tôi rút ra sau tháng đầu tiên trải nghiệm Figma Make: điểm mạnh, điểm yếu, và lý do tại sao workflow của bạn có thể cần điều chỉnh.

1. Sử dụng chung: khi AI chưa thực sự hiểu thiết kế

Điểm mạnh:
Tính năng nổi bật của Figma Make giống như khoa học viễn tưởng trở thành hiện thực: tạo prototyping hoạt động chỉ với một prompt đơn giản hoặc bằng cách import một frame có sẵn. Muốn một microinteraction hay một chuyển tiếp đơn giản giữa các trạng thái? Chỉ cần mô tả, Make sẽ tạo ra thứ gì đó có thể dùng được. Đây là công cụ nhanh nhất mà tôi từng tìm thấy để tạo một prototype tương tác nhanh, đặc biệt hữu ích cho các ý tưởng giai đoạn đầu hoặc pitch deck.

Điểm yếu (hiện tại):
Nếu bạn mong Figma Make tái hiện những flow tinh tế của sản phẩm đã sẵn sàng sản xuất, bạn sẽ gặp rào cản nhanh chóng.

Các tương tác phức tạp nhiều bước, điều hướng lồng nhau hay bất cứ thứ gì đòi hỏi logic mạnh mẽ đều nằm ngoài khả năng. Nó giống “wireframe cơ bản có thêm chút gia vị” hơn là “prototype đạt chuẩn sản xuất”.

Giới hạn thiết kế cũng hiện hữu. Nếu bạn làm việc với màn hình lớn hoặc cần breakpoint tùy chỉnh, bạn sẽ phải liên tục di chuyển quanh canvas, hoặc tệ hơn, phải dựng lại thiết kế để vừa với viewport của Make.

2. Import hệ thống thiết kế: Có điểm tốt, có điểm chưa tốt

Hầu như hoạt động:
Import từ thư viện design system cơ bản nhất. Nó có thể chuyển màu, khoảng cách và style cơ bản, nhưng không hỗ trợ font tùy chỉnh — điều này là vấn đề lớn nếu muốn tạo prototype độ trung thực cao. Và đừng mong dùng Glass UI, cũng không được hỗ trợ.

Điểm thiếu sót:
Make cho phép dán từng component riêng lẻ cho prototype, nhưng không import được component tùy chỉnh từ thư viện của bạn. Thay vào đó, nó dùng thư viện component bên thứ ba (đáng chú ý là shadcn/ui) rồi áp style của bạn lên, giống như phủ icing lên bánh.

3. Prototyping nâng cao: Tuyệt với sự đơn giản, không với quy mô lớn

Nơi Make tỏa sáng:
Microinteraction khả thi nếu bạn biết cách prompt đúng và giữ mọi thứ đơn giản. Make rất giỏi tạo hover effect và transition accordion mà các designer chúng ta yêu thích.

Nơi Make gặp trục trặc:
– Chuyển tiếp phức tạp, flow lồng nhau hay layout hơi phức tạp thường dễ bị lỗi. Dán một frame chi tiết từ file chính và xem layout tan rã, đặc biệt khi độ phức tạp tăng.
– Chưa hỗ trợ tốt cho autolayout (Mobile view)
– Figma Make sử dụng Claude AI hoặc một LLM tương tự, được huấn luyện trên code. Nó không được huấn luyện trên engine chỉnh sửa của Figma mà bạn dùng để thiết kế, nên đối với nó đó như một ngôn ngữ hoàn toàn xa lạ.
Họ không thể vượt qua vấn đề này nếu không:
+ Viết lại hoàn toàn Figma kèm với nâng cấp hiệu năng web mang tính cách mạng.
+ Huấn luyện một LLM mới trên các prototype của Figma, nhưng hầu như không có dữ liệu sẵn có trên Internet để làm việc này.
Ngay cả nếu hai cách trên khả thi, engine prototyping của Figma rất hạn chế, không giống như code. Nó sẽ không thể “tạo ra mọi thứ”, mà sẽ rất cồng kềnh và khó dùng.

4. Prompt và tham chiếu hình ảnh: Là một cuộc trò chuyện

Mẹo prompt:
Figma Make nhận hai loại input chính:

Directional prompt — Càng có cấu trúc càng tốt. Chia hướng dẫn thành các phần như: context, platform, visual style, và UI components.

Visual reference — Import một component cụ thể hoặc dán frame để Make có khởi đầu. Tránh chọn nhiều frame hoặc section cùng lúc, có thể gây lỗi hoặc bị kẹt trong upload.

Muốn tham chiếu website trong prompt? Hiện tại phải chờ. Figma chưa thể duyệt web để lấy tham chiếu, ý tưởng hay pattern thiết kế.

5. Bức tranh tổng thể: Figma Make có ý nghĩa gì với designer

Figma Make là cách nhanh nhất để biến một ý tưởng thô thành hiện thực, nhưng chưa thể thay thế Figma truyền thống. Hãy coi nó như một công cụ rapid ideation, cầu nối giữa bản phác thảo trên khăn giấy và wireframe độ trung thực cao.

Nếu workflow của bạn phụ thuộc vào thư viện component sâu, breakpoint pixel-perfect hay hiệu ứng trực quan tinh tế, bạn sẽ cảm thấy bực bội. Nhưng với những khám phá giai đoạn đầu hoặc ý tưởng tương tác nhanh, Figma Make đã đi trước nhiều công cụ khác.

Tóm tắt:

Tốc độ và khả năng tiếp cận: Không đối thủ cho prototype đơn giản và ý tưởng giai đoạn đầu.

Hỗ trợ hệ thống thiết kế: Ổn với style và token, nhưng không với component tùy chỉnh.

Sức mạnh prototyping: Tốt cho flow cơ bản, không đáng tin với flow nâng cao.

Prompting: Prompt có cấu trúc và tham chiếu rõ ràng là hiệu quả nhất.
Idea: Figma sẽ lấy các mẫu có sẵn được tạo bởi các nhà thiết kế chứ không thực sự sáng tạo, nó thực sự là điểm yếu lớn khi sử dụng.

6. Thực hành Figma maker.
Tôi đã tạo một ứng dụng nhỏ tên là: Funny Sticker Generator App

1. Mục tiêu: Ứng dụng cho phép người dùng tạo các sticker vui nhộn theo mô tả text. Người dùng nhập mô tả, chọn số lượng sticker muốn tạo, app sẽ tạo sticker và hiển thị để tải về hoặc mua nâng cấp.

2. Chức năng chính:

– Nhập mô tả và số lượng sticker: Người dùng gõ mô tả sticker (ví dụ: “con mèo mặt buồn uống trà sữa”).
– Chọn số lượng sticker muốn tạo (1–10).
– Button “Generate”
Mô tả:
Khi nhấn, app gửi yêu cầu đến API Gemini để tạo sticker.
Hiển thị trạng thái đang tạo sticker (loading).
Hiển thị danh sách sticker
Sticker hiển thị dạng lưới (grid).
Người dùng có thể nhấn xem full-size.

– Tải về sticker: Tải từng sticker hoặc tải tất cả.

Mobile: lưu trực tiếp vào thư viện ảnh.

Thanh toán In-App Purchase

Mua gói premium để tạo nhiều sticker hơn, tốc độ nhanh hơn hoặc chất lượng cao hơn.
và tôi đã public nó, bạn có. hể xem theo link sau: https://bagel-math-58475315.figma.site/
Một số hình ảnh của ứng dụng:

Đây là video demo ứng dụng:

Screen Recording 2025-11-15 at 11.59.00

Kết luận:
Figma Make giống như một intern AI mà designer luôn muốn: nhanh, nhiệt tình và tuyệt vời cho mockup, nhưng chưa đủ khả năng “làm chủ”. Hãy tận dụng điểm mạnh, chú ý giới hạn, và bạn sẽ thấy đây là một công cụ hữu ích (dù chưa hoàn hảo) trong bộ toolkit của mình.

Ý kiến cá nhân:
1. Tôi thấy sử dụng nó không hiệu quả, chỉ phù hợp cho các dụng dụng nhỏ và gặp rất nhiều lỗi.
2. Tương tự với cá AI khác, bạn phải ghi đầy đủ và thật chi tiết trong prompt của mình để Figma tạo UI tốt hơn.
3. Néu muốn sử dụng để tạo ra các file code, tôi sẽ chọn claude code, cursor hơn là sử dụng Figma Make
4. Tôi muốn chuyển từ Figma Design sang Make, chứ không phải ngược lại

Figma Make – When Design Can Actually Run

Posted on November 9, 2025November 10, 2025 by Hieu Pham Pro

🚀 Figma Make – The Next Generation of Design and Development

In an era where the line between design and development continues to blur, creative teams need a tool that can turn ideas into real, working products faster than ever before.
Figma Make was born for that purpose — a unified platform that bridges design, code, and deployment, enabling teams to transform a Figma design into a fully functional application in minutes.

🌟 Overview: From Design to Real Product

Figma Make is a groundbreaking evolution in the Figma ecosystem.
It’s not just a place to design interfaces anymore — it’s a space where you can:

Design visually as usual in Figma
Add logic, data, and interactivity using AI or code blocks
Convert designs directly into React/Tailwind apps
And finally, deploy your app with a single click

The magic lies in its AI-assisted design-to-code capability. You can simply describe your idea — for example,

“Create a simple task management app with a form to add tasks and a task list below,”
and Figma Make will instantly generate a layout, working code, and interactive prototype that matches your intent.

💡 Key Features

1. AI Chat & Prompt-to-App

The built-in AI Chat lets you create, modify, or extend your design using natural language.
You might say:

“Add a revenue chart to the dashboard page.”
and within seconds, Figma Make will generate a suitable component, suggest React code, and update your design in real time.
It’s the fastest way to go from idea to interactive prototype.

2. Import & Reuse Designs

You don’t need to start from scratch. Figma Make allows you to:

Import existing Figma files
Automatically detect layouts, colors, and text styles
Apply Design Tokens or Components from your Design System

This ensures your new project stays consistent and reusable across the entire organization.

3. From Interactive Prototype → Real Web App

Instead of static mockups, you can now:

Attach event handlers (onClick, onChange, etc.)
Connect to sample data or live APIs
Preview everything in the browser as a real web application

Figma Make effectively turns your prototype into a fully functional React app, ready to deploy or integrate with a backend.

4. Visual and Code Editing in Parallel

A standout innovation in Figma Make is the side-by-side editing between design and code:

Edit the UI → code updates instantly
Edit the code → UI changes in real time

Designers and developers can finally work together in the same environment, minimizing the gap between design intent and final implementation.

5. Templates & Starter Kits

Figma Make includes a library of smart starter templates for:

Analytics dashboards
Landing pages
CRUD admin panels
Form-based apps

Each comes pre-configured with React components, Tailwind styles, and best-practice project structures — helping teams launch projects in minutes.

6. Sharing & Publishing

Once your prototype is ready, you can:

Publish it as a live web app
Share preview links with clients or teammates
Connect to GitHub for version control and collaboration

Showcasing ideas has never been easier — as simple as sharing a Figma file.

7. Design System Integration

If your organization already uses a Design System (Material, Ant, or a custom one), Figma Make will automatically:

Map your existing components
Preserve color tokens, typography, and spacing
Sync code and style guides

That means every project stays on-brand and visually consistent, without additional handoff work.

🧩 Hands-On Example: From Design → Code → Web Demo

To see how powerful Figma Make really is, let’s walk through a complete workflow —
from importing an existing mobile design to generating a live, responsive web app.

🪄 Step 1 – Prepare Your Design

Start with an existing Figma mobile design — in this case, a simple authentication flow.
Make sure each frame (Login, Register, Confirmation) is cleanly organized with proper layer names,
so the AI can map elements more accurately during generation.

⚙️ Step 2 – Import into Figma Make

Inside Figma, create a new Make File.
Then simply type your prompt in natural language — for example:

“Implement this design”

Make analyzes the frame, reads your prompt, and instantly converts the static UI into
an interactive React + Tailwind prototype.
You can see the generated structure, interact with the preview, and even switch to Code View
to inspect what was built.

Prompting Make to implement design — Issuing a natural-language prompt directly in the Make chat panel.

Initial generated result — The first generated prototype — ready for testing and iteration.

Occasionally, you may see minor layout or logic errors.
These can be fixed instantly using follow-up prompts such as:

“Fix overlapping elements on small screens.”
“Adjust padding between form fields.”
“Center the logo horizontally.”

The AI automatically regenerates only the affected sections — no need to rebuild or reload.

Fixing errors — Iterative refinement through quick AI prompts.

Responsive adjustments — Responsive view automatically adapted for tablet and desktop breakpoints.

🧱 Step 3 – Add More Screens and Logic

Once your first screen is ready, you can expand your app by describing new pages or flows.
For example:

“Add a registration page similar to the login screen.”
“After successful sign up, show a confirmation page with the user’s email.”
“Link the navigation buttons between screens.”

Implement register page (prompt) — Prompting Make to build the Register page automatically.

Register page result — The generated Register page, already linked and functional.

Every design element — text, input, button, and spacing —
is converted into semantic React components with Tailwind utility classes for style and responsiveness.

Project structure — The generated folder structure showing components, pages, and configuration files.

🚀 Step 4 – Publish Your Web App

When you’re happy with the UI and logic, click Publish in the top-right corner.
Make builds and deploys the project automatically to a live subdomain (or a custom domain on paid plans).
Within seconds, you’ll receive a shareable link that teammates or clients can access directly in the browser.

Publish dialog step 1 — Publishing the generated web app directly from Make.

Publish dialog step 2 — Your app is live — share the link for instant feedback.

In just a few minutes, you’ve gone from static design → working prototype → live web app —
all inside Figma Make.

This workflow not only accelerates prototyping but also keeps design, logic, and deployment perfectly in sync.

✅ Conclusion

Figma Make dramatically shortens the path from idea to live product.
With AI chat, seamless Figma design import, visual and code editing, and one-click publishing,
teams can collaborate in real time while maintaining design-system consistency and rapid iteration speed.

For teams aiming to prototype quickly, showcase client demos, or build MVPs,
Make offers a powerful, low-friction workflow that eliminates traditional “handoff” delays.
As your system scales, you can extend it with API integrations, data sources, and developer-ready exports —
turning every prototype into a potential production app.

Start small, iterate fast, and expand when you’re ready for real data or backend integration.

Tag: figma