repo setup

.gitignore

@@ -0,0 +1,8 @@
+# Node
+*.log
+*.log.*
+node_modules
+
+out/
+dist/
+code.js

README.md

@@ -0,0 +1,40 @@
+Below are the steps to get your plugin running. You can also find instructions at:
+
+  https://www.figma.com/plugin-docs/plugin-quickstart-guide/
+
+This plugin template uses Typescript and NPM, two standard tools in creating JavaScript applications.
+
+First, download Node.js which comes with NPM. This will allow you to install TypeScript and other
+libraries. You can find the download link here:
+
+  https://nodejs.org/en/download/
+
+Next, install TypeScript using the command:
+
+  npm install -g typescript
+
+Finally, in the directory of your plugin, get the latest type definitions for the plugin API by running:
+
+  npm install --save-dev @figma/plugin-typings
+
+If you are familiar with JavaScript, TypeScript will look very familiar. In fact, valid JavaScript code
+is already valid Typescript code.
+
+TypeScript adds type annotations to variables. This allows code editors such as Visual Studio Code
+to provide information about the Figma API while you are writing code, as well as help catch bugs
+you previously didn't notice.
+
+For more information, visit https://www.typescriptlang.org/
+
+Using TypeScript requires a compiler to convert TypeScript (code.ts) into JavaScript (code.js)
+for the browser to run.
+
+We recommend writing TypeScript code using Visual Studio code:
+
+1. Download Visual Studio Code if you haven't already: https://code.visualstudio.com/.
+2. Open this directory in Visual Studio Code.
+3. Compile TypeScript to JavaScript: Run the "Terminal > Run Build Task..." menu item,
+    then select "npm: watch". You will have to do this again every time
+    you reopen Visual Studio Code.
+
+That's it! Visual Studio Code will regenerate the JavaScript file every time you save.

js_for_frames.js

@@ -0,0 +1,86 @@
+// in the HTML 
+
+var frameNamesList = {};
+
+// For each item you want to add
+const frame = {
+    parentFrameName: 'Screen 1', // Example parent frame name
+    name: 'FrameName',
+    suggestedTextStyle: 'TextStyle',
+    suggestedPaintStyle: 'PaintStyle',
+};
+
+
+// Create an element object
+const element = {
+    elementName: item.name,
+    elementTextSuggestion: item.suggestedTextStyle,
+    elementPaintSuggestion: item.suggestedPaintStyle,
+};
+
+// Check if the parentFrameName is already in frameNamesList
+if (!frameNamesList.hasOwnProperty(frame.parentFrameName)) {
+    // If not, create an array for the parentFrameName key and push the element
+    frameNamesList[frame.parentFrameName] = [element];
+} else {
+    // If yes, push the element to the existing array for the parentFrameName key
+    frameNamesList[frame.parentFrameName].push(element);
+}
+
+
+for (const name of Object.keys(frameNamesList)) {
+    console.log(name);
+    const frameItem = document.createElement('li');
+    frameItem.className = 'frame';
+
+    const frameName = document.createElement('div');
+    frameName.className = 'frame-name';
+    frameName.textContent = name;
+    frameItem.appendChild(frameName);
+
+    frameItem.addEventListener('click', () => {
+        frameNameHit(name, frameNamesList);
+    });
+
+    elementList.appendChild(frameItem);
+}
+
+
+
+// FOR JS FILE 
+
+
+// Helper function to get the highest parent frame id
+function getHighestParentFrameId(element) {
+    let currentElement = element;
+    let highestParentFrameId = null;
+
+    // Traverse up the hierarchy until a frame is found
+    while (currentElement.parent) {
+        if (currentElement.parent.type === 'FRAME') {
+            highestParentFrameId = currentElement.parent.id;
+        }
+
+        currentElement = currentElement.parent;
+    }
+
+    return highestParentFrameId;
+}
+
+// Helper function to get the highest parent frame name
+function getHighestParentFrameName(element) {
+    let currentElement = element;
+    let highestParentFrameName = null;
+
+    // Traverse up the hierarchy until a frame is found
+    while (currentElement.parent) {
+        if (currentElement.parent.type === 'FRAME') {
+            highestParentFrameName = currentElement.parent.name;
+        }
+
+        currentElement = currentElement.parent;
+    }
+
+    return highestParentFrameName;
+}
+

manifest.json

@@ -0,0 +1,17 @@
+{
+  "name": "DESY",
+  "id": "1298509817622924152",
+  "api": "1.0.0",
+  "main": "code.js",
+  "capabilities": [],
+  "enableProposedApi": false,
+  "editorType": [
+    "figma"
+  ],
+  "ui": "ui.html",
+  "networkAccess": {
+    "allowedDomains": [
+      "https://fonts.googleapis.com","https://fonts.gstatic.com"
+    ]
+  }
+}