Prototyping from Scratch with Figma Course

Aralin 1 • Figma Ecosystem at Pag-setup ng Account

Sumasaklaw sa mga web at desktop app ng Figma, mga uri ng plano, at configuration ng account. Itinataguyod ang teknikal na baseline bago magsimula ang anumang gawaing disenyo.

Aralin 2 • Mahahalagang Keyboard Shortcut at Setting

Sumasaklaw sa mga pinakamaimpluwensyang shortcut at preference setting para sa episyenteng workflow. Ang bilis at katumpakang makukuha rito ay dadami sa bawat susunod na kabanata.

Aralin 3 • Mga File, Pahina, at Organisasyon ng Proyekto

Nagtuturo kung paano lumikha, mag-duplicate, at mag-organisa ng mga file at pahina sa loob ng mga proyekto. Ang wastong istraktura ay pumipigil sa kalituhan sa susunod na gawaing multi-screen prototyping.

Aralin 1 • Pagguhit at Pag-edit ng mga Pangunahing Hugis

Sumasaklaw sa mga rectangle, ellipse, polygon, at star tool kasama ang kanilang mga katangian. Ang mga primitibong ito ang bumubuo ng mga building block ng bawat elemento ng UI na lilikhain sa susunod.

Aralin 2 • Vector Pen Tool at Pag-edit ng Path

Ipinapakilala ang pen tool para sa custom na mga vector path at manipulasyon ng anchor point. Ang mga custom na icon at ilustrasyong binuo rito ay lilitaw sa mga susunod na prototype screen.

Aralin 3 • Alignment, Distribusyon, at Espasyo

Sumasaklaw sa mga tool ng alignment, smart distribute, at mga kontrol ng maayos na espasyo. Mahalaga ang tumpak na espasyo bago ipakilala ang auto layout sa susunod na kabanata.

Aralin 4 • Pag-unawa sa Frames laban sa Groups

Ipinapaliwanag ang istruktural na pagkakaiba sa pagitan ng mga frame at group at kung kailan gagamitin ang bawat isa. Ang mga frame ang pundasyon ng mga screen, component, at auto layout.

Aralin 1 • Fills, Gradients, at Images

Sumasaklaw sa solid fill, linear at radial gradient, at mga mode ng image fill. Ang mga pamamaraang ito ay gumagawa ng pulidong mga background at UI surface sa buong proyekto.

Aralin 2 • Pagbuo ng Isang Type Scale

Nagtuturo kung paano tukuyin ang isang modular type scale para sa mga heading, body, at caption. Tinitiyak ng isang tinukoy na scale ang visual hierarchy sa bawat screen sa prototype.

Aralin 3 • Text Styles at Style Management

Sumasaklaw sa paglikha, pagpapangalan, at paglalapat ng mga shared text style sa buong file. Binabawasan ng style management ang hindi pagkakapare-pareho bago ipakilala ang mga component.

Aralin 4 • Paglikha ng Isang Local Color System

Nagtuturo kung paano tukuyin ang primary, secondary, neutral, at semantic color token bilang mga lokal na estilo. Ang sentralisadong mga kulay ay ginagawang agarang pandaigdigan ang mga update sa lahat ng frame.

Aralin 1 • Constraints at Responsive Frames

Sumasaklaw sa mga setting ng constraint na kumokontrol sa kung paano kumikilos ang mga layer kapag nag-resize ang isang frame. Ang mga constraint na pinagsama sa auto layout ay gumagawa ng tunay na responsive na disenyo ng screen.

Aralin 2 • Pag-nest ng Auto Layout Frames

Nagtuturo kung paano mag-nest ng mga auto layout frame upang bumuo ng kumplikado at adaptive na mga istraktura ng UI. Ang mga nested na layout ang gulugod ng mga card grid, navbar, at layout ng form.

Aralin 3 • Panimula sa Auto Layout

Ipinapaliwanag ang pangunahing konsepto ng auto layout ng direksyon, espasyo, at padding. Ang pag-unawa sa modelong ito ay kinakailangan bago bumuo ng anumang responsive component.

Aralin 4 • Pagbuo ng Mga Responsive UI Pattern

Inilalapat ang auto layout at mga constraint upang bumuo ng isang navbar, card grid, at form. Ang mga pattern na ito ay direktang ginagamit muli sa mga prototype screen sa mga susunod na kabanata.

Aralin 1 • Pagbuo ng Isang Core UI Component Library

Inilalapat ang mga component at variant upang bumuo ng mga button, input, icon, at card. Ang library na ito ang direktang pinagmumulan para sa lahat ng screen na binuo sa kabanata ng prototyping.

