Image

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

import { Image } from 'renoun'

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

Rendering images from Figma

The Image component can fetch frames and components directly from Figma. It behaves like a regular <img /> element but accepts additional paths such as a configured source (e.g. icons:arrow-up) or the default figma: source, which requires a file ID plus component or frame selector (e.g. figma:<file_id>/Page/Component).

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_metadata:read : required for reading the file version and last_touched_at fields to invalidate the cache
• 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 : required 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

Define custom sources on RootProvider to declare which Figma files are allowed. Each source entry is explicitly typed and future‑proof:

import { RootProvider } from 'renoun'

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <RootProvider
      sources={{
        icons: {
          type: 'figma',
          fileId: 'KsxgdfVdV3fEQ0oz0CMNeg',
        },
        illustration: {
          type: 'figma',
          fileId: 'DxgdfDdVsd3fEQ0oQz0CMNeg',
          basePathname: 'illustration',
        },
      }}
    >
      {children}
    </RootProvider>
  )
}

You can reference your assets by using the registered source directly (e.g. icons:arrow-up or illustration:marketing). The built-in figma: scheme is also supported for accessing files directly with a file ID and the component or frame selector.

Usage

import { Image } from 'renoun'

export function ComponentName() {
  return (
    <Image
      description="renoun logo mark"
      width={128}
      height={128}
      source="figma:KsxgdfVdV3fEQ0oz0CMNeg/mark"
    />
  )
}

You can also use a configured source or the built-in figma: scheme to resolve components by their name and optional scope. For example, the following resolves to the arrow-down component inside the icons source configured on the RootProvider:

import { Image } from 'renoun'

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

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/hero"
      description="Full color illustration"
      format="svg"
      useAbsoluteBounds
    />
  )
}

Caching and public assets

Figma downloads are cached to public/images by default using a hash of the request (file id, selector or alias, and export options) as the filename. When a cached file is read, a cache-busting query parameter based on the file’s last modified time is appended so browsers pick up updates while still allowing the static asset to be committed and reused. Because the key is derived from the selector you provided, renoun can reuse the cached asset even if the Figma API cannot be reached.

Different Figma files that share the same selector name will overwrite each other in the cache. To avoid this, you can use an alias for the source which can be configured through the sources prop on the RootProvider component. A different path can also be set (for example public/assets) using images.outputDirectory and the Image component will read from and write to that directory instead.