Merge pull request #13 from uramakilab/canva

Update Unity and Implementation Plugin Figma

FTU_FigmaToUnity/.gitignore

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

FTU_FigmaToUnity/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/
+
+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.

FTU_FigmaToUnity/code.ts

@@ -0,0 +1,94 @@
+// This shows the HTML page in "ui.html".
+figma.showUI(__html__, { themeColors: true })
+figma.ui.resize(800, 540)
+
+let isComponent = () => {
+  if(figma.currentPage.selection.length < 1){
+    return false
+  }
+  for(const node of figma.currentPage.selection) {
+    if(node.type !== 'COMPONENT'){
+      return false
+    }
+  }
+  return true
+}
+
+let componentCreate = async () => {
+  let components = []
+  for(let i=0; i<figma.currentPage.selection.length; i++){
+    let select = figma.currentPage.selection[i]
+    if(typeof(select.absoluteBoundingBox?.width) === 'number' && select.type === 'COMPONENT'){
+      let width = select.absoluteBoundingBox?.width/100
+      let height = select.absoluteBoundingBox?.height/100
+      let image = await figma.currentPage.selection[i].exportAsync({
+        format: 'PNG',
+        constraint: { type: 'SCALE', value: 2 }
+      })
+      let propertys = select.componentPropertyDefinitions
+      let property: { rotationX: number, rotationY: number, positionX: number, positionY: number, positionZ: number } = {rotationX: 0, rotationY: 0, positionX: 0, positionY: 0, positionZ: -1}
+      if(Object.keys(propertys).length === 5) {
+        const keys = Object.keys(propertys)
+        keys.forEach( key => {
+          if(key.includes('RotationX')) {
+            property.rotationX = Number(propertys[key].defaultValue)
+          }
+          else if(key.includes('RotationY')) {
+            property.rotationY = Number(propertys[key].defaultValue)
+          }
+          else if(key.includes('PositionX')) {
+            property.positionX = Number(propertys[key].defaultValue)
+          }
+          else if(key.includes('PositionY')) {
+            property.positionY = Number(propertys[key].defaultValue)
+          }
+          else if(key.includes('PositionZ')) {
+            property.positionZ = Number(propertys[key].defaultValue)
+          }
+        })
+      }
+      let component: { width: number, height: number, image: object, property: object  } = { width, height, image, property }
+      components.push(component)
+    }
+  }
+  figma.ui.postMessage({isComponent: isComponent(), components: components})
+}
+componentCreate()
+
+figma.ui.onmessage = msg => {
+
+  if (msg.type === 'apply') {
+    var components = figma.currentPage.selection
+    components.forEach((node, i) => {
+      if(node.type === 'COMPONENT'){
+        addComponent(node, 'RotationX', msg.components[i].rotationX.toString())
+        addComponent(node, 'RotationY', msg.components[i].rotationY.toString())
+        addComponent(node, 'PositionZ', msg.components[i].positionZ.toString())
+        addComponent(node, 'PositionX', msg.components[i].positionX.toString())
+        addComponent(node, 'PositionY', msg.components[i].positionY.toString())
+      }
+    })
+    figma.closePlugin()
+  } 
+
+  else if(msg.type == 'close') {
+    figma.closePlugin()
+  }
+
+
+  function addComponent(node: ComponentNode, text: string, value: string) {
+    let isValue = false;
+    let nameProperty = ''
+    const propertys = Object.keys(node.componentPropertyDefinitions)
+    for(const property of propertys) {
+      if(property.includes(text)){
+        isValue = true
+        nameProperty = property
+      }
+    }
+    if(!isValue)
+      node.addComponentProperty(text, 'TEXT', value)
+    else
+      node.editComponentProperty(nameProperty, {defaultValue: value})
+  }
+}

FTU_FigmaToUnity/manifest.json

@@ -0,0 +1,12 @@
+{
+  "name": "FTU (Figma To Unity)",
+  "id": "1228322785949696248",
+  "api": "1.0.0",
+  "main": "code.js",
+  "capabilities": [],
+  "enableProposedApi": false,
+  "editorType": [
+    "figma"
+  ],
+  "ui": "ui.html"
+}

FTU_FigmaToUnity/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "FTU-Figma-To-Unity",
+  "version": "1.0.0",
+  "description": "Your Figma Plugin",
+  "main": "code.js",
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "watch": "npm run build -- --watch"
+  },
+  "author": "",
+  "license": "",
+  "devDependencies": {
+    "@figma/plugin-typings": "*",
+    "typescript": "*"
+  }
+}

FTU_FigmaToUnity/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "lib": ["es6"],
+    "strict": true,
+    "typeRoots": [
+      "./node_modules/@types",
+      "./node_modules/@figma"
+    ]
+  }
+}