A Figma plugin that simplifies the use of the One Core design system for New Relic designers (internal only).
Table of Contents
About the project
This Figma plugin is an internal resource for New Relic. It’s functionality is closely tied to One Core’s (New Relic’s design system) design tokens, and components. The goal of the project is to take some of the load of utilizing One Core off of the shoulders of New Relic product designers and place it on the shoulders of Figma itself.
The plugin is automatically installed for all Figma users at New Relic. Usage stats for the plugin are tracked in New Relic (staging). These usage stats have often served as the first warning about bugs before users report them.
Project status
| Feature | Status | Notes |
|---|---|---|
| Table creator | ✅ Shipped | Will need to be updated when table redesign ships! |
| Theme switcher | ✅ Shipped | Token library in plugin needs to be updated regularly |
| Color linter | ✅ Shipped | Token library in plugin needs to be updated regularly |
| Language linter | ✅ Shipped | Used in the plugin via a language linter NPM package |
Built With
Getting started
Running it locally
- Run
yarnto install dependencies. - Run
yarn build:watchto start webpack in watch mode. - Open
Figma->Plugins->Development->New Plugin...and choosemanifest.jsonfile from this repo.
⭐ To change the UI of the plugin (the react code), start editing App.tsx.
⭐ To interact with the Figma API edit controller.ts.
⭐ Read more on the Figma API Overview.
Project architecture and token management
Demo
https://user-images.githubusercontent.com/812989/169329176-a1f0ddd1-f2f7-4ba8-ac4a-588f7773b998.mov
Acknowledgements
- Boilerplate plugin template: Figma Plugin React Template by nirsky
- Design for the Grid UI in the table creator came straight from Table Creator by Gavin McFarland