8 tips when building a high fidelity prototype in Figma


Figma's documentation of best practices

Figma's Community Page

  1. Do browse the community page for UI kits to quickly bootstrap your project.

  2. Decide early in the project the color palette and fonts to facilitate efficient collaborative design work.

  3. Understand what is a group and what is a frame. Frames and groups are containers in figma but behave differently when resizing.

  4. Shift + A. It easily autoformats the contents for your figma prototype and when you realise you need to overlay other designs, simply delete autoformat. Autoformat has both horizontal and vertical scrolls.

  5. When building, make sure you untick clip content for that frame so that you can comfortably design everything.

  6. A layout grid is useful for alignment.

  7. Build components, so that you can easily duplicate and autoformat to create multiple copies such as in the case of listviews.

  8. Prototype is useful for presentations so break down the user flows according to use cases for early stages. It is easier to edit and then compile all the iterations into final product.