Code to Component
Code to Component converts UI code into editable Figma components.
Plugin Preview
About this plugin
Code to Component converts UI code into editable Figma components.Paste one of these input types:Web HTML or JSX with inline stylesAndroid layout XMLiOS SwiftUI view codeThe plugin parses the structure and creates Figma layers for containers, text, buttons, and images. It supports common properties like width, height, padding, gap, colors, border radius, shadows, text size, and simple vertical or horizontal layouts.Best for:quickly recreating UI from existing codeturning developer handoff into editable design blocksexploring Android, iOS, and web UI inside FigmaFor best results, paste expanded view code without loops, conditions, bindings, or generated class-based styling.
Plugin Details
| Version | 1 |
|---|---|
| Created | March 18, 2026 |
| Last Updated | March 18, 2026 |
| Category | ui-kits |
| Creator | Mikar |
| Stats | 2 installs, 0 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Network Access:
Plugin may fetch remote image URLs from pasted HTML or JSX markup to place them into generated Figma components.
- Editor Types:figma
- Allowed Domains:
- *
More Like This
Discover other plugins in the ui-kits category.
UI Components Kit
pre-built UI component to be used in you design from Material UI , Chakra UI , and more ...
UI Kit
Turn technical debt into design consistency.
Design System Hub – Curated Library of 150+ UX Design Systems & Figma Libraries
Design System Hub – Curated Library of 150+ UX Design Systems & Figma Libraries