Figma integration

The Pencil Plugin for Figma
The Pencil Plugin for Figma allows you to export Figma sections as .pencil files, which you can then import directly into Pencil as templates. This enables a smooth handoff between design teams and ad generation workflows in Pencil.

Installation guide
Note: This plugin must be installed via the Figma Desktop app. It does not work in the browser.

Download the plugin
Unzip the package and extract the contents until you find the manifest.json file.

Install in Figma

• Open the Figma Desktop app
• Click on the top left menu:
• Select the manifest.json file
• Your plugin should now appear under the plugins you have available in Figma.

How it works
The plugin converts a Section in Figma into a Template in Pencil. Each top-level Frame inside the section becomes a Format within that template.
Important: Only first-level frames inside each format are imported. Everything within them will be flattened into a single image, unless structured properly (see examples below).

Key concepts

• Section in Figma → Template in Pencil
• Top level frame in Section → Formats
• First level content in each Frame → Pencil Layers (flattened unless layers are structured properly — see examples)

It’s critical to understand these limitations, otherwise any text layer that is not on the root level of a frame won’t be editable in Pencil.

Using the Plugin
Once you launch the plugin in Figma, you'll be prompted to select a section from your design file. After selecting a section, the plugin will display a real-time preview of how that content will appear in Pencil.

During this preview phase, you can:

• Adjust individual layer settings to fine-tune how each element is imported.
• Compare your imported view to the original Figma design using the Compare with original button.
• Choose how each Figma element is interpreted in Pencil — for example, text layers can be headlines, sub-headlines, fine-prints, etc.

Note: Some minor adjustments may be required to match your original layout precisely — especially for text layers, where positioning may need to be fine-tuned manually.
This step allows you to ensure the best possible fidelity between your Figma designs and the final template experience in Pencil.

Example 1
If your Figma section contains a single frame with multiple nested elements (e.g. images, text), everything inside will be flattened into one image layer in Pencil.
Why? Because Pencil imports only the first level of items inside each Format.

Result in Pencil:

• 1 Format
• 1 Layer (flattened image)

Example 2
With the right structure, you can preserve editable layers like text and shapes.

In Figma:

• Frame 1.1 → Image
• Frame 1.2 → Text
• Frame 1.3 → Rectangle (shape)

Result in Pencil

• Format 1
  • Image Layer 1.1
  • Text Layer 1.2 (editable)
  • SVG Shape Layer 1.3

This structure keeps your text editable and shapes scalable.

Masks
If you want to preserve mask effects, make sure to group the mask and the target layer together in Figma.
Failing to group them will result in the mask not being applied when imported into Pencil.

Top Tip for Best Results
Remember that you want the editable parts — especially text — to be on the top layer.

Importing into Pencil

• Navigate to the Template Library on the left-hand side of your workspace
• Press Import templates and locate your .pencil file