Documentation

Welcome to the Templetto documentation. This guide will help you get started with creating PDF templates from Figma designs and generating PDFs through our REST API.

🎨

Design in Figma

Create beautiful templates using the design tools you already know

⚡

Generate PDFs

Convert your designs to PDFs instantly via our API

🔄

Dynamic Data

Inject dynamic content into your templates programmatically

API Reference

The Templetto REST API allows you to generate PDFs from your saved templates programmatically. All API requests must be authenticated using an API token.

Base URL: https://api.templetto.com

Authentication

All API requests require authentication using an API token. Include your API token in the request headers:

Authorization: Bearer YOUR_API_TOKEN

You can generate API tokens from your account dashboard.

⚠️ Security Note: Never expose your API tokens in client-side code or public repositories. API tokens grant full access to your account.

Create PDF

Generate a PDF from a template with dynamic data.

POST /create-pdf

Query Parameters

Parameter	Type	Required	Description
`template-id`	string	Yes	The ID of your saved template

Request Body

JSON object containing the data to inject into your template. The structure depends on your template design.

{
  "customerName": "John Doe",
  "invoiceNumber": "INV-001",
  "amount": "$1,234.56",
  "date": "2024-01-15"
}

Response

Returns a JSON object with a download URL for the generated PDF.

{
  "downloadUrl": "https://storage.googleapis.com/..."
}

Example Request

curl -X POST "https://api.templetto.com/create-pdf?template-id=abc123" \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "customerName": "John Doe",
    "invoiceNumber": "INV-001",
    "amount": "$1,234.56"
  }'

Error Responses

Status	Error	Description
400	invalid_request	Missing or invalid parameters
401	unauthorized	Invalid or missing API token
404	template_not_found	Template does not exist.
500	Internal server error	Server error during PDF generation

Templating Language

Templetto converts your Figma designs into HTML templates that can be filled with dynamic data. The system uses a simple variable substitution approach.

How it works: Text layers in your Figma design can contain variable placeholders that will be replaced with actual data when generating PDFs.

Variable Syntax

Variables in your Figma text layers should match the keys in the JSON data you send to the API. The HTML template preserves the text content from Figma, including any variable placeholders you define.

Design Approach

When designing your template in Figma, use placeholder text that clearly indicates where dynamic data will be inserted.

{{variableName}} - Double curly braces style

Figma Plugin

The Templetto Figma plugin allows you to convert your Figma frames into HTML templates that can be saved to your account and used with the API.

✓ Real-time preview

✓ Export to HTML

✓ Auto-layout support

✓ Font preservation

Setup

Install the Plugin

Open Figma and navigate to Plugins → Browse plugins. Search for "Templetto" and click install.

Sign In

Launch the plugin from Plugins → Templetto → Run. Click the login button and authenticate with your Templetto account.

Workflow

Creating a Template

Design Your Template

Create a frame in Figma with your template design. Use auto-layout for best results. Add text layers with placeholder variables where you want dynamic content.

Tip: Name your frame descriptively (e.g., "Invoice Template", "Certificate") for easy identification.

Select Frame

In the plugin, use the frame selector dropdown to choose the frame you want to convert to a template.

Preview

Click "Show Preview" to see how your template will render as HTML. You can toggle between visual preview and code view to inspect the generated HTML.

Save Template

Once you're satisfied with the preview, click "Save Template" to upload it to your account. The template will be stored with a unique ID that you can use with the API.

Get Template ID

Go to the "Templates" tab in the plugin to view all your saved templates. Copy the template ID to use in your API requests.

Configuration & Best Practices

Frame Requirements

Auto-layout: Use auto-layout frames for better HTML conversion. Non-auto-layout frames may have positioning issues.
Size: Set explicit width and height for your frame. This determines the PDF page size.
Nesting: Nested frames are supported and will be converted to nested HTML div elements.

Page Size Configuration

The frame dimensions in Figma determine the output PDF page size. Common sizes:

US Letter: 816 × 1056 px (8.5" × 11" at 96 DPI)
A4: 794 × 1123 px (210mm × 297mm at 96 DPI)
Custom: Set any dimensions based on your requirements

Text & Typography

Web Fonts: Use Google Fonts for best compatibility. The plugin automatically includes font references in the generated HTML.
Text Styling: Font weight, color, size, and alignment are preserved in the HTML output.
Variables: Place variable placeholders directly in text layers using your preferred syntax convention.

Images

Image Fills: Frames with image fills are supported and exported as background images.
Optimization: Images are automatically optimized during export.
Format: Images are exported as PNG with transparency support.

Page Ordering

For multi-page templates, the order of frames in Figma determines the page order in the generated PDF. Arrange your frames from top to bottom or use frame naming with prefixes (e.g., "01-Cover", "02-Content") for explicit ordering.

⚠️ Limitations:

Complex vector graphics may need to be rasterized
Some Figma effects (like blur) may not translate perfectly to HTML
Rotated elements have limited support
Component instances are flattened during export

💡 Pro Tips:

Test your templates with sample data before production use
Keep designs simple and structured for best HTML conversion
Use consistent spacing and padding with auto-layout for reliable results
Create a template library in Figma for reusable components

Need Help?

If you have questions or run into issues, we're here to help: