Learning Figma
Figma is a powerful design tool that allows you to design and build full stack apps when used with the Buzzy plugin. It offers a wide array of functionalities giving you full control over your app's look and feel.
Here are some tips to efficiently and meaningfully learn Figma.
Figma's own tutorials, tips and resources
New to Figma? It's probably best to go straight to the source and learn directly from Figma. Here's some good starting points:
Looking for more advanced Figma articles?
The good folk at UIPrep have a great blog chock-full of articles covering more advanced Figma stuff, from using variables to colour systems and all the way up to implementing full design systems.
Buzzy's own Figma tips
Figma is an incredibly powerful and versatile design tool, with a raft of features designed specifically to streamline production handover — but these features only work if they're used correctly.
Moving from design into a prototype or production phase? Handing over to a developer, other designers or using the Buzzy plugin to develop directly in Figma? You'll struggle if you have a messy, inconsistent, and poorly structured Figma file. Bad enough and it'll be of no more use than a flattened jpeg.
A general approach
Unless you're working with a rigidly-defined design system, visual exploration and ideation is always going to be a messy, ad-hoc process, and that's fine.
Once you've moved beyond that and are ready to work on files that will carry over into production, here's our recommended approach. If you're using a design system or UI kit with shared Components, assets and style libraries, you already have a head start here.
Define your core theme and styles (colours, typography and other styles). Use Figma's styles and asset library capabilities to do this. Be consistent — 15 shades of red or 11 different content text styles on a single screen are unlikely to be deliberate decisions, but a developer (and Buzzy!) can only take your file at face value.
Build up your design screens. As you reuse items and design elements, turn them into Figma Components where appropriate. This lets you maintain consistency, and changes are a breeze.
Use frames (not groups!) and auto layouts to create a consistent, logical hierarchy for your layouts and design elements. Is that button meant to be positioned inside that panel with the text, or float over the top of it and be positioned relative to the screen edge? Be consistent with your positioning and spacing of items.
Think about interactions and content behaviour such as alignment, constraints, overflow and scroll settings. If you intend for the screens to resize, drag your screen (frame) corners in Figma, and make sure your design elements behave as expected — a developer (and Buzzy!) can then understand positioning behaviours: is that icon meant to align to the left edge of the text, or the left edge of the button containing it? Is that button meant to resize if the text changes? Figma's native layout tools give you the option to define all of this, even if your Figma designs and prototypes are fixed in size.
Use the Buzzy plugin to mark up your screens and navigation. Focus on a small section of your app or a few screens to start with. Publish your app, and test to make sure it's all rendering and behaving as expected; fix what you need to before moving on to the more complex production mark up. Make sure you've designed all the screens and elements you might need (alerts, dialogs, error messages, empty states for menus, etc).
Use the Buzzy plugin to mark up your views, menus and dynamic content. Define your forms, fields, data and complex behaviours — but break it into manageable chunks, and work on a single small or simple section at a time.
Publish, test, refine and iterate as you go!
That's it! The first 4 steps above are just good Figma practice, even if you never use Buzzy — your fellow designers and devs will thank you for it.
Tips and examples
Let's dive into some more detailed examples that build on the general approach outlined above. A lot of these tips overlap, and a lot will fall into the 'be consistent and thorough' basket.
Nesting matters — a lot
If you look at your design and multiple items are surrounded by or floating on top of a larger item, it's usually a sign they should be nested in that larger item, not floating on top of it.
A common occurrence for this problem is buttons. In a poorly structured design, the button shape and the text are completely independent of each other. This leads to problems with both layout and functionality.
Layout: the text should be positioned relative to the button shape — but right now, it's positioned relative to whatever parent container or screen they are both in. If anything resizes or moves, the text and the button will no longer align.
Functionality: which of the 2 objects should have the button action applied? If you put it on the shape, then the text renders the middle of the button unusable, since it floats above (not inside) the shape, and blocks the click action. There's a reason html button elements contain their label text.
Fixing the issue: Turn the button into a Frame which contains the Text layer. The Text layer now gets its positioning and constraints from the button Frame, which can now safely have an action assigned to it — the text label is part of the button and thus clickable. Even better, the Frame can have its own styling applied (fills, strokes, effects, rounded corners and so on) meaning you can do away with an unnecessary 'button shape background' vector layer.
Use Frames not Groups
This directly relates to the nesting problem outlined above — generally, if you find yourself 'Grouping' something in Figma, it's a sign you should be using a Frame or Auto layout. This has functional, ease of use and performance implications — Frames can have styles applied to them, negating the need for a bunch of background vectors floating around behind things.
Tip: Right-click a Group in Figma and choose 'Frame selection'. Then drag the contained layers up out of the Group so they're under the frame, and delete the Group. Next, ensure the items are positioned / constrained appropriately within the frame.
Item layout, positioning and constraints matter — a lot
When looking at your design in Figma, your screens and layouts are fixed in size, and you can drag UI elements around to where-ever you want them to be — but behind the scenes, all those items have specific position settings, which become critically important when moving to production.
For instance, is that icon meant to stay a consistent distance from the left, or should it align to the right edge? Should that graphic stay a fixed size and centred on the screen, or expand as the screen resizes? Try resizing your screen Frame in Figma, and see what happens to your UI elements — that's roughly how they would behave in a browser or at different sizes of device viewports if your developer takes your file at face value and builds each item to the layout constraints you've provided in Figma.
Fixing the issue: Use Figma's layout controls in the right hand design panel — depending on the layer you select, adjust width, height, X and Y position, alignment and resizing options. But only do this once you've sorted out the nesting of your layers — see above!
Plan and define your responsive layout, overflow and scroll behaviours
As the amount of content on each screen changes, think about how you want to handle scrolling and overflow clipping. Ideally your layouts should have a consistent approach across similar screens so navigation and other behaviours remain predictable for users.
Fixing the issue: Figma provides you with controls for overflow clipping in the Design tab, and scrolling behaviours in the Prototype tab, even if you don't use them in Figma itself — a developer (or a production tool like Buzzy) can use these to determine styling and behaviour in production.
If you've designed your app for only one screen size, plan ahead and think about how you want your layout to respond at other screen or viewport sizes.
Consistency and precision matters
This sounds like common sense, but bears mentioning. Make deliberate design decisions. If an element is meant to consistently be 20px from the top of the screen, make sure it's always 20px, not 22px on one, 23px on another and 19px on yet another — a user will see it jumping around as they navigate from screen to screen. If an item is meant to align with another item, make sure they actually align.
This also has consequences for item nesting, and development decisions in production.
In the example above, if the items are meant to align on their left edges and have consistent vertical gaps, the Figma parent container could be a single Auto layout, which is far easier to control than 3 separate items floating independently of each other. In production, a single containing element and some simple styling would handle this.
If the items are being deliberately misaligned as a design decision, your developer may need to deliberately add additional styling and/or wrapping elements to achieve this positioning, which can add complexity and time.
Repetition matters
When things are re-used consistently, turn them into Components (or Styles) to simplify both the design and markup complexity. A navigation bar or button re-used on multiple screens can be turned into a single reusable component. This simplifies the design process, makes changes a breeze and prevents niggling inconsistencies and errors from creeping into your Figma file.
Avoid unnecessary transforms, flips and rotations
This is critical if using Buzzy at the moment (publishing of transformed elements is only partially supported), but also good practice generally. For instance, a Layer that is rotated 180 degrees makes no difference to its appearance, but is an unnecessary performance hit for a published app, and makes figuring out its positioning difficult without rotating it back. How far off the left screen edge is it? It's not 280px, as that's referring to what is now the right edge.
Buzzy-specific tips
The following tips are specific to using Buzzy with Figma:
Avoid strokes, especially on complex vector shapes and icons
Buzzy only partially handles borders and strokes on publish, especially on complex vector shapes. This is usually an issue in the context of icons; best practice is to outline all strokes, combine and merge complex shapes (eg union, difference etc) and then flatten the vector down to a single object.
Fixing the issue: Go to Figma's top menu bar, and choose Object > Outline Stroke.
Flatten vector shapes
This is specific to Buzzy — complex vector shapes (such as polygons, stars and so on) need to be flattened in order to render correctly on publish. Plain old frames, rectangles and ellipses work fine as is.
Fixing the issue: Go to Figma's top menu bar, and choose Object > Flatten Selection.
Use auto layouts where possible, especially for dynamic content
Buzzy lets you add dynamic content, menus and more, and publish directly from Figma. In this context, it's critical that your design allows for these items to occupy flexible containers — for instance, there's no point rendering a list of 10 cards or thumbnails directly over the top of each other; they need to render sequentially, whether that's horizontally or vertically. Luckily, Figma lets us define flexible areas like this via Auto layouts.
Typographic limitations
Buzzy has been developing in leaps and bounds; that said, we're a tiny team, and there's only so many hours in a day. At the moment, there's some basic typographic limitations:
Fonts are 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 BUT nested inline styles (eg a section of bold within a regular text block) are stripped out.
Lists within text blocks are not supported yet.
Using variables or dynamic content in text
Implementing dynamic content (eg using variables and values in text) means you have render the value as its own discrete text item — you can't combine a label and dynamic value in one text block.
In this example, the user name can be passed in as a variable, but it needs to be defined on its own Text layer, meaning you have to split the 'Hello,' text into a separate, static Text layer. Note the use of an Auto layout to control position and sizing!
Multiple fills and background images
Buzzy currently doesn't support multiple fills or background images on a single item; a workaround is to create a set of Layers to build up the desired outcome — for instance, a base Layer with a background image, and another one with a coloured gradient fill to use as an overlay.
Image transforms
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.
Figma Video Course
If you're eager to delve deeper, take advantage of Supercharge's Advanced Figma Course.
This series of video lessons and exercises offers a comprehensive yet easy-to-follow guide that cover Figma's fundamentals and beyond. Highly recommended for hands-on learning, at your own pace.
Buzzy Tip: Name your layers!
Think of your Figma layers as the backbone of your app's design—keep them clean and clearly named. It's not just about neatness; it's also about making collaboration a breeze, turning handoffs into smooth transitions, and ensuring that tweaking a design is an effortless process.
Layer naming can also affect the behaviour of your app components when marked up in Buzzy. Here's an example!
Last updated