/FrameWork-Plugin

Primary LanguageJavaScript

LinkedIn


Frame-work.app Plugin

Getting Started

The plugin does two things. First, it allows you to create the page that you will access via frame-work.app Second, it checks every second it change have been made, and apply them.

To add install it on your figma :

  Plugin => Development => Import Plugin from Manifest
  Then select manifest.json available on the folder

On line 1 you have to specify the adress of your backend

const BACKENDURL = "http://localhost:3000/api";
//const BACKENDURL = "https://framework-backend.fly.dev/api";

Important

Don't forget to install any Font that Figma will need, otherwise no change will be applied

How it works

Logo


Directly when you start the plugin 2 functions are launched :

  • retrieveAllDatas()
  • checkIfChanged()

1. retrieveAllDatas()

This funtion scan you Figma document and will fill this map

datas = {
  FigmaName: figma.root.name,
  FigmaFileKey: figma.fileKey,
  FigmaId: figma.currentPage.id,
  sections: [],
  images: [],
  variables: [],
  usedBy: {},
};

The sections and frames

First it will retrieve all the element with a type SECTION.

const sections = figma.currentPage.findAll(
  (section) => section.type === "SECTION"
);

In the exemple below, SUMMER and AUTUMN are SECTION in our figma file.

Logo


Then, for every SECTION the plugin gonna retrieve the FRAMES. This will then allow us to section specific images we want to work on.

const frames = section.children;
frames.forEach((frame) => {
  const frameData = {
    type: "FRAME",
    sectionName: section.name,
    frameName: frame.name,
    frameId: frame.id,
  };
  sectionData.frames.push(frameData); // Push frame data into the section's frames array
});

Logo


The images

We are retriving all the images that has "EditImg" in there name.

const images = figma.currentPage.findAll((image) =>
  image.name.includes("EditImg")
);

The variables

We are then storing all the variables, STRING and FLOAT and COLOR and BOOLEAN

2. checkIfChanged()

This is one of the most important function of the plugin. It is called every second and it makes an API call to check the flag "design.hasChanged" is set to true.

if (design.hasChanged) {
  console.log("Change detected!", design);
  await makeChangement(design);
}

The makeChangement() function call 3 functions which are self explanatory.

editVariables(design.variables);
findImgAndReplace(design.images);
settingNonVisibleEmptyText();

How to make it run on a server

Because the plugin is meant to run undefinitely, you have to configure your server (Mac or Windows)

1. Mac

Attached you find a Apple Script. Which make the app Figma the current application.

It then mimic the keyboard touched down to reload the plug in

	key code 35 using {command down, option down}

Here the whole code

tell application "Figma" to activate

#repeat 2 times
repeat
	tell application "System Events"

		#Code to switch tab
		#key code 48 using control down
		delay 3
		#Code to restart plugin
		key code 35 using {command down, option down}
		delay 5
	end tell

	#Command + Option + P
end repeat

You then need to configure the scriptlauncher of your Mac server

nano ~/Library/LaunchAgents/com.damien.scriptlauncher.plist

And fill it with com.damien.scriptlauncher.plist file that you will find in the public folder

Then run

launchctl load ~/Library/LaunchAgents/com.damien.scriptlauncher.plist

2. Windows Configuration

Since the plugin is designed to run on a windows, you need to also to :

  • Install Move Mouse to run the reloadplugin.ps1 every 30secondes
  • Install PowerToy to edit a keyboard shortcut
  • Configure Windows to prevent it to go to sleep/lock

Logo


Logo


(back to top)

Contact

JRJR - @twitter_handle - email@email_client.com

Project Link: https://github.com/damdamtouch/Framework-generator

(back to top)