Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marcomontalbano/figma-export-pdfs-action
A GitHub Action that exports content from a Figma file as a PDF document.
https://github.com/marcomontalbano/figma-export-pdfs-action
export-pdf figma figma-export github-action pdf
Last synced: 20 days ago
JSON representation
A GitHub Action that exports content from a Figma file as a PDF document.
- Host: GitHub
- URL: https://github.com/marcomontalbano/figma-export-pdfs-action
- Owner: marcomontalbano
- License: mit
- Created: 2022-03-17T22:31:14.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-07T20:17:03.000Z (6 months ago)
- Last Synced: 2024-10-09T22:45:59.632Z (27 days ago)
- Topics: export-pdf, figma, figma-export, github-action, pdf
- Language: TypeScript
- Homepage: https://github.com/marketplace/actions/figma-export-pdfs
- Size: 2.13 MB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Figma Export PDFs action
This action can export content from a Figma file as a PDF document. Afterward, you can save the PDF as a workflow artifact, upload it to an FTP server, or store it wherever you prefer.
## Figma file structure
Your Figma file must follow a conventional structure:
```yaml
Figma file
│
├── page
│ │
│ ├── group # this is a PDF document
│ │ ├── frame # page 1
│ │ ├── frame # page 2
│ │ ├── frame # page 3
│ │ └── frame # page 4
│ │
│ └── group # this is a PDF document
│ ├── frame # page 1
│ └── frame # page 2
│
└── page
│
└── group # this is a PDF document
├── frame # page 1
├── frame # page 2
└── frame # page 3
```
Each Figma **group** in the Figma file represents a PDF document, with the group's name defining the filename of the PDF.
Within each Figma group (PDF document), there are one or more Figma **frames**, where each frame represents a page in the PDF document.
For example, given the Figma file below, the resulting PDF will be named “**figma-export-pdfs-action.pdf**” and will contain 3 pages.
You can refer to [this example](https://www.figma.com/file/VQxKo2pnaksjE7Vql999Qv/figma-export-pdfs-action?node-id=138%3A28) for further clarification.
## Usage
```yaml
- name: Figma Export PDFs
id: figmaExportPdfs
uses: marcomontalbano/[email protected]
with:
accessToken: ${{ secrets.FIGMA_ACCESS_TOKEN }}
fileKey: VQxKo2pnaksjE7Vql999Qv
ids: ["120:3","138:28"]
- name: Log
echo "pdfs: $pdfs"
echo "outDir: $outDir"
env:
pdfs: ${{ steps.figmaExportPdfs.outputs.pdfs }}
outDir: ${{ steps.figmaExportPdfs.outputs.outDir }}
```
Checkout a working example [`dispatch.yaml`](.github/workflows/dispatch.yaml).
### Inputs
| Key | Required | Description | Example | Default |
|---------------|:--------:|-------------------------------------------|--------------------------------------------|:-------:|
| `accessToken` | **yes** | Figma access token | xxxxx-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx | |
| `fileKey` | **yes** | Figma file key | rAJHsSg4SC5NqFIFib5NWz | |
| `ids` | no | List of ids to export. Default to *all* | ["17:786", "6:786"] | [ ] |
### Outputs
| Key | Description | Example |
|----------|--------------------------------------------|---------|
| `pdfs` | List of exported pdfs | * |
| `outDir` | Output directory for all emitted pdf files | ./dist/ |
> **\*** For example a `pdfs` could looks like the following:
>
> ```json
> [
> {
> "id": "6:786",
> "name": "figma-export-cover",
> "basename": "figma-export-cover.pdf",
> "filepath": "./dist/figma-export-cover.pdf",
> "cover": "./dist/figma-export-cover.jpg"
> }
> ]
> ```
## Live Example
I created a `cron.yaml` workflow that runs scheduled.
This workflow will export the page "cover" and the page "unit-test" from [this Figma file](https://www.figma.com/file/VQxKo2pnaksjE7Vql999Qv).
You can check the latest run from [this page](https://github.com/marcomontalbano/figma-export-pdfs-action/actions/workflows/cron.yaml) and look at the logs.
An artifact called `my-pdfs` is also available for logged user so that you can check what's the final result.
## Export PDFs directly from Figma
What do you think about exporting Figma content as PDF to an FTP Server, just clicking a button from Figma? Would it be cool, isn't it?
Take a look at this [workflow](.github/workflows/from-figma.yaml) and find out how this is totally feasible. Just clone the workflow and setup [this Figma plugin](https://www.figma.com/community/plugin/1096890502176164513) 😉
