DO Submission: PDF Server (for Figma templates)

Henry Kehlmann — Thu, 31 Dec 2020 13:59:37 +0000

What I built

PDF Server

Next.js app with a front and backend to fill Figma PDF designs with custom data. Only simple vectors + layouts and text based templates supported for now. But you could already use it for a lot of use cases.

Category Submission:

Built for business

App Link

https://pdf.blooob.co

Screenshots

Description

It's easy to setup and configure, just check the docs or demos.
Integrate it into your other services/apps that need custom PDF template download/streaming functionality etc!

Built with next.js (typescript) + chakra + react-pdf + figma-js + figma-transformer.

Link to Source Code

https://github.com/madhenry/pdf-server

madhenry / pdf-server

Next.js app to fill figma PDF designs with custom data

PDF Server

This little next.js app lets you stream/download text and vector based Figma templates with your own content Demo

Usage

Login/signup to Figma and create a developer token: https://www.figma.com/developers/api
Copy a draft of the preview templates or create a new one (make sure you follow some of the guidelines)

FDS Demo Keys

Deploy as a server-side app to DigitalOcean/Vercel etc

Use it through the frontend or via /api/PDF endpoint using query string variables or POST vars.

API endpoint parameters (don't use as layer names in Figma):

file - the Figma file ID

fileName - when defined the api forces a download with the specified file name

debug - when defined, react-pdf debug mode is enabled

Everything else defined is used to replace contents with matching figma layer names.

ENV

# required
FIGMA_TOKEN=
# optional
# comma separated list of figma file id-s or empty to allow all
NEXT_PUBLIC_ALLOWED_FILES=
MAX_VECTORS=100

…

View on GitHub

Permissive License

MIT

Background

I'm building a SaaS for a client and one part of a critical functionality is the ability to export dynamic reports with all kinds of data in PDFs.
Currently the layouts and styles for PDFs are hardcoded in code and any updates need code changes. But what if a designer could just edit a template in Figma, test it out and voilà the new design is applied in production as well without any code changes.

How I built it

I learned a bit more about typescript and how to configure DigitalOcean's deploy button for easier setup. I also learned that there is a lot of work ahead to support all the features and styles from Figma.

Definately planning to support dynamic rows in templates + custom fonts and other primitives and hopefully gradient colors and images as well.

Additional Resources/Info

Documentation: https://github.com/madhenry/pdf-server

madhenry / pdf-server

Next.js app to fill figma PDF designs with custom data

PDF Server

This little next.js app lets you stream/download text and vector based Figma templates with your own content Demo

Usage

Login/signup to Figma and create a developer token: https://www.figma.com/developers/api
Copy a draft of the preview templates or create a new one (make sure you follow some of the guidelines)

FDS Demo Keys

Deploy as a server-side app to DigitalOcean/Vercel etc

Use it through the frontend or via /api/PDF endpoint using query string variables or POST vars.

API endpoint parameters (don't use as layer names in Figma):

file - the Figma file ID

fileName - when defined the api forces a download with the specified file name

debug - when defined, react-pdf debug mode is enabled

Everything else defined is used to replace contents with matching figma layer names.

ENV

# required
FIGMA_TOKEN=
# optional
# comma separated list of figma file id-s or empty to allow all
NEXT_PUBLIC_ALLOWED_FILES=
MAX_VECTORS=100

…

View on GitHub

Any feedback appreciated! Happy new year everybody :)

PDF Server (for Figma templates) STEP 1

Henry Kehlmann — Thu, 31 Dec 2020 13:55:06 +0000

Idea

How

Using Next.js and React-PDF to preview / stream the PDF template based on defined properties onto Figma template files

Probably need to implement some definitions to allow automatically repeated components, calculated/dynamic content, custom fonts etc but let's keep it simple for now.

Let's start up the project

I decided to generate a new boilerplate next.js project using the typescript + chakra example. We can use Chakra for any of the UI elements.

npx create-next-app --example with-chakra-ui-typescript pdf-server

Architecture

As you can see we need to install figma-js and react-pdf and start integrating these 2 together to create an api endpoint.

yarn add @react-pdf/renderer figma-js figma-transformer

figma-transformer helps us process the response from figma api by creating .shortcuts in every layer/type.

utils/getFigmaFile.ts

This allows us to query all the frames in a figma template and their children and properties. Implementing a number of env vars helps us to customize the server depending on the use case. MAX_VECTORS tries to help safeguard the server from loading way too large figma files with vectors which could lead to memory/crash issues.

import * as Figma from 'figma-js'
import { processFile } from 'figma-transformer'

const client = Figma.Client({
  personalAccessToken: process.env.FIGMA_TOKEN
})

export const DEFAULT_FILE = process.env.DEFAULT_FILE || `w4qFtzyCX2fYT3x6CQDFQF`
export const MAX_VECTORS = process.env.MAX_VECTORS || 100
export const ALLOWED_FILES = process.env.NEXT_PUBLIC_ALLOWED_FILES as string
export const allowedFiles = ALLOWED_FILES.length ? ALLOWED_FILES?.split(',') : []

type FigmaOptions = {
  geometry?: 'paths' | ''
}

export const getFigmaFile = async (fileId: string, options?: FigmaOptions) => {
  if (allowedFiles.length && !allowedFiles.includes(fileId)) {
    throw new Error('This file id is not allowed by the server env ALLOWED_FILES')
  }
  const figmaFile = await client.file(fileId, options ?? {
    geometry: 'paths'
  }).then(({ data }) => data )
  console.log('figma children: ', figmaFile.document.children.length)
  const file = processFile(figmaFile)
  console.log('figma processed vectors length: ', file.shortcuts.vectors?.length)
  if (file.shortcuts.vectors && file.shortcuts.vectors.length > MAX_VECTORS) {
    throw new Error('Too many vectors in template')
  }
  return file
}

Now we need to start mapping the file response elements into a react-pdf document.

Continue to part 2

DEV Community: Henry Kehlmann

DO Submission: PDF Server (for Figma templates)

What I built

Category Submission:

App Link

Screenshots

Description

Link to Source Code

madhenry / pdf-server

Next.js app to fill figma PDF designs with custom data

PDF Server

Usage

API endpoint parameters (don't use as layer names in Figma):

ENV

Permissive License

Background

How I built it

Additional Resources/Info

madhenry / pdf-server

Next.js app to fill figma PDF designs with custom data

PDF Server

Usage

API endpoint parameters (don't use as layer names in Figma):

ENV

PDF Server (for Figma templates) STEP 1

Idea

How

Let's start up the project

Architecture

utils/getFigmaFile.ts