ImagePro: Streamlining Figma Exports with Pinata Cloud Integration 🚀

This is a submission for the The Pinata Challenge

Hey, I am Jackson Kasi 🙂👋

My team 💪 🚀:

• @aswin_j Aswin &
• @somekiwiplease Sharvari Suresh

What I Built

I developed ImagePro, a Figma plugin designed to streamline asset exporting for designers. It allows users to effortlessly export images in PNG, JPG, WEBP, SVG, or PDF formats, with advanced options like:

• Password protection for PDFs
• Grayscale, RGB, and CMYK exports
• Merging multiple PDFs

But that’s not all! 🎉 As part of the Pinata Challenge, we integrated Pinata Cloud into ImagePro to handle file uploads, making the plugin even more powerful 🚀 by allowing users to upload their exported assets directly to Pinata Cloud for secure, fast, and easy management. 🛡️⚡

Demo

You can try the ImagePro plugin here:

👉 ImagePro on Figma

Here’s a quick demo of how it works:

1. Select any image or layer in Figma and fetch it via the plugin.
2. Choose your export format and customize options (compression, color modes, etc.).
3. With the Pinata Cloud integration, you can upload the exported file with just one click.
4. View your upload in the History section, where you can:
   • Download the file
   • Copy the file link
   • Delete the file if no longer needed

Check out a quick demo of the process in this video:

A Feature I Really Like: Pinata’s Optimized Image Fetching

One of the features I really appreciate in Pinata is the optimizeImage function. It's super useful for ImagePro because, after a user uploads a file, I need to show a small thumbnail of that file in the History section. Instead of transferring the entire file, which can be large, the optimizeImage function helps me generate a smaller, optimized version specifically for preview purposes.

This not only saves on data transfer but also makes the user experience faster and more efficient. It’s a great way to ensure users can easily identify their files without unnecessary delays or loading times. This feature has really helped streamline the process for us!

Here's the code I implemented for this feature:

// ** import third-party lib
import { PinataSDK } from "pinata";

// ** import config
import { env } from "../config/env";


/**
 * Initializes Pinata SDK
 */
const pinata = new PinataSDK({
  pinataJwt: env.PINATA_JWT,
  pinataGateway: env.PINATA_GATEWAY,
});


/**
 * Fetches an optimized image from Pinata using the provided CID.
 * @param cid Content Identifier of the image file
 * @param optimizeOptions Options for optimizing the image
 * @returns The optimized image data and its content type
 */
export const getOptimizedImageFromPinata = async (
  cid: string,
  optimizeOptions: {
    width?: number;
    height?: number;
    format?: "auto" | "webp";
    quality?: number;
    fit?: "scaleDown" | "contain" | "cover" | "crop" | "pad";
    gravity?: "auto" | "side" | string;
  },
) => {
  const response = await pinata.gateways
    .get(cid)
    .optimizeImage(optimizeOptions);

  // Convert data to Buffer
  let dataBuffer: Buffer;

  if (typeof response.data === "string") {
    dataBuffer = Buffer.from(response.data, "binary");
  } else if (response.data instanceof Blob) {
    dataBuffer = Buffer.from(await response.data.arrayBuffer());
  } else if (Buffer.isBuffer(response.data)) {
    dataBuffer = response.data;
  } else {
    throw new Error("Unsupported data type for optimized image");
  }

  return {
    data: dataBuffer,
    contentType: response.contentType,
  };
};

Why I Didn’t Use IPFS for ImagePro

While IPFS (Inter-Planetary File System) offers many advantages for decentralized storage, I decided not to integrate it into ImagePro for the following reasons:

1. Centralized Storage Preferred by Users

The majority of ImagePro users are designers who prioritize fast and reliable access to their files. Centralized storage services, like Pinata Cloud backed by a Content Delivery Network (CDN), offer quicker response times and more stable performance compared to IPFS. Designers often need instant access to their files, and IPFS can sometimes be slower depending on network conditions and the availability of nodes.

2. Not a Web3-Focused Use Case

IPFS shines in Web3 environments where decentralization, immutability, and censorship resistance are key. However, ImagePro is focused on providing streamlined export features for designers using Figma, where decentralized file storage isn’t a core requirement. Most of the users don’t need the decentralized and immutable nature of IPFS for storing design assets.

3. Ease of Use and File Management

Pinata Cloud offers an easy-to-use, centralized platform for file management, allowing users to upload files, manage history, and retrieve assets quickly. IPFS, while powerful, involves a more complex setup and maintenance, which might not suit the typical designer’s workflow. For users of ImagePro, simplicity and efficiency are key, and Pinata provides that out-of-the-box.

4. Performance Considerations

IPFS nodes work on a peer-to-peer basis, which means the speed at which files are retrieved can vary. For ImagePro, where speed and performance are critical, especially during asset exports and client-facing projects, a centralized CDN-backed solution like Pinata Cloud ensures faster and more reliable access to files.

5. Immutability and Versioning Not Required

While immutability is a key benefit of IPFS, it’s not a core need for ImagePro users. Designers often make multiple revisions and updates to their assets, and a centralized storage solution that allows easy management and replacement of files works better for this use case.

My Code

Check out the ImagePro GitHub repo:

👉 ImagePro on GitHub

If you like what I built, don’t forget to ⭐ star the repo! 🙂

I’ve written the code with a strong focus on flexibility and scalability, making it a great starting point for plugin development. Plus, there are some useful concepts in there that can simplify handling changes in your future projects!

More Details

Pinata Cloud plays a key role in ImagePro by simplifying the file upload and management process. Here’s how:

• Efficient Uploads: Once a user exports an image or PDF, they can immediately upload the file to Pinata Cloud. This reduces the hassle of manually saving and storing files locally.
• File History Management: Pinata stores all uploaded files, and within ImagePro’s History section, users can search, track, and manage their files easily. They can copy the link, download, or delete files as needed.
• Fast, Reliable Access: Pinata's CDN ensures that files are delivered quickly and securely, making it perfect for designers who need reliable file hosting and sharing.

By leveraging Pinata, ImagePro not only enhances the export process but also provides a seamless way for designers to store, manage, and retrieve their assets.