https://github.com/javierarce/corcho
A tool to create and sync web slideshows with Figma
https://github.com/javierarce/corcho
figma figma-api slideshow
Last synced: about 1 year ago
JSON representation
A tool to create and sync web slideshows with Figma
- Host: GitHub
- URL: https://github.com/javierarce/corcho
- Owner: javierarce
- License: gpl-3.0
- Created: 2022-08-13T11:04:20.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-01-04T10:39:48.000Z (over 1 year ago)
- Last Synced: 2025-03-31T03:51:43.430Z (about 1 year ago)
- Topics: figma, figma-api, slideshow
- Language: JavaScript
- Homepage: https://javierarce.github.io/corcho
- Size: 2.46 MB
- Stars: 19
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Corcho
Corcho (/ˈkoɾt͡ʃo/) is a tool that creates and sync web slideshows using the contents of a Figma file. You can then use GitHub Pages to host your slideshow on the web and have it automatically updated using GitHub Actions.
## How to run Corcho
1. Create a file in Figma and your slides as frames.
2. Create a non-expiring [Figma personal access token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens).
3. Copy the file id of your Figma file (which is the string of random alphanumeric characters found in the URL after `figma.com/design/`)
### On GitHub Pages
1. Fork this project and add two secrets:
- `FIGMA_FILE`: with the file id.
- `FIGMA_TOKEN`: with your Figma Personal Access Token.
Optionally, add `FILE_FORMAT` to specify the format of the exported images. The default is `jpg`, but you can also use `png` or `svg`.
2. Enable:
- GitHub pages for the `main` branch.
- The deploy workflow (by visiting the Actions tab).
#### Customization
By default the cronjob of the GitHub Action will run every hour on the hour,
but you can change the scheduling to be more frequent. Here's an example of a
job that gets executed every 5 minutes (which is the shortest interval allowed):
```
name: Cron
on:
push:
branches: [ "main" ]
schedule:
- cron: "*/5 * * * *" # Runs every 5 minutes
```
If you don't need continuous updates, you can remove the .github/workflows/deploy.yml file.
Also, please note that free accounts have a limit of 500 MB and 2,000
minutes of run time per month. Please check the [included storage and
minutes](https://docs.github.com/en/billing/managing-billing-for-your-products/managing-billing-for-github-actions/about-billing-for-github-actions#included-storage-and-minutes)
available for your account type.
### Locally
1. Clone this project
2. Rename the `.env.sample` file to `.env` and update it:
- `FIGMA_FILE`: with the file id.
- `FIGMA_TOKEN`: with your Figma Personal Access Token.
3. Install the dependencies with `yarn install` or `npm install`
4. Run the project with `yarn start` or `npm run start`
5. Open the `index.html` file in your browser using a local server.
## Shortcuts
| Key | Action |
| :-------------------------------------------------- | :------------------------------------------------ |
| ← or Space + Shift | Previous slide |
| → or Space | Next slide |
| J or Page Down | Next page |
| K or Page Up | Previous page |
| Tab | Open navigation |
| F | Toggle fullscreen |
| Esc | Exit fullscreen |
| C | Toggle comments |
| R | Go to the first slide of the current presentation |
### When the navigation is open
| Key | Action |
| :------------------------------------------------ | :--------------- |
| ← or Tab + Shift | Previous page |
| → or Tab | Next page |
| Enter | Select page |
| Esc | Close navigation |
## Example
- [Figma file](https://www.figma.com/file/pCi2wnm9y4HsYNANvXRiGc/Corcho)
- [Slideshow](https://javierarce.github.io/corcho)