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"
+ ]
+ }
+}