thumb – a figma plugin making thumbnails for your team
Thumb is a plugin that helps teams organize their Figma files and highlight their collaborative effort in a personalized and creative way. Our plugin follows 5 simple steps:
- Select the artboards that you want to be displayed in the thumbnail
- Select the team members of your project
- Personalize and save your very own hand from over 200 combinations
- Select your favourite background colour
- Generate your new thumbnail!
By giving teams the ability to highlight artboards of their choice and showcase each project as a culmination of the hard work of multiple team members using 3D hands, thumb creates a more inclusive and organized workflow so that teams can take pride and ownership in their work. Through fostering personal connections between the work and team members, thumb leads to higher quality work and an unmatched sense of collaboration.
Install the plugin here.
Created by: Aaron Jiang, Jayden Hsiao, Emily Louie, Kevin Jiang, and Leon Han
Quickstart
- Clone the repo
- Run
yarnto install dependencies - Run
yarn buildto build distributable files in production mode - Run
yarn build:watchto start webpack in watch mode - Open
Figma->Plugins->Development->New Plugin...and choosemanifest.jsonfile from this repo
Editing the plugin
- 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
Stack
This repo uses:
- React + Webpack
- TypeScript
- Prettier precommit hook
- Figma Plugin React Template by nirsky
- Ant UI