Using the useFigma Hook in Rork Max to Bridge Design and Code

Rork Max includes a useFigma hook that lets components pull design information directly from a Figma file — color tokens, spacing values, typography, and even specific frame layouts. It's particularly useful when working with an existing design system in Figma, or when bridging designer output to a React Native codebase.

The documentation is decent but light on concrete examples. Here's what the actual workflow looks like.

What useFigma Does

useFigma connects to the Figma API and returns design tokens or frame layout data that you can apply to your components. The basic usage:

import { useFigma } from 'rork-max';
 
const MyComponent = () => {
  const { styles, layout, isLoading } = useFigma({
    fileId: 'YOUR_FIGMA_FILE_ID',
    nodeId: 'YOUR_NODE_ID',  // a specific frame or component node
  });
 
  if (isLoading) return <ActivityIndicator />;
 
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Hello</Text>
    </View>
  );
};

Finding IDs: The fileId comes from the Figma URL: https://figma.com/file/{fileId}/.... For nodeId, select the frame or component in Figma, right-click, and choose "Copy link to selection" — the node ID is in the resulting URL.

Setting Up Figma Integration

Before using useFigma, configure the integration in your Rork Max project:

// rork.config.ts
import { defineConfig } from 'rork-max';
 
export default defineConfig({
  integrations: {
    figma: {
      accessToken: process.env.FIGMA_ACCESS_TOKEN,
      // File ID for your design system (for token syncing)
      designSystemFileId: 'YOUR_DESIGN_SYSTEM_FILE_ID',
    },
  },
});

Generate a Figma Personal Access Token at Settings → Account → Personal access tokens, and set it as FIGMA_ACCESS_TOKEN in your environment.

Pulling in Design Tokens

The most practical use of useFigma is importing design tokens — color palettes, spacing scales, typography — as typed constants:

import { useFigma, FigmaTokens } from 'rork-max';
 
const useDesignTokens = () => {
  const { tokens } = useFigma<FigmaTokens>({
    fileId: 'YOUR_DESIGN_SYSTEM_FILE_ID',
    tokenTypes: ['colors', 'spacing', 'typography'],
  });
 
  return {
    colors: {
      primary: tokens?.colors?.brand?.primary ?? '#007AFF',
      background: tokens?.colors?.surface?.default ?? '#FFFFFF',
      text: tokens?.colors?.text?.primary ?? '#000000',
    },
    spacing: {
      sm: tokens?.spacing?.sm ?? 8,
      md: tokens?.spacing?.md ?? 16,
      lg: tokens?.spacing?.lg ?? 24,
    },
    fontSize: {
      body: tokens?.typography?.body?.size ?? 14,
      heading: tokens?.typography?.heading?.size ?? 24,
    },
  };
};

The fallback values (?? '...') are important — they keep components functional when the Figma API is unavailable (offline, rate-limited, or during static builds).

Converting a Figma Frame to a Component

For converting a specific frame's layout to React Native styles:

import { useFigma, convertFigmaToRN } from 'rork-max';
import { View, Text } from 'react-native';
 
const CardComponent = () => {
  const { frameData, isLoading, error } = useFigma({
    fileId: 'YOUR_FIGMA_FILE_ID',
    nodeId: '123:456',  // your card component's node ID
    mode: 'layout',     // fetch layout information
  });
 
  if (isLoading) return null;
  if (error) {
    console.warn('Figma sync failed, using fallback styles');
  }
 
  // Converts Figma auto-layout to React Native flexbox
  const rnStyles = frameData
    ? convertFigmaToRN(frameData)
    : defaultCardStyles;
 
  return (
    <View style={rnStyles.card}>
      <Text style={rnStyles.title}>Card Title</Text>
      <Text style={rnStyles.body}>Card content here</Text>
    </View>
  );
};
 
const defaultCardStyles = {
  card: {
    padding: 16,
    borderRadius: 8,
    backgroundColor: '#FFFFFF',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  title: { fontSize: 18, fontWeight: 'bold' as const },
  body: { fontSize: 14, color: '#666' },
};

Caching: Development vs. Production

useFigma is not a live sync. It fetches from Figma on app startup and when the cache expires. Design changes in Figma don't appear in real time.

During development, disable caching to see changes immediately:

const { styles } = useFigma({
  fileId: 'YOUR_FIGMA_FILE_ID',
  nodeId: 'YOUR_NODE_ID',
  cacheMaxAge: process.env.NODE_ENV === 'development' ? 0 : 3600,
});

For production builds, the recommended approach is to pre-generate a snapshot at build time rather than hitting the Figma API at runtime:

npx rork-max generate-figma-snapshot

This produces a figma-snapshot.json that the production build uses instead of making live API calls — better performance, no rate limit risk, and fully reproducible builds.

When useFigma Makes Sense

The hook is genuinely useful when a Figma design system already exists and you want to keep the app in sync as designs evolve. It's also a solid starting point when converting a Figma prototype to a production app — using the actual frames as the source of truth rather than manually re-implementing styles.

It's less valuable for solo projects without a Figma design system, or during early-stage development when styles change frequently. In those cases, hardcoding styles is lower overhead and easier to manage until the design stabilizes.