How can we help?

The plugin is in constant development (check the release notes), so things will change quickly. For now here's a list of tips to make life easier and avoid some gotchas.

​

Layout tips

​​​​

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.

​

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.

​

Resizing and positioning constraints of your design elements don't matter as much with a fixed size frame. We've noticed not many of our users have a handle on this stuff, so having a fixed layout simplifies things greatly - what you see in Figma is pretty much what you get in your Buzzy app, layout-wise.

​

To make your designed screens fill your browser or device viewport, turn on 'responsive mode' via the switch below your screen name in the 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.

​

Sizing, positioning and anchoring your Figma elements is critical. Try dragging a Figma screen (frame) out to a different size, and watch what happens to your design components - that's how they'll behave in a browser as the viewport resizes. Normally, you'd want a lot of these things to resize with the screen, so setting the correct size and anchor options is critical (eg 'fill container' vs 'hug contents' or 'left' vs 'left and right'). 

​

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.

​

Responsive layout is currently done via min/max width settings which can be applied to both screens and individual layout elements within the design. Screen level layout, positioning and responsive behaviours is an area of ongoing focus, so stay tuned.

​

Want a quick way of testing what Figma's layout settings translate to when publishing a Buzzy app? Check out our demo layout Figma file, duplicate your own copy and publish it via the Buzzy plugin. 

​

 

More layout tips

 

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. Demo file / Video.

​

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

​

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

​

Can't click a button or link? Make sure you haven't got other shapes or layers over the top of it - this includes text labels! Text labels should be nested inside the button, not floating above it somewhere in the Figma layers palette. 

​

Overflow scrolling in nested content areas is supported!

​

​

Figma design tips

​

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 are still stripped out.

​

Lists within text blocks are not supported yet. 

​

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.

​

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

​

Animated gifs are are not yet supported.