figma-low-code

Figma-Low-Code

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. You can find the documentation here:

Luisa.cloud.

The plugin can be downloaded here:

Figma-Low-Code plugin

I have created to short tutorials in YouTube:

Video - Quick Tutorial

Video - Step by step guide

Example project scan be found here:

Figma Low Code ToDo Example

Figma File

Figma-Low-Code Design System Example

When to use

Figma-Low-Code is a great fit when you want to:

1. Turn a Figma design into a VUE application.
2. Extend a Figma prototype with business logic.
3. Build and MVP and the design changes often.
4. Ship fast and do not want to focus on HTML and CSS.

Idea

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:

1. Zero Code rendering of app designs, prototypes and design systems.
2. Design changes do not require code changes
3. Clear separation of UI and business logic
4. Developers can focus on code
5. Developers can use the tools and frameworks of their choice.
6. Designers stick with their favorite tool
7. Easy extension with custom callback functions
8. Full support of VUE data binding.
9. Extension with custom components
10. Extension with custom CSS
11. Rich library of stylable components.

Documentation (Old)

You can find the latest documentation at Luisa.cloud.

Two ways of using Figma-Low-Code

Figma-Low-Code provides two modes of operation.

1. The first mode is the 'Full' low code mode. The Figma design is entirely rendered and wired to the business logic. The front-end developers will usually do little UI customization and focus on backend connectivity and business logic.
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.

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.

Plugin:

To use the advanced features such as data, method binding or input widgets, you must install the Figma-Low-Code plugin. 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.

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.

You can find the plugin here

Development Guide

Table of contents

1. Installation
2. Full Mode
3. Design System Mode
4. Deployment
5. Responsive Rendering
6. Low Code Workflow
7. Contact & Support

How to install Figma-Low-Code

The easiest way to use Figma-Low-Code is to clone this repository and install Node.js version 12 or higher.

git clone https://github.com/KlausSchaefers/figma-low-code.git

Navigate to the cloned repository

cd figma-low-code

Afterwards, load all dependecies with the following command

npm install

Finally start the server

npm run serve

Full Mode

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). The file id is the second last url parameter

https://www.figma.com/file//...

Once you have entered the values, the Home.vue should look like:

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.

Input Elements

By default Figma-Low-Code renders all elements of the design as div, span and label elements. Often this is not enough, and you 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.

Data Binding

Figma-Low-Code supports VUE data binding. You have to pass a v-model to the Figma component.

You can specify the databinding with the help of the Figma-Low-Code plugin:

1. Launch the plugin
2. Select the desired element.
3. Select the 'Low Code Tab'
4. Specify the name of the varibale, for instance 'user.name'.

During runtime, the low-code component will update the viewModel and add the values entered by the user, e.g.

    viewModel: {
        user: {
          name: "Klaus"
        }
    }

Method Binding

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:

1. Launch the plugin
2. Select the desired element.
3. Select the 'Low Code Tab'.
4. Enter the name of the method taht should be called on the event (click or change are supported for now)

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:

myMethod (value, element, e) {
 ...
 return 'Screen2'
}

If a method return a String matching a screen name, the page will be loaded. In the example the screen with the name 'Screen2'.

Responsive Rendering

You can configure Figma-Low-Code to use different Figma pages for different screen resolutions. You can for instance define that the page 'A' is used of mobiles and 'B' is used for desktop and tablets. You can pass the mapping between pages and devices as part of the config object.

Check out this example

Custom components

If the provided input elements are not enough, you can also hook in your own VUE components. To do so:

1. Launch the plugin
2. Select the desired element.
3. Select the 'Element Type' tab
4. Select Custom
5. Enter the name of the component

Furthermore you will need to register the component with the Figma component.

Hover and Focus effects

Often you want certain elements to have a hover effect. For instance, a button should change the background color if the mouse is hovering it. Also, it is useful to indicate if an input is focused by the user. To create these kind of effects, perform the following steps:

1. Launch the plugin
2. Select the desired element.
3. Select the 'Style' tab
4. Select a fill (stroke or text) color.

Please note that the colors must be defined upfront in the Figma file, for instance as a style.

Custom components and rendering

Sometimes you want to render a certain part of the UI by your self, or replace existing widgets with custom implementations. You can do this by passing a components array to the configuration. These components will be used at the specified screen location instead of the default Figma component. This approach allows you to fully manage certain parts of the UI. Data is passed as a value property and follows default VUE practices.

...

You specify the widget to be replaced by the custom widget by a css selector. For instance if you want to replace the widget with the name "Custom" on the "StartScreen" artboard, use the ".StartScreen .Custom" selector.

Design System Mode

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.jsfile:

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import * as Luisa from 'luisa-vue'
import figmaDesign from './views/figma-design-system.json'

Vue.config.productionTip = false

/*
 * Make sure the design is registered before the App is mounted
 */
async function init () {
  // for live debuging use Luisa.createQUXDesignSystem()
  await Luisa.createQUXDesignSystem(quxDesign)

  new Vue({
    router,
    render: h => h(App)
  }).$mount('#app')
}

init()

The Vue-Low-Code package provides a method for Figma (createFigmaDesignSystem). For Figma design systems, you use your API token and fileID, or you can download the Figma design using the download.js script

npm run download

Using the Figma-Low-Code Design System

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 components in your code base.

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

Hello World

For input elements, also the v-model element works. In addtion a placeholder and options element is supported

...
jobs = [
  {label: 'Developer', value:'deverloper'},
  {label: 'Designer', value:'designer'},
]

Data and Method Binding

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) 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 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