Component Crafting in Figma

We will learn how to make reusable components in Figma. Focusing on medium to high fidelity design, this class covers techniques used to design UI elements that can be replicated across a broader design.

Prep Materials

Daily Standup

Preparation Activity: Moodboard

- Time: 15 minutes - Goal: Create a moodboard to document 3 variations of each of these elements - you can choose different elements, but they have to be elements that are used repeatedly - Constraint: Each variation must be **structurally distinct** featuring different layouts (not just minor changes like color) - Tool: This activity must be done in Figjam

Elements to Document

  • Buttons
  • Cards
  • Navbars (desktop or mobile)

Outcome

  • You will have a moodboard with elements to model your own components on

Creating Figma Components

Benefits of making components

  • They are reusable
  • You have a master component to make edits to (instead of editing each instance)
  • You can create variants of the component
  • They make your design maintainable

Downsides to making components

  • It’s a new skill that takes time to get used too
  • You can overthink your component strategy and making things more complicated than necessary
  • They might not be necessary for smaller designs

Types of elements that you should componentize in Figma

  • Buttons
  • Icons
  • Formatted Headings
  • Cards
  • Footer
  • Navigation Bar

Make a Button

- Time: 15 minutes - Following the documentation, create a reusable button component based on the ones in your moodboard. - Make variants if you finish early

Lab Time

Create components based on your moodboard design

  • Make sure to test the sizes on things so that they fit on a relevant sized frame (ie: don’t have a 1200px wide card for a 1280px wide screen)
  • Make a medium resolution mockup using your components and Added Headings
  • Reflect on visual hierarchy and usability principles while designing
  • Optimize when you think it’s ready

Recommendation: Don’t just make 1 card for your assignment and finish. Try making and applying a few components to get a hang of the workflow.

Today's Achievement

Sprint Activity: Build a Card Component

  • Due Thursday February 22, 2024
  • Weight: 10%
  • Create a reusable card component in figma
  • Practice creating design elements that can be batch tweaked
  • Improve the maintainability of your projects