Framewisp documentationДокументация Framewisp

Everything in one place: from your first import to buttons, tabs, live data and the Studio editor. Tags are plain suffixes in Figma layer names — no setup, no config files. Всё в одном месте: от первого импорта до кнопок, вкладок, живых данных и редактора в Studio. Теги — это простые суффиксы в именах слоёв Figma, без настроек и конфигов.

QuickstartБыстрый старт TagsТеги Buttons & panelsКнопки и панели Live dataЖивые данные Auto-syncАвто-синк In StudioВ Studio ImagesКартинки Trial & licenseТриал и лицензия

01QuickstartБыстрый старт

Three steps from a Figma frame to native Roblox UI. Три шага от фрейма в Figma до нативного UI в Roblox.

1Sign inВойдите Open the Framewisp plugin in Figma and sign in with Roblox — one click, no API keys. Images will upload to your own account. Откройте плагин Framewisp в Figma и войдите через Roblox — один клик, без API-ключей. Картинки загрузятся в ваш собственный аккаунт.

2ConvertКонвертируйте Select exactly one frame and press Convert. You get a 6-character import code (valid 24 hours, reusable for sync). Выделите ровно один фрейм и нажмите Convert. Вы получите 6-символьный код импорта (живёт 24 часа, переиспользуется для синка).

3Paste in StudioВставьте в Studio In the Framewisp Studio plugin paste the code — the UI builds itself into StarterGui: real Frames, TextLabels, buttons, gradients. В Studio-плагине Framewisp вставьте код — UI соберётся в StarterGui сам: настоящие Frame, TextLabel, кнопки, градиенты.

02Layer tagsТеги слоёв

Add a suffix to a layer's name in Figma — Framewisp reads it on convert. Tags are case-insensitive and can stack: Card_button_aspect. Допишите суффикс к имени слоя в Figma — Framewisp прочитает его при конверте. Регистр не важен, теги складываются: Card_button_aspect.

TagТег	What it doesЧто делает
_button	makes the frame a clickable button with hover/press effectsделает фрейм кнопкой с эффектами наведения и нажатия
_scroll	turns the frame into a ScrollingFrameпревращает фрейм в ScrollingFrame
_ignore	skip this layer on importпропустить слой при импорте
_image	bake the layer into a crisp PNG. Aliases: `_img`, `_lock`, a `#` or `img:` prefixзапечь слой в чёткий PNG. Синонимы: `_img`, `_lock`, префикс `#` или `img:`
_keep	keep this layer separate — don't merge it into a baked imageоставить слой отдельно — не вплавлять в запечённую картинку
_canvas	import as a CanvasGroup (group transparency)импортировать как CanvasGroup (групповая прозрачность)
_aspect	lock the aspect ratio (UIAspectRatioConstraint)зафиксировать пропорции (UIAspectRatioConstraint)
_nodim	don't darken this image on button hover (the rest dim)не затемнять эту картинку при наведении на кнопку (остальные темнеют)

State variantsСостояния	What it doesЧто делает
_hover _clicked	button state variants you draw in Figma — shown automatically on hover / pressсостояния кнопки, нарисованные в Figma — показываются автоматически при наведении / нажатии
_disabled	imports as a hidden state variant — toggle it from your own scripts (not automatic)импортируется скрытым вариантом состояния — переключайте из своих скриптов (не автоматически)
_active	the look of a tab while it is selectedвид вкладки, когда она выбрана

03Buttons, panels & tabsКнопки, панели и вкладки

Action tags wire up behaviour with zero scripting. Any action automatically makes the layer a button. Экшен-теги подключают поведение без единой строчки кода. Любой экшен автоматически делает слой кнопкой.

TagТег	What it doesЧто делает
_close	click hides the panel it sits in (or the whole GUI). Alias: `_exit`клик прячет панель, в которой лежит (или весь GUI). Синоним: `_exit`
_open:Shop	click shows the panel named Shopклик показывает панель с именем Shop
_toggle:Shop	click opens / closes itклик открывает / закрывает её
_panel	marks a frame as a closable panel (a target for open/close/toggle)помечает фрейм закрываемой панелью (цель для open/close/toggle)
_tab:Weapons	show the Weapons panel and hide the group's othersпоказать панель Weapons и спрятать остальные в группе
_tabgroup	wraps a set of tabs into one groupобъединяет набор вкладок в одну группу

💡

Safety rule: _open, _toggle, _tab and _bind need a parameter after the colon. A layer named Menu_open is NOT treated as an action — so ordinary names never trigger behaviour by accident. Защита от случайностей: _open, _toggle, _tab и _bind требуют параметр после двоеточия. Слой с именем Menu_open экшеном НЕ считается — обычные имена не включают поведение случайно.

04Live dataЖивые данные

Text layers can show real player data that updates live in game. Текстовые слои могут показывать реальные данные игрока — они обновляются прямо в игре.

