Figma

Explainers

• The Figma Interface

  Start using Figma with the basics.

• Text and Shape Layers

  Use text and a rectangle to make a button element.

• Frames for UI Elements

  Use a frame to create a button element.

• Resizing with Auto Layout

  Set the size of a button based on its contents.

• Duplicate and Iterate

  Duplicate elements to tweak them and compare options.

• Spacing with Auto Layout

  Control the spacing between UI elements.

• Simplified Github Navigation

  Create a simplified navigation header based on Github’s user interface, using Frames and Auto Layout.

Lessons

• Reusable Components

  Make flexible and reusable components to speed up your design process, and make it easier to translate your designs into a component-based design system.