├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── LICENSE ├── README.md ├── assets ├── DesignletDataBinding.png ├── FigmaLowCodeDesignSystemProcess.png ├── GitHubSocialPreview2.png ├── LowCodeModes.png ├── Plugin.png ├── PluginBinding.png ├── PluginCustom.png ├── PluginLowCode2.png ├── PluginStyle.png ├── PluginStyle2.png ├── PluginType.png ├── SimpleProcess_5a.png └── Workflow.png ├── babel.config.js ├── jest.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── img │ └── icons │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── android-chrome-maskable-192x192.png │ │ ├── android-chrome-maskable-512x512.png │ │ ├── apple-touch-icon-120x120.png │ │ ├── apple-touch-icon-152x152.png │ │ ├── apple-touch-icon-180x180.png │ │ ├── apple-touch-icon-60x60.png │ │ ├── apple-touch-icon-76x76.png │ │ ├── apple-touch-icon.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── msapplication-icon-144x144.png │ │ ├── mstile-150x150.png │ │ └── safari-pinned-tab.svg ├── index.html └── robots.txt └── src ├── App.vue ├── main.js ├── registerServiceWorker.js ├── router └── index.js └── views ├── Home.vue └── app.json /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | 'eslint:recommended' 9 | ], 10 | parserOptions: { 11 | parser: 'babel-eslint' 12 | }, 13 | rules: { 14 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 15 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' 16 | }, 17 | overrides: [ 18 | { 19 | files: [ 20 | '**/__tests__/*.{j,t}s?(x)', 21 | '**/tests/unit/**/*.spec.{j,t}s?(x)' 22 | ], 23 | env: { 24 | jest: true 25 | } 26 | } 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | node_modules 9 | .luisa 10 | 11 | # Diagnostic reports (https://nodejs.org/api/report.html) 12 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 13 | 14 | # Runtime data 15 | pids 16 | *.pid 17 | *.seed 18 | *.pid.lock 19 | 20 | # Directory for instrumented libs generated by jscoverage/JSCover 21 | lib-cov 22 | 23 | # Coverage directory used by tools like istanbul 24 | coverage 25 | *.lcov 26 | 27 | # nyc test coverage 28 | .nyc_output 29 | 30 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 31 | .grunt 32 | 33 | # Bower dependency directory (https://bower.io/) 34 | bower_components 35 | 36 | # node-waf configuration 37 | .lock-wscript 38 | 39 | # Compiled binary addons (https://nodejs.org/api/addons.html) 40 | build/Release 41 | 42 | # Dependency directories 43 | node_modules/ 44 | jspm_packages/ 45 | 46 | # TypeScript v1 declaration files 47 | typings/ 48 | 49 | # TypeScript cache 50 | *.tsbuildinfo 51 | 52 | # Optional npm cache directory 53 | .npm 54 | 55 | # Optional eslint cache 56 | .eslintcache 57 | 58 | # Microbundle cache 59 | .rpt2_cache/ 60 | .rts2_cache_cjs/ 61 | .rts2_cache_es/ 62 | .rts2_cache_umd/ 63 | 64 | # Optional REPL history 65 | .node_repl_history 66 | 67 | # Output of 'npm pack' 68 | *.tgz 69 | 70 | # Yarn Integrity file 71 | .yarn-integrity 72 | 73 | # dotenv environment variables file 74 | .env 75 | .env.test 76 | 77 | # parcel-bundler cache (https://parceljs.org/) 78 | .cache 79 | 80 | # Next.js build output 81 | .next 82 | 83 | # Nuxt.js build / generate output 84 | .nuxt 85 | dist 86 | 87 | # Gatsby files 88 | .cache/ 89 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 90 | # https://nextjs.org/blog/next-9-1#public-directory-support 91 | # public 92 | 93 | # vuepress build output 94 | .vuepress/dist 95 | 96 | # Serverless directories 97 | .serverless/ 98 | 99 | # FuseBox cache 100 | .fusebox/ 101 | 102 | # DynamoDB Local files 103 | .dynamodb/ 104 | 105 | # TernJS port file 106 | .tern-port 107 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | BSD 2-Clause License 2 | 3 | Copyright (c) 2020, Klaus Schaefers 4 | All rights reserved. 5 | 6 | Redistribution and use in source and binary forms, with or without 7 | modification, are permitted provided that the following conditions are met: 8 | 9 | 1. Redistributions of source code must retain the above copyright notice, this 10 | list of conditions and the following disclaimer. 11 | 12 | 2. Redistributions in binary form must reproduce the above copyright notice, 13 | this list of conditions and the following disclaimer in the documentation 14 | and/or other materials provided with the distribution. 15 | 16 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 17 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 18 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 19 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE 20 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 21 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 22 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 23 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 24 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 25 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Figma-Low-Code 2 | 3 | Figma-Low-Code is an OpenSource project, that allows to use **Figma** designs directly in **VUE.js** applications. The low code approach reduces drastically the hand-off time between designers and developers, reduces front-end code and ensures that the Figma design stays the **single source of truth**. Figma-Low-Code uses the Luisa framework. 4 | 5 | 6 | [![Short introduction into FigmaLowCode](assets/SimpleProcess_5a.png)](https://www.youtube.com/watch?v=iyu2rSbUwU8) 7 | 8 | 9 | You can find the documentation here: 10 | 11 | [Luisa.cloud](https://luisa.cloud/help.html). 12 | 13 | The plugin can be downloaded here: 14 | 15 | [Figma-Low-Code plugin](https://www.figma.com/community/plugin/858477504263032980/Figma-Low-Code) 16 | 17 | 18 | I have created to short tutorials in YouTube: 19 | 20 | [Video - Quick Tutorial](https://www.youtube.com/watch?v=iyu2rSbUwU8) 21 | 22 | [Video - Step by step guide](https://youtu.be/n8YvL_YvXRA) 23 | 24 | 25 | Example project scan be found here: 26 | 27 | [Figma Low Code ToDo Example](https://github.com/KlausSchaefers/figma-low-code-todo) 28 | 29 | [Figma File](https://www.figma.com/community/file/887084011990415230) 30 | 31 | [Figma-Low-Code Design System Example](https://github.com/KlausSchaefers/figma-design-system-example) 32 | 33 | 34 | ## When to use 35 | 36 | Figma-Low-Code is a great fit when you want to: 37 | 38 | 1. Turn a Figma design into a VUE application. 39 | 2. Extend a Figma prototype with business logic. 40 | 3. Build and MVP and the design changes often. 41 | 4. Ship fast and do not want to focus on HTML and CSS. 42 | 43 | 44 | ## Idea 45 | The core idea of the project is to render the visual design automatically and allow the development team to focus on business logic, without restricting the developers' freedom. Figma-Low-Code enables: 46 | 47 | 1. Zero Code rendering of app designs, prototypes and design systems. 48 | 2. Design changes do not require code changes 49 | 3. Clear separation of UI and business logic 50 | 4. Developers can focus on code 51 | 5. Developers can use the tools and frameworks of their choice. 52 | 6. Designers stick with their favorite tool 53 | 7. Easy extension with custom callback functions 54 | 8. Full support of VUE data binding. 55 | 9. Extension with custom components 56 | 10. Extension with custom CSS 57 | 11. Rich library of stylable components. 58 | 59 | 60 | 61 | ## Documentation (Old) 62 | 63 | You can find the latest documentation at [Luisa.cloud](https://luisa.cloud/help.html). 64 | 65 | 66 | 67 | ## Two ways of using Figma-Low-Code 68 | 69 | Figma-Low-Code provides two modes of operation. 70 | 1. The first mode is the 'Full' low code mode. The Figma design is entirely rendered and wired to the 71 | business logic. The front-end developers will usually do little UI customization and focus on backend connectivity and business logic. 72 | 2. The second mode is the so called 'Design System' mode, which turns a design system into Vue components. The developers can simply use these as any other VUE component within their projects. 73 | 74 | 75 | ![Vue-Low-Code architecture](assets/LowCodeModes.png "Vue-Low-Code support to modes of operations") 76 | 77 | The full mode will result in a faster development experience, however developers have less control over the front end. The 'Design System' mode gives more control for the developers, while still easing the transition from design to code. Please note, that both approaches will maintain the design as the **single source of truth**. Design channges will be immediately visible in the application. 78 | 79 | 80 | ## Plugin: 81 | 82 | To use the advanced features such as data, method binding or input widgets, you must install the [Figma-Low-Code plugin](https://www.figma.com/community/plugin/858477504263032980/Figma-Low-Code). The plugin has two main tab. The 'Low Code' tab allows you to set the basics, such as the element type, or the input and output data binding. 83 | 84 | ![The Figma-Low-Code plugin](assets/PluginLowCode2.png "Figma-Low-Code plugin") 85 | 86 | The 'Style' tab allows you to define, if the element should be fixed width or height. By default Figma Low Code will assume hat the widget is responsive. Also, you can define hover styles for the fill, stroke and text color. For input elements focus styles can also be defined. 87 | 88 | ![The Figma-Low-Code plugin](assets/PluginStyle2.png "Figma-Low-Code plugin") 89 | 90 | 91 | You can find the plugin [here](https://www.figma.com/community/plugin/858477504263032980/Figma-Low-Code) 92 | 93 | 94 | # Development Guide 95 | 96 | Table of contents 97 | 98 | 1. [Installation](#How-to-install-Figma-Low-Code) 99 | 2. [Full Mode](#Full-Mode) 100 | 3. [Design System Mode](#Design-System-Mode) 101 | 4. [Deployment](#Deployment) 102 | 5. [Responsive Rendering](#Responsive-Rendering) 103 | 6. [Low Code Workflow](#Low-Code-Workflow) 104 | 7. [Contact & Support](#Contact-and-Support) 105 | 106 | 107 | ## How to install Figma-Low-Code 108 | 109 | The easiest way to use Figma-Low-Code is to clone this repository and install Node.js version 12 or higher. 110 | 111 | ``` 112 | git clone https://github.com/KlausSchaefers/figma-low-code.git 113 | ``` 114 | 115 | Navigate to the cloned repository 116 | 117 | ``` 118 | cd figma-low-code 119 | ``` 120 | 121 | Afterwards, load all dependecies with the following command 122 | 123 | ``` sh 124 | npm install 125 | ``` 126 | 127 | Finally start the server 128 | 129 | ``` sh 130 | npm run serve 131 | ``` 132 | 133 | 134 | ## Full Mode 135 | In the full mode the component is used to render the entire front end. The first step is top register these components in Vue. The following section will use Quant-UX design as an example. Open the 'src/views/Home.vue' and enter your figma file id and the access code. You can get the access code in your Figma settings [(Details)](https://www.figma.com/developers/api#access-tokens). 136 | The file id is the second last url parameter 137 | 138 | ``` 139 | https://www.figma.com/file//... 140 | ``` 141 | 142 | Once you have entered the values, the Home.vue should look like: 143 | 144 | ``` vue 145 | 150 | 151 | 174 | 175 | ``` 176 | 177 | 178 | **Attention** For large design the Figma API might give an error or be slow. It can help to limit the component to a certain page. 179 | ``` vue 180 | 185 | 186 | ``` 187 | 188 | 189 | 190 | ### Input Elements 191 | 192 | By default Figma-Low-Code renders all elements of the design as div, span and label elements. Often this is not enough, and you 193 | would like to allow the user to enter to. You can override the default rendering by specifying the desired element type, for instance text fields or password fields. To do so, you need to launch the Figma-Low-Code plugin and select an element. Once an element is selected, you can select from a list of widgets the desired element type. 194 | 195 | 196 | ### Data Binding 197 | 198 | Figma-Low-Code supports VUE data binding. You have to pass a v-model to the **Figma** component. 199 | 200 | ``` vue 201 | 202 | ``` 203 | 204 | You can specify the databinding with the help of the Figma-Low-Code plugin: 205 | 206 | 1. Launch the plugin 207 | 2. Select the desired element. 208 | 3. Select the 'Low Code Tab' 209 | 4. Specify the name of the varibale, for instance 'user.name'. 210 | 211 | 212 | During runtime, the low-code component will update the viewModel and add the values entered by the user, e.g. 213 | 214 | ``` js 215 | viewModel: { 216 | user: { 217 | name: "Klaus" 218 | } 219 | } 220 | ``` 221 | 222 | ### Method Binding 223 | 224 | In the Figma-Low-Code plugin you can define javascript callbacks for the elements. You can specify the databinding with the help of the Figma-Low-Code plugin: 225 | 226 | 1. Launch the plugin 227 | 2. Select the desired element. 228 | 3. Select the 'Low Code Tab'. 229 | 4. Enter the name of the method taht should be called on the event (click or change are supported for now) 230 | 231 | 232 | During run time, the figma component will look for a method with the given name in the parent component (in the example Home.vue). If the method exists, it will be called. The method will have the following signature: 233 | 234 | ``` js 235 | myMethod (value, element, e) { 236 | ... 237 | return 'Screen2' 238 | } 239 | ``` 240 | 241 | If a method return a String matching a screen name, the page will be loaded. In the example the screen with the name 'Screen2'. 242 | 243 | ### Responsive Rendering 244 | 245 | You can configure Figma-Low-Code to use different Figma pages for different screen resolutions. You can for instance define 246 | that the page 'A' is used of mobiles and 'B' is used for desktop and tablets. You can pass the 247 | mapping between pages and devices as part of the config object. 248 | 249 | Check out this [example](https://youtu.be/VIJiMAXUB-g?t=32) 250 | 251 | ```vue 252 | 257 | 258 | 301 | 302 | ``` 303 | 304 | ### Custom components 305 | 306 | If the provided input elements are not enough, you can also hook in your own VUE components. To do so: 307 | 308 | 1. Launch the plugin 309 | 2. Select the desired element. 310 | 3. Select the 'Element Type' tab 311 | 4. Select Custom 312 | 5. Enter the name of the component 313 | 314 | 315 | Furthermore you will need to register the component with the **Figma** component. 316 | 317 | ``` vue 318 | 323 | 324 | 353 | 354 | ``` 355 | 356 | 357 | ### Hover and Focus effects 358 | 359 | Often you want certain elements to have a hover effect. For instance, a button should 360 | change the background color if the mouse is hovering it. Also, it is useful to indicate if an input is focused by the user. 361 | To create these kind of effects, perform the following steps: 362 | 363 | 1. Launch the plugin 364 | 2. Select the desired element. 365 | 3. Select the 'Style' tab 366 | 4. Select a fill (stroke or text) color. 367 | 368 | Please note that the colors must be defined upfront in the Figma file, for instance as a style. 369 | 370 | ### Custom components and rendering 371 | 372 | Sometimes you want to render a certain part of the UI by your self, or replace existing widgets with custom implementations. 373 | You can do this by passing a **components** array to the configuration. These components will be used at the specified screen 374 | location instead of the default Figma component. This approach allows you to fully manage certain parts of the UI. Data is passed 375 | as a **value** property and follows default VUE practices. 376 | 377 | ``` vue 378 | 379 | ... 380 | 381 | 396 | ``` 397 | 398 | You specify the widget to be replaced by the custom widget by a css selector. For instance if you want to replace the 399 | widget with the name "Custom" on the "StartScreen" artboard, use the ".StartScreen .Custom" selector. 400 | 401 | 402 | ## Design System Mode 403 | 404 | 405 | ![The Figma-Low-Code Design System process](assets/FigmaLowCodeDesignSystemProcess.png "Figma-Low-Code design system process") 406 | 407 | 408 | The Design System mode allows to turn your design system into Vue components that can be used as normal components. The first step is to *globally* register the design system before any template is parsed. The easiest way is to register the design system in the `main.js`file: 409 | 410 | ```javascript 411 | import Vue from 'vue' 412 | import App from './App.vue' 413 | import './registerServiceWorker' 414 | import router from './router' 415 | import * as Luisa from 'luisa-vue' 416 | import figmaDesign from './views/figma-design-system.json' 417 | 418 | Vue.config.productionTip = false 419 | 420 | /* 421 | * Make sure the design is registered before the App is mounted 422 | */ 423 | async function init () { 424 | // for live debuging use Luisa.createQUXDesignSystem() 425 | await Luisa.createQUXDesignSystem(quxDesign) 426 | 427 | new Vue({ 428 | router, 429 | render: h => h(App) 430 | }).$mount('#app') 431 | } 432 | 433 | init() 434 | 435 | ``` 436 | 437 | The Vue-Low-Code package provides a method for Figma (`createFigmaDesignSystem`). For Figma design systems, you use your [API token](https://www.figma.com/developers/api#access-tokens) and fileID, or you can download the Figma design using the *download.js* script 438 | 439 | ```bash 440 | npm run download 441 | ``` 442 | 443 | ### Using the Figma-Low-Code Design System 444 | 445 | Once the design system is registered, they can be used within any template in the application. Suppose there is primary button defined in the design system. This can be invoked be simple using a tag with the corresponding name. Please make sure that the design system names do not clash with standard HTML elements, or other 446 | components in your code base. 447 | 448 | ```vue 449 | 450 | ``` 451 | 452 | For simple elements like boxes, rectangles or labels one can use the wrapped notion to replace the inner elements. An alternative is to use the label property 453 | 454 | ```vue 455 | Hello World 456 | 457 | ``` 458 | 459 | For input elements, also the v-model element works. In addtion a placeholder and options element is supported 460 | 461 | ```vue 462 | 463 | 464 | ... 465 | jobs = [ 466 | {label: 'Developer', value:'deverloper'}, 467 | {label: 'Designer', value:'designer'}, 468 | ] 469 | 470 | ``` 471 | 472 | ### Data and Method Binding 473 | 474 | Low Code Design Systems are not limited to simple components like buttons or text, but can also be compplex components like forms, dialogs and so on. Usually one has to use data and method binding ([Details](##define-data-binding-and-callbacks)) in this situations to populate the elements with data. The relevant (child) elements have to be wired to the right data and the right actions have to be defined. For instance in a login dialog, the email field needs to be wired to the `email` variable and the password field to the `password` variable. The button needs to get a method binding for the `login` method. When the 475 | user clicks in the button, and 'login' event will be fired, which can be used using the standard '@' notation. Please note, that when a component consist out of more than one shapes, it is not possible infer where the label text should be shown. One has to specify a magic data binding (`$label`). The wiring of the login dialog would look like 476 | 477 | ![A complex component with data and method binding](assets/DesignletDataBinding.png "Data and Method binding for components") 478 | 479 | The code would be 480 | 481 | ```vue 482 | 483 | 484 | ... 485 | loginData = { 486 | email: '', 487 | password: '' 488 | } 489 | 490 | .... 491 | 492 | myLoginMethod () { 493 | // your code 494 | } 495 | ``` 496 | 497 | # Deployment 498 | 499 | Working with the file and access key is great for testing and development, because changes in Figma are visible after a reload. 500 | However, for production you should **NEVER** use the access token, as it gives access 501 | to all your projects. You can download all files into the project by calling the download script. 502 | 503 | ``` sh 504 | node download.js 505 | ``` 506 | 507 | The script will download the figma file and all images. You have to point the Figma Component now to the file, instead of the config object. Use an import statement to simply load the JSON. 508 | 509 | ``` vue 510 | ... 511 | 512 | ... 513 | 514 | 527 | 528 | ``` 529 | 530 | # Configure figma-low-code 531 | 532 | You can configure certain parameters, e.g. the routing rules. To do so, pass a config object to the 533 | **Figma** component. 534 | 535 | ``` vue 536 | 537 | ``` 538 | 539 | The config object can have the following properties and hsould be defined in the data section of the home component. 540 | 541 | ``` js 542 | config: { 543 | loadFonts: false, 544 | css: { 545 | grid: true, // Use CSS grid to align objects. False will use CSS-Flex. 546 | justifyContentInWrapper: true // In justifz or left align content in wrapped elements 547 | }, 548 | router: { 549 | key: 'id', // alternative routing parameter 550 | prefix: 'figma' // path prefix that will be used when rendering links 551 | } 552 | } 553 | ``` 554 | 555 | Youmight also want to import the fonts in you index.html. Figma-Low-Code will load them by default dynamically. If you want to prevent this, 556 | set the 'loadFonts' property to false 557 | 558 | 559 | 560 | # Workflow 561 | 562 | Figma-Low-Code enables the following workflow to facilitate painless collaboration between designers and developers: 563 | 564 | ![The Figma low code workflow](assets/Workflow.png "Figma-Low-Code workflow") 565 | 566 | 1. The designer creates an initial design in Figma 567 | 2. The developer adds data binding and method callbacks in Figma using the UX Figma-Low-Code plugin. 568 | 3. The developer sets up a new project (Vue.js for now) and includes the **Figma** component 569 | 4. The developer links to the Figma design and creates the required methods and fills them with business logic. 570 | 5. The **Figma** component renders the design and invokes the callbacks in clicks. 571 | 6. Changes in the design are transparent to the developer, he just reloads the design from Figma. 572 | 7. For deployment the developer downlaods the figma file to freeze the design 573 | 574 | 575 | # The handoff problem 576 | Designers and developers use different tools to build user interfaces. Once a designer 577 | has completed the interface design, he hands-off the design to the developer, usually 578 | in the form of an image and some specs. The developer has now to rebuild the 579 | entire design using the programming language of his choice. Although this process is 580 | proven, it is rather slow and not very efficient. In particular later changes in 581 | the design makes it hard to automize this work through code generation tools. 582 | 583 | 584 | 585 | # Contact-and-Support 586 | 587 | If you want to reach out please use the [Contact](https://quant-ux.com/#/contact.html) page or [Discord](https://discord.gg/TQBpfAAKmU) 588 | 589 | # Credits 590 | 591 | Figma-Low-Code is based on [Luisa-Framework](https://luisa.cloud/help/luisa_add_existing.html) developed by [Quant-UX](https://quant-ux.com). 592 | -------------------------------------------------------------------------------- /assets/DesignletDataBinding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/assets/DesignletDataBinding.png -------------------------------------------------------------------------------- /assets/FigmaLowCodeDesignSystemProcess.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/assets/FigmaLowCodeDesignSystemProcess.png -------------------------------------------------------------------------------- /assets/GitHubSocialPreview2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/assets/GitHubSocialPreview2.png -------------------------------------------------------------------------------- /assets/LowCodeModes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/assets/LowCodeModes.png -------------------------------------------------------------------------------- /assets/Plugin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/assets/Plugin.png -------------------------------------------------------------------------------- /assets/PluginBinding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/assets/PluginBinding.png -------------------------------------------------------------------------------- /assets/PluginCustom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/assets/PluginCustom.png -------------------------------------------------------------------------------- /assets/PluginLowCode2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/assets/PluginLowCode2.png -------------------------------------------------------------------------------- /assets/PluginStyle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/assets/PluginStyle.png -------------------------------------------------------------------------------- /assets/PluginStyle2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/assets/PluginStyle2.png -------------------------------------------------------------------------------- /assets/PluginType.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/assets/PluginType.png -------------------------------------------------------------------------------- /assets/SimpleProcess_5a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/assets/SimpleProcess_5a.png -------------------------------------------------------------------------------- /assets/Workflow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/assets/Workflow.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: '@vue/cli-plugin-unit-jest' 3 | } 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "figma-low-code", 3 | "version": "1.0.15", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "test:unit": "vue-cli-service test:unit", 9 | "lint": "vue-cli-service lint", 10 | "download": "node node_modules/luisa-util/lib/index.js" 11 | }, 12 | "dependencies": { 13 | "core-js": "^3.6.4", 14 | "luisa-util": "^1.0.4", 15 | "luisa-vue": "^2.0.20", 16 | "node-fetch": "^2.6.0", 17 | "register-service-worker": "^1.7.1", 18 | "vue": "^2.6.11", 19 | "vue-router": "^3.1.6" 20 | }, 21 | "devDependencies": { 22 | "@babel/core": "^7.10.3", 23 | "@babel/node": "^7.10.3", 24 | "@vue/cli-plugin-babel": "^4.3.0", 25 | "@vue/cli-plugin-eslint": "^4.3.0", 26 | "@vue/cli-plugin-pwa": "^4.3.0", 27 | "@vue/cli-plugin-router": "^4.3.0", 28 | "@vue/cli-plugin-unit-jest": "^4.3.0", 29 | "@vue/cli-service": "^4.3.0", 30 | "@vue/test-utils": "1.0.0-beta.31", 31 | "babel-eslint": "^10.1.0", 32 | "chalk": "^4.1.0", 33 | "eslint": "^6.7.2", 34 | "eslint-plugin-vue": "^6.2.2", 35 | "node-sass": "^4.14.1", 36 | "sass-loader": "^8.0.2", 37 | "vue-template-compiler": "^2.6.11" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/public/favicon.ico -------------------------------------------------------------------------------- /public/img/icons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/public/img/icons/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/img/icons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/public/img/icons/android-chrome-512x512.png -------------------------------------------------------------------------------- /public/img/icons/android-chrome-maskable-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/public/img/icons/android-chrome-maskable-192x192.png -------------------------------------------------------------------------------- /public/img/icons/android-chrome-maskable-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/public/img/icons/android-chrome-maskable-512x512.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/public/img/icons/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/public/img/icons/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/public/img/icons/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/public/img/icons/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/public/img/icons/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/public/img/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /public/img/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/public/img/icons/favicon-16x16.png -------------------------------------------------------------------------------- /public/img/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/public/img/icons/favicon-32x32.png -------------------------------------------------------------------------------- /public/img/icons/msapplication-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/public/img/icons/msapplication-icon-144x144.png -------------------------------------------------------------------------------- /public/img/icons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KlausSchaefers/figma-low-code/68b64a2cd52cb0d3e01ac23018a3a7655c7c2d47/public/img/icons/mstile-150x150.png -------------------------------------------------------------------------------- /public/img/icons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 148 | 149 | 150 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import './registerServiceWorker' 4 | import router from './router' 5 | 6 | Vue.config.productionTip = false 7 | 8 | new Vue({ 9 | router, 10 | render: h => h(App) 11 | }).$mount('#app') 12 | -------------------------------------------------------------------------------- /src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | 3 | import { register } from 'register-service-worker' 4 | 5 | if (process.env.NODE_ENV === 'production') { 6 | register(`${process.env.BASE_URL}service-worker.js`, { 7 | ready () { 8 | console.log( 9 | 'App is being served from cache by a service worker.\n' + 10 | 'For more details, visit https://goo.gl/AFskqB' 11 | ) 12 | }, 13 | registered () { 14 | console.log('Service worker has been registered.') 15 | }, 16 | cached () { 17 | console.log('Content has been cached for offline use.') 18 | }, 19 | updatefound () { 20 | console.log('New content is downloading.') 21 | }, 22 | updated () { 23 | console.log('New content is available; please refresh.') 24 | }, 25 | offline () { 26 | console.log('No internet connection found. App is running in offline mode.') 27 | }, 28 | error (error) { 29 | console.error('Error during service worker registration:', error) 30 | } 31 | }) 32 | } 33 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | Vue.use(VueRouter) 5 | 6 | const routes = [ 7 | { 8 | path: '/', 9 | name: 'home', 10 | component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue') 11 | }, 12 | { 13 | path: '/:screenName.html', 14 | name: 'figma', 15 | component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue') 16 | } 17 | ] 18 | 19 | const router = new VueRouter({ 20 | routes 21 | }) 22 | 23 | export default router 24 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 51 | -------------------------------------------------------------------------------- /src/views/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 2.1, 3 | "id": "8aw4XrD9mPfGcwrtw6LWP2", 4 | "figmaId": "8aw4XrD9mPfGcwrtw6LWP2", 5 | "name": "Luisa - Hello World", 6 | "description": "", 7 | "screenSize": { 8 | "w": 375, 9 | "h": 812 10 | }, 11 | "type": "smartphone", 12 | "screens": { 13 | "s10000": { 14 | "id": "s10000", 15 | "figmaId": "1:3", 16 | "pageName": "Page 1", 17 | "name": "HelloWorld", 18 | "type": "Screen", 19 | "x": 223, 20 | "y": -345, 21 | "w": 375, 22 | "h": 812, 23 | "props": {}, 24 | "children": [ 25 | "w10001", 26 | "w10002", 27 | "w10003", 28 | "w10004", 29 | "w10005", 30 | "w10006", 31 | "w10007", 32 | "w10008" 33 | ], 34 | "layout": { 35 | "paddingLeft": 0, 36 | "paddingRight": 0, 37 | "paddingTop": 0, 38 | "paddingBottom": 0 39 | }, 40 | "style": { 41 | "fontFamily": "Helvetica Neue,Helvetica,Arial,sans-serif", 42 | "borderBottomWidth": 0, 43 | "borderTopWidth": 0, 44 | "borderLeftWidth": 0, 45 | "borderRightWidth": 0, 46 | "backgroundColor": "rgba(255, 255, 255, 1)" 47 | } 48 | } 49 | }, 50 | "widgets": { 51 | "w10001": { 52 | "id": "w10001", 53 | "parentId": "s10000", 54 | "name": "FormCol", 55 | "type": "Button", 56 | "figmaId": "0:10", 57 | "figmaType": "FRAME", 58 | "x": 248, 59 | "y": -294, 60 | "w": 326, 61 | "h": 205, 62 | "layout": { 63 | "type": "auto-vertical", 64 | "justifyContent": "flex-start", 65 | "alignItems": "flex-start", 66 | "itemSpacing": 24, 67 | "paddingLeft": 0, 68 | "paddingRight": 0, 69 | "paddingTop": 0, 70 | "paddingBottom": 0 71 | }, 72 | "z": 2, 73 | "style": { 74 | "fontFamily": "Helvetica Neue,Helvetica,Arial,sans-serif", 75 | "borderBottomWidth": 0, 76 | "borderTopWidth": 0, 77 | "borderLeftWidth": 0, 78 | "borderRightWidth": 0, 79 | "backgroundColor": "rgba(0, 0, 0, 0)" 80 | }, 81 | "props": { 82 | "resize": { 83 | "right": false, 84 | "left": true, 85 | "up": false, 86 | "down": false, 87 | "fixedHorizontal": true, 88 | "fixedVertical": false 89 | } 90 | }, 91 | "has": { 92 | "label": true, 93 | "backgroundColor": true, 94 | "border": true, 95 | "onclick": true, 96 | "padding": true 97 | } 98 | }, 99 | "w10002": { 100 | "id": "w10002", 101 | "parentId": "w10001", 102 | "name": "OpenSourceHeadline", 103 | "type": "Label", 104 | "figmaId": "0:11", 105 | "figmaType": "TEXT", 106 | "x": 248, 107 | "y": -294, 108 | "w": 169, 109 | "h": 28, 110 | "layout": { 111 | "align": "INHERIT", 112 | "grow": 0, 113 | "paddingLeft": 0, 114 | "paddingRight": 0, 115 | "paddingTop": 0, 116 | "paddingBottom": 0 117 | }, 118 | "z": 3, 119 | "style": { 120 | "fontFamily": "Nunito Sans", 121 | "borderBottomWidth": 0, 122 | "borderTopWidth": 0, 123 | "borderLeftWidth": 0, 124 | "borderRightWidth": 0, 125 | "color": "rgba(0, 0, 0, 1)", 126 | "backgroundColor": "transparent", 127 | "fontSize": 20, 128 | "fontWeight": 700, 129 | "lineHeightPX": 28, 130 | "letterSpacing": 0, 131 | "textAlign": "left", 132 | "verticalAlign": "top" 133 | }, 134 | "props": { 135 | "label": "What is you name", 136 | "resize": { 137 | "right": false, 138 | "left": true, 139 | "up": false, 140 | "down": false, 141 | "fixedHorizontal": true, 142 | "fixedVertical": false, 143 | "hugVertical": true 144 | } 145 | }, 146 | "has": { 147 | "label": true, 148 | "padding": true, 149 | "advancedText": true 150 | } 151 | }, 152 | "w10003": { 153 | "id": "w10003", 154 | "parentId": "w10001", 155 | "name": "Frame 1", 156 | "type": "Button", 157 | "figmaId": "0:12", 158 | "figmaType": "FRAME", 159 | "x": 248, 160 | "y": -242, 161 | "w": 326, 162 | "h": 40, 163 | "layout": { 164 | "type": "auto-horizontal", 165 | "justifyContent": "flex-start", 166 | "alignItems": "flex-start", 167 | "itemSpacing": 10, 168 | "align": "STRETCH", 169 | "grow": 0, 170 | "paddingLeft": 6, 171 | "paddingRight": 6, 172 | "paddingTop": 6, 173 | "paddingBottom": 6 174 | }, 175 | "z": 4, 176 | "style": { 177 | "fontFamily": "Helvetica Neue,Helvetica,Arial,sans-serif", 178 | "borderBottomWidth": 2, 179 | "borderTopWidth": 2, 180 | "borderLeftWidth": 2, 181 | "borderRightWidth": 2, 182 | "backgroundColor": "rgba(0, 0, 0, 0)", 183 | "borderBottomLeftRadius": 8, 184 | "borderTopLeftRadius": 8, 185 | "borderBottomRightRadius": 8, 186 | "borderTopRightRadius": 8, 187 | "borderBottomColor": "rgba(0, 0, 0, 1)", 188 | "borderTopColor": "rgba(0, 0, 0, 1)", 189 | "borderLeftColor": "rgba(0, 0, 0, 1)", 190 | "borderRightColor": "rgba(0, 0, 0, 1)" 191 | }, 192 | "props": { 193 | "resize": { 194 | "right": false, 195 | "left": true, 196 | "up": false, 197 | "down": false, 198 | "fixedHorizontal": false, 199 | "fixedVertical": false 200 | } 201 | }, 202 | "has": { 203 | "label": true, 204 | "backgroundColor": true, 205 | "border": true, 206 | "onclick": true, 207 | "padding": true 208 | } 209 | }, 210 | "w10004": { 211 | "id": "w10004", 212 | "parentId": "w10003", 213 | "name": "Your name", 214 | "type": "Label", 215 | "figmaId": "0:13", 216 | "figmaType": "TEXT", 217 | "x": 256, 218 | "y": -234, 219 | "w": 310, 220 | "h": 24, 221 | "layout": { 222 | "align": "STRETCH", 223 | "grow": 1, 224 | "paddingLeft": 0, 225 | "paddingRight": 0, 226 | "paddingTop": 0, 227 | "paddingBottom": 0 228 | }, 229 | "z": 5, 230 | "style": { 231 | "fontFamily": "Nunito Sans", 232 | "borderBottomWidth": 0, 233 | "borderTopWidth": 0, 234 | "borderLeftWidth": 0, 235 | "borderRightWidth": 0, 236 | "color": "rgba(0, 0, 0, 1)", 237 | "backgroundColor": "transparent", 238 | "fontSize": 18, 239 | "fontWeight": 400, 240 | "lineHeightPX": 28, 241 | "letterSpacing": 0, 242 | "textAlign": "left", 243 | "verticalAlign": "top" 244 | }, 245 | "props": { 246 | "label": "Your name", 247 | "resize": { 248 | "right": false, 249 | "left": true, 250 | "up": false, 251 | "down": false, 252 | "fixedHorizontal": false, 253 | "fixedVertical": false 254 | } 255 | }, 256 | "has": { 257 | "label": true, 258 | "padding": true, 259 | "advancedText": true 260 | } 261 | }, 262 | "w10005": { 263 | "id": "w10005", 264 | "parentId": "w10001", 265 | "name": "Btns", 266 | "type": "Button", 267 | "figmaId": "0:14", 268 | "figmaType": "FRAME", 269 | "x": 248, 270 | "y": -178, 271 | "w": 326, 272 | "h": 51, 273 | "layout": { 274 | "type": "auto-horizontal", 275 | "justifyContent": "flex-start", 276 | "alignItems": "flex-start", 277 | "itemSpacing": 32, 278 | "align": "STRETCH", 279 | "grow": 0, 280 | "paddingLeft": 0, 281 | "paddingRight": 0, 282 | "paddingTop": 0, 283 | "paddingBottom": 0 284 | }, 285 | "z": 6, 286 | "style": { 287 | "fontFamily": "Helvetica Neue,Helvetica,Arial,sans-serif", 288 | "borderBottomWidth": 0, 289 | "borderTopWidth": 0, 290 | "borderLeftWidth": 0, 291 | "borderRightWidth": 0, 292 | "backgroundColor": "rgba(0, 0, 0, 0)" 293 | }, 294 | "props": { 295 | "resize": { 296 | "right": false, 297 | "left": true, 298 | "up": false, 299 | "down": false, 300 | "fixedHorizontal": false, 301 | "fixedVertical": false 302 | } 303 | }, 304 | "has": { 305 | "label": true, 306 | "backgroundColor": true, 307 | "border": true, 308 | "onclick": true, 309 | "padding": true 310 | } 311 | }, 312 | "w10006": { 313 | "id": "w10006", 314 | "parentId": "w10005", 315 | "name": "ButtonWhy", 316 | "type": "Button", 317 | "figmaId": "0:15", 318 | "figmaType": "INSTANCE", 319 | "figmaComponentId": "0:3", 320 | "x": 248, 321 | "y": -178, 322 | "w": 61, 323 | "h": 42, 324 | "layout": { 325 | "type": "auto-horizontal", 326 | "justifyContent": "flex-start", 327 | "alignItems": "flex-start", 328 | "itemSpacing": 10, 329 | "align": "INHERIT", 330 | "grow": 0, 331 | "paddingLeft": 14, 332 | "paddingRight": 14, 333 | "paddingTop": 6, 334 | "paddingBottom": 6 335 | }, 336 | "z": 7, 337 | "style": { 338 | "fontFamily": "Helvetica Neue,Helvetica,Arial,sans-serif", 339 | "borderBottomWidth": 2, 340 | "borderTopWidth": 2, 341 | "borderLeftWidth": 2, 342 | "borderRightWidth": 2, 343 | "backgroundColor": "rgba(0, 0, 0, 0)", 344 | "borderBottomLeftRadius": 6, 345 | "borderTopLeftRadius": 6, 346 | "borderBottomRightRadius": 6, 347 | "borderTopRightRadius": 6, 348 | "borderBottomColor": "rgba(241, 91, 181, 1)", 349 | "borderTopColor": "rgba(241, 91, 181, 1)", 350 | "borderLeftColor": "rgba(241, 91, 181, 1)", 351 | "borderRightColor": "rgba(241, 91, 181, 1)" 352 | }, 353 | "props": { 354 | "resize": { 355 | "right": false, 356 | "left": true, 357 | "up": false, 358 | "down": false, 359 | "fixedHorizontal": true, 360 | "fixedVertical": false, 361 | "hugHorizontal": true 362 | }, 363 | "callbacks": { 364 | "click": "sendContact" 365 | } 366 | }, 367 | "has": { 368 | "label": true, 369 | "backgroundColor": true, 370 | "border": true, 371 | "onclick": true, 372 | "padding": true 373 | }, 374 | "hover": { 375 | "background": "rgba(241, 91, 181, 1)", 376 | "color": "rgba(255, 255, 255, 1)" 377 | } 378 | }, 379 | "w10007": { 380 | "id": "w10007", 381 | "parentId": "w10006", 382 | "name": "ButtonLabel", 383 | "type": "Label", 384 | "figmaId": "I0:15;0:4", 385 | "figmaType": "TEXT", 386 | "figmaComponentId": "0:4", 387 | "x": 264, 388 | "y": -170, 389 | "w": 29, 390 | "h": 26, 391 | "layout": { 392 | "align": "INHERIT", 393 | "grow": 0, 394 | "paddingLeft": 0, 395 | "paddingRight": 0, 396 | "paddingTop": 0, 397 | "paddingBottom": 0 398 | }, 399 | "z": 8, 400 | "style": { 401 | "fontFamily": "Roboto", 402 | "borderBottomWidth": 0, 403 | "borderTopWidth": 0, 404 | "borderLeftWidth": 0, 405 | "borderRightWidth": 0, 406 | "color": "rgba(241, 91, 181, 1)", 407 | "backgroundColor": "transparent", 408 | "fontSize": 18, 409 | "fontWeight": 400, 410 | "lineHeightPX": 26, 411 | "letterSpacing": 0, 412 | "textAlign": "center", 413 | "verticalAlign": "middle" 414 | }, 415 | "props": { 416 | "label": "Say", 417 | "resize": { 418 | "right": false, 419 | "left": true, 420 | "up": false, 421 | "down": false, 422 | "fixedHorizontal": true, 423 | "fixedVertical": false, 424 | "hugHorizontal": true 425 | } 426 | }, 427 | "has": { 428 | "label": true, 429 | "padding": true, 430 | "advancedText": true 431 | } 432 | }, 433 | "w10008": { 434 | "id": "w10008", 435 | "parentId": "w10005", 436 | "name": "Hello ....", 437 | "type": "Label", 438 | "figmaId": "0:16", 439 | "figmaType": "TEXT", 440 | "x": 341, 441 | "y": -178, 442 | "w": 233, 443 | "h": 42, 444 | "layout": { 445 | "align": "INHERIT", 446 | "grow": 1, 447 | "paddingLeft": 0, 448 | "paddingRight": 0, 449 | "paddingTop": 0, 450 | "paddingBottom": 0 451 | }, 452 | "z": 9, 453 | "style": { 454 | "fontFamily": "Nunito Sans", 455 | "borderBottomWidth": 0, 456 | "borderTopWidth": 0, 457 | "borderLeftWidth": 0, 458 | "borderRightWidth": 0, 459 | "color": "rgba(241, 91, 181, 1)", 460 | "backgroundColor": "transparent", 461 | "fontSize": 18, 462 | "fontWeight": 400, 463 | "lineHeightPX": 28, 464 | "letterSpacing": 0, 465 | "textAlign": "left", 466 | "verticalAlign": "middle" 467 | }, 468 | "props": { 469 | "label": "Hello ....", 470 | "resize": { 471 | "right": false, 472 | "left": true, 473 | "up": false, 474 | "down": false, 475 | "fixedHorizontal": false, 476 | "fixedVertical": false 477 | }, 478 | "databinding": { 479 | "default": "contact.status" 480 | } 481 | }, 482 | "has": { 483 | "label": true, 484 | "padding": true, 485 | "advancedText": true 486 | } 487 | } 488 | }, 489 | "lines": {}, 490 | "groups": {}, 491 | "lastUUID": 10009, 492 | "lastZ": 9, 493 | "lastUpdate": 0, 494 | "created": 0, 495 | "startScreen": "", 496 | "grid": { 497 | "w": 8, 498 | "h": 8, 499 | "style": "line", 500 | "color": "#cecece", 501 | "visible": false, 502 | "enabled": false 503 | } 504 | } --------------------------------------------------------------------------------