techlist.io
KREN
figma

Figma has PDF Export | Figma Blog (opens in new tab)

figmavector-graphicssvgpdfrasterizationgradientsgraphics-pipeline

Figma introduced PDF export to meet demand for a format still essential for printing, development, and precise asset delivery. Because existing PDF libraries required compromises—especially around rasterization and complex effects—Figma built its own library after studying extensive PDF documentation. The result prioritizes high-fidelity, scalable output across different viewers and use cases.

Exporting Designs to PDF

  • Users can export selected layers or an entire page from the Properties Panel.
  • The “Export Frames to PDF” option creates a multi-page PDF, with frames ordered from top-left to bottom-right based on their canvas positions.
  • PDF preserves vector descriptions, allowing text and drawings to remain sharp at any zoom level.

Building a Custom PDF Foundation

  • Figma reviewed more than 1,300 pages of PDF documentation and evaluated existing libraries.
  • Existing tools often handled difficult effects by rasterizing them into images.
  • Figma built its own PDF library to control when and how rasterization occurs.
  • Avoiding unnecessary rasterization is especially important for:
    • Large-format printing
    • Generating the same asset at multiple sizes
    • Preserving crisp edges and gradients

Reproducing Shadows and Blurs

  • PDF lacks the shader-level controls available in graphics pipelines, so Figma synthesized shadows in code.
  • Blurred regions are finely rasterized and converted into soft masks.
  • Sharp elements behind the shadow remain vector-based and clear.
  • Vector clipping ensures shadows and blurs stop correctly at their parent boundaries, preventing visible cracks.

Handling Complex Gradients

  • Linear and elliptical gradients map relatively easily to PDF’s built-in shading features.
  • Angular and diamond gradients require more advanced techniques:
    • Complex gradients are approximated by stitching together many simpler colored regions.
    • Mathematical care is needed to limit approximation and numerical errors.
  • PDF viewers implement sophisticated shading features inconsistently.
  • Figma selected a specific implementation for angular gradients that works reliably across major viewers, including macOS Preview.

Figma’s PDF exporter provides a practical way to share and print designs while preserving vector precision. The company notes that reducing rasterization and adding advanced export controls remain ongoing priorities.