Best Practices

Performance

In order to build widgets that are fast for most users and scenarios, it's helpful to understand the things that could make them slow.

The following things are particularly expensive for FigJam to render, so they have the potential to slow down your widget if used excessively, in particular for users on lower-powered computers. Please use them sparingly:

• Blurs and shadows: if you want to keep the look of these effects, you can rasterize them as images and then render the images in your widget. However, rasterization is a lossy process, meaning some vector data will be lost during the conversion.
• Blend modes any blend mode that is not normal or passthrough can be slow. Our renderer is heavily optimized for normal and passthrough blend modes.
• Complex SVG: these are expensive to render because we have to parse each SVG and create its individual layers.

Design

Because widgets are effectively interactive applications, how you think about both the visual and UX design of your widget is really important. Keep the following best practices in mind when designing your widgets:

• Keep as much interaction on the canvas as possible: the magic of widgets is in their on-canvas, multiplayer interactions, so you should try to keep all user actions on the canvas and reserve the property menu for settings or property changes.
• Avoid making the entire widget clickable: Widgets with large clickable areas can be difficult to select without accidentally triggering a click handler. Try to reserve some empty space that is not clickable, especially if the widget has a property menu which requires selection to show.
• Position your iframe relative to your widget’s position: If you are using an iframe to show settings on a widget, use the position property to show the iframe closer to your widget so it is easier to reach and doesn’t cover up the widget.

Using the Property menu

• Keep the property menu simple: too many options will not only clutter the UI, but will also overwhelm users. If your widget requires a lot of complex settings, think about putting them in an iframe instead of the property menu.
• Do not repeat actions you can take on the widget in the property menu: Showing the same actions on the widget and its property menu can be confusing to users. Make sure your widget’s actions are mutually exclusive to either surface.
• Use icons + tooltips in the property menu whenever possible: All FigJam native objects use icons with tooltips in their property menus. Try using icons as much as possible and only fall back to text buttons when the actions are difficult to convey with icons.
• 40x40 icons look best in the property menu: keep these dimensions in mind!