FigNative

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 `` markup.- 📲 **1-Click Expo Snack:** Launch React Native code directly into a free, interactive live device simulator with zero setup.- 🏷️ **Visual Layer Tagger:** Interactive UI buttons to tag layers as `View`, `Text`, `Image`, `Button`, `Input`, `Switch`, or `ScrollView`.- ⚡ **Zero-Lag React UI:** Lightning-fast plugin engine powered by TypeScript and esbuild with a built-in Dracula syntax highlighter.## ✨ Key Features### 1. Multi-Format Code Engine- **React Native:** Production-ready components with clean `StyleSheet.create({})` or inline styles, `TouchableOpacity`, `TextInput`, `ScrollView`, `Switch`, `Image`, and flex layouts.- **Tailwind CSS:** Modern utility classes (`flex`, `gap-[Xpx]`, `rounded-full`, `bg-[#...]`, `text-[Xpx]`) mapped cleanly from your design tokens.- **React (Web JSX):** Standard functional components with clean markup and modular CSS.- **Semantic HTML5 / CSS:** Structured HTML with auto-generated, human-readable BEM-style CSS classes.### 2. Full Auto Layout Translation- Automatically converts Figma Auto Layout properties into accurate Flexbox rules:- Direction (Row / Column / Flex Wrap)- Primary & Counter axis alignments (`justifyContent`, `alignItems`)- Padding, gap, item spacing, and sizing (`HUG`, `FILL` $\rightarrow$ `flex: 1`)### 3. Interactive Layer Tagging & Naming ShortcutsTag elements directly with one click in the plugin UI, or use instant naming shortcuts in your layer panel:- `#btn#` $\rightarrow$ `TouchableOpacity` / ``- `#input#` $\rightarrow$ `TextInput` / ``- `#scroll#` $\rightarrow$ `ScrollView` / ``- `#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