Skip to main content

Glossary

Gesso terminology​

Design System​

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. Source: InVision

In terms of Gesso the Design System can be considered being comprised of a component library, tokens, and Figma. These three things make up the design system by establishing a set of rules, an providing a set of components.

Figma​

Figma is a powerful web-based design tool that helps you create anything, websites, applications, logos, and much more. source: Figma

is responsible for low-fidelity designs of how things should look, as well as controlling the tokens used.

Tokens​

Control different aspects that are known to change between projects, things like brand colors, fonts, spacing, sizing. These tokens are created/ updated in Figma and are pulled into the component library using a developer tool called Figmagic, which reads the Figma tokens and outputs JS files containing variables and objects named according to there name in figma with values matching that of Figma.

Component Library​

is a JS package that contains a collection of premade and custom components designed to be used to build out client pages. They can be things such as Text, or more complex things such as AccountDashboards.

Component​

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. Components come in two types, Class components and Function components, in Gesso we will concentrate on Function Components

Layout​

A layout is a collection of components configured in a meaningful way to create large "page sections" such as an AccountDashboard, or Cart.

Theme​

The theme specifies the color of the components, darkness of the surfaces, level of shadow, appropriate opacity of ink elements, etc. Themes let you apply a consistent tone to your app. It allows you to customize all design aspects of your project in order to meet the specific needs of your business or brand.