- git - A version manager.
- Node (Gallium) - The JavaScript runtime, versioned at ^16.
- npm - A package manager.
- Figma Desktop - Required for running plug-ins in development.
- Knowledge of the Figma API and TypeScript.
- (Optional) Knowledge of Tailwind
git clone https://github.com/the-dataface/figma2html.gitThe following command with move you to the repository's local directory, set up the correct Node version, and install the dependencies:
cd figma2html
nvm use
npm installAfter making updates locally, run npm run build in a terminal to bundle the project. There should be a build folder with three files: bundle.js, index.html, main.js. There are required to run the plugin.
To watch for updates, run npm run dev in a terminal. This will start a server that will livereload the aforementioned files and let you develop while testing your Figma file.
- From Figma's top menu bar:
Plugins>Development>Import plugin from manifest. - Select the
manifest.jsonfile in the clonedfigma2htmldirectory.
Via shortcut:
cmd + /to open the quick actions bar- Type
figma2htmland hit enter on the plugin. You will see a development tag next to the version in development.
Via menu:
- From Figma's top menu:
Plugins>Development>figma2html
Via resources:
shift + Itop open the resources panel- Click
Plugins - Search for
figma2htmland click run
- All pull requests should be made against the
mainbranch. - Code should be in working condition before a review is requested unless help is needed. Ensure that the code is formatted with
npm run formatand that there are no linting errors withnpm run lint. - Commits should follow the conventional commits style, which helps generate changelogs and ensure proper versioning.