Today is the third day, and I learned about the basics of wireframing and the component system as well as some best practices using Figma to create wireframes.

I read an article on what is wireframing in designing, and a YouTube video of wireframing in Figma.

Here is the note:

What Exactly Is Wireframing? A Comprehensive Guide

a wireframe is a two-dimensional skeletal outline of a webpage or app. Wireframes provide a clear overview of the page structure, layout, information architecture, user flow, functionality, and intended behaviors.

Wireframing happens early in the life cycle of a product, it is useful to have a good picture of the scope and features of the product, its advantages includes:

• Wireframes keep the concept user-focused
• Wireframes clarify and define website features
• Wireframes are quick and cheap to create

There are indeed gaps between wireframe and actual product, and that is the later things designer should work on.

Also, wireframe can be classified as

• lower fidelity: for starting conversations, deciding on navigation layout, and mapping the user flow
• mid-fidelity: more accurate representations of the layout
• high-fidelity: pixel-specific layouts

What to include in a wireframe?

• logos, search fields, headers, share buttons, and pseudo-Latin (Lorem Ipsum) placeholder text
• Typography and imagery, navigation systems, contact information, and footers
• depending on the fidelity

Wireframing with Figma

• go to figma.com/templates and find wireframe kits and make a copy
  • take a look at pages, assets and layers
    • note the hierarchy in the assets is the same as the component in the frame
  • best practice
    • create and organize your components
    • once you want to modify a component to create a new one, you can detach it (detach instance, or Ctrl+Alt+B)
    • drag and drop components from Assets, you can use swap instance to alter the components within a component set (really nice to try different components)
• Figma have projects, so that you can better organize your figma files, so I created
  • Learn Figma, for what I've made through out the learning process
  • Examples, for collecting good design

After today's learning, I realized what I really need is to get hands dirty as quickly as possible, and try to solve the problems and answer questions during it.

I think I've learned the basics of Figma, and it is time to make something.

So I'll be wireframing my blog tomorrow!