Aralin 2 • Mga Property ng Component

Sumasaklaw sa boolean, text, instance swap, at nested instance properties sa mga component. Ang mga property ay naglalantad ng kontroladong pag-customize nang hindi sinisira ang istraktura ng component.

Aralin 3 • Mga Variant ng Component

Nagtuturo kung paano pangkatin ang magkakaugnay na state ng component sa isang variant set na may pinangalanang mga property. Pinapagana ng mga variant ang interactive na pagbabago ng state sa mga prototype nang hindi nagdo-duplicate ng mga component.

Aralin 4 • Paglikha at Paggamit ng Mga Component

Sumasaklaw sa pag-convert ng mga frame sa mga main component at paglalagay ng mga instance sa buong file. Tinitiyak ng mga component na ang isang pag-edit ay agad na lumalaganap sa bawat screen.

Aralin 1 • Prototype Connections at Interactions

Nagtuturo kung paano magdagdag ng mga prototype connection, trigger, at destinasyon sa pagitan ng mga frame. Ginagawang isang naki-click at navigable na prototype ng mga connection ang mga static na screen.

Aralin 2 • Pagdidisenyo ng Mga Pangunahing Screen ng Application

Inilalapat ang component library upang bumuo ng mga onboarding, dashboard, at detail screen. Bawat screen ay gumagamit ng auto layout at shared styles na itinatag sa mga naunang kabanata.

Aralin 3 • Pagpaplano ng Mga Screen at User Flow

Sumasaklaw sa user flow mapping, screen inventory, at mga kombensyon sa pagpapangalan bago magdisenyo. Pinipigilan ng pagpaplano ang istraktural na muling paggawa kapag nagli-link ng mga screen sa mga susunod na bahagi.

Aralin 4 • Transitions at Animation Settings

Sumasaklaw sa instant, dissolve, slide, push, at smart animate transitions. Ang naaangkop na mga transition ay malinaw na nagpapahiwatig ng direksyon ng nabigasyon at pag-uugali ng interface.

Aralin 1 • Mga Interactive na Component at Pagbabago ng State

Sumasaklaw sa paggamit ng mga component variant na may prototype connection upang gayahin ang mga pagbabago ng state. Binabawasan ng mga interactive component ang bilang ng mga frame na kailangan para sa kumplikadong mga flow.

Aralin 2 • Scroll, Overflow, at Fixed Elements

Nagtuturo ng patayo at pahalang na scroll, overflow clipping, at sticky fixed layers. Ginagaya ng mga setting na ito ang katutubong pag-uugali ng scroll sa mga prototype ng mobile at web.

Aralin 3 • Conditional Logic at Actions

Nagtuturo ng if-else conditions at multi-step na pagkakasunud-sunod ng aksyon sa mga prototype interaction. Ang conditional logic ay nagbibigay-daan sa mga branching flow na sumasalamin sa tunay na mga punto ng desisyon ng app.

Aralin 4 • Panimula sa Figma Variables

Sumasaklaw sa paglikha ng mga koleksyon ng number, string, boolean, at color variable. Ang mga variable ay nagbibigay-daan sa dynamic na data at pamamahala ng estado na hindi available sa pangunahing prototyping.

Aralin 1 • Usability Testing gamit ang Mga Prototype

Sumasaklaw sa pagpaplano ng mga test task, pag-recruit ng mga kalahok, at pagpapatakbo ng mga moderated session. Ang istrukturang pagsubok ay bumubuo ng naaaksyunang feedback para sa siklo ng iterasyon.

Aralin 2 • Inspect Mode at Pag-export ng Asset

Nagtuturo sa mga developer kung paano gamitin ang inspect panel ng Figma at kung paano nag-e-export ng mga asset ang mga designer. Tinitiyak ng tamang mga setting ng pag-export ang pixel-perfect na mga asset sa lahat ng target na resolusyon.

Aralin 3 • Version History at Pagpapanatili ng File

Sumasaklaw sa pag-save ng mga pinangalanang bersyon, pag-restore ng mga nakaraang estado, at pagpapanatili ng malinis na file sa paglipas ng panahon. Pinoprotektahan ng version control ang trabaho at sinusuportahan ang iterative na disenyo sa iba't ibang sprint.

Aralin 4 • Pagsusuri ng Feedback at Pag-prioritize ng Mga Pagbabago

Nagtuturo ng affinity mapping, rating ng kalubhaan, at pag-prioritize ng pagbabago mula sa mga natuklasan sa test. Tinitiyak ng prioritization na ang mga isyu na may pinakamataas na epekto ay naaayos bago ang handoff.