Merge pull request #4 from MiaGobble/dev-beta

Publish auto import and other updates

.gitignore

@@ -39,3 +39,5 @@ luac.out
 *.x86_64
 *.hex
 
+# Misc
+*.zip

App/Roblox Figma Importer Assistant/code.js

@@ -6,22 +6,11 @@
 */
 
 "use strict";
-// This plugin will open a window to prompt the user to enter a number, and
-// it will then create that many rectangles on the screen.
-// This file holds the main code for the plugins. It has access to the *document*.
-// You can access browser APIs in the <script> tag inside "ui.html" which has a
-// full browser environment (see documentation).
-// This shows the HTML page in "ui.html".
+
 figma.showUI(__html__);
 figma.ui.resize(500, 300);
-// Calls to "parent.postMessage" from within the HTML page will trigger this
-// callback. The callback will be passed the "pluginMessage" property of the
-// posted message.
 
 figma.ui.onmessage = msg => {
-    // One way of distinguishing between different types of messages sent from
-    // your HTML page is to use an object with a "type" property like this.
-
     const currentPage = figma.currentPage;
     let FigmaExportData = [];
 
@@ -42,7 +31,7 @@ figma.ui.onmessage = msg => {
 
                 //rotation: node.rotation,
                 clipsContent: node.clipsContent,
-                // fills: node.fills,
+                fills: node.fills,
                 // cornerRadius: node.cornerRadius,
                 // strokeWeight: node.strokeWeight,
                 // strokes: node.strokes,
@@ -86,10 +75,10 @@ figma.ui.onmessage = msg => {
         console.log(FigmaExportData)
         figma.ui.postMessage(FigmaExportData)
 
+        // /copyToClipboardAsync(FigmaExportData);
+
         return FigmaExportData
     }
 
-    // Make sure to close the plugin when you're done. Otherwise the plugin will
-    // keep running, which shows the cancel button at the bottom of the screen.
     // figma.closePlugin();
 };

App/Roblox Figma Importer Assistant/ui.html

@@ -13,20 +13,17 @@
 </style>
 
 <div>
-  <label for="CodeTitle">Select what you want to convert and then press "Generate Code"</label>
+  <label for="CodeTitle">Select an instance and then click "export" to get your export data. After doing so, copy and paste the export data into the Roblox plugin.</label>
 </div>
 
 <div>
-  <button class = "button button--primary" id="Generate">Generate Code</button>
+  <button class = "button button--primary" id="Generate">Export</button>
 </div>
 
 <div>
-  <label for="CodeTitle2">Generated Code:</label>
+  <!-- <label for="CodeTitle2">Export Data:</label> -->
   <input type="text" rows="2" value = "" id ="Code">
 </div>
-<div>
-  <label for="CodeDesc">After doing so, copy and paste the Generated Code onto the Roblox plugin.</label>
-</div>
 
 <script>
   const CodeText = document.getElementById('Code')

Docs/Temp/InstallInstructions.md

@@ -0,0 +1,10 @@
+# Install Instructions
+
+### Studio Plugin
+* Insert the Roblox model for the plugin in studio
+* Right click that model and select "save as local plugin", then click save
+
+### Figma App
+* Unzip App folder
+* In Figma, go to Plugins -> Development -> Import plugin from manifest
+* Go to the unzipped App folder and import the file named "manifest"

Docs/Temp/Tags.md

@@ -0,0 +1,26 @@
+# Tags
+Tags are attached to the names of Figma nodes to modify import behavior. Below are the current tags usable for imports. Incorrect tagging is ignored and won't error.
+
+> [!TIP]
+> Tags are written in `@UPPERCASE` format! For example, the "group" tag is written as `@GROUP`. Tags can be stacked, separated by `@`.
+
+### `@GROUP`
+Groups a node in export. This means that no children will be exported under it.
+
+### `@IGNORE`
+Nodes with `@IGNORE` in the name will not be included in exports.
+
+### `@TYPE_FRAME`
+Declares the exported node to be a `Frame` class type in Studio.
+
+### `@TYPE_SCROLLING_FRAME`
+Declares the exported node to be a `ScrollingFrame` class type in Studio.
+
+### `@TYPE_BUTTON`
+Declares the exported node to be an `ImageButton` class type in Studio.
+
+### `@TYPE_TEXT_BUTTON`
+Declares the exported node to be a `TextButton` class type in Studio.
+
+### `@TYPE_IMAGE`
+Declares the exported node to be a `ImageLabel` class type in Studio. This is the default behind the scenes.

README.md

@@ -0,0 +1,3 @@
+View auto import tags [here](./Docs/Temp/Tags.md)
+
+View install instructions [here](./Docs/Temp/InstallInstructions.md)

src/FigmaImportAssistant/Main/CorrectionHandler/AppImportInterpreter.lua

@@ -1,5 +1,14 @@
 local AppImportInterpreter = {}
 
+local TAG_ACTIONS = {
+    ["GROUP"] = "BreakAfter",
+    ["IGNORE"] = "Continue",
+    ["TYPE_IMAGE"] = "ClassImageLabel",
+    ["TYPE_BUTTON"] = "ClassImageButton",
+    ["TYPE_FRAME"] = "ClassFrame",
+    ["TYPE_SCROLLING_FRAME"] = "ClassScrollingFrame",
+}
+
 local HttpService = game:GetService("HttpService")
 
 local function ReadRecursive(ParentTable)
@@ -56,4 +65,18 @@ function AppImportInterpreter:InterpretJSONData(JSONData : string)
     return Interpretation
 end
 
+function AppImportInterpreter:GetActionsFromName(Name : string)
+    local RawTags = string.split(Name, "@")
+    local Name = RawTags[1]
+    local Actions = {}
+
+    for Index, Tag in ipairs(RawTags) do
+        if Index > 1 and TAG_ACTIONS[Tag] then
+            Actions[TAG_ACTIONS[Tag]] = true
+        end
+    end
+
+    return Actions, Name
+end
+
 return AppImportInterpreter

src/FigmaImportAssistant/Main/CorrectionHandler/Creator.lua

@@ -1,17 +1,44 @@
 local Creator = {}
 
 local Applicator = require(script.Parent.Applicator)
+local AppImportInterpreter = require(script.Parent.AppImportInterpreter)
+
+local function InterpretActions(Name : string)
+    local Actions, NewName = AppImportInterpreter:GetActionsFromName(Name)
+
+    return Actions, NewName
+end
 
 local function CreateRecursive(Parent, Data : {})
     for _, Child in Data.Root do
-        local Object = Instance.new(Child.Type)
+        local Actions, Name = InterpretActions(Child.Name)
+
+        if Actions.Continue then
+            continue
+        end
+
+        local Object
+
+        for Action, _ in Actions do
+            if Action:find("Class") then
+                local InstanceType = Action:gsub("Class", "")
+                Object = Instance.new(InstanceType)
+                break
+            end
+        end
+
+        if not Object then
+            Object = Instance.new(Child.Type)
+        end
+
         Object.ClipsDescendants = Child.clipsContent or true
         Object.BackgroundTransparency = 1
         Object.Parent = Parent
+        Child.Name = Name
 
         Applicator:ApplyChangesFromData(Object, Child)
 
-        if Child.Children then
+        if not Actions.BreakAfter and Child.Children then
             CreateRecursive(Object, Child.Children)
         end
     end