Skip to content

dusskapark/figma-ml

Repository files navigation

Figma ML

Figma ML
Figma ML

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

GitHub issues GitHub forks GitHub stars

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:

Demo

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

License

This project is licensed under the terms of the MIT.

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published