Figma to Roblox UI

Import Figma frames and designs into Roblox Studio GUI (ScreenGui/Frame/ImageLabel): Scale-only layout, centered AnchorPoint, UIStroke ScaledSize, UICorner in Scale, detailed art and custom shapes exported as images. Use for any Figma to Roblox UI transfer.

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add xtrair/figma-to-roblox-ui --skill figma-to-roblox-ui
Manual install
git clone --depth 1 https://github.com/xtrair/figma-to-roblox-ui.git /tmp/figma-to-roblox-ui
mkdir -p ~/.claude/skills
cp -r /tmp/figma-to-roblox-ui/. ~/.claude/skills/figma-to-roblox-ui

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Figma → Roblox GUI: high-fidelity import

Use this skill whenever a frame, screen, or component from Figma has to end up as GUI in Roblox Studio — built by hand in Luau, through the Roblox Studio MCP, or when checking the output of import plugins (FigBloxUI, RoImport, Bloxporter, Figma To Roblox).

## 0. HARD RULES (never break these)

1. **Scale everywhere, Offset = 0.** `Size`, `Position`, `UIListLayout.Padding`, `UIGridLayout.CellSize/CellPadding`, every `UIPadding` side, `UIShadow.Offset/BlurRadius/Spread` — Scale component only. Offset is always `0`.
2. **AnchorPoint = `Vector2.new(0.5, 0.5)` on every GuiObject by default**, so `Position` is the element's center. With a corner anchor like `(0, 0)`, UIAspectRatioConstraint, Size tweens and resolution changes shrink/grow the box toward that corner, so buttons and panels skew and drift away from their Figma spot. Use another anchor only when there is a concrete reason (section 4, "When not to center") and record it in the `AnchorReason` attribute so the validator accepts it.
3. **UIStroke always uses `StrokeSizingMode = Enum.StrokeSizingMode.ScaledSize`.** In this mode `Thickness` is a fraction of the *parent's shortest axis* (0.1 on a 200×300 frame = 20 px). Keep values between 0 and 1. `BorderOffset` is Scale too.
Read the full skill on GitHub

Details

Skill name
figma-to-roblox-ui
License
MIT
Repo updated
24 September 2026

FAQ

What does the Figma to Roblox UI skill do?

Import Figma frames and designs into Roblox Studio GUI (ScreenGui/Frame/ImageLabel): Scale-only layout, centered AnchorPoint, UIStroke ScaledSize, UICorner in Scale, detailed art and custom shapes exported as images. Use for any Figma to Roblox UI transfer.

How do I install the Figma to Roblox UI skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add xtrair/figma-to-roblox-ui --skill figma-to-roblox-ui. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Figma to Roblox UI popular?

It lives in xtrair/figma-to-roblox-ui, which has 5 GitHub stars and 0 forks.

Related skills

Frontend Feature Architecture

5

Arthurblaya/frontend-feature-architecture

Organize frontend code by feature with explicit ownership and one-way dependencies. Use when adding a frontend feature, deciding file placement, reviewing architecture, or migrating a frontend folder structure across web, mobile, and desktop projects.

Frontend & Design

Deslopify

5

AntonioSpagnol/UI-Deslopify-Skill

Audits and refactors vibe-coded UIs by replacing each slop element with modern 21st.dev components or equivalents with real visual character — never removes without replacing. Runs a mandatory grill-me style interview (one question at a time, with recommendations) before touching files, including brand identity and design references. Use when the user asks to deslopify, refatorar UI, limpar design, refactor UI, clean design, replace components, or when the code has glassmorphism, purple/blue gradients, decorative orbs, spinners, or empty corporate copy.

Frontend & Design

HTML Skill Effectiveness

5

YardonYan/html-skill-effectiveness

Generates self-contained single-file HTML artifacts — visually polished, zero dependencies, openable straight in a browser. Covers 13 layout patterns, a 5-dimension critique system and DevLoop iteration, under 7 enforceable craft rules (anti-ai-slop, color, typography, hierarchy, animation, accessibility, laws-of-ux) plus state-coverage and form-validation contracts. Use when the user asks for a report, comparison, dashboard, slide deck or interactive explainer delivered as one HTML file. NOT for auth, payment, backend logic or real-time database scenarios — refuse and inform the user in those

Frontend & Design

Design Review

5

humbleteam/design-review

Run a structured UX critique on a screenshot, URL, or HTML snippet - a 0-4 score, up to 6 prioritized issues each with Before/After/Why, and one citation per claim. Given two or more variants, compares them on shared dimensions and names a winner. Given a screen plus a decision question, answers the question with the screen as evidence instead of returning a critique. Trigger phrases - "review this design", "critique this screen", "what's wrong with this UI", "score this design", "which of these two is better", "did the redesign improve this", "should I use a modal or a drawer". Do not use for

Frontend & Design

Lean Canvas Coach

5

xntj-ai/lean-canvas-coach

交互式教练:用教练式提问带一位创始人/老板走完一张「精益画布」(Lean Canvas 9 格), 然后揪出那个最要命的「关键假设」,再帮他设计一个「最低成本验证」去先验它。 不是做一次就完——支持每月/每周把新情况丢进来「重跑」,看关键假设变没变。 三模式:interview(我访谈你→画布→关键假设→最低成本验证)、rerun(拿旧画布+新情况→重跑更新)、script(我出提问脚本你自己填)。 是**会做功课的教练**——每一格你答完,我都补一手(调研核实/起草候选/先立后破地质疑/点破框架坑),跟你共创,不把画布的活儿全压给你;不是只会问的问卷机,也不是空表让你自己填。 Use when: 用户要做商业模式分析/精益画布/lean canvas、说"帮我理一理这门生意""我这想法到底成不成""最大的风险在哪""帮我做个商业画布""访谈我出画布"、或已有画布要重跑更新。 NOT for: 写商业计划书/BP 全文、纯财务建模、个人IP定位(用 ip-canvas-coach)、写单篇文案(用 voice-dna / luo-restyle)。

Frontend & Design

Design Mapper Skill

5

bilioveloso/design-mapper-skill

Intelligent design brief router. Takes any design request and emits a structured routing plan — which skills to load, in what order, with what focus parameters. Always load this skill FIRST when receiving a design brief. It is the entry point for the entire modular design system. Trigger on: "design a", "create UI for", "branding for", "what should it look like", "color scheme for", "design brief", "visual identity", "/design", intent=design_brief.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.