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
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)
- 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 …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)
- 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 …
Any feedback appreciated! Happy new year everybody :)
Top comments (0)