Figma to OG Image
Create dynamic OG images for your Next.js apps without writing JSX.
Getting Started
Installation
experimental_FigmaImageResponse is included in next.js. You will need at least version next@14.0.5-canary.35.
Configuration
Set the environment variable FIGMA_PERSONAL_ACCESS_TOKEN to your Figma Personal Access Token.
Design
Design your OG image in Figma. This website is using this Figma design.
Usage
import { experimental_FigmaImageResponse } from 'next/og'
export default async function Image() {
return experimental_FigmaImageResponse({
url: "https://figma.com/file/...",
template: {
title: "A dynamic OG Image",
description: "Created using a few lines of code"
}
})
}