Figma to React Native MCP

Instructions

Implementation Reference

• src/index.ts:104-143 (handler)

  Handler function for the 'extract-latest-components' tool. It fetches Figma data and calls generateComponent with the 'validation' flag set to true to extract only newly added (non-existing) components.

  server.tool(
    'extract-latest-components',
    'Extract newly added components from Figma file',
    async (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)
        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 components:', error)
        return {
          isError: true,
          content: [
            {
              type: 'text' as const,
              text: `Error extracting components: ${error.message}`,
            },
          ],
        }
      }
    }
  )

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

  Main helper function that implements the component extraction logic from Figma data. The 'validation' parameter (true for latest components) filters to only process components that do not yet exist on disk.

  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-107 (helper)

  Helper function to fetch the Figma file data using the provided token and file ID.

  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()
  }

• src/index.ts:104-143 (registration)

  Registration of the 'extract-latest-components' tool using server.tool.

  server.tool(
    'extract-latest-components',
    'Extract newly added components from Figma file',
    async (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)
        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 components:', error)
        return {
          isError: true,
          content: [
            {
              type: 'text' as const,
              text: `Error extracting components: ${error.message}`,
            },
          ],
        }
      }
    }
  )