PatternШаблон	What it doesЧто делает
{Coins}	shows `leaderstats.Coins`, updates liveпоказывает `leaderstats.Coins`, обновляется вживую
{PlayerName}	the player's name (also `{DisplayName}`)имя игрока (ещё есть `{DisplayName}`)
_bind:leaderstats.Gems	binds the whole text to one value by pathпривязывает весь текст к значению по пути

05Live Sync & Auto-syncLive Sync и Авто-синк

Re-converting the same frame pushes the update under the same code — Studio picks it up and updates the existing tree in place (a diff, not a rebuild: your manual edits to other elements survive). Turn on Auto-sync and edits push themselves a few seconds after you pause editing. Keep the plugin window open — Figma only runs plugins while their window is open. Повторный конверт того же фрейма отправляет обновление под тем же кодом — Studio подхватывает и обновляет существующее дерево на месте (это дифф, а не пересборка: ваши ручные правки других элементов выживают). Включите Auto-sync — правки будут улетать сами через несколько секунд после паузы в редактировании. Держите окно плагина открытым: Figma выполняет плагины, только пока открыто их окно.

06In Roblox StudioВ Roblox Studio

Import. Paste the code — the design lands in StarterGui, centred and aspect-locked, with geometry in responsive Scale units. Positions, gradients, strokes, corner radii, rotation and fonts arrive as designed; text is rescaled per resolution by a tiny runtime script. Импорт. Вставьте код — дизайн попадает в StarterGui, по центру и с фиксированными пропорциями, геометрия в отзывчивых Scale-единицах. Позиции, градиенты, обводки, скругления, повороты и шрифты приходят как в макете; текст подгоняется под разрешение маленьким рантайм-скриптом.

UI Tools editor. A second toolbar button opens a visual editor: drag a box to move the selected element, pull the handles to resize, snap it to any corner / edge / centre of its parent, or convert its class (Frame → TextButton, ImageLabel → ImageButton and more) with children and properties preserved. Every change is undo-able with Ctrl+Z. Редактор UI Tools. Вторая кнопка на тулбаре открывает визуальный редактор: тащите бокс — элемент двигается, тяните точки — меняется размер, кнопки якоря прижимают его к углу / краю / центру родителя, а конвертер меняет класс (Frame → TextButton, ImageLabel → ImageButton и другие) с сохранением детей и свойств. Всё отменяется Ctrl+Z.

07Images & assetsКартинки и ассеты

Upload. Images upload to your own Roblox account through your sign-in — Framewisp never keeps them, and you can revoke access anytime. Identical images are deduplicated: one upload, shared by every copy, and unchanged art is never re-uploaded on re-converts. Up to 30 unique images per convert — split very heavy frames. Загрузка. Картинки загружаются в ваш собственный аккаунт Roblox через ваш вход — Framewisp их не хранит, доступ можно отозвать в любой момент. Одинаковые картинки дедуплицируются: одна загрузка на все копии, а неизменённый арт не грузится заново при повторных конвертах. До 30 уникальных картинок за конверт — очень тяжёлые фреймы делите.

Fresh uploads & moderation. A brand-new upload can render blank in Studio for a few minutes while Roblox moderation approves it — re-imports reuse already-approved assets instantly. Свежие загрузки и модерация. Совсем новая картинка может пару минут отображаться пустой, пока её одобряет модерация Roblox — повторные импорты мгновенно берут уже одобренные ассеты.

Assets & My Images. The plugin ships a free asset library (hundreds of game-ready UI packs) and a personal My Images library with folders, search and drag-and-drop — your art stays saved between sessions. Assets и My Images. В плагине есть бесплатная библиотека ассетов (сотни готовых UI-паков) и личная библиотека My Images с папками, поиском и drag-and-drop — ваш арт сохраняется между сессиями.

🔤

Fonts: unknown families get the closest Roblox substitute and the plugin warns you. Want a pixel-exact copy of stylised text? Tag that layer _image. Шрифты: для неизвестных семейств подбирается ближайший аналог Roblox, и плагин предупреждает об этом. Нужна пиксель-точная копия стилизованного текста? Пометьте слой _image.

08Trial, license & supportТриал, лицензия и поддержка

Free trialБесплатный триал

7 days, full features, no card. It starts when you first sign in and is tied to your Roblox + Figma accounts. 7 дней, все функции, без карты. Стартует при первом входе и привязан к вашим аккаунтам Roblox + Figma.

License keyЛицензионный ключ

After purchase the key arrives by email (subject contains your order #). Activate it on the plugin's welcome screen. One key works on one Roblox account; the Team plan covers 5 accounts with a single key. После покупки ключ приходит на почту (в теме — номер заказа #). Активируйте его на приветственном экране плагина. Один ключ работает на одном Roblox-аккаунте; Team-план покрывает 5 аккаунтов одним ключом.

SupportПоддержка

Fastest: our Discord. Or just reply to any Framewisp email — keep your order # handy. Быстрее всего: наш Discord. Или просто ответьте на любое письмо Framewisp — держите под рукой номер заказа #.