Skip to main content
Solved

Is it possible to set environmental variables in Figma plugin?

  • February 23, 2022
  • 3 replies
  • 2674 views

Bahtiyar_Ahmidi

Is it possible to set non-sensitive environmental variables (like rootUrl) in the Figma plugin? So I don’t have to manually switch variables between my dev environment and production.

Best answer by Bahtiyar_Ahmidi

I found out a way to do this myself:
Figma uses WebPack to compile the code, and it uses HtmlWebpackPlugin, and this plugin allows us to pass extra information to ui.html.

// webpack.config.js
plugins: [
    new HtmlWebpackPlugin({
      template: "./src/ui.html",
      filename: "ui.html",
      inlineSource: ".(js)$",
      chunks: ["ui"],
      inject: "body",
      cache: false,
      // Below is the extra information that I want to pass to ui.html
      env: argv.mode === "production" ? "production" : "development",
    }),
  ],

Then we can access to this data in ui.html

// ui.html
const env = '<%= htmlWebpackPlugin.options.env %>'
const BASE_URL = env === "development" ? "http://localhost:8080" : "https://your-production-url.com"
View original

3 replies

Gleb
  • Power Member
  • 4708 replies
  • February 24, 2022

I haven’t tried but there are libraries for that: GitHub - zertosh/loose-envify: Like envify but much faster, google something like client-side env variables. javascript - Is it possible to use dotenv in a react project? - Stack Overflow


Bahtiyar_Ahmidi

I found out a way to do this myself:
Figma uses WebPack to compile the code, and it uses HtmlWebpackPlugin, and this plugin allows us to pass extra information to ui.html.

// webpack.config.js
plugins: [
    new HtmlWebpackPlugin({
      template: "./src/ui.html",
      filename: "ui.html",
      inlineSource: ".(js)$",
      chunks: ["ui"],
      inject: "body",
      cache: false,
      // Below is the extra information that I want to pass to ui.html
      env: argv.mode === "production" ? "production" : "development",
    }),
  ],

Then we can access to this data in ui.html

// ui.html
const env = '<%= htmlWebpackPlugin.options.env %>'
const BASE_URL = env === "development" ? "http://localhost:8080" : "https://your-production-url.com"

Mitul
  • New Member
  • 2 replies
  • April 3, 2023

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings