Figma Basics

Notes

• UI(User Interface) vs UX(User Experience) → UI is the way something looks and UX is how it works, how somebody uses it

UX task flows vs User flows

What do I know about customer/user ?

• what they’re about ?
• their values, mission
• who am I helping ?
• Why are we helping ?
• what is the direction we are going ?

Hifi/Lofi

• Lofi/Wireframe - easy, quick to make, focus on mechanics
• Hifi/Hi Fidelity - takes time, important for testing from users
• create frames in Figma → in the design file press F
• ctrl +,-,scroll wheel to zoom in/out, space to move the frames around together

Frames vs Groups

• frames can exist without groups, they offer more features compared to groups. For example clipping the content
• allows to reuse components

How to prototype

• go to prototype section
• select the frame, connect different frames or elements on one frame to another
• add animation effects
• preview or present

Animations

• create copy of frame you want to animate
• remove the animating element from the frame
• select smart animate and effect
• place the animating element inside frame from the sidebar
• preview

---

Related

1. Figma Essentials
2. Figma

---

References

1. UX task flows vs. user flows, as demonstrated by pancakes | by erika | everything is design(ed) | Medium