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.

​

USING BUZZY WITH FIGMA - BEST PRACTICES, TIPS AND LIMITATIONS [BLOG ARTICLE]

We wrote an entire article on our recommended approach to working with Buzzy and Figma, existing limitations and how to work around some of them. Start here to save yourself a lot of iterative testing and Figma file tweaking.  Read more here.

​

TURN OFF THE INTERCOM WIDGET [VIDEO]

Publishing a Buzzy app directly from Figma places an Intercom chat widget on your app - use this to get in touch with us! You can hide it via the app settings or, even better, add your own Intercom credentials in the app settings and use it as a way of communicating wth your own customers. Check out a quick how-to video here.

​

WRAPPING IN AUTO LAYOUTS [VIDEO]

You can now  turn on wrapping in any auto layout via the Buzzy 'Layout' component - 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.

​

AUTOMATED SCREEN AND NAVIGATION SCANS [VIDEO]

Running the Buzzy plugin for the first time on a Figma page just got easier. We've introduced automated screen scanning based on your Figma prototype flows and interactions - the plugin will determine which frames in the page are screens, their type, and also mark up any navigation settings for you. Simply run the scan, check what it returns and click 'Apply' - voila, the skeleton of your app is already marked up! Watch the video here.

​

​

Layout modes

​

FIXED SIZE LAYOUT MODE [VIDEO]​​​

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.

​

RESPONSIVE LAYOUT MODE

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. 

​

External links are now supported!

​

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.