Skip to content

Commit

Permalink
docs: update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
marcomontalbano committed May 7, 2024
1 parent e3178b3 commit 2654301
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 19 deletions.
52 changes: 34 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,32 +1,48 @@
# Figma Export PDFs action

This action is able to export content from a Figma file as PDF.
Then you can save the pdf as workflow artifact, upload it to an ftp server, or do whatever you want.
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

In order to export a pdf from a Figma file, it have to be structured in a specific way.

```sh
Figma page
|
├── group # this is a pdf
│ ├── frame # page 1
│ ├── frame # page 2
│ └── frame # page 3
|
└── group # this is another pdf
├── frame # page 1
└── frame # page 2
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
```

A pdf page have to be a `figma frame`, and pages have to be grouped with a `figma group`.
You can take a look at [this example](https://www.figma.com/file/VQxKo2pnaksjE7Vql999Qv/figma-export-pdfs-action?node-id=138%3A28).
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.

![figma.com example showing a well structured Figma file](browser.png)


You can refer to [this example](https://www.figma.com/file/VQxKo2pnaksjE7Vql999Qv/figma-export-pdfs-action?node-id=138%3A28) for further clarification.

## Usage

```yml
```yaml
- name: Figma Export PDFs
id: figmaExportPdfs
uses: marcomontalbano/[email protected]
Expand Down
Binary file added browser.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cover.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"private": true,
"name": "figma-export-pdfs-action",
"description": "Figma Export PDFs",
"description": "Export content from a Figma file as a PDF document",
"main": "src/index.ts",
"scripts": {
"ts:check": "tsc --noEmit",
Expand Down

0 comments on commit 2654301

Please sign in to comment.