Cya CDN

About this plugin

Cya CDN

Cya CDN is a Figma plugin designed to simplify the process of uploading selected nodes to a CDN or Cloud Server and retrieving the corresponding remote URL. When a node is successfully uploaded, the plugin automatically caches the CDN URL within the node, allowing anyone with access to the Figma file to easily retrieve and share the URL.

I provided an API example at github, you can fork this repo and run it at local to upload assets!

Github: cya-cdn-upload-server

Before you can use this plugin, you need to provide some configuration in the plugin setting page, the configuration is listed below:

1. TinyPNG API Key

2. CDN Prefix Path

3. CDN Upload URL

4. Image Scale

TinyPNG API Key

If you want to compress the image before upload, you should provide the TinyPNG API Key, you can get the key in the TinyPNG official website: https://tinypng.com/developers

CDN Prefix Path

This parameter is the prefix path of your CDN server, CDN Prefix Path is optional.

CDN Upload URL

You must provide the CDN upload URL, the plugin will upload the image to this URL, the URL should be like this: `https://cdn.example.com/upload`, the plugin will send a POST request to this URL, the request body is a form data, the keys is:

* file: file blob the plugin generated

* tinyAPIKey: from plugin settings

* cdnPrefixPath: from plugin settings

Example of the CDN Upload URL request:

POST https://cdn.example.com/upload

file: binaray
cdnPrefixPath: temp
tinyApiKey: Qbh0C9QSM2Z0ftBjyhydYb6sF******

# Response 
{
  "cdnUrl": "https://cdn.example.com/temp/bca484f1-7798-4b63-946a-****"
}

Example of the CDN Upload backend implementation(NextJs API):

import { NextApiHandler } from "next";
import formidable, { File } from "formidable";
import tinify from "tinify";
import fs from "fs";
import path from "path";
import OSS from "ali-oss";

export const config = {
  api: {
    bodyParser: false,
  },
};

type ApiFormData = {
  file: File;
  cdnPrefixPath?: string;
  tinyApiKey?: string;
};

const compressImage = async (file: File, tinyApiKey: string) => {
  tinify.key = tinyApiKey;
  const source = tinify.fromFile(file.filepath);
  await source.toFile(file.filepath);
};

const uploadImage = async (file: File, prefixPath: string) => {
  const client = new OSS({
    bucket: "xxx...",
    region: "xxx...",
    accessKeyId: "xxx...",
    accessKeySecret: "xxx...",
  });
  const result = await client.put(
    path.join(prefixPath, file.newFilename),
    file.filepath
  );
  return result.url;
};

const compressAndUpload: NextApiHandler = async (req, res) => {
  console.log("handle compress and upload request");
  const form = formidable({
    encoding: "utf-8",
  });
  const [fields, files] = await form.parse(req);
  const file = (files.file as File[])[0];
  const cdnPrefixPath = fields.cdnPrefixPath[0];
  const tinyApiKey = fields.tinyApiKey[0];
  console.log(file, cdnPrefixPath, tinyApiKey);
  if (tinyApiKey) {
    await compressImage(file, tinyApiKey);
  }
  const cdnUrl = await uploadImage(file, cdnPrefixPath || "");
  console.log(cdnUrl);
  fs.unlinkSync(file.filepath);
  return res.status(200).json({ cdnUrl });
};

export default compressAndUpload;

Tips: if you want to use this plugin, you must implement the backend API first, and then provide the API URL to the plugin.

Image Scale

Which scale you want to upload, the default value is 2x.

About the local cache

1. The plugin will cache the profile settings in local, so you don't need to provide the profile settings every time you use the plugin.

2. If the node is uploaded before, the plugin will not upload it again, it will use the cached url.

If you have any questions, please contact me: [email protected]