FRAMEWISP ← HomeНа главную

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, stack freely and work in ANY order: Exit_close_smooth_magnet equals Exit_magnet_smooth_close. One exception: actions with a target (_open:Name, _toggle:Name, _tab:Name) go last — the target name runs to the end of the layer name. Допишите суффикс к имени слоя в Figma — Framewisp прочитает его при конверте. Регистр не важен, теги складываются и работают в ЛЮБОМ порядке: Exit_close_smooth_magnet = Exit_magnet_smooth_close. Единственное исключение — действия с целью (_open:Имя, _toggle:Имя, _tab:Имя) ставятся последними: имя цели читается до конца имени слоя.

Tuning effects. Select a tagged layer in the Figma plugin — the Effect playground appears in the Tags tab: a live demo you can hover, press and watch, with a slider for every parameter (tilt strength, shine speed, magnet pull…). Values are saved on the layer and ship with the convert — the game plays exactly what you tuned. In Studio you can also override any parameter per element with attributes (SpinSpeed, TiltMax, MagnetPull, ShineSpeed…): a manual attribute always wins over the playground value. Настройка эффектов. Выделите слой с тегом в Figma-плагине — во вкладке Tags появится Effect playground: живое демо, которое можно наводить и нажимать, со слайдером на каждый параметр (сила наклона, скорость блика, притяжение магнита…). Значения сохраняются на слое и уезжают с конвертом — в игре будет ровно то, что вы настроили. В Studio любой параметр можно переопределить атрибутом на элементе (SpinSpeed, TiltMax, MagnetPull, ShineSpeed…): ручной атрибут всегда сильнее значения из плейграунда.

Effects come alive in Play. Everything animated — hover, lift, selection, drift, float, spin, shine — ships as a LocalScript next to your UI, and Roblox never runs a LocalScript in edit mode. In the Studio viewport you see the design standing still; press Play and it moves. The importer names what it wired right after it finishes. Эффекты оживают в Play. Всё анимированное — наведение, подъём, выделение, дрифт, левитация, вращение, блик — приезжает LocalScript'ом рядом с вашим интерфейсом, а Roblox не выполняет LocalScript в режиме редактирования. Во вьюпорте Studio макет стоит; нажмите Play — и он поедет. Плагин сразу после импорта пишет, что именно он подключил.

