FigNative

About this plugin

Transform your Figma designs into clean, production-ready frontend code in seconds. **FigNative v2** is a complete rewrite supporting **React Native**, **React (Web JSX)**, **Tailwind CSS**, and **Semantic HTML5/CSS** with real-time live preview, interactive layer tagging, and instant free playground export.100% Free • No API keys • No signup required.## ⚡ What's New in v2.0- 🚀 **Multi-Framework Code Generation:** Instant switching between **React Native (StyleSheet & Inline)**, **React Web JSX**, **Tailwind CSS**, and **Semantic HTML5 + CSS**.- 🎨 **Interactive Live Preview:** Built-in sandboxed preview panel with Responsive, Mobile (375px), and Tablet (768px) viewport testing.- 📐 **Smart Layer Optimization:** Automatically collapses redundant wrappers, dedupes identical CSS classes, and detects semantic HTML tags (`

`, `

`, ``, ``).- 💎 **Inline SVG Export:** Automatically exports vector shapes and icon containers into crisp, self-contained `

`- `#switch#` $\rightarrow$ `Switch` / Toggle- `#image#` $\rightarrow$ `Image` / ``- `#text#` $\rightarrow$ `Text` / ``### 4. Interactive Live Sandbox & Preview- Preview your components live in a sandboxed frame before copying.- One-click **COPY** (Full Component) or **COPY STYLES** (StyleSheet / CSS only).- Instant **Open in Expo Snack** to test mobile interactions on iOS and Android emulators.## 🛠️ How to Use1. **Select** any Frame, Component, Group, or Text layer in your Figma canvas.2. **Open FigNative** from your Plugins menu (`Plugins` $\rightarrow$ `Development` or `Community` $\rightarrow$ `FigNative`).3. **Choose your format** (React Native, React, Tailwind, or HTML/CSS), review your live code/preview, and click **COPY**!## 🗺️ Roadmap- [x] Multi-format code generation (React Native, React, Tailwind, HTML/CSS)- [x] Auto Layout to Flexbox mapping- [x] Live interactive preview frame (Mobile, Tablet, Responsive)- [x] One-click Expo Snack live testing- [x] Inline SVG icon and vector export- [x] Smart wrapper collapsing & class deduping- [ ] Figma Variables & Design Token JSON export- [ ] Export bundled image assets directly as a downloadable ZIP- [ ] Custom component mapping for design systems (Shadcn, Tamagui, NativeWind)- [ ] Dark / Light mode theme variant generator