Dev Tools

FigmaImage

Displays images synced from Figma via Sanity. Fetches by frame name, supports aspect ratio, layout width, object-fit, and optional description.

Import

import FigmaImage from '../../components/utility/FigmaImage.astro';

Props

PropTypeRequiredDefaultDescription
id string Yes — Figma frame name — used to look up the image in Sanity
ratio '16:9' | '1:1' | '3:2' | '4:3' No — Fixed aspect ratio. When omitted, the image determines its own height
variant 'full' | 'half' | 'third' | 'quarter' No auto Width relative to content column. Auto-detected from image width when omitted
fit 'crop' | 'fill' | 'contain' | 'cover' No 'cover' How the image fills the container. Only applies when ratio is set
alt string No '' Alt text. Empty string for decorative images
description string No — Centered text below the image — body-sm, secondary color. Same convention as ContentPreview

Usage

<!-- Basic -->
<FigmaImage id="brand-photo-3" variant="full" alt="Illustration" />

<!-- With fixed ratio -->
<FigmaImage id="brand-photo-3" ratio="16:9" variant="full" alt="Illustration" />

<!-- With description -->
<FigmaImage id="brand-logo-main-1" variant="full" description="Black version" alt="Main logo" />

<!-- Inside Columns -->
<Columns count={2}>
  <FigmaImage id="brand-logo-main-1" variant="full" description="Black version" />
  <FigmaImage id="brand-logo-main-2" variant="full" description="White version" />
</Columns>

Preview — default

Default FigmaImage

Preview — with description

FigmaImage with description

Example description displayed below the image

Preview — with fixed ratio

Square ratio

Preview — 2 columns

Column image 1

First image

Column image 2

Second image

Preview — 3 columns

Column image 1
Column image 2
Column image 3

Preview — 4 columns

Column image 1
Column image 2
Column image 3
Column image 4

Preview — fallback (missing image)

Notes

  • Images are loaded lazily with loading="lazy" and decoding="async".
  • If the image is not found in Sanity, a neutral fallback placeholder is shown.
  • The component first looks for a brandAsset document, then falls back to matching sanity.imageAsset by filename.
  • Inside Columns, FigmaImage automatically fills the grid cell and stretches to match sibling height.
  • The description prop uses the same convention as ContentPreview — body-sm, --color-content-secondary, centered, 12px gap.
  • For decorative images, pass alt="" — this signals intentional decoration to screen readers.
Page tokens