Sync text from Notion database to Figma document.
Useful when managing app text in Notion or for multilingual support.

I have written a detailed description of how to set up this plugin. Please check here.

• [Notion] Create a reverse proxy to avoid CORS errors.
  • More information
• [Notion] Create a Notion integration.
• [Notion] Create a database.
• [Notion] Share the database with your integration.
• [Notion] Add pages with unique key (e.g., page title) and values to the database.
  • Currently, title, formula and text properties are supported.
  • Variables can be embedded. e.g., {name} follows you. (Age: {age})
• [Figma] Rename text layers you want to sync to #<Key Name of Notion>.
  • e.g., #pageTitle, #description and #signInWithApple
  • You can pass parameters. e.g., #notification?name=Alistair Warren&age=24. If there are variables in Notion database value, it will replace the text with that value in it.
  • In this example, the text will replaced by Alistair Warren follows you. (Age: 24).
  • Warning: If the text passed as a parameter contains &, replace it with %26.
  • e.g., #notification?name=Alistair Warren %26 Kevin Lara. The text will replaced by Alistair Warren & Kevin Lara follows you..
• [Figma] Open this plugin and fill in each field.
• [Figma] Press the "Sync Notion" button.
• Enjoy😎🏝

Sync all text contained in the selected element. If nothing is selected, all text on this page will be synced.

This plugin stores data in clientStorage during synchronization.
If this option is enabled, the cache is used for synchronization. If there is no cache, it cannot be enabled.
This option is useful if you have many pages and need to synchronize them many times.

If this option is enabled, highlight all text that has correct layer name format: #<Key Name of Notion>.
Text is highlighted in blue if the key is correct and in red if it's incorrect.
It is useful to check that the layer names are formatted correctly or that they have no typos.

Here are the steps to create a reverse proxy in Cloudflare Workers.
(This is just one example.)

• Sign up or login to Cloudflare Workers.
• Select "Workers" from the menu. Then create a new service.
  • The service name can be any name you like.
  • e.g., https://reverse-proxy.yourname.workers.dev
• After the service is created, click "Quick Edit" to open the editor.
• Enter the following code into your editor. Then click "Save and Deploy.

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  try {
    const url = new URL(request.url);

    if (url.pathname === "/") {
      return new Response(`
        Usage:\n
          ${url.origin}/<url>
      `);
    }

    if (request.method === "OPTIONS") {
      return new Response(null, {
        status: 200,
        ok: true,
        headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET, HEAD, POST, OPTIONS",
          "Access-Control-Allow-Headers": "Authorization, Content-Type, Notion-Version"
        }
      });
    }

    let response = await fetch(request.url.slice(url.origin.length + 1), {
      method: request.method,
      headers: request.headers,
      redirect: "follow",
      body: request.body
    });
    response = new Response(response.body, response);
    response.headers.set("Access-Control-Allow-Origin", "*");
    response.headers.set("Access-Control-Allow-Methods", "GET, HEAD, POST, OPTIONS");
    response.headers.set("Access-Control-Allow-Headers", "Origin, X-Requested-With, Accept, Authorization, Content-Type, Notion-Version");

    return response;
  } catch (e) {
    return new Response(e.stack || e, { status: 500 });
  }
}

• Now you can access any API with the URL: https://reverse-proxy.yourname.workers.dev/https://any-api-url without any CORS errors.

The URL entered into the "Notion API URL" field of this Figma plugin is https://reverse-proxy.yourname.workers.dev/https://api.notion.com (not required for "v1" and later).

If you have any plobrem or feedback, please use the GitHub Issues.

This plugin is made by Ryo Nakae 🙎‍♂️.

• https://brdr.jp
• https://twitter.com/ryo_dg
• https://github.com/ryonakae