It says in the tutorial you referenced:

Let’s assume we have a Node application written in TypeScript

This assumption is false when developing a Figma plugin as it runs in a browser-like environment. (I’m not sure how many different setups are possible for TypeScript compilation so it might be that require can still be made to work for the plugin, but it’s not how you would normally do it AFAIK).

I think instead you will want to have code that uses ECMAScript modules like so:

import data from "/pathname/file.json"

and this option in your TypeScript config: "resolveJsonModule": true

(You probably want to put your JSON file in the same directory where you are writing your code too btw rather than getting it from the local Downloads folder).

Hope that works

Unfortunately, it still does not work after trying everything you recommended. Would there be another way than JSON to import local data into my plugin code ?

PS: the data I am trying to import is from a pandas dataframe in Python.

One hack you can try is to turn the JSON file into a JavaScript file by adding export default at the top of the file and renaming it to be a JS file. Then you can just do import data from "./data" where you’ve renamed your “data.json” to “data.js”.

You can definitely import JSON so I suspect the issue is with your TypeScript config or other config, if you post the error messages here I can have a look but otherwise the above approach should work.

Not sure this helps, but I think you can use webpack in some way to have multiple files but ultimately the plugin only uses one bundled file through ui.html: Bundling with Webpack · Figma Developers.

And I think webpack has loaders for JSON.

I think you may also have to include the JSON or JS file in a script tag in ui.html so that code.ts can see it in the Figma sandbox. I get that notion from looking at this basic Figma UI library: GitHub - thomas-lowry/figma-plugin-ds: A small lightweight design system for use in Figma Plugins

Thanks for your reply. I actually got it working by using this in ui.html:

<button style="display:block;width:120px; height:30px;" onclick="document.getElementById('get_the_file').click()">Choose file</button>

<input type='file' id="get_the_file" style="display:none">



<script>

document.getElementById("get_the_file").addEventListener("change", function() {

  var file_to_read = document.getElementById("get_the_file").files[0];

  var fileread = new FileReader();

  fileread.onload = function(e) {

    var content = e.target.result;

    // console.log(content);

    var json_data = JSON.parse(content); // Array of Objects.

    parent.postMessage({ pluginMessage: { type: 'send-data', json_data } }, '*')

  };

  fileread.readAsText(file_to_read);

});

</script>

I’m having some problems importing a json file into code.ts as well. I can’t upload images in this post so I’ll try to describe via code blocks.

this line in code.ts:

import data from "./json_data.json";

throws this error:

error: Syntax error on line 1: Unexpected token at pAr (figma_app.min.js.br:3025) at async figma_app.min.js.br:3022

tsconfig.json file looks like this:

{ "compilerOptions": { "resolveJsonModule": true, "esModuleInterop": true, "moduleResolution": "node", "jsx": "react", "target": "es6", "lib": l"es6"], "typeRoots": o "./node_modules/@types", "./node_modules/@figma" ] } }

I’ve also tried some of the suggestions above like using renaming to json_data.js with export default at the top with no avail.

+1

Same problem here.

after reading @c5inco 's and @Antoine_Zurcher 's answer i was wondering: is it really needed to have an UI to be able to load an json file? i was not planning on having an UI so far… 😕

thank you a lot