Image

Display images from Figma files, URLs, or local assets.

import { Image } from 'renoun'

export function ComponentName() {
  return <Image source="figma:dAtPdBGcoK4joJbnxxdjYO/mark" />
}

Rendering images from Figma

The Image component can fetch frames directly from the Figma Image API. It behaves like a regular <img /> element but accepts additional shorthand such as the figma: protocol or a full Figma URL.

When rendering Figma components the description from the file is automatically used for the <img /> accessibility text. You can override it by passing a description prop.

1. Create a Figma access token

In the Figma app, go to Main menu → Help and account → Account settings → Security → Personal access tokens. Click “Generate new token” and copy it. The token must include the following scopes:

• file_content:read (required for exporting images and reading file content)
• library_content:read (required if you reference components by name or read published components)
• team_library_content:read (if components are published in team libraries)

Refer to the official docs: Figma access tokens.

2. Configure the environment variable

Set the FIGMA_TOKEN environment variable in your hosting platform:

• Vercel: Project → Settings → Environment Variables
• Vercel (CLI): vercel env add FIGMA_TOKEN (use vercel env pull .env.local to sync locally)
• Netlify: Site configuration → Environment variables
• Netlify (CLI): netlify env:set FIGMA_TOKEN YOUR_TOKEN
• Amplify: App settings → Environment variables
• Other: Refer to your hosting provider documentation.

For local development, create a .env.local file at the project root with:

FIGMA_TOKEN=YOUR_TOKEN

Restart your dev server so the change is picked up.

3. Configure supported files

Use the figma prop on RootProvider to declare which Figma files are allowed. You can pass either a single file id or an alias map:

import { RootProvider } from 'renoun'

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <RootProvider figma={{ icons: 'KsxgdfDdV3fEQ0oQz0CMNeg' }}>
      {children}
    </RootProvider>
  )
}

When only one file is configured it becomes the default, allowing you to omit the alias in the figma: URL. If you configure multiple files you can either set defaultFile or reference the alias directly (e.g. figma:icons/563:1297).

Usage

import { Image } from 'renoun'

export function IconPreview() {
  return (
    <Image
      description="Logo mark"
      width={128}
      height={128}
      source="figma:563:1297"
    />
  )
}

You can also paste the entire share link copied from Figma:

import { Image } from 'renoun'

export function Link() {
  return (
    <Image source="https://www.figma.com/design/KsxgdfDdV3fEQ0oQz0CMNeg/renoun-design-system-template?node-id=563-1297" />
  )
}

When using the figma: protocol you can reference components by their name rather than the node id. For example, the following will resolve to the arrow-down component inside the icons file configured on the RootProvider:

import { Image } from 'renoun'

export function ComponentName() {
  return <Image source="figma:icons/arrow-down" />
}

You can also include a raw Figma file ID directly in the figma: source instead of an alias:

import { Image } from 'renoun'

export function FrameId() {
  return <Image source="figma:KsxguDdVW4EQ0oQz0CMNeg/915:1075" />
}

Additional options

Pass export options directly to the component when using Figma sources:

import { Image } from 'renoun'

export function ExportOptions() {
  return (
    <Image
      source="figma:illustrations/1203:880"
      description="Full color illustration"
      format="svg"
      useAbsoluteBounds
    />
  )
}