This week, ben introduced us to components, variants and assets. these are useful when prototyping for any screens, as if youre planning on reusing componenets it speeds up the process.

What are components?

• templates for different elements you want to reuse in your website or app design. button, icon etc.
• You can create one master component and then make instances of it anywhere.
• Changing the master automatically updates all instances.

Variables

• Variables store reusable values that you can apply across your design.
• Examples:
  • Colors: Primary Blue = #1E90FF
  • Text sizes: Heading = 24px
  • Spacing values: Padding = 16px
• If you update a variable, all elements using it update ****automatically

Assets

• Assets is your panel in Figma where all reusable stuff lives:
  • Components
  • Variants (like button states: normal, hover, pressed)
  • Icons or illustrations you’ve saved as components
• You drag them from the Assets panel into your design.

Exercise 1

we started by creating some components, using a button as an example. The goal was to create functional buttons which would change when hovered/clicked, and allow you to move between pages. Here are the notes i jotted down to remember the process:

Create a text button, add fill, change it to a frame. create duplicates so 4 or 5 buttons. Select all frames and make it into a compomponent set.

to make the hover stuff work