Tokenised Design System Template

Tokenised Design System Template

Tokenised Design System Template

Building Design system using Design Tokens including the JSON and CSS Code

Building Design system using Design Tokens including the JSON and CSS Code

Building Design system using Design Tokens including the JSON and CSS Code

Introduction

Leading the team in mastering Design Tokens through training and hands-on practice. Key tasks include planning tokens, creating design system components, and collaborating with developers. Using "Figma Variables" and "Tokens Studio" to build and export tokens as JSON, converting them to CSS, and documenting them to ensure a smooth handover to development. This project enhances design consistency and streamlines designer-developer collaboration.

CLIENT

FPT Software

LOCATION

Malaysia

PROJECT DURATION

1 Year

Components

+2k Components

ROLE

Design System Lead, Design Tokens Architecture

Features

Tasks

  • Create Components

  • Plan for Option, Alias, and Components Specific Tokens

  • Create Component Specific Tokens for all Components

  • Export Tokens and Variables to JSON Code

  • Handoff Documentation for Developers

  • Convert JSON code to CSS

  • Testing end to end Process

Design Tokens

Option, Alias, and Component Specific Tokens

Tokens Documentation

Handoff Token names to Developers

Components

Figma Components