내가 만든 것

PDF 서버

사용자 지정 데이터로 Figma PDF 디자인을 채우기 위한 프런트 엔드 및 백엔드가 있는 Next.js 앱. 현재는 단순한 벡터 + 레이아웃 및 텍스트 기반 템플릿만 지원됩니다. 그러나 이미 많은 사용 사례에 사용할 수 있습니다.

카테고리 제출:

비즈니스용으로 제작

앱 링크

https://pdf.blooob.co

스크린샷

설명

설정 및 구성이 쉽고 문서나 데모를 확인하기만 하면 됩니다.
맞춤형 PDF 템플릿 다운로드/스트리밍 기능 등이 필요한 다른 서비스/앱에 통합하십시오!

next.js(typescript) + chakra + react-pdf + figma-js + figma-transformer로 빌드되었습니다.

소스 코드 링크

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

매드헨리 / PDF 서버

사용자 지정 데이터로 figma PDF 디자인을 채우는 Next.js 앱

PDF 서버

이 작은 next.js 앱을 사용하면 자신의 콘텐츠로 텍스트 및 벡터 기반 Figma 템플릿을 스트리밍/다운로드할 수 있습니다.
Demo

용법

Figma에 로그인/가입하고 개발자 토큰 생성: https://www.figma.com/developers/api

미리 보기 템플릿의 초안을 복사하거나 새 템플릿을 만듭니다(일부 지침을 준수해야 함)

FDS Demo
Keys

DigitalOcean/Vercel 등에 서버측 앱으로 배포

쿼리 문자열 변수 또는 POST 변수를 사용하여 프런트엔드 또는/api/PDF 끝점을 통해 사용합니다.

API 엔드포인트 매개변수(Figma에서 레이어 이름으로 사용하지 않음):

파일 - Figma 파일 ID
fileName - 정의된 경우 API는 지정된 파일 이름으로 다운로드를 강제 실행합니다.
debug - 정의되면 react-pdf 디버그 모드가 활성화됩니다.
정의된 다른 모든 항목은 콘텐츠를 일치하는 figma 레이어 이름으로 대체하는 데 사용됩니다.

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

허용 라이선스

MIT

배경

저는 클라이언트를 위한 SaaS를 구축하고 있으며 중요한 기능 중 하나는 모든 종류의 데이터가 포함된 동적 보고서를 PDF로 내보내는 기능입니다.
현재 PDF의 레이아웃과 스타일은 코드에 하드코딩되어 있으며 모든 업데이트에는 코드 변경이 필요합니다. 그러나 디자이너가 Figma에서 템플릿을 편집하고 테스트한 후 새로운 디자인이 코드 변경 없이 생산에도 적용된다면 어떨까요?

내가 만든 방법

TypeScript에 대해 조금 더 알아보고 더 쉽게 설정할 수 있도록 DigitalOcean의 배포 버튼을 구성하는 방법을 배웠습니다. 또한 Figma의 모든 기능과 스타일을 지원하기 위해 앞으로 해야 할 일이 많다는 것도 알게 되었습니다.

템플릿 + 사용자 정의 글꼴 및 기타 프리미티브에서 동적 행을 지원할 계획이며 그래디언트 색상 및 이미지도 지원할 예정입니다.

추가 리소스/정보

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

매드헨리 / PDF 서버

사용자 지정 데이터로 figma PDF 디자인을 채우는 Next.js 앱

PDF 서버

이 작은 next.js 앱을 사용하면 자신의 콘텐츠로 텍스트 및 벡터 기반 Figma 템플릿을 스트리밍/다운로드할 수 있습니다.
Demo

용법

Figma에 로그인/가입하고 개발자 토큰 생성: https://www.figma.com/developers/api

미리 보기 템플릿의 초안을 복사하거나 새 템플릿을 만듭니다(일부 지침을 준수해야 함)

FDS Demo
Keys

DigitalOcean/Vercel 등에 서버측 앱으로 배포

쿼리 문자열 변수 또는 POST 변수를 사용하여 프런트엔드 또는/api/PDF 끝점을 통해 사용합니다.

API 엔드포인트 매개변수(Figma에서 레이어 이름으로 사용하지 않음):

파일 - Figma 파일 ID
fileName - 정의된 경우 API는 지정된 파일 이름으로 다운로드를 강제 실행합니다.
debug - 정의되면 react-pdf 디버그 모드가 활성화됩니다.
정의된 다른 모든 항목은 콘텐츠를 일치하는 figma 레이어 이름으로 대체하는 데 사용됩니다.

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



어떤 피드백이라도 감사합니다! 모두들 새해 복 많이 받으세요 :)