_3d
_magnet + _smooth
_smooth
_magnet
_shiny
_glint
_spin
TagТегWhat it doesЧто делает
_buttonmakes the frame a clickable button with hover/press effectsделает фрейм кнопкой с эффектами наведения и нажатия
_scrollturns the frame into a ScrollingFrame. Select it in the plugin to set the scrollbar thickness (0 hides it) and to move each edge of the scroll window — left, right, up, down. Positive grows the window past the layer, negative pulls the edge in. The same panel picks the scroll direction — vertical by default, horizontal for a row of cards. Both matter because a Figma GROUP shrink-wraps to its contents: you can neither draw a window bigger than the cards inside it, nor smaller than all of them — so a grouped list arrives as tall as its whole content and nothing scrolls until you pull an edge inпревращает фрейм в ScrollingFrame. Выделите его в плагине, чтобы задать толщину скроллбара (0 — убрать) и подвинуть любой край окна скролла: влево, вправо, вверх, вниз. Плюс растягивает окно за пределы слоя, минус втягивает край внутрь. Там же выбирается направление прокрутки — по умолчанию вертикальное, горизонтальное для ряда карточек. Нужно и то и другое, потому что ГРУППА в Figma всегда обжимается по содержимому: нельзя нарисовать окно ни больше карточек внутри неё, ни меньше их всех — сгруппированный список приезжает высотой во весь контент и не скроллится, пока не втянешь край
_gridcard grid: put it on the parent frame that holds the cards — they become a real UIGridLayout with the exact columns, gaps and padding from your design, identical on every device. Combine with _scroll for a scrolling inventory (the canvas grows as game scripts add cards). Cards must share one size and even spacing — otherwise Framewisp warns and imports them as-is. You can also tag the outer group while the cards sit in a window-frame inside it (your _scroll rectangle) — the tag drops down to that window automaticallyсетка карточек: повесьте на родительский фрейм с карточками — они станут настоящим UIGridLayout с теми же колонками, отступами и полями, что в макете, одинаково на любом устройстве. Совместим с _scroll для скролл-инвентаря (канвас растёт, когда скрипты игры добавляют карточки). Карточки должны быть одного размера с ровными интервалами — иначе Framewisp предупредит и импортирует их как есть. Тег можно повесить и на внешнюю группу, когда карточки лежат во внутреннем фрейме-окне (вашем прямоугольнике _scroll) — тег сам спустится на это окно
_framekeep this layer a real Frame instead of a picture. Framewisp flattens a layer when Roblox has no way to draw it — a blur, an inner shadow, a radial gradient, several stacked fills, a cropped image fill, a mask that is not a plain rectangle. With _frame the layer is rebuilt natively and only the effect that caused it is dropped, and the warning names exactly what was lost. It cannot rescue what has no native shape at all: vector shapes, arcs and donuts, and anything you tagged _image on purpose still bakeоставить слой настоящим Frame, а не картинкой. Framewisp запекает слой, когда Roblox нечем его нарисовать: блюр, внутренняя тень, радиальный градиент, несколько наложенных заливок, обрезанная картинка-заливка, маска сложнее прямоугольника. С тегом _frame слой пересобирается нативно, теряется только тот эффект, который к этому привёл, — и предупреждение называет, что именно отброшено. Спасти то, у чего нет нативной формы, тег не может: векторные фигуры, дуги и бублики, а также всё, что вы сами пометили _image, по-прежнему запекаются
_txtkeep this layer a real TextLabel instead of a picture. Text is flattened when it carries a paint or effect Roblox text cannot draw — a radial/angular gradient, an image fill, a gradient stroke, a blur or inner shadow. With _txt the label stays live text, only the paint or effect that caused the bake is dropped, and the warning names exactly what was lost. Wrapping text bakes by default (pixel-perfect); with _txt it stays a live label with TextWrapped — near-exact, editable in Studioоставить слой настоящим TextLabel, а не картинкой. Текст запекается, когда на нём заливка или эффект, который текст Roblox не умеет: радиальный/угловой градиент, картинка-заливка, градиентная обводка, блюр или внутренняя тень. С тегом _txt лейбл остаётся живым текстом, теряется только заливка или эффект, из-за которых был бейк, — и предупреждение называет, что именно отброшено. Переносящийся текст по умолчанию запекается (пиксель-в-пиксель); с _txt он остаётся живым лейблом с TextWrapped — почти точным и редактируемым в Studio
_blinkmake the layer vanish and come back, forever — a warning light, an arrow that pulses, a badge that asks to be noticed. Four settings: how long it stays visible, how long it stays hidden, how softly it fades (0 is a hard on/off), and a start delay so several layers do not blink in step. It fades transparency rather than switching the layer off, so a card inside a _grid keeps its slot and the row never re-packs around it. The whole layer goes together, children includedслой пропадает и появляется снова, бесконечно — сигнальная лампа, пульсирующая стрелка, значок, который просит внимания. Четыре настройки: сколько он виден, сколько скрыт, насколько плавно гаснет (0 — резко, как выключатель) и задержка старта, чтобы несколько слоёв не мигали в такт. Гасится прозрачность, а не сам слой, поэтому карточка внутри _grid сохраняет своё место и ряд не схлопывается. Слой уходит целиком, вместе с содержимым
_leanthe layer tilts when the cursor enters the CARD around it — an icon that reacts to its button without being one. That is the difference from _turn: _turn makes the layer itself a button, so putting it on a picture inside a card steals the card's hover and click. _lean never becomes a button; it watches the nearest button above it and leans. The dial sets the angle and goes both ways, the second slider sets how fastслой наклоняется, когда курсор заходит на КАРТОЧКУ вокруг него — иконка реагирует на свою кнопку, сама кнопкой не будучи. В этом отличие от _turn: тот делает кнопкой сам слой, и повешенный на картинку внутри карточки перехватывает у неё наведение и клик. _lean кнопкой не становится — он следит за ближайшей кнопкой сверху и наклоняется. Циферблат задаёт угол в обе стороны, второй ползунок — скорость
_floatgentle levitation: the layer drifts back and forth along one direction, forever. The dial in the plugin sets that direction like a compass — 0 is up, which is the default — and the sliders set how far it travels and how fast. The drift is centred on the design position, so the layer never sits further than half the travel from where you put itлёгкая левитация: слой плавно ходит туда-сюда в одном направлении. Циферблат в плагине задаёт направление как компас — 0 это вверх, значение по умолчанию, — а ползунки задают размах и скорость. Колебание центрируется на проектной позиции, поэтому слой не уходит дальше половины размаха от того места, куда вы его поставили
_driftan endless scrolling texture. Give the layer a Tile image fill in Figma and the pattern slides forever in the direction you pick — studs drifting behind a shop panel, that effect. The plugin sets speed and direction (a compass dial, left by default) and previews it live. The texture fills the box of the layer you tag, so put the tag on the full-size background layer, not on a small rectangle inside it. A blend mode on the tile is composited into the pattern at export, so an Overlay looks in Studio exactly like it does in Figma — Roblox itself has no blend modes. The layer keeps its own fill underneath, and nothing on top of it is clippedбесконечно едущая текстура. Дайте слою заливку картинкой в режиме Tile — и узор поедет в выбранную сторону навсегда: те самые шипы, ползущие за панелью магазина. Скорость и направление задаются в плагине (циферблат, по умолчанию влево), там же живое превью. Текстура заполняет коробку того слоя, на котором висит тег, — вешайте на полноразмерный фоновый слой, а не на маленький прямоугольник внутри. Режим наложения плитки вкомпоновывается в узор при экспорте, поэтому Overlay в Studio выглядит ровно как в Figma — в самом Roblox режимов наложения нет. Своя заливка слоя остаётся под узором, и ничего поверх не обрезается
_upthe button lifts a few pixels while the cursor is on it and settles back when it leaves. Distance and time are set in the plugin. Works inside _grid too: a layout owns where its cells sit, so the button gets its own slot and lifts inside it. In a scroll window the canvas already reserves room for the lift, so the top row is not clipped. Implies _buttonкнопка приподнимается на несколько пикселей, пока на ней курсор, и опускается обратно. Высота и время настраиваются в плагине. Работает и внутри _grid: layout сам решает, где стоит ячейка, поэтому кнопка получает собственный слот и поднимается внутри него. В окне скролла запас под подъём уже заложен в холст, так что верхний ряд не срезается. Подразумевает _button
_turnthe card turns while the cursor is on it and swings back when it leaves — 5° to the left by default. The dial in the plugin sets the angle and goes both ways; the second slider sets how fast. Rotation pivots on the card's centre, so a card drawn at an angle returns to that angle, not to zero. Stacks with _up and _smooth. Implies _buttonкарточка поворачивается, пока на ней курсор, и возвращается, когда он ушёл — по умолчанию на 5° влево. Циферблат в плагине задаёт угол и крутится в обе стороны, второй ползунок — скорость. Поворот идёт вокруг центра карточки, поэтому карточка с наклоном в макете вернётся к своему наклону, а не к нулю. Складывается с _up и _smooth. Подразумевает _button
_selectput the tag on the outline you drew inside the card — or on the card itself; if there is no button around it, the tagged layer takes the click. Clicking animates that outline in — colour, thickness, pop and timing all set in the plugin — and picking another card releases the previous one, so exactly one choice is live at a time. Clicking the chosen card again lets it go. Set the time to 0 for an instant outline; the pop keeps its own timing so it stays visible. If the layer already has a stroke, Framewisp recolours that one instead of stacking a second ring. Your game reads the choice from the parent's FWSelected attribute (the chosen button's name) or from each button's own FWSelected booleanвешается на обводку, нарисованную внутри карточки, или на саму карточку; если кнопки вокруг нет, клик берёт на себя сам помеченный слой. Клик проявляет обводку — цвет, толщина, отскок и время настраиваются в плагине, — а выбор другой карточки снимает предыдущую, так что выбранная всегда одна. Повторный клик по выбранной снимает выбор. Поставьте время 0 для мгновенной обводки: отскок живёт по своему времени и остаётся заметным. Если у слоя уже есть обводка, Framewisp перекрасит её, а не нарисует второе кольцо. Игра читает выбор из атрибута FWSelected на родителе (имя выбранной кнопки) или из булева FWSelected на самой кнопке
_ignoreskip this layer on importпропустить слой при импорте
_imagebake the layer into a crisp PNG. Aliases: _img, _lock, a # or img: prefixзапечь слой в чёткий PNG. Синонимы: _img, _lock, префикс # или img:
_fithand the text's size to Roblox: the label uses TextScaled, so the string is fitted to its box instead of keeping the design's point size. Made for labels whose text the game replaces at runtime — a score that grows from 0 to 1,000,000 stays inside its plate. It only makes sense on a box you sized yourself in Figma, because that box is what the text is fitted to; on an auto-width layer the box IS the text and there is nothing to fit. Leave it off and every label keeps the exact size from the designотдать размер текста Roblox: подпись получает TextScaled и подгоняется под свою коробку вместо кегля из макета. Для подписей, текст которых игра меняет на ходу: счёт, растущий с 0 до 1 000 000, останется внутри плашки. Имеет смысл только на коробке, которую вы задали сами, — именно под неё и подгоняется текст; у слоя с авто-шириной коробка и есть текст, подгонять нечего. Без тега каждая подпись сохраняет точный размер из макета
_keepkeep this layer separate — don't merge it into a baked imageоставить слой отдельно — не вплавлять в запечённую картинку
_canvasimport as a CanvasGroup (group transparency)импортировать как CanvasGroup (групповая прозрачность)
_aspectlock the aspect ratio (UIAspectRatioConstraint)зафиксировать пропорции (UIAspectRatioConstraint)
_nodimdon't darken this image on button hover (the rest dim)не затемнять эту картинку при наведении на кнопку (остальные темнеют)
State variantsСостоянияWhat it doesЧто делает
_hover _clickedbutton state variants you draw in Figma — shown automatically on hover / pressсостояния кнопки, нарисованные в Figma — показываются автоматически при наведении / нажатии
_smootha juicy button: smoothly scales up on hover and squishes on press, with hover/click sounds. Swap or silence the sounds via the button's SmoothHoverSound / SmoothClickSound attributes (empty = silent)сочная кнопка: плавно увеличивается при наведении и сжимается при нажатии, со звуками. Заменить или выключить звуки — атрибуты SmoothHoverSound / SmoothClickSound у кнопки (пусто = без звука)
_3da card with real 3D perspective: in game it tilts toward the cursor (idle sway on touch devices). Buttons, states and _smooth inside keep working. One note: the card renders under regular UI layers. It leaves the UI layer: real perspective needs a world surface, and Roblox always draws normal UI over one. Layers designed ABOVE the card still land on top, as drawn — but a layer BEHIND it (a panel, a backdrop) will now cover it in game, while the Studio editor still looks right because nothing is running there. Put the tag on the GROUP that holds the card and its backdrop, and the whole thing tilts together. The plugin names the offending layer in Outputкарточка с настоящей 3D-перспективой: в игре наклоняется к курсору (на тач-устройствах — лёгкое покачивание). Кнопки, состояния и _smooth внутри продолжают работать. Нюанс: карточка рендерится под обычными слоями UI. Он покидает слой интерфейса: настоящая перспектива требует поверхности в мире, а обычный UI Roblox всегда рисует поверх неё. Слои, нарисованные НАД карточкой, по-прежнему лягут сверху — а вот слой ПОЗАДИ неё (панель, подложка) в игре её закроет, хотя в редакторе Studio всё выглядит правильно, потому что там ничего не запущено. Вешай тег на ГРУППУ, где лежит и карточка, и её подложка, — тогда наклонится всё вместе. Плагин называет мешающий слой в Output
_tiltthe card stands in 3D at an angle you choose and holds it — a shop card turned three-quarters, a panel raked back, an icon on its edge. Two dials, read like a head: turn left / right is looking sideways, look up / down is raising your chin to the sky or dropping it to the ground. A third slider sets how strongly the perspective reads (higher = the card sits closer to the lens, so the same angle looks more dramatic). There is no in-plane roll on purpose — that one is Figma's own rotate handle, and it exports as it is. Past a quarter turn the card shows its back, and a back is not drawn; the demo does that too, so what you set is what you get. On its own it reacts to nothing: it is a pose, not an effect. Put _3d on the same layer and the cursor tilt swings around that pose instead of around flat zero: _tilt decides how the card stands, _3d brings it to life. Play mode only, like _3dкарточка стоит в 3D под углом, который ты выбрал, и держит его — товар в развороте на три четверти, панель, откинутая назад, иконка на ребре. Два циферблата, читаются как голова: поворот влево / вправо — это когда голову поворачивают вбок, взгляд вверх / вниз — когда её поднимают к небу или опускают к земле. Третий ползунок — сила перспективы (больше — карточка ближе к объективу, тот же угол читается резче). Крена в плоскости нет намеренно: это обычный поворот слоя в Figma, он и так уезжает в экспорт. За четверть оборота карточка поворачивается спиной, а спина не рисуется — в демо так же, поэтому что настроил, то и получишь. Сама по себе ни на что не реагирует: это поза, а не эффект. Повесь на тот же слой _3d — и наклон к курсору пойдёт вокруг этой позы, а не от плоского нуля: _tilt решает, как карточка стоит, _3d её оживляет. Работает в игре, как и _3d
_shinylooping shine. Draw the shine yourself INSIDE the button — usually a rotated semi-transparent white strip with blur — and tag that layer _shiny. In game it slides left to right across the button, wraps around and loops; the button clips it at its edges. Several shines move as a train with your exact spacing. Speed and pause — in the Effect playground or via ShineSpeed / ShineCooldown attributesзацикленный блик. Нарисуйте блик сами ВНУТРИ кнопки — обычно это повёрнутая полупрозрачная белая полоса с блюром — и повесьте тег _shiny на этот слой. В игре он поедет по кнопке слева направо, скроется за краем и появится слева снова; края кнопки его обрезают. Несколько бликов идут составом с вашими интервалами. Скорость и пауза — в Effect playground или атрибутами ShineSpeed / ShineCooldown
_glinthover shine. Same workflow as _shiny: draw the shine strip yourself inside the button and tag it _glint. It stays parked off the left edge and makes ONE sweep across the button when the cursor enters it (you may keep the layer hidden in Figma — the game shows it anyway). Speed — in the Effect playground or via the GlintSpeed attributeблик при наведении. Тот же принцип, что _shiny: нарисуйте полосу блика сами внутри кнопки и повесьте тег _glint. Блик спрятан за левым краем и делает ОДИН проход по кнопке, когда на неё заходит курсор (слой можно оставить скрытым в Figma — в игре он появится сам). Скорость — в Effect playground или атрибутом GlintSpeed
_spinspins the element around its centre in game — loaders, gears, glow rays. Speed — in the Effect playground or via the SpinSpeed attribute (degrees/sec, negative = counter-clockwise)вращает элемент вокруг центра в игре — лоадеры, шестерёнки, лучи. Скорость — в Effect playground или атрибутом SpinSpeed (градусы/сек, минус = против часовой)
_magnetmagnetic button: it leans toward the cursor when it comes near and snaps back like rubber. Combines with _button and _smooth. Heads up: a clip mask on the parent frame will cut the button when it leans outsideмагнитная кнопка: тянется к курсору, когда он рядом, и отскакивает обратно как резина. Совместим с _button и _smooth. Важно: маска-обрезка у родителя срежет кнопку, когда она выходит за фрейм
_defaultthe button's resting look — hides automatically while _hover / _clicked shows (a full state swap instead of an overlay)вид кнопки в покое — прячется автоматически, пока показан _hover / _clicked (полная подмена состояния вместо оверлея)
_disabledshown automatically while the button's Interactable is false — set that from your scriptsпоказывается автоматически, пока у кнопки Interactable = false — выставляй это из своих скриптов
_activethe look of a tab while it is selectedвид вкладки, когда она выбрана

