How to use Figma

Ty’s training with Liam

Rules of Thumb

  • Try to always use components for handling repeated elements that are the same. Try to never repeat a large group of elements – use a component instead.
  • Use auto-layout by default for handling any sort of layout needs. Most container elements should use auto-layout.
  • Try to never use raw colors – use shared color styles instead
  • Try to use shared text styles as much as possible
  • When components share lots of attributes, create sub-components to consolidate their shared bits, or make them variants
  • Don’t make elements that act as the background of a frame/group. Instead, use the Background property of the frame/group and layer all the backgrounds you want.

Performance Tips

Figma create a feeling of total freedom that you can keep creating more and more elements without restriction. However, if your file gets really big, you will run into performance and memory issues, and Figma may start crashing on you.

To avoid this...

  • Try to have very few elements that contain lots of small elements. For example, if you have a pattern of dots, you can construct that by making thousands of dot elements, or you could use a repeating background image. The background image will be much faster.
  • Try to avoid components that are extremely deeply nested, or have complex nesting chains that extend across too many files.
  • When you know you are not going to come back to a part of a file (scratch work) feel free to delete that stuff or move it to a new file.