Figma to Buzzy translation

Not everything you do in Figma will translate as expected, and Buzzy handles some things you can't do in Figma. Here's some tips and tricks.

We wrote an entire article on our recommended approach to Figma best practices, and working with Buzzy and Figma. Check it out and save yourself a lot of iterative testing and Figma file tweaking.

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).

You can now turn on wrapping in any auto layout via the Buzzy 'Layout' component. While it doesn't preview in your Figma design, when published that layout will allow content to wrap. Grid menus, responsive layouts - so many use cases for this! Check out the demo video here.

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.