https://github.com/javierarce/figma-frame-to-web

Renders a Figma frame into a website using SVGs!
https://github.com/javierarce/figma-frame-to-web

figma figma-api nodejs svg

Last synced: 28 days ago
JSON representation

Renders a Figma frame into a website using SVGs!

• Host: GitHub
• URL: https://github.com/javierarce/figma-frame-to-web
• Owner: javierarce
• Created: 2019-02-13T20:13:47.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-05-13T05:41:00.000Z (over 5 years ago)
• Last Synced: 2024-10-04T16:57:39.140Z (about 2 months ago)
• Topics: figma, figma-api, nodejs, svg
• Language: JavaScript
• Homepage: https://figma-frame-to-web.glitch.me
• Size: 27.3 KB
• Stars: 10
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Figma Frame to Web

==================

Renders a Figma frame into a website using SVGs.

[This](https://figma-frame-to-web.glitch.me) website was generated from

[this Figma file](https://www.figma.com/file/UPwtwXg6WnGrCagd468vgAcc/javier?node-id=0%3A1") 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_ID`from 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](https://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