Какво е Figma Make?
Figma Make е AI конструктор за приложения, вграден директно в платформата на Figma, който приема текстова заявка и създава работещо, базирано на код фронтенд приложение, без да се налага да напускате работното пространство на Figma или да настройвате отделен инструмент.
Той генерира React приложения с пълен достъп до изходния код, автоматична история на версиите и URL за live preview, и се отличава от другите AI билдъри с това, че ви позволява да изберете основния модел, който върши работата: Claude Sonnet 4.6, Gemini 3 Flash, Gemini 3.1 Pro или GPT-5.5, вместо да ви заключва към един-единствен модел без видимост върху това какво се изпълнява.
Резултатът не е макет или дизайнерски файл, а истински, editable код, който можете да преглеждате, променяте и push-вате към GitHub.
За кого е Figma Make?
- Продуктови дизайнери, които вече използват Figma. Make е вътре в инструмента, който вече използвате, така че няма нова платформа за учене или абонамент за добавяне върху това, за което вече плащате.
- Неформални основатели, които имат нужда от демо бързо. Сложно, многoекранно приложение с role-based access и реалистични данни се създава за под 10 минути, което е достатъчно бързо, за да бъде показано на първа среща с инвеститор.
- Продуктови мениджъри, които трябва да показват, а не да разказват. Figma Make създава нещо, което наистина можете да предадете на заинтересована страна и да демонстрирате, вместо PDF с екрани.
- Разработчици, които искат работещ scaffold. Генерираният код е чист React с TypeScript, а пълният изходен код е достъпен в безплатния план, което го прави истинска отправна точка, а не прототип за изхвърляне.
Плюсове и минуси на Figma Make
- Създава сложни многoекранни приложения от една единствена заявка
- Безплатният план включва пълен достъп до изходния код
- Избирате своя AI модел: Claude, Gemini или GPT
- Автоматичната история на версиите записва всяка итерация на build-а
- Role-based authentication се генерира без допълнителни указания
- GitHub и Supabase интеграции са вградени нативно
- Визуален редактор и кодов редактор са налични в едно и също работно пространство
- Първите build-ове идват с предупреждения в кода
- Месечният лимит на безплатните кредити се изчерпва бързо
- Персонален домейн изисква платен Figma план
Разбивка на оценката
Оценките по-долу отразяват това, което Figma Make предлага в момента, в публична beta версия. За продукт на този етап качеството на резултатите е много над това, което очаквах, и за екипи, които вече са на платен Figma план, стойността е трудна за оспорване, тъй като няма нищо допълнително за плащане.
| Функция | Оценка (от 10) | Защо тази оценка |
|---|---|---|
| Лесота на използване | 9.5 | Никаква настройка, вход чрез заявка, два начина за редактиране и 8-минутен цикъл на build правят това един от най-ненатоварващите AI билдъри за започване. |
| Функции и функционалност | 9.8 | Role-based authentication, Stripe payment UI, multi-chart reporting, admin конзола, избор на модел и пълна REST API reference, генерирани от една единствена заявка. |
| Дизайн и персонализация | 9.4 | Стандартният визуален резултат е чист и професионален, с визуален редактор чрез кликване за избор и пълен достъп до изходния код, дори в безплатния план. |
| Съотношение цена-качество | 9.4 | Пълният достъп до кода в безплатния tier е наистина необичаен, а потребителите с платен план получават Make като част от вече съществуващ абонамент за Figma, а не като отделен ред за плащане. |
| Производителност и надеждност | 9.9 | Осем минути до многoекранно, role-aware приложение със Stripe UI и admin конзола е най-бързото съотношение между build и използваем резултат, което съм тествал. |
| Общо | 9.6 | Отличен beta продукт, който вече превъзхожда много зрели AI билдъри по качество на резултата и дълбочина на функциите. |
Функции на Figma Make
- Prompt-to-app build за под 10 минути
- Избор на множество модели, включително Claude, Gemini и GPT
- Role-based user authentication, генерирана автоматично
- Визуален редактор чрез кликване с inline контроли за стил
- Пълен React изходен код, editable в безплатния tier
- GitHub и Supabase интеграции, налични без допълнителна конфигурация
- Публикуване с едно кликване към figma.site subdomain
Моят честен преглед на Figma Make: какво открих след тестването му
Началният екран веднага ви оставя на мира
Стартовият екран е едно поле за заявка с кратък слоган: “Make your ideas real with AI. Start with a design and prompt your way to a functional prototype, fast.” Под полето за въвеждане се появяват три предложени начални точки:
- Onboarding flow
- Data dashboard
- Gradient gallery
Можете да игнорирате и трите и да напишете каквото искате.
Подадох тази заявка в пълен вид:
“Create a property management platform for landlords and tenants. Include user authentication, property listings, lease management, rent payments, maintenance requests, document uploads, messaging, notifications, admin dashboard, reporting, Stripe integration, PostgreSQL database, REST API, responsive design, and deployment instructions. The application should be production-ready and scalable.”
Инструментът я прие без никакво триене и веднага премина към build. Няма избор на тип проект, няма галерия с шаблони, няма никаква предварителна архитектурна конфигурация.
Извод: Входната точка е възможно най-безпроблемна, колкото всеки AI билдър, който съм тествал. Компромисът е, че при липса на структура за насочване преди build-а, неясната заявка води до неясен резултат. Горната граница на това, което получавате, се определя изцяло от това, което вие вложите.
Регистрацията е бърза и не поставя paywall между вас и резултата
Кликването върху стрелката преди вход отваря modal “Welcome to Figma”. Двете опции са:
- Continue with Google (едно кликване, под 10 секунди)
- Continue with email (въведете имейл, потвърдете, под 30 секунди общо)
И двата пътя ви отвеждат в работното пространство на Figma Make с вече опашен build. Няма екран за избор на план, няма prompt за кредитна карта и няма upgrade wall на този етап. Безплатният Starter plan се активира автоматично.
Ако вече имате Figma акаунт, modal-ът не се показва и влизате директно в билдъра.
Build-ът продължава 8 минути и ви казва точно какво прави
Работното пространство е разделено на chat колона вляво и live preview вдясно. Preview-то показва placeholder с текста “Building your idea…” и след това “Working out the details…” докато инструментът напредва.
Това, което го прави различно от обикновен loading екран, е reasoning панелът в chat колоната, който записва мисленето на инструмента в реално време.
По време на моя build reasoning панелът показа:
- Инструментът извика theme tool, преди да напише и един ред код
- Записа “Worked with 3 files” по време на обработката на заявката
- Reasoning логът описа целия си подход: той очерта оставащите функции (property filtering, lease management, payment history, maintenance requests, messaging, notifications и admin dashboards), заяви, че ще структурира React компонента първо с type definitions, след това ще изгради mock data с реалистични детайли, а после ще се заеме с navigation и state management за role-based изгледи във всеки раздел
- Под reasoning се появи статус съобщение: “Writing the component structure…”
Тази последователност има значение. Инструментът планира type definitions преди да напише който и да е UI, след това добавя реалистични mock данни, а после изгражда navigation около тях. Това е структуриран подход, а не случайна генерация.
Времева линия на build-а: 3:58 PM до 4:06 PM. Осем минути.
Селекторът на модели в долната част на chat панела ви позволява да изберете AI-то, което ще изгражда, преди да започнете, или да сменяте между build-ове:
| Модел | Описание |
|---|---|
| Default | Препоръчан от Figma (конкретният модел не е разкрит) |
| Claude Sonnet 4.6 | Баланс, ефективност |
| Gemini 3 Flash | Бърз, итеративен |
| Gemini 3.1 Pro | Дълбок, креативен |
| GPT-5.5 | Способен, бърз |
Възможността да преминавате от бърз итеративен модел към по-дълбок, без да напускате инструмента или да започвате build-а отначало, е значимо предимство за работния процес.
Редом със селектора на модели има и toggle за Build/Plan mode:
| Режим | Какво прави |
|---|---|
| Build | Създава и итераира, докато напредвате |
| Plan | Уеднаквява подхода при сложна работа и очертава архитектурата преди да пише код |
За заявка толкова подробна като моята, Plan mode вероятно би дал по-чист първи build с по-малко предупреждения. Аз използвах Build mode и се справих с предупрежденията в втори пас.
Готовият резултат се нарече PropVault и заслужи това самочувствие
Завършеното приложение, което инструментът нарече PropVault без да бъде подканян, е многoекранна платформа за управление на имоти с последователна визуална идентичност, тъмносин страничен панел, чиста типография и контекстуално social proof на екрана за вход. Екранът за вход показва:
- Тъмен ляв панел с логото на PropVault, слоган (“Property management, simplified.”) и три mock статистики: 86 properties managed, 1,240 active tenants, $2.1M collected monthly
- Десен панел с раздели Sign In / Create Account, предварително попълнени имейл (marcus@propvault.io) и парола, и три бутона за избор на роля: Landlord, Tenant, Admin
- Бележка в долната част: “Demo: click a role above, then sign in”
Всеки екран в лявата навигация отваря работещ, попълнен екран. Ето какво беше изградено в цялото приложение:
| Екран | Какво беше изградено |
|---|---|
| Dashboard | Четири KPI карти (monthly revenue, occupancy rate, open requests, total properties), 12-месечна line chart за revenue срещу expenses с badge “Live”, recent activity feed, alert за просрочено плащане със Send Reminders бутон, expiring leases с отделни Renew бутони |
| Properties | Списък с имоти с филтриране |
| Leases | Управление на лизинги със следене на статус |
| Payments | Таблица с история на плащанията със status badges, Stripe-powered secure payment modal |
| Maintenance | Kanban board (Open / In Progress / Completed) с priority badges и vendor assignment; форма за подаване от tenant |
| Messages | Chat UI с два панела и реалистични разговори, както и поддръжка за изпращане с Enter |
| Documents | Drag-and-drop зона за качване, филтърни чипове по категории, файлова решетка с hover действия |
| Reports | Bar chart, хоризонтална occupancy chart, maintenance pie chart, таблица с KPI метрики, toggle за диапазон от дати (3m / 6m / 12m) |
| Admin Console | Таблица за управление на потребители, панел за системно здраве и интеграции, пълна REST API reference, инструкции за deployment (PostgreSQL, Docker, Vercel, Stripe webhook configuration) |
Данните на всеки екран са симулирани. Backend връзките изискват конфигурация, преди нещо да записва или извлича живи данни. Това, което получавате след осем минути, е front-end scaffold с производствено качество, с достатъчно покритие на екрани и плътност на данните, за да бъде показван като работещо демо.
И трите потребителски роли са правилно ограничени, а детайлността е впечатляваща
Role-based access control е мястото, където AI билдърите най-често правят компромиси. Figma Make не го направи. Всяка роля влиза в напълно различно изживяване със собствена навигация, собствен изглед на данните и собствен обхват.
| Роля | Навигационни елементи | Фокус на Dashboard |
|---|---|---|
| Landlord (Marcus Hewitt) | Dashboard, Properties, Leases, Payments, Maintenance, Messages, Documents, Reports | Платформени метрики за всички имоти и наематели |
| Tenant (Priya Nair) | Dashboard, Leases, Payments, Maintenance, Messages, Documents | Лични метрики само за този tenant |
| Admin (Cassandra Voss) | Всички Landlord елементи плюс Admin | Същият като Landlord dashboard, с достъп до Admin Console |
Подробности за Landlord dashboard:
- Monthly Revenue: $41,900 (Apr 2024, +2.8% vs last month)
- Occupancy Rate: 88% (76/86 units, +1.2% vs last month)
- Open Requests: 5 maintenance tickets
- Total Properties: 6 properties, 86 total units
- Revenue vs. Expenses chart, обхващаща May до April (12 months)
- Recent activity feed: rent received, overdue payments, new maintenance request, expiring lease, tenant message
- Alert banner: “2 overdue payments require attention” с Tomás Reyes ($2,100) и Fatima Al-Sayed ($2,650), посочени по име, и бутон Send Reminders
Подробности за Tenant dashboard (Priya Nair):
- Next Payment: $1,850, due April 1, 2024
- Lease Status: Active, ends August 31, 2024
- Open Requests: 1 (HVAC repair pending)
- Messages: 2 unread
- История на плащанията, показваща Maple Grove #4B, $1,850, Paid
- Maintenance request, показваща “HVAC not cooling,” In Progress badge, датирана March 28, 2024
Payments екранът за ролята Tenant отваря Stripe-branded modal, когато се кликне “Pay Now”:
- Header: “Secure Payment. Powered by Stripe.”
- Payment line: April Rent, Maple Grove #4B, $1,850.00
- Card Number поле (предварително форматирано)
- Expiry (MM/YY) и CVC полета
- Pay бутон с предварително зададен етикет: “Pay $1,850.00”
- Footer: “256-bit SSL encryption · PCI DSS compliant”
Admin Console (Cassandra Voss):
Admin Console има четири таба (Users, System, API Docs, Deployment) и отваря User Management таблицата.
Всеки ред има бутони за редактиране и премахване. Бутон Invite User стои горе вдясно на таблицата. Tomás Reyes е правилно отбелязан като Delinquent, в съответствие с alert-а за просрочено плащане, показан на Landlord dashboard.
Редактирането използва два паралелни инструмента и и двата са достъпни безплатно
След като build-ът завърши, са налични два пътя за редактиране едновременно, и нито един не е зад paywall.
Път 1: Визуален редактор
- Кликнете върху който и да е елемент в live preview-то, за да го изберете и да отворите floating лента за редактиране
- Лентата за редактиране включва: selector за font family, font size (с minus и plus контроли), bold, italic, подравняване на текста, width контроли, spacing и изтриване на елемента
- Избраният елемент се добавя едновременно в полето за chat, така че кликването върху елемент и писането в chat изпращат заявка за промяна с вече включен в контекст този елемент
- Избирането на контейнер показва точния тип компонент и вложеността (например, “div x 4”) над лентата с инструменти, давайки прецизен контекст за layout-а без да отваряте кода
Връзката между визуалния selector и chat полето е най-практичната част от този workflow за редактиране.
Не е нужно да избирате между двете. Кликвате, за да идентифицирате елемента, след това пишете в chat-а какво искате да бъде променено, и AI прилага промяната с пълно съзнание за това кой компонент сте избрали.
Път 2: Кодов редактор
Кликването върху иконата за код в горната част на работното пространство отваря пълния React изходен код. Структурата на файловете е:
src/
app/
components/
App.tsx (1,300+ lines)
styles/
fonts.css
globals.css
index.css
tailwind.css
theme.css
guidelines/
ATTRIBUTIONS.md
default_shadcn_theme.css
package.json
pnpm-workspace.yaml
postcss.config.mjs
vite.config.ts
App.tsx е организиран в именовани view функции (DashboardView, ReportsView, MaintenanceView и т.н.) с section коментари, разделящи всеки екран.
Кодът е четим, добре структуриран и editable директно в браузъра. Не е нужен download или външна IDE. Този пълен достъп до изходния код е наличен в безплатния план.
Промените, направени чрез визуалния редактор, chat-а или кодовия редактор, всички се вливат в едно и също live preview и се отразяват незабавно.
Десет плюс предупреждения при първия build, поправени точно с едно кликване
След като първоначалният build приключи, в долната част на chat панела се появи банер: “10+ warnings” с бутон “Fix for me” и икона за затваряне.
Отварянето на браузър конзолата (достъпна чрез икона за console в работното пространство) показа източника: дублирани SVG gradient IDs в библиотеката Recharts.
Причината: секциите Dashboard и Reports и двете регистрираха едни и същи generic имена на градиенти (revGrad, expGrad) като SVG елементи. Recharts регистрира градиентите по ID в SVG пространството от имена, така че generic имена от няколко chart инстанции се сблъскват в един и същ документ. Конзолата показа дълъг списък от minified JavaScript референции, всички проследяващи този конфликт.
Кликването върху “Fix for me” задейства втори build pass. Инструментът идентифицира три конкретни проблема и приложи насочени поправки:
- Dashboard AreaChart: Преименува gradient IDs от generic revGrad / expGrad на уникални идентификатори dash-area-rev / dash-area-exp, предотвратявайки namespace конфликта
- Occupancy BarChart: Промени ключовете на клетките от числов индекс (key={i}) към стабилни string ключове, използвайки името на имота (key={\occ-${entry.property}`}`), така че всяка клетка да има стабилен, уникален ключ
- Maintenance PieChart: Приложи същата корекция на ключовете, използвайки името на записа (key={\pie-${entry.name}`}`)
Този build се запази автоматично като Version 2. Панелът с история на версиите (достъпен чрез кликване върху етикета на версията в горната част на работното пространство) показва ясен лог:
| Версия | Етикет | Време |
|---|---|---|
| Version 1 | Property Management Platform | 4:06 PM |
| Version 2 | Resolve code warnings | 4:19 PM |
След втория пас конзолата показа само чисти vite hot-reload съобщения, а warning банерът изчезна. Връщането към Version 1 е едно кликване от панела с история на версиите.
Пълният цикъл на поправката от първия build до чиста конзола отне 13 минути, без никакво ръчно редактиране на кода.
Панелът със settings има повече дълбочина, отколкото бихте очаквали от beta инструмент
Панелът със settings се отваря чрез иконата за зъбно колело в горния десен ъгъл на работното пространство. Dropdown-ът организира опциите в две групи:
Make settings:
- General
- Domains
- Fonts
- Chat preferences
- Audio
Integrations:
- GitHub
- Supabase
- Adjust guidelines
General settings обхващат статуса на публикуване и SEO конфигурацията:
| Настройка | Детайл |
|---|---|
| Status | Не е публикувано (Publish бутонът е наличен вътре) |
| Title | Editable име на проекта |
| Meta description | Автоматично попълнено от build контекста |
| Language | Поле за ISO езиков код |
| Google Analytics ID | Свържете GA4 property за проследяване на трафика |
| Exclude from search engine results | Checkbox, отметнат по подразбиране в безплатния план |
| Clear chat context | Постоянно изчиства паметта на Make от разговора; chat history логът остава видим |
Опцията Clear chat context си струва да се разбере. Тя изтрива паметта на AI за build разговора, без да премахва видимия chat лог. Това е полезно, когато дълга build нишка кара AI да се фиксира върху по-ранен контекст при нови заявки за промяна.
Domains settings показва:
- Base domain: example.figma.site (безплатният subdomain, става активен при публикуване)
- Connected domains: Опция за добавяне на персонален домейн от външен доставчик (изисква платен план)
Integrations:
- GitHub: Експорт на код и синхронизация с repository
- Supabase: Свързване на реален backend и база данни, за да замените симулирания слой данни
- Adjust guidelines: Задайте персонални инструкции, които AI следва при правене на промени, включително неща като conventions за component library, стандарти за именуване или дизайнерски ограничения, които искате да се спазват във всяка build итерация
Опцията Adjust guidelines е значимо допълнение, което другите секции на инструмента не показват толкова ясно. Тя ви позволява да определите как AI трябва да се държи преди да започне build, вместо да коригирате нежелани модели след факта.
Публикуването е с едно кликване и URL адресът на безплатния план изглежда като реално самостоятелно приложение
Кликването върху Publish в горния десен ъгъл отваря панел, който покрива всичко необходимо, за да се пусне онлайн:
| Поле | Детайл |
|---|---|
| Title | Editable име на проекта |
| URL | example.figma.site |
| Status | Не е публикувано |
| Feature on Community | Toggle за добавяне на приложението в галерията на Figma Community |
Toggle-ът Feature on Community разгръща секция за preview, която показва как ще изглежда приложението във Figma Community заедно с други публикувани приложения.
Оттук:
- Можете да изберете до пет tags, за да категоризирате приложението (опциите включват Apps, Dashboards и още чрез “Show more”)
- Checkbox “Show chat history” контролира дали build разговорът ще бъде видим за потребителите в Community
- Бележка потвърждава: “By publishing to Community, you agree to Figma’s Creator Agreement”
След публикуване figma.site URL отваря приложението в самостоятелен browser изглед. Няма Figma editor chrome, няма watermark и няма видим знак “built with Figma Make” около приложението. То се зарежда и работи като истинско самостоятелно web приложение, а не като рамкиран прототип.
Публикуването в безплатния план включва:
- Споделяем figma.site subdomain URL
- Самостоятелен изглед на приложението без видим Figma branding
- Възможност да бъде включено в Figma Community
Публикуването в платен план добавя:
- Персонален домейн от външен доставчик
- Повече AI кредити за допълнителни build-ове и итерации
Цени и планове на Figma Make
Figma Make не се продава като самостоятелен продукт. Достъпът идва в пакет с Figma Full seat плановете, а AI кредитите се споделят между всички Figma AI функции, не само Make. Build в Figma Make черпи от същия месечен пул като AI инструментите на Figma Design, image editing и всяко друго AI-задвижвано действие в платформата.
Безплатният Starter plan включва достъп до Figma Make, но месечният лимит на кредитите е достатъчно нисък, че един сложен build ще изразходва голяма част от него. Starter plan е подходящ за оценка на инструмента и за еднократни тестове, а не за екипи, които използват Make като редовна част от работния процес.
Платените планове са структурирани около типовете seat-ове. Full seat-овете в нивата Professional, Organization и Enterprise включват значително повече AI кредити на месец, като всяко ниво увеличава месечната квота. Ако вече сте на платен Figma план основно за Design достъп, Make вече е наличен за вас без допълнителна такса в рамките на съществуващия ви кредитен пул.
Допълнителни AI кредити могат да бъдат закупени като add-on във всички платени планове, което си струва да се обмисли, ако екипът ви прави множество Make build-ове седмично заедно с обичайната Figma AI употреба.
Няма отделен безплатен trial извън Starter plan-а и не е посочена гаранция за връщане на парите в публикуваните от Figma условия. Отказите на годишен план не водят до възстановяване на сумата за оставащия срок. Отказите на Professional плана могат да се извършват от Admin Dashboard; отказите на Organization и Enterprise плана изискват връзка с екипа по продажби.
За практическо съответствие на плана: Starter plan покрива оценка и случайна употреба. Professional Full seat е минималната реалистична входна точка за екипи, които искат да използват Make повече от веднъж или два пъти месечно, без да достигат кредитните лимити по средата на проекта.
Алтернативи на Figma Make
Най-прекият конкурент на Figma Make в момента е Lovable. Докато Figma Make създава front-end приложение вътре в работното пространство на Figma, Lovable е специално създаден AI конструктор на приложения, който покрива целия стек: front-end, back-end, база данни, authentication и deployment с едно кликване, от самостоятелна платформа с над 8 милиона отчетени потребители.
За всеки, който не е вече на платен Figma план, или който има нужда от production-connected приложение, а не от изпипан прототип, Lovable ви води до внедрено, свързано с данни приложение по-бързо и с по-малко конфигурация.
| Функция | Figma Make | Lovable |
|---|---|---|
| Лесота на използване | Prompt-first без нужда от настройка | Prompt-first без нужда от настройка |
| Най-подходящо за | Дизайнери и екипи, които вече са на платен Figma план | Неформални основатели, които изграждат и внедряват MVP-та |
| Backend и данни | Само front-end; Supabase е наличен като интеграция | Вграден Supabase backend, включен от самото начало |
| Гъвкавост на дизайна | Визуален редактор, редактиране чрез chat и пълен достъп до изходния код | Редактиране чрез chat с наличен code export |
| Ценови модел | Включен в Figma Full seat; споделен AI кредитен пул | Самостоятелен абонамент със собствена кредитна система |
Краен извод: струва ли си Figma Make?
За всеки, който вече плаща за Figma Full seat, отговорът е ясен: да, и то с голямо предимство. Качеството на резултатите поставя Figma Make пред повечето AI билдъри на приложения, които са на пазара много по-дълго.
Една единствена заявка създаде многoекранна, role-aware платформа за управление на имоти със Stripe payment modal, dashboard за live analytics, Kanban board за maintenance, chat UI с два панела и пълна admin конзола с таблица за управление на потребители, REST API документация и инструкции за deployment. Всичко това за осем минути, с пълен достъп до изходния код в безплатния план и чист, самостоятелен публикуван URL. Нищо от това не е обичайно за beta продукт.
За екипи, които не са в Figma в момента, сметката изисква честен поглед върху това, от което наистина имате нужда. Получаването на значим достъп до Figma Make изисква Full seat в платен Figma план, което е по-широка инвестиция в платформа, отколкото иска всеки самостоятелен AI билдър. Ако основната цел е да пуснете работещо web приложение с live база данни и реални потребители, Lovable ви отвежда до този резултат с по-малко конфигурация и без да изисква абонамент за дизайнерска платформа.
Аудиторията, която извлича най-много от Figma Make в момента, са дизайнерите и продуктовите екипи, които искат да затворят разликата между статичен Figma прототип и тестируемо, базирано на код интерактивно решение, без да сменят инструментите или да чакат разработчик да го направи. За този конкретен случай Figma Make е най-добрият наличен избор.
