This project is a robust, end-to-end system consisting of a Figma Plugin, an internal Dashboard, and a REST API integrated with an Amazon S3 bucket. It automates the extraction of design tokens from Figma files and streamlines styling initialization via Webpack, significantly accelerating the development process.

Features:

• Figma Plugin - Developed using Figma’s developer tools, the plugin enables seamless export of design tokens—including icons, colors, text styles, and other assets—directly from a design project to a centralized database. These tokens are then consumed by Webpack to automatically initialize the visual style of new applications. This streamlines the development process by eliminating the need for manual CSS and asset setup.
• Dashboard - A web-based internal dashboard provides an intuitive UI for viewing and modifying the available design tokens. Changes made via the dashboard are reflected across all connected applications through the shared API.
• REST API - The REST API serves as a central interface for both the plugin and the dashboard, facilitating secure and efficient data flow. Design assets are stored and accessed via Amazon S3.

• DownloadPlugin published on Figma Community
• Front-End StackTypeScript, React, Material UI, Webpack, Axios, Jszip, File-saver, Figma Plugin API.
• Back-End StackTypeScript, SQL, NodeJS, Express, Tsoa, Prisma, REST API, AWS Amazon S3