extract-one-component

Extract a single component from Figma designs to generate corresponding React Native code with proper typing and styling.

Instructions

Extract a single component from Figma file

Input Schema

TableJSON Schema

Name	Required	Description	Default
`parameters`	Yes

Implementation Reference

src/index.ts:153-188 (handler)

Handler implementation for the extract-one-component tool. Fetches Figma data and invokes generateComponent with componentName parameter.

async ({ parameters: { componentName } }, extra) => {
  try {
    // Fetch Figma file data
    logger.info('Fetching Figma file data...')

    // const data = await response.json()
    const data = await fetchFigmaData()
    logger.info('Successfully fetched Figma file data')

    // Process the component data
    const result = await generateComponent(data, true, componentName)
    logger.info('Component extraction successful')

    // Return the result to the client
    return {
      componentsData: result.componentSets, // Pass the structured component data
      content: [
        {
          type: 'text' as const,
          text: result.message,
        },
      ],
    }
  } catch (error: any) {
    logger.error(`Error extracting component ${componentName}:`, error)
    return {
      isError: true,
      content: [
        {
          type: 'text' as const,
          text: `Error extracting component ${componentName}: ${error.message}`,
        },
      ],
    }
  }
}

src/index.ts:148-151 (schema)
Input schema using Zod: object with componentName: string
```
{
  parameters: z.object({
    componentName: z.string(),
  }),
```

src/index.ts:145-152 (registration)

MCP server.tool registration for 'extract-one-component', including description and schema reference.

server.tool(
  'extract-one-component',
  'Extract a single component from Figma file',
  {
    parameters: z.object({
      componentName: z.string(),
    }),
  },

src/helpers/extractComponent.ts:60-136 (helper)

Core logic for generating component data from Figma document, with filtering for specific component when componentToExtract provided (used as third arg for single component extraction).

export async function generateComponent(
  component: any,
  validation: boolean = false,
  componentToExtract: string = ''
) {
  try {
    const { document } = component
    const componentsPage = document.children.find(
      (c: any) => c.name === 'Components'
    )

    if (!componentsPage) {
      console.log('No Components page found in document')
      throw new Error('Components page not found in Figma file')
    }

    const page = componentsPage.children
    let componentSets = []
    let processedCount = 0
    const checkExisting = (componentName: string) =>
      validation ? !existsSync(`${componentDir}/${componentName}`) : true

    const specificComponent = (
      componentName: string,
      componentToExtract: string
    ) =>
      componentToExtract
        ? areSameComponent(componentName, componentToExtract)
        : true

    for (const section of page) {
      const { children } = section
      if (!children) continue

      for (const item of children) {
        const { type, name } = item
        const componentName = toPascalCase(name)

        if (
          type === 'COMPONENT_SET' &&
          checkExisting(componentName) &&
          specificComponent(componentName, componentToExtract)
        ) {
          processedCount++

          try {
            const props = extractComponentProps(item.children)

            const minified = {
              name: componentName,
              props,
              children: extractComponentChildren(item.children),
            }
            componentSets.push(minified)
          } catch (processError) {
            return {
              message: `Error processing component ${name}: ${processError}`,
              componentSets: [],
            }
          }
        }
      }
    }

    // Create a formatted result for the user
    const message = `Successfully processed ${processedCount} components.\n\nComponent sets: ${componentSets.length}\nComponent paths:\n${componentSets.map((cs) => `- ${cs.name}`).join('\n')}`

    // Return both the result message and the component data
    return {
      message,
      componentSets,
    }
  } catch (error) {
    console.error(`Error generating component: ${error}`)
    throw error
  }
}

src/helpers/index.ts:85-106 (helper)

fetchFigmaData: retrieves Figma file JSON data via API, called by the tool handler.

export async function fetchFigmaData() {
  const response = await fetch(`https://api.figma.com/v1/files/${FIGMA_FILE}`, {
    headers: {
      'X-Figma-Token': FIGMA_TOKEN,
    },
  })

  if (!response.ok) {
    const errorText = await response.text()
    return {
      isError: true,
      content: [
        {
          type: 'text' as const,
          text: `Failed to fetch Figma file: ${response.status} ${response.statusText} - ${errorText}`,
        },
      ],
    }
  }

  return await response.json()
}

Figma to React Native MCP