This Figma Plugin allows users to paste HackMD document URLs and render them directly within Figma. The code was developed with assistance from GitHub Copilot. If you have any suggestions for improving the code, please feel free to report them.
- Images in HackMD cannot be rendered currently (due to CORS issues)
- The HackMD note's visibility must be set to either "anyone with the link" or "published"
- API integration is not yet supported
- 🚧 Some markdown content does not yet have examples:
- alert block, code block, qoute block, table, spoiler block
This repo was created by @figma/create-widget
Run the following command to start building your widget
npm run dev
- Log in to your account and open the Figma desktop app
- You can open any existing FigJam document or create a new one.
- Go to Menu > Widgets > Development > "Import widget from manifest..."
- Select the manifest.json in this folder
This widget uses:
- esbuild for bundling
- vite and react for the iframe
- typescript for typechecking
file/folder | description |
---|---|
manifest.json | The widget's manifest.json |
widget-src/ | Contains the widget code |
ui-src/ | Contains the iframe code |
This is the only command you need to run in development. It will start the following processes for you:
- bundling (both widget and iframe code)
- typechecking (both widget and iframe code)
- vite dev server (for iframe development)
This runs bundling with minification turned on. You should run this command before releasing your widget.
This runs typechecking and makes sure that your widget builds without errors.