Figma to Code

A Behind-the-Scenes Look

$ whoami

Lead Software Engineer

The most important:

I like programming, JavaScript, movies, music and I'm a big fan of LOTR and Star Wars 🤓

May the Force be with you!

7 years at GlobalLogic

about 8 years in Web Development

Speaker, mentor, and Trusted Interviewer at GlobalLogic

Part of the program committee at Fwdays conference

GitHub page

Inna Ivashchuk

Design to code workflow

Web technologies

Let me introduce the 3 main technologies that are used to build a website HTML, CSS, and JavaScript

HTML: website structure

The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

CSS: website styles

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.

JavaScript: website functionality

JavaScript often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JS is lightweight, interpreted, or just-in-time compiled programming language with first-class functions.

HTML

CSS

JavaScript

The more information we have, the better end result will be

sizes

(padding, margins, dimensions)

colors

(variables)

text

(approved labels/content with ability to copy)

icons

(ability to download)

images

(ability to download)

Prototypes

Live coding example

1

Change primary color

3

Change first column text color

5

Add permissions check to display side menu items

2

Update rows

styles

4

Show number of

items in a list

Design system +

Design tokens

At its core, a design system is a set of building blocks and standards that help keep the look and feel of products and experiences consistent

Design system

Design system examples from leading brands

fluent2.microsoft.design

spectrum.adobe.com

m3.material.io

ux.mailchimp.com

Let's use as an example Talend's Design system

Design tokens are the single source of truth to name and store a design decision, distributed so teams can use it across design tools and coding languages.

Design tokens

Design token types and terminology

drop-zone-background-color

accent-visual-color

accent-color-800

orange-800

Component specific token

Alias token

Global token

Value

#ff8866

green-800

color-background-primary

color-border-primary

Usages in Figma

Theming

Colors palette, sizing and more

How can we extract design tokens to use in an app?

Figma plugin

Amazon tool - Style Dictionary

supernova.io/design-tokens

Supernova

Connect, manage, and document your design tokens — including Figma Variables — in one place. Supernova automates token imports, updates, and delivery to code.

How the client communicates with a server

Client (Front-end)

Server (Backend)

"Hey, server, let's talk?"

GET HTTP-request

HTTP-response

Client-server communication

POST HTTP-request

HTTP-response

......

HTTP and WebSocket

Hypertext Transfer Protocol (HTTP) is an application-layer protocol for transmitting hypermedia documents, such as HTML. It was designed for communication between web browsers and web servers, but it can also be used for other purposes. HTTP follows a classical client-server model, with a client opening a connection to make a request, then waiting until it receives a response. HTTP is a stateless protocol, meaning that the server does not keep any data (state) between two requests.

WebSocket is a computer communications protocol, providing full-duplex communication channels over a single TCP connection. The WebSocket protocol was standardized by the IETF as RFC 6455 in 2011. The current API specification allowing web applications to use this protocol is known as WebSockets