Figma ML

A Design System Plugin Made with TensorFlow JS - like spell check for design systems

Overview

A project using TensorFlow JS to create the spell check of design systems, that helps designers by keep-watching numerous design elements instead of humans. You can install and try this on the Figma Community here.

The best way to illustrate this is to see it in action via the animation below:

Quickstart

• 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 your plugin (the react code), start editing App.tsx.
⭐ To interact with the Figma API edit controller.ts.
⭐ Read more on the Figma API Overview.

Change models

• We’ve basically installed the default model that trained with CLAY dataset and MobileNetV2.
• If you want to change this default model, you can config the model from Figma -> Plugins -> Figma ML -> Config a model.
• You can also refer to the training test results we did here.

Toolings

This plugin is built using Figma plugin React Template by Nir Hadassi. It's an excellent boilerplate for new Figma plugins and includes a ton of useful utilities. Check out the Figma plugin API docs to learn more about writing plugins. This repo is using:

• React + Webpack
• TypeScript
• Prettier precommit hook

Contributors

• JooHyung Park
• JeongHyun Yoon
• JinJae Lee
• JongHee Woo

License

This project is licensed under the terms of the MIT.