Table of Contents

1. About The Project
   • Project status
   • Built with
2. Getting Started
   • Running it locally
   • Project architecture and token management
3. Demo
4. Acknowledgements

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

• React
• webpack
• TypeScript
• Prettier precommit hook

Getting started

Running it locally

• Run yarn to install dependencies.
• Run yarn build:watch to start webpack in watch mode.
• Open Figma -> Plugins -> Development -> New Plugin... and choose manifest.json file 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

One.Core.Toolbox.Preview.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

(back to top)