Pixel-perfect Figma to Android implementation using ADB and Figma MCP. Build Android UIs that match your Figma designs exactly.
- Automatic Project Detection - Detects Gradle build system, Compose vs XML, Material Design version
- Pixel-Perfect Implementation - Recursive refinement loop until implementation matches Figma exactly
- ADB Integration - Screenshots, app deployment, and device interaction
- Design System Extraction - Reads colors.xml, dimens.xml, themes.xml to match existing tokens
- Figma MCP Integration - Extracts design specs, tokens, and screenshots directly from Figma
| Requirement | Version | Notes |
|---|---|---|
| Claude Code | 2.0.73+ | With plugin support |
| Figma MCP | Latest | Must be configured in Claude Code |
| Android Studio | Latest | With Android Emulator |
| ADB | - | Must be in PATH |
| Project | - | Android/Kotlin project |
claude plugin install github:blissito/figma-to-androidOr install from local path:
claude plugin install /path/to/figma-to-androidEnsure Figma MCP is configured in your Claude Code settings. Verify with:
/ftc-android
The skill will check for Figma MCP connectivity.
The skill automatically starts the emulator if none is running. It will:
- Check for connected devices via
adb devices - If no emulator is running, list available AVDs
- Start the first available AVD (or ask which one to use)
- Wait for the device to be ready
You can also start it manually:
emulator -list-avds # List available AVDs
emulator -avd <avd_name> # Start specific AVD
adb devices # Verify connection- Open Claude Code in your Android project directory
- Run the skill (emulator will auto-start if needed):
/ftc-android
- Paste the Figma link when prompted
- Watch as the implementation is built, deployed, compared, and refined
Figma Link → Extract Design → Implement Kotlin/Compose → Build → Deploy → Screenshot → Compare → Refine → Done
- Detects Android project structure (build.gradle, AndroidManifest.xml)
- Identifies build system (Kotlin DSL vs Groovy)
- Scans design system files (colors.xml, dimens.xml, themes.xml)
- Auto-starts emulator if none is running
- Verifies device connection and screen dimensions
- Checks if app is installed and running
- Builds and deploys if necessary
- Prompts for Figma link
- Extracts design from Figma MCP (metadata, layout, tokens, screenshot)
- Maps Figma units to Android (px → dp/sp)
- Implements using Jetpack Compose or XML Views
- Builds, deploys, and captures screenshot
- Compares implementation screenshot with Figma reference
- Identifies any discrepancies (colors, spacing, typography, alignment)
- Corrects and re-deploys until pixel-perfect match
- Shows final screenshot for approval
- Accepts new Figma links for additional components
| Technology | Support |
|---|---|
| Kotlin | Full |
| Jetpack Compose | Full |
| XML Views | Full |
| Material Design 3 | Full |
| Material Design 2 | Full |
| Vector Drawables | Full |
# Check if any AVDs exist
emulator -list-avds
# If no AVDs, create one in Android Studio:
# Tools → Device Manager → Create Device
# If ADB isn't detecting devices, restart it
adb kill-server
adb start-server
# Manual start if needed
emulator -avd <avd_name>Verify Figma MCP is configured in Claude Code settings. The skill calls whoami to verify authentication.
# Clean and rebuild
./gradlew clean assembleDebug
# Check Java version
java -version
# Sync Gradle wrapper
./gradlew wrapper- Ensure emulator is not rotated
- Hide system bars if they interfere with comparison
- Check screen density matches expected values
# Screenshot
adb shell screencap -p /sdcard/screen.png
adb pull /sdcard/screen.png ./screen.png
# Install APK
adb install -r app/build/outputs/apk/debug/app-debug.apk
# Launch app
adb shell am start -n <package>/<activity>
# Device info
adb shell wm size # Screen resolution
adb shell wm density # Screen densityMIT
bliss - GitHub
- figma-to-code - Web version with Chrome extension