Troubleshooting Buzzy for Figma

Common problems

Not everything you do in Figma will translate as expected, and Buzzy handles some things you can't do in Figma. Here's some common problems and their solutions.

My Buzzy app is blank

• Make sure you have defined an app 'Start' screen in your Figma design using the Buzzy plugin

• See our Getting Started Guide for basic guidance

• See our responsive layout checklist for a detailed breakdown

My Buzzy app doesn't look like my Figma design

• If your app UI is rendering but things are shifted, cut off or repositioned, it's likely due to responsive layout issues. Make sure you follow Figma best practices, including use of frames (not shapes or groups), autolayouts and more. For more information check out:

  • this article on best practices

  • this article on autolayouts

  • this page on responsive layouts

  • this checklist for responsive layouts

• Not everything you can do in Figma will translate well to a production Buzzy app. Some design elements won't render at all, and some might not render as expected, some may require workarounds. Some obvious things to watch out for:

  • Complex vector shapes - flatten these where possible

  • Layout constraints - use autolayouts

  • Tyopography - stick to the core free (Google) fonts available in Figma by default

  • Layer effects - stick to single, simple effects

  • Vector masks - avoid these; the majority of usecases are better served by using Figma frames with overflow clipped

  • Image transforms - avoid these.

  • Animations and video embeds - avoid and handle these as Buzzy data or content.

My Buzzy app is cutting off the content and won't let me scroll

• You’ll need to define scroll behaviours on your design in Figma, the same way you do for your Figma designs and prototypes. See this page for more information.

My Buzzy app is missing icons or graphics

• Complex vector shapes or strokes may not render - simplify and flatten these where possible.

• See below for more details, examples and workarounds.

Make sure you've gone through our Getting Started Guide! If the suggestions on this page don't address your issue, please contact [e-mail] for help

---

Layout

Figma's clip content and overflow scrolling settings need to be used to control your screen's behaviour, as they are in Figma's own prototype views.

By default, screens now publish in a 'fixed size' layout mode. This means that screens are now going to render at the exact fixed size you define in Figma, and if you want the app to resize in the device or browser viewport you can manually turn on a more advanced 'responsive' mode. Watch a demo video.

Responsive layouts: To make your designed screens fill your browser or device viewport, turn on 'responsive mode' via the switch below your screen name in the Markup (ex-Design) tab of the Buzzy plugin. Unless you've created your Figma design with this in mind, your layout will look broken the first time you publish. The viewport of your app screen (eg the browser viewport, or device screen) is not the same as a fixed size Figma frame representing a screen - it resizes, and content reflows. Things will be positioned weirdly, or don't resize or reposition at all. Learn more here.

Fixed position screen elements need to be anchored relative to their appropriate side - for instance, don't anchor a bottom nav bar off the top of the screen and rely on the fixed height of your container to push it to the right spot.

​Overlay screens such as alerts and dialogs can't be positioned the same way they are in Figma. To control their position, nest the overlay inside a 'screen' frame, and position it relative to that. Check out a video demo and grab the sample file.

Auto layouts are required for dynamic content and menus - they need to be laid out in a way that they can handle rendering multiple sequential items. Depending on your design, make sure users can get to the content (eg enable overflow scrolling).

Prototype transitions (eg between screens) aren't supported (this includes smart animations).

Typography

Fonts are currently limited to Google Fonts (as provided within Figma by default). If you have an identical font installed on your device locally, try to make sure you're specifying the Figma-provided version, not the local one.

Inline text formatting/styling is now supported at a basic block level including transforms, underlines, letter-spacing and indents. Inline styles and nested elements are still stripped out.

Lists within text blocks are not supported yet (see above - they're a nested element inside a Figma text block).

Borders on text are not yet supported - if needed, convert the border to an outline (Object > Outline); note that this flattens your text layer.

Design

Complex vector shapes (such as polygons, stars etc) need to be flattened in order to render (Object > Flatten Selection). Plain old frames, rectangles and ellipses work fine as is.

Vector lines and arrows should be outlined in order to render correctly (Object > Outline Stroke).

Fills are limited to one colour or image. This means colour styles that consist of multiple fills (eg a base colour, then a black or white opacity fill over the top of that) won't render correctly; a workaround is to flatten the styles by sampling the generated colour.

Gradient fills currently (mostly) work with linear gradients. Non-linear gradient fills (eg radial or angular gradients) aren't supported yet.

Layer rotation is partially supported. If you're getting unexpected results, you can try to flatten the rotated item (Object > Flatten Selection).

Background blur and inner shadow layer effects are not yet supported.

Borders are partially supported; border position always renders inside, and dashed or dotted styles are limited to the html versions (ie you can't control dash or gap widths). Non-solid border fills (eg gradients) are not supported yet.

Image transforms are not currently supported in Buzzy. We get the images as source files basically as Figma receives them (unprocessed), so any transforms or colour shifts need to be done and saved on the original image itself.

As a workaround, you can always use Figma to transform your image, export the transformed image using Figma’s export settings, and reimport the final image for publication via Buzzy.

Animated gifs or Lottie animations are are not yet supported.