Figma Frame to Web

Renders a Figma frame into a website using SVGs.

This website was generated from this Figma file and it's updated every 5 minutes.

---

How to use this project:

1. Create a new project in Figma. Add a frame and put some stuff in it.
2. Select the frame and copy the FILE_ID and NODE_IDfrom the URL (hint: https://www.figma.com/file/FILE_ID/USERNAME?node-id=NODE_ID)
3. Go to your Figma profile and generate a new personal access token (you'll only need to do this once).
4. Edit the hidden .env.sample file in this project and paste the FILE_ID, NODE_ID, and the token.
5. Rename .env.sample to .env.
6. Update the SECRET with a random string.

You are all set! Now:

1. Visit YOUR_GLITCH_URL.me/refresh/SECRET to import and your Figma frame / refresh the SVG.
2. 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!

Play with the code