feat: add multi-frame support 🎉 (#267)

Author: ParthJadhav

README.md

@@ -35,6 +35,14 @@ Tkinter Designer uses the Figma API to analyze a design file and create the resp
 
 <img width="500" alt="Tkinter Designer GUI" src="https://user-images.githubusercontent.com/42001064/119863796-92af4a80-bf37-11eb-9f6c-61b1ab99b039.png">
 
+## 📢 Announcement
+### 🎉 Multi frame support is here! 🎉
+
+You can now create multiple frames in a single design file and Tkinter Designer will create the respective code and files for each frame. This is a huge step for Tkinter Designer and I'm really excited to see what you guys create with it.
+
+Feel free to share your creations with the community on [Discord](https://discord.gg/QfE5jMXxJv).
+
+If you encounter any bugs or have any suggestions, please create an issue [here](https://github.com/ParthJadhav/Tkinter-Designer).
 ## ☄️  Advantages of Tkinter Designer
 
 1. Interfaces with drag and drop.

tkdesigner/designer.py

@@ -5,28 +5,34 @@
 
 from pathlib import Path
 
-
-CODE_FILE_NAME = "gui.py"
-
-
 class Designer:
     def __init__(self, token, file_key, output_path: Path):
         self.output_path = output_path
         self.figma_file = endpoints.Files(token, file_key)
         self.file_data = self.figma_file.get_file()
+        self.frameCounter = 0
 
     def to_code(self) -> str:
         """Return main code.
         """
-        window_data = self.file_data["document"]["children"][0]["children"][0]
-        try:
-            frame = Frame(window_data, self.figma_file, self.output_path)
-        except Exception:
-            raise Exception("Frame not found in figma file or is empty")
-        return frame.to_code(TEMPLATE)
+        frames = [];
+        for f in self.file_data["document"]["children"][0]["children"]:
+            try:
+                frame = Frame(f, self.figma_file, self.output_path, self.frameCounter)
+            except Exception:
+                raise Exception("Frame not found in figma file or is empty")
+            frames.append(frame.to_code(TEMPLATE))
+            self.frameCounter += 1
+        return frames
+
 
     def design(self):
         """Write code and assets to the specified directories.
         """
         code = self.to_code()
-        self.output_path.joinpath(CODE_FILE_NAME).write_text(code, encoding='UTF-8')
+        for index in range(len(code)):
+            # tutorials on youtube mention `python3 gui.py` added the below check to keep them valid
+            if (index == 0):
+                self.output_path.joinpath(f"gui.py").write_text(code[index], encoding='UTF-8')
+            else:
+                self.output_path.joinpath(f"gui{index}.py").write_text(code[index], encoding='UTF-8')

tkdesigner/figma/custom_elements.py

@@ -158,6 +158,7 @@ def to_code(self):
 entry_{self.id_} = {self.entry_type}(
     bd=0,
     bg="{self.bg_color}",
+    fg="#000716",
     highlightthickness=0
 )
 entry_{self.id_}.place(

tkdesigner/figma/frame.py

@@ -10,7 +10,7 @@
 
 
 class Frame(Node):
-    def __init__(self, node, figma_file, output_path):
+    def __init__(self, node, figma_file, output_path, frameCount=0):
         super().__init__(node)
 
         self.width, self.height = self.size()
@@ -21,7 +21,7 @@ def __init__(self, node, figma_file, output_path):
         self.figma_file = figma_file
 
         self.output_path: Path = output_path
-        self.assets_path: Path = output_path / ASSETS_PATH
+        self.assets_path: Path = output_path / ASSETS_PATH / f"frame{frameCount}"
 
         self.output_path.mkdir(parents=True, exist_ok=True)
         self.assets_path.mkdir(parents=True, exist_ok=True)
@@ -123,7 +123,7 @@ def size(self) -> tuple:
     def to_code(self, template):
         t = Template(template)
         return t.render(
-            window=self, elements=self.elements, assets_path=ASSETS_PATH)
+            window=self, elements=self.elements, assets_path=self.assets_path)
 
 
 # Frame Subclasses