메뉴
Run and build Figma Make exported code locally with automatic dependency resolution and asset handling
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/Aradotso/design-skills --skill figma-make-local-runner명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
SKILL.md 표시 중
| name | figma-make-local-runner |
| description | Run and build Figma Make exported code locally with automatic dependency resolution and asset handling |
| triggers | ["how do I run Figma Make code locally","setup local environment for Figma exported code","build single HTML file from Figma Make project","resolve Figma Make import errors","handle figma:asset imports locally","remove version specifiers from Figma imports","convert Figma Make to standalone HTML","troubleshoot Figma Make dependencies"] |
Skill by ara.so — Design Skills collection.
Figma Make Local Runner is a TypeScript/React development environment that runs code exported from Figma Make locally. It solves common issues with Figma Make exports including:
@radix-ui/react-slot@1.1.2 → @radix-ui/react-slot)figma:asset/ imports# Clone the repository
git clone https://github.com/likang/figma-make-local-runner
cd figma-make-local-runner
# Install dependencies
npm install
After exporting code from Figma Make:
# Extract downloaded zip and copy src folder
cp -r /path/to/figma-make-export/src ./src
The src folder structure should contain:
App.tsx or main component filesassets/ - images, fonts, SVGsnpm run dev
Access at http://localhost:5173
Standard Build:
npm run build
Single HTML File (standalone):
npm run build:single
This creates a single HTML file in dist/ with all assets inlined - perfect for sharing or embedding.
# Development server with hot reload
npm run dev
# Type checking
npm run type-check
# Production build (standard)
npm run build
# Production build (single HTML file)
npm run build:single
# Preview production build
npm run preview
If you encounter import errors, install the missing package:
// Error: Cannot find module 'some-package'
import { Component } from 'some-package@1.2.3';
// Solution:
// npm install some-package
The build system automatically strips version specifiers, so install the latest compatible version.
Figma Make exports may reference assets like:
import logo from "figma:asset/logo.svg";
import heroImage from "figma:asset/images/hero.png";
function Header() {
return (
<div>
<img src={logo} alt="Logo" />
<img src={heroImage} alt="Hero" />
</div>
);
}
The custom Vite plugin resolves these to src/assets/:
src/
assets/
logo.svg
images/
hero.png
Typical Figma Make component:
import React from "react";
import { Button } from "./components/ui/button";
export function App() {
return (
<div className="w-full h-screen">
<Button>Click me</Button>
</div>
);
}
Add custom logic:
import React, { useState } from "react";
import { Button } from "./components/ui/button";
export function App() {
const [count, setCount] = useState(0);
return (
<div className="w-full h-screen">
<Button onClick={() => setCount(count + 1)}>
Clicked {count} times
</Button>
</div>
);
}
Figma Make typically exports with Tailwind CSS classes:
function Card({ title, description }: { title: string; description: string }) {
return (
<div className="rounded-lg border bg-card text-card-foreground shadow-sm">
<div className="flex flex-col space-y-1.5 p-6">
<h3 className="text-2xl font-semibold">{title}</h3>
<p className="text-sm text-muted-foreground">{description}</p>
</div>
</div>
);
}
Extend with custom Tailwind classes or CSS modules as needed.
The project includes custom plugins in vite.config.ts:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
react(),
// Custom plugin removes version specifiers
removeVersionSpecifiersPlugin(),
// Custom plugin resolves figma:asset/ imports
figmaAssetPlugin()
],
resolve: {
alias: {
'@': '/src'
}
}
});
Standard React TypeScript setup in tsconfig.json:
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["src"]
}
Problem: Imports with version specifiers fail
import { Slot } from "@radix-ui/react-slot@1.1.2";
// Error: Cannot find module
Solution: The plugin handles this automatically, but ensure the package is installed:
npm install @radix-ui/react-slot
Problem: figma:asset/ imports fail at runtime
import icon from "figma:asset/icon.svg";
// Error: Module not found
Solution: Verify file exists in src/assets/:
ls src/assets/icon.svg
Problem: Dependency not pre-installed
Solution: Install explicitly:
npm install <package-name>
Common Figma Make dependencies:
npm install @radix-ui/react-slot
npm install class-variance-authority
npm install clsx
npm install tailwind-merge
npm install lucide-react
Problem: Assets not loading in single HTML file
Solution: Ensure build:single command is used and assets are in src/assets/:
npm run build:single
Problem: Changes don't reflect in browser
Solution: Restart dev server with cleared cache:
# Stop server (Ctrl+C)
rm -rf node_modules/.vite
npm run dev
Complete workflow for a Figma Make dashboard:
// src/App.tsx (generated by Figma Make, then modified)
import React, { useState } from "react";
import { Button } from "./components/ui/button";
import { Card } from "./components/ui/card";
import logo from "figma:asset/logo.svg";
interface DashboardData {
users: number;
revenue: number;
}
export function App() {
const [data, setData] = useState<DashboardData>({
users: 1234,
revenue: 56789
});
const refreshData = async () => {
// Add your API call here
const response = await fetch(process.env.VITE_API_URL + '/dashboard');
const newData = await response.json();
setData(newData);
};
return (
<div className="min-h-screen bg-background p-8">
<header className="mb-8 flex items-center justify-between">
<img src={logo} alt="Logo" className="h-12" />
<Button onClick={refreshData}>Refresh</Button>
</header>
<div className="grid grid-cols-2 gap-4">
<Card title="Total Users" description={data.users.toString()} />
<Card title="Revenue" description={`$${data.revenue}`} />
</div>
</div>
);
}
Environment variables (.env):
VITE_API_URL=https://api.example.com
Build and share:
npm run build:single
# Share dist/index.html as standalone file