# Figma to React Native

> Use this tool when you need to seamlessly integrate Figma designs into React Native development, extracting and analyzing components from design files to streamline design-to-code workflows. It takes Figma API tokens and file IDs as input and outputs structured representations of design components, complete with metadata and normalized naming conventions. This enables efficient conversion of Figma designs into React Native code, saving time and effort in the development process.

Canonical page: https://skillsregistry.net/skills/kailashg-figma-to-react-native  
JSON: https://api.skillsregistry.net/v1/skills/kailashg-figma-to-react-native

## Description

Figma Component Extractor MCP server enables AI assistants to extract and analyze components from Figma design files. Built by Kailash G, it provides tools for fetching component data, extracting component properties, and converting Figma designs into structured representations. The server requires a Figma API token and file ID to connect to design files, and includes utilities for processing component hierarchies, normalizing naming conventions, and generating component metadata. This implementation is particularly valuable for design-to-code workflows, allowing seamless integration between Figma designs and React Native development without leaving the conversation interface.

## Trust

- **Trust score (0–1):** 0.64
- **Verification tier:** scanned
- **Last scanned:** 2026-09-02

## Facts

- **Version:** 1.0.0
- **Skill type:** atomic
- **Execution layer:** mcp-remote
- **Runtime environment:** api
- **Category:** file-system
- **Updated:** 2026-09-02

## Source

- **Source listing:** [PulseMCP](https://www.pulsemcp.com/servers/kailashg-figma-to-react-native)
- **Repository:** <https://github.com/kailashappdev/figma-mcp-toolkit>

## Use it

Resolve this record through the SkillsRegistry MCP server (no auth, read-only):

```
claude mcp add --transport http --scope user skillsregistry https://api.skillsregistry.net/mcp
```

```json
{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "get_skill",
    "arguments": {
      "slug": "kailashg-figma-to-react-native"
    }
  }
}
```

REST: `GET https://api.skillsregistry.net/v1/skills/kailashg-figma-to-react-native` · pull for local use: `GET https://api.skillsregistry.net/v1/skills/kailashg-figma-to-react-native/pull`

---
SkillsRegistry indexes agent skills from public registries and GitHub. Skills we have analysed are scanned with Circle-IR and scored on six dimensions; each listing states its scan coverage. More: https://skillsregistry.net/llms.txt