Figma To Roblox UI — Design skill for Claude Code
Claude skill for high-fidelity Figma → Roblox Studio GUI import (Scale-only, UIStroke ScaledSize, UICorner scale).
How to install Figma To Roblox UI
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open xtrair/figma-to-roblox-ui and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Figma To Roblox UI does
Claude skill for high-fidelity Figma → Roblox Studio GUI import (Scale-only, UIStroke ScaledSize, UICorner scale).
Alternatives in Design
- Frontend Design — Create distinctive, production-grade frontend interfaces with high design quality 94.1k ★
- Doc — Read, create, and edit .docx documents with formatting and layout fidelity 14.6k ★
- Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
README
figma-to-roblox-ui
A Claude skill for importing Figma frames and designs into Roblox Studio GUI with high fidelity.
What it enforces
- Scale only, Offset = 0 —
Size,Position, list/grid padding,UIPadding,UIShadow. - UIStroke always in
StrokeSizingMode.ScaledSize(Thickness = strokeWeight / min(w, h)). - UICorner in Scale (
radius / min(w, h),0.5= pill/circle), including per-corner radii. - Detailed art and non-standard shapes are exported as images (PNG → ImageLabel/ImageButton), while layout and text stay native — the way pro Roblox UI designers work.
- Image limits handled: ≤ 1024 px, 9-slice, spritesheets, tiling for large art,
ImageColor3tinting for color variants. TextScaled+UITextSizeConstraintfor all text.- A Luau validator that flags any leftover Offset, FixedSize strokes, px radii, non-scaled text or empty images.
Contents
- Figma prep checklist and a native-vs-image decision guide
- px → Scale formulas and a Figma → Roblox property mapping table
- Luau helpers (
place,corner,stroke,aspect,text,image) - Upload, performance, build order, visual QA and common mistakes
Works with the Figma MCP (`get_metadata`, `get_design_context`, `get_screenshot`, `download_assets`) and the Roblox Studio MCP (`execute_luau`, `screen_capture`), and for checking output from import plugins (FigBloxUI, RoImport, Bloxporter, Figma To Roblox).
Install
Claude Code / Agent SDK:
git clone https://github.com/xtrair/figma-to-roblox-ui ~/.claude/skills/figma-to-roblox-uiClaude app: download the repo as a zip and upload it as a custom skill in the app settings.
Not covered yet
Window/transition animations, button logic, list item templates, gamepad selection, ViewportFrame previews, StyleSheets, localization.
License
MIT
Related Skills
2
Build a high-fidelity, responsive, dark-themed hero section for a SaaS product called "Taskora" using React, T
3
Create a high-fidelity, dark-mode Hero section for a SaaS product called "ClearInvoice" using React and Tailwi
Brand Kit
Generate a complete brand kit from a logo and 1-2 brand colors — full palette, type scale, icon style, compone
Import Design
Import a design from an external tool (Figma, Stitch, v0, Pencil, Claude Design, DESIGN.md, or React JSX) into
Dom2figma
Capture rendered web prototypes with headless Chrome and import them into Figma as editable layers. Whole prot
Color Scales
Claude skill that turns a brand palette into consistent color scales for design systems: places each color by
Related Agents
Roblox Asset UI
Builds Roblox GUI from a spec into .model.json instance files, a Luau builder and a PNG mockup, all written to
Agent Layer Import
AGENT: import PDF layers into Figma floor frames
Codebase Analytics
Use to audit the production-code side of the design system: Figma<->code parity gaps, import coverage of regis
