Skip to main content
Question

How to split widget code into multiple files or use npm packages?

  • January 24, 2022
  • 2 replies
  • 1809 views
Henrique_Doro

Hey y’all 👋

Is there a way to split a widget’s code into multiple files? I know Figma won’t accept import statements in widget code, but I was wondering if I there was a special Typescript or vite/webpack/etc. configuration that managed to export a single, FigJam-friendly file.

My widget’s UI is quite complex, and it’s getting unwieldy to have the mini design system, re-usable components, state logic and iframe communication all in a single file. Plus, I was hoping this would open the door to using npm packages 😊

Thank you for your help 'n attention o/

2 replies

tank666
  • tank666
  • 4863 replies
  • January 24, 2022

I hope the widget example and the information in the README will help you.

github.com
UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Henrique_Doro

Thank you for the quick reply, @tank666!

The create-widget-app template is exactly what I was looking for! Perhaps you’d like to break its widget code (currently a single file) into multiple files to show it’s possible?

Also, getting a small TS issue when trying to use npm modules - although they work (🎉🎉🎉), TS can’t resolve them, throwing:

"Cannot find module '@sanity/color'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?"

This is solvable by changing widget-src/tsconfig.json to include "moduleResolution": "node", which doesn’t interfere with the build itself 😉

Anywho, thanks a ton for the help 🙏

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings