Nandini Ghosh logo
  • about
  • projects
  • playground
  • Overview
  • Custom Figma Plugin
Thumbnail for UX Internship project showing the Figma logo and various assets
UX INTERNSHIP EXPERIENCE
Summer Internship (May - June 2024)
✶ UI/UX
✶ Figma
✶ Design Systems
✶ Custom Plugin
✶ Internship
Date
Summer 2024

Tools
Figma,
VS Code,
GitHub
Overview

Over the summer of 2024, I decided to join a stealth Cybersecurity AI startup as a UX intern. I worked under the Lead UX Designer for two months and helped the team develop hi-fidelity prototypes for the August MVP release. This was a great opportunity to work within a driven environment and learn about the inner workings of a stealth startup.

Please reach out to me at ghosh.na@northeastern.edu if you'd like to learn more about this experience.

My Contributions!


Designing and developing a custom Figma plugin to convert Figma variables to JSON files for a smooth front-end pipeline and easy hand-offs between designers and developers

Wireframing widgets and charts for the product dashboards, an integrations page, and several UI components like Login screens and sidebars

Tokenising the Figma variables to extend the design system and researching industry-standard libraries like Radix and Tailwind
Custom Figma Plugin

The Problem

The biggest achievement at this internship was creating the custom Figma plugin that converted Figma design tokens to JSON files formatted in a specific way as specified by the Front-end developers. When the Lead UX Designer and I began to consult the Front-end team about maintaining and handing off design specs for implementation, we noticed that while Figma design tokens were a seamless and useful system for maintaining consistency in our wireframes, there was a significant amount of work that was required to convert each of those tokens to a format that could easily be used in a front-end stylesheet.

The front-end designers also wanted to have the tokens formatted in a specific way and required them to be JSON files. To help mitigate this issue, I worked on a custom Figma plugin to do exactly that.

The Solution

The plugin I designed was based off an open-source Figma plugin and modified to suit the needs of the front-end team. This plugin was written in TypeScript, JavaScript, HTML and CSS. The plugin takes in a Figma variable collection and coverts them to JSON, taking into consideration whether they have one or multiple modes and nesting them appropriately for easy consumption by front-end developers.

See other projects