Juice. Fifteen tags that make a static design feel alive: entrances, idle motion and press feedback. They stack with every other tag and each one has its own sliders in the Effect playground — the preview in Figma plays exactly what the game will play. Сок. Пятнадцать тегов, от которых статичный макет оживает: появления, движение в покое и отклик на нажатие. Складываются с любыми другими тегами, у каждого свои ползунки в Effect playground — превью в Figma играет ровно то же, что и игра.

JuiceАнимацияWhat it doesЧто делает
_popthe panel springs in with an overshoot the moment it appears — start scale and pop time are yours. Put it on anything _open shows, or on a layer that is already on screen at spawn: it plays once on every appearanceпанель влетает с пружинным перелётом в момент появления — начальный размер и время задаются в плагине. Ставьте на всё, что показывает _open, или на слой, который виден сразу при заходе: эффект играет при каждом появлении
_revealthe showcase entrance: the panel grows from half size while rocking through a few decaying swings, then settles. Swing angle, settle time and start scale are sliders; the dial picks the rocking direction (0 = up and down like a display case, 90 = sideways). Replays on every _openвитринное появление: панель вырастает с половины размера, покачиваясь затухающими взмахами, и успокаивается. Угол распаха, время успокоения и начальный размер — ползунки; диск выбирает направление качания (0 — вверх-вниз, как витрина, 90 — вбок). Повторяется при каждом _open
_swingthe reward-door entrance: the panel snaps in fast and rocks in true 3D — nodding toward you and away, each rock softer than the last, until it stands still. Rock angle, rocks before settling, settle time and start scale. The card is mounted on a real surface in the world, so the perspective is genuine rather than a squash. Replays on every _openпоявление «дверцей»: панель влетает и качается в настоящем 3D — кивает к вам и от вас, каждый мах мягче предыдущего, пока не встанет. Угол качания, число махов, время успокоения и начальный размер. Карточка живёт на реальной поверхности в мире, поэтому перспектива настоящая, а не сплющивание. Повторяется при каждом _open
_cascadechildren of this frame arrive one after another with a spring, top to bottom — the staggered shop-grid entrance. One slider: the delay between items. Only clickable cards are staggered; titles, dividers and decoration come in with the frame, so the panel never looks half-builtсодержимое фрейма приезжает по очереди с пружиной, сверху вниз — та самая лесенка появления карточек в магазине. Один ползунок: задержка между элементами. По очереди выходят только кликабельные карточки; заголовки, разделители и украшения приходят вместе с фреймом, поэтому панель не выглядит недособранной
_pulsea heartbeat: the layer swells and settles forever, pulling the eye to BUY / CLAIM. Beat strength and beats per second. For the smoothest beat add _3d to the same layer — it then scales as a surface in the world instead of the whole-pixel UI grid (set Tilt strength to 0 if you do not want the cursor tilt as well)сердцебиение: слой ритмично раздувается и опадает, притягивая взгляд к BUY / CLAIM. Сила удара и число ударов в секунду. Для самого плавного биения добавьте на тот же слой _3d — тогда слой масштабируется как поверхность в мире, а не по целым пикселям интерфейса (поставьте силу наклона в 0, если наклон к курсору не нужен)
_jellyan idle jelly wobble — a small rotation and a breath of scale, randomised per layer so a whole grid never wobbles in step. Wobble angle and speedжелейное покачивание в покое — небольшой поворот и лёгкое дыхание размера, со случайной фазой на каждом слое, чтобы сетка не качалась в такт. Угол покачивания и скорость
_wigglerings like a bell: a quick rotational swing that fades out, repeating every few seconds. Swing angle and interval — a quiet way to point at a button without shoutingзвенит, как колокольчик: быстрый поворотный мах, который затухает и повторяется раз в несколько секунд. Угол качания и интервал — тихий способ указать на кнопку, не крича
_shakea burst of decaying shudder every few seconds — the “unclaimed reward, look at me” nudge. Shake distance, burst length and repeat intervalвспышка затухающей тряски раз в несколько секунд — толчок «награда не забрана, посмотри сюда». Размах, длина вспышки и период повтора
_glowa breathing glow around the layer: colour, size and breathe speed. If the layer already has a stroke, that stroke breathes; if it does not, Framewisp draws a halo around it. The ring holds its density and only its size breathes, so it reads as light rather than blinkingдышащее свечение вокруг слоя: цвет, размер и скорость дыхания. Если у слоя есть обводка — дышит она; если нет — рисуется ореол. Плотность кольца постоянна, дышит только размер, поэтому это читается как свет, а не как мигание
groupsUploading for a group. A Roblox sign-in authorises you, never your groups — that is why a group upload answers "user not authenticated" however senior your role is. Roblox opens exactly one door for it: an Open Cloud API key. In the plugin, open "Uploading for a group?", pick the group (the list comes from your sign-in), and paste a key created at create.roblox.com/dashboard/credentials with the API System assets (not legacy-assets and not asset-permissions), adding that group as the creator inside it and ticking Read and Write. Framewisp checks the key against Roblox before saving it, keeps it on the server and never shows it again — "Back to my account" deletes it. This matters when the GAME is owned by the group: an experience can only read assets its own owner uploadedЗагрузка в группу. Вход в Roblox авторизует тебя, а не твои группы — поэтому загрузка в группу отвечает «user not authenticated», какая бы роль в группе ни была. Roblox оставляет ровно одну дверь: ключ Open Cloud API. В плагине открой «Грузить в группу?», выбери группу (список приходит из твоего входа) и вставь ключ, созданный на create.roblox.com/dashboard/credentials с системой assets (не legacy-assets и не asset-permissions), добавив эту группу внутрь неё как создателя и отметив Read и Write. Framewisp проверяет ключ у Roblox до сохранения, держит его на сервере и больше никогда не показывает — «Обратно в мой аккаунт» его удаляет. Это нужно, когда ИГРА принадлежит группе: опыт читает только те ассеты, которые загрузил его собственный владелец
_focusput it on the panel and the world behind it reacts when the panel opens: the camera pushes in, Lighting picks up a blur, and the world can darken. Closing the panel puts all three back, and two panels open at once blur once, not twice. Set the camera push in degrees — added to the game’s own field of view, negative pushes in — the blur, how far the world darkens and how many seconds the move takes. Nothing in your design changes: the tag touches the world, not the UI, so a panel you already built picks it up as it is. Delete the script and the world simply stops reactingповесьте на панель — и мир позади реагирует на её открытие: камера наезжает, в Lighting появляется размытие, мир можно затемнить. При закрытии всё возвращается, а две открытые панели размывают один раз, а не дважды. Задаётся наезд камеры в градусах — прибавляется к углу обзора самой игры, минус — это наезд, — размытие, сила затемнения и время. Сам дизайн не меняется: тег трогает мир, а не интерфейс, поэтому уже готовая панель подхватывает его как есть. Удалите скрипт — мир просто перестанет реагировать
_fallrain inside the object. Tag any layer — a plain rectangle works — and upload the picture that falls right in the effect panel: the layer stays exactly as drawn, and the picture rains inside it at its own size. Prefer drawing it? A tagged picture rains in the frame you placed it in, and a tagged container rains its top layer. The template stops showing; copies arrive and leave through transparency, each at its own size, tilt and speed, and smallest / largest copy are two separate sliders. Keep apart spreads the copies out — the distance between them is a slider, in copy widths. The box that cuts the rain is a CanvasGroup, because Roblox’s ordinary clipping has never cut a rotated child — and every copy is tiltedдождь внутри объекта. Повесьте на любой слой — хоть на обычный прямоугольник — и загрузите падающую картинку прямо в панели эффекта: слой остаётся ровно как нарисован, а картинка сыплется внутри него своим размером. Хотите нарисовать? Картинка с тегом падает во фрейме, куда вы её положили, а контейнер с тегом сыплет свой верхний слой. Шаблон перестаёт показываться; копии появляются и уходят через прозрачность, каждая со своим размером, наклоном и скоростью, а самая мелкая / самая крупная — два отдельных ползунка. Держать дистанцию разводит копии в стороны — расстояние между ними задаётся ползунком, в ширинах копии. Рамку, которая режет дождь, держит CanvasGroup: обычная обрезка Roblox никогда не резала повёрнутый элемент, а каждая копия наклонена
_flowthe gradient never stops moving on the layer — a shifting title, a live progress bar, a rainbow badge. It moves the gradient you already drew in Figma, so the colours stay yours; the plugin also ships ready-made gradients you can drop onto the layer in one click, with rotation and saturation. Set how many seconds one full pass takes, whether it slides or rotates, and what it paints: the fill, the stroke (a glowing outline around text) or both. The colours march through the layer instead of being slid across it, so the loop has no seam and no trailing band of the first colour. Rainbow mode ignores your colours and runs the spectrumградиент бесконечно движется по слою — переливающийся заголовок, живая полоса прогресса, радужный значок. Двигается тот градиент, который вы уже нарисовали в Figma, — цвета остаются вашими; в плагине ещё есть готовые градиенты, они ставятся на слой в один клик, с поворотом и насыщенностью. Задаётся, за сколько секунд проходит полный цикл, плывёт он или вращается и что красит: заливку, обводку (переливающийся контур у текста) или и то и другое. Цвета шагают сквозь слой, а не съезжают по нему, поэтому у цикла нет шва и нет хвоста из первого цвета. Режим радуги игнорирует ваши цвета и гоняет спектр
_shadowa real UIShadow with every setting Roblox has: colour, transparency, offset, blur, spread and Inset for an inner shadow. Use it when the shadow is part of the design rather than a soft drop under a card — Framewisp normally bakes the Figma shadow, and this tag takes that over so the tag owns the look, not the export. Roblox refuses a gradient on a shadow, so "two-tone" is exactly what the engine can draw: turn on the second colour and you get two shadows pulled apart along the offset — a coloured rim on one side, the darker one on the other. A shadow takes the SHAPE of the layer it sits on, so tag the layer that carries the rounding — and if you tag a transparent group whose rounded card fills it, Framewisp lends the shadow that card's corner instead of throwing a square one. Blur, spread and offset are design pixels: they scale with the rest of the UI, so the shadow stays the same size relative to its card on every screenнастоящий UIShadow со всеми свойствами Roblox: цвет, прозрачность, смещение, размытие, разброс и Inset для внутренней тени. Нужен, когда тень — часть дизайна, а не мягкая подложка под карточкой: обычно Framewisp запекает тень из Figma, а с тегом внешний вид задаёте вы, а не экспорт. Градиент на тень Roblox не даёт, поэтому «двухцветность» сделана тем, что движок реально умеет: включаете второй цвет — получаете две тени, разведённые по смещению: цветной кант с одной стороны, тёмный с другой. Тень принимает ФОРМУ слоя, на котором стоит, — вешайте тег на слой со скруглением; а если тег попал на прозрачную группу, внутри которой скруглённая карточка во всю её величину, Framewisp отдаст тени скругление этой карточки, а не нарисует прямоугольник. Размытие, разброс и смещение задаются в пикселях макета и масштабируются вместе с остальным интерфейсом — тень остаётся одного размера относительно своей карточки на любом экране
_raysfor the sunburst you drew behind a reward: a slow spin plus a gentle pulse, the classic prize backdrop. Spin speed (either direction) and pulse depthдля лучей, нарисованных за наградой: медленное вращение плюс мягкий пульс — классическая подложка приза. Скорость вращения (в любую сторону) и глубина пульса
_pixelsa mosaic shimmer over the layer: little squares light up at random and fade, like a pixel background come alive. Cell size (even or random), twinkles per second, accent colour and max opacity. It stays inside the layer's rounded corners, so a card still looks like a cardмозаичное мерцание поверх слоя: квадратики загораются в случайных местах и гаснут, как ожившая пиксельная подложка. Размер клетки (ровные или вразнобой), вспышек в секунду, цвет и максимальная непрозрачность. Мерцание живёт внутри скруглений слоя, поэтому карточка остаётся карточкой
_gleama white light sweeps across the TEXT from left to right — fill and outline together — like a title flash. Sweep time, pause between sweeps and wave width. It needs live Roblox text, so add _keep if the layer uses a display font that would otherwise be baked into an imageбелый блик проезжает по ТЕКСТУ слева направо — по заливке и обводке сразу — как вспышка на заголовке. Время прохода, пауза между проходами и ширина волны. Нужен живой текст Roblox: если шрифт декоративный и слой запекается в картинку, добавьте _keep
_squishsquash-and-stretch press: the button flattens wide under the press and springs back on release. Squash amount and return time. Makes the layer a buttonнажатие со сплющиванием: кнопка приседает и расплывается вширь при нажатии и упруго возвращается при отпускании. Сила сплющивания и время возврата. Делает слой кнопкой
_ripplea circular wave expands from the exact click point, reaches the farthest corner of the button and fades there. Colour, opacity and expand time. It is clipped by the button's own rounded corners. Makes the layer a buttonкруглая волна расходится ровно от точки клика, добегает до дальнего угла кнопки и там гаснет. Цвет, непрозрачность и время расширения. Обрезается скруглениями самой кнопки. Делает слой кнопкой
_billboardimport the design as a BillboardGui — world-space UI for name plates, health bars and shop stands. Put the tag on the ROOT frame: everything inside stays scale-based, so nothing needs manual maths. Set the width in studs (height follows your design's aspect), whether it draws through walls, and a max distance. In Studio just drop the billboard under a Part — move it to another Part and the UI goes with it. Every effect runs there too: the runtime rides inside the BillboardGui, so a duplicated Part keeps its animation without any host in StarterGui. Scene lighting does not tint it, and text is placed by its baseline, so a title reads at the Figma size and position at any distanceимпортировать макет как BillboardGui — интерфейс в мире: таблички с именами, полоски здоровья, вывески магазинов. Тег ставится на КОРНЕВОЙ фрейм: всё внутри остаётся в долях, руками ничего пересчитывать не нужно. Задаются ширина в стадах (высота берётся из пропорций макета), видимость сквозь стены и предельная дальность. В Studio достаточно положить билборд под Part — перетащите его на другой Part, и UI переедет вместе с ним. Эффекты работают там же: рантайм живёт внутри BillboardGui, поэтому копия парта сохраняет анимацию без хоста в StarterGui. Освещение сцены его не подкрашивает, а текст ставится по базовой линии — заголовок читается как в Figma по размеру и месту на любой дистанции
_promptturn a design into the custom UI of a ProximityPrompt (walk up, press a key). Tag the ROOT frame of a _billboard design: the import creates an anchor Part with a ProximityPrompt (Style=Custom) on it and shows your UI when a player approaches. The key, the hold time and the show distance are set in the plugin and travel with the convert; every property stays editable on the prompt itself. Line of sight is off on purpose — a prompt inside a crate or behind glass would otherwise never appear. Connect .Triggered in your own script for the game logicпревращает макет в кастомный UI для ProximityPrompt (подошёл — нажал клавишу). Тег на КОРНЕВОЙ фрейм _billboard-макета: импорт создаёт якорь-Part с ProximityPrompt (Style=Custom) и показывает UI при приближении игрока. Клавиша, время удержания и дистанция задаются в плагине и едут вместе с конвертом; все свойства при этом остаются правимыми на самом промпте. Line of sight выключен намеренно — иначе промпт в ящике или за стеклом просто не появлялся бы. Логику подключайте сами через .Triggered
_holdinside a _prompt design: the layer that fills while the key is held. Tag the element carrying the stroke — usually your button's border — and that outline fills with your colour, left to right, over exactly the prompt's hold time. Let go early and it drains back instead of snapping to zero. The colour is a slider in the plugin, or a HoldColor attribute on the layer in Studio. The fill happens in place: your own stroke is repainted through a gradient, so rounded corners come for free and the layer keeps its exact size and position. A layer with no stroke fills its background insteadвнутри _prompt-макета: слой, который заполняется, пока игрок держит клавишу. Тег вешается на элемент с обводкой — обычно это рамка кнопки — и она заливается вашим цветом слева направо ровно за время удержания. Отпустил раньше — заливка стекает обратно, а не схлопывается. Цвет задаётся ползунком в плагине или атрибутом HoldColor в Studio. Заливка идёт по месту: перекрашивается ваша же обводка через градиент, поэтому скругления работают сами, а размер и позиция слоя не меняются. У слоя без обводки заливается фон

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

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

TagТегWhat it doesЧто делает
_closeclick hides the panel it sits in (or the whole GUI). Alias: _exitклик прячет панель, в которой лежит (или весь GUI). Синоним: _exit
_open:Shopclick shows the panel named Shopклик показывает панель с именем Shop
_toggle:Shopclick opens / closes itклик открывает / закрывает её
_panelmarks a frame as a closable panel (a target for open/close/toggle)помечает фрейм закрываемой панелью (цель для open/close/toggle)
_tab:Weaponsshow the Weapons panel and hide the group's othersпоказать панель Weapons и спрятать остальные в группе
_tabgroupwraps 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.Gemsbinds 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 & text — the honest version. Plain text stays a live, editable TextLabel; if its font isn't on Roblox it gets the closest substitute and the plugin warns you. But text that's part of a styled graphic — a frame with a gradient or texture fill, effects, or outlined/vector letters — can't be recreated natively, so Figma bakes it into a pixel-perfect image (identical to your design, but not editable). This happens automatically, with no tag. To control it: tag a layer _keep to pull it out of a baked graphic and keep it as live text (it'll use the closest font, so it may look a little different); tag a live text layer _image to force a pixel-exact copy. Want editable text that also looks right? Use a Roblox-supported font for that layer in Figma. Шрифты и текст — как есть, без прикрас. Обычный текст остаётся живым, редактируемым TextLabel; если его шрифта нет в Roblox — подбирается ближайший аналог, и плагин предупреждает. Но текст внутри стилизованной графики — фрейм с градиентом или текстурой, эффекты, обведённые/векторные буквы — нельзя воссоздать нативно, поэтому Figma запекает его в пиксельную картинку (точь-в-точь как в макете, но не редактируется). Это происходит автоматически, без тега. Как управлять: пометьте слой _keep, чтобы вынуть его из запечённой графики и оставить живым текстом (будет ближайший шрифт, поэтому может выглядеть чуть иначе); пометьте живой текст _image, чтобы сделать пиксель-точную копию. Хотите и редактируемый, и правильный вид? Поставьте этому слою в Figma шрифт, который есть в Roblox.

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 — держите под рукой номер заказа #.