Renders a Figma frame into a website using SVGs.
This website was generated from this Figma file and it's updated every 5 minutes.
- Create a new project in Figma. Add a frame and put some stuff in it.
- Select the frame and copy the
FILE_ID
andNODE_ID
from the URL (hint:https://www.figma.com/file/FILE_ID/USERNAME?node-id=NODE_ID
) - Go to your Figma profile and generate a new personal access token (you'll only need to do this once).
- Edit the hidden
.env.sample
file in this project and paste theFILE_ID
,NODE_ID
, and the token. - Rename
.env.sample
to.env
. - Update the
SECRET
with a random string.
You are all set! Now:
- Visit
YOUR_GLITCH_URL.me/refresh/SECRET
to import and your Figma frame / refresh the SVG. - Visit
YOUR_GLITCH_URL.me
to see your beautiful frame rendered as an SVG.
Bonus points: use cron-job.org to ping the refresh URL every X minutes and have the SVG updated automatically while you sleep or walk your cute dog!