Figma – WPKurzus UI Drótváz Csomag – Alapok (34:21)

Figma – WPKurzus UI Drótváz Csomag – Alapok (34:21)

A leckében a Figmán belül a WPKurzus UI drótvázcsomaggal fogunk dolgozni. Ha még nem tetted, most másold át a saját fiókodba.

WP Kurzus UI drótváz csomag (Figma link) – KATT IDE AZ ELÉRÉSHEZ

Előkészületek

  1. nyisd meg a WPKurzus UI Drótváz Csomag linkjét, amit a leckéből mentettél le
  2. ha be vagy jelentkezve a Figma fiókodba, akkor az király, ha még nem, akkor lépj be
  3. felül látod a fájl nevét, és mellette azt, hogy “View only”, azaz “csak megtekintés”. Ha ide kattintasz, akkor feljönnek lehetőségek: a “Duplicate to your Drafts” lehetőséggel saját vázlatot készítesz magadhoz, ami onnantól a tiéd lesz

A felület részei

  • bal oldalt találod a Layereket, azaz Rétegeket: egérráhúzással látszik, hogy mi is tartozik hozzá
  • a layerek egyre kisebb rétegekre bonthatóak: elemekre, képekre, formákra, stb.
  • középen a nagy terület a munkaterület, ide készülnek a különböző designok
  • a panelek mérete az igényeidnek megfelelően alakítható
  • jobb oldalt a beállítások vannak
    • ha nem kattintasz semmire, akkor a globális beállításokat látod
    • ha pedig egy elemre klikkelsz, akkor az ahhoz tartozó beállítások jönnek be.
  • a fölső vékony sávból a különböző eszközöket, menüpontokat éred el.
    • innen tudsz visszamenni a Figma fájljaidhoz is
    • az eszköz választó is itt található, például a Move (mozgatás), a Frame (keret), különböző formák, a Pen (toll) eszköz, szöveg elem
  • jobb fent látod, hogy ki dolgozik éppen a fájlban és itt tudod majd megosztani is a fájlt

Középen elhelyezkedő designok

  • az UI Drótváz Csomag különböző blokkjait láthatod kategorizálva
  • a szakaszokon kívül láthatsz egy Arculati elemek részt, amiben a színeket, betűtípusokat találod (majd globálisan beállítod ezeket)

A design fájl szerkezeti egységei

  • a design fájlon belül vannak a Page-ek (Oldalak): olyanok, mint egy Excelben a munkalapok. Ingyenes verzióban 3 lehet, rendszerezésre használjuk
  • a szürke háttér a Canvas (Vászon). Amikor csak simán a Canvasra kattintasz, akkor jönnek be az ehhez tartozó beállítások, amik ugye az egészre vonatkoznak.
    • Background – Háttérszín, ami most ez a világosszürke
    • Text Styles – Szöveg stílusok, amik globálisan adnak különböző szintű egységeket a szövegekre vonatkozóan
    • Color Styles – Szín stílusok, ami globális színeket ad
    • Effect Styles – Effekt stílusok, ami a mostani esetben globális árnyékbeállításokat jelent
    • Export funkcióról majd még beszélünk, és itt vannak a Pluginek, bővítmények
  • Frame (Keret)
    • a kis négyzetráccsal lehet létrehozni ilyet, akár simán úgy is, hogy kijelölöd, hogy mekkora területet szeretnél
    • a Frame menüponton belül vagy az F billentyű lenyomásával is létre lehet hozni 
    • általában már meglévő Frame-et fogunk másolni
    • a Frame lehetőségein belül vannak rendezések, méret beállítások, grid rendszer, kitöltési színek, effektek és még sok minden
  • Layer (Réteg): a Frame-en belül vannak rétegek
    • lehet alakzat, kép, szöveg

Hatékony navigáció

  • zoomolás (kicsinyítés, nagyítás)
    •  jobb felső sarokban a százalék látszik
    • Zoom to Fit: akkorára közelíti a képet, hogy minden beleférjen, ami a vásznon van (Shift + 1)
    • 100%-os méret: ha pontosan látni akarod, hogy a valóságban mekkora, amivel dolgozol (Shift+0)
    • plusz és mínusz gombokkal is tudsz kicsinyíteni, nagyítani
    • Ctrl+görgetés egérrel (nagyításnál arra a részre nagyít, ahol éppen a kurzorod van)
    • Z billentyű: egy kis plusz jeles nagyító jön elő, és ezután lehet kijelölni a részt. Így pont akkorába ugrik, ami befér a kijelölésbe és a képernyődbe

Mozgások

  • A munkaterület szélén a csúszkákkal a megfelelő helyre tudod húzni a képernyőt
  • Görgetés: szokásunkhoz híven használhatjuk a felfelé és lefelé navigációhoz
  • Shift+görgetés: jobbra-balra navigálás
  • Space: Hand, azaz kéz eszköz, amivel meg lehet ragadni a képernyőt és arrébb húzni
  • V: move, vagyis Mozgatás eszköz (“fogd és vidd” módszerrel arrébb pakolhatsz vele dolgokat)

Kijelölés

  • Frame kijelölése
    • magára a Frame nevére kattintasz (a kis négyzetek a sarkokban és a kék keret mutatja meg, hogy mit határol a kijelölés)
    • egyből a bal oldali panelen is kattinthatsz a frame-re
  • Frame-en belüli elemek kijelölése
    • Ha a frame első szakaszára klikkelek, akkor az egész szakaszt kijelöli 
    • kis szaggatott négyzet jelöli azt, ha ez egy Group, azaz csoport
    • Ctrl+G kombinációval tudsz több kijelölt elemet csoportosítani
    • duplán kattintva egyre beljebb mész a rétegeken: ha már jó helyen vagy, akkor 1 klikk is elég egy másik ugyanolyan szintű elem kijelöléséhez
    • ha lenyomva tartod a Ctrl billentyűt, akkor ha az egeret húzod, felismeri a mélyebben lévő layereket
    • több elem kijelölése: egérgombot lenyomva kijelölöd azt a részt, amibe tartozó elemeket szeretnéd kijelölni
    • ha mondjuk egy Group-ból csak 2 elemet jelölnél ki, a layer kijelölése után Tab billentyű nyomogatásával az azon a szinten lévő layereket tudod váltogatni.
    • ha többet jelölnél ki, akkor a Shift gombot kell nyomva tartanod, és kattintanod arra, amit kijelölnél hozzá
    • a Shift nyomvatartásával le tudod venni a kijelölést, ha az egyik layerre mégsincs szükséged.

Szakaszok másolása, duplikálása

  • a Ctrl+C  – Ctrl+V itt is működik
  • Ctrl+Z: előző parancs visszavonása 
  • Ctrl+Shift+Z vagy Ctrl+Y: parancs megismétlése (visszavonás visszavonása)
  • Ctrl+D (Duplicate): duplikálás
  • Alt billentyű lenyomásakor megváltozik az egér, kettő lesz belőle, duplikálódik a kijelölés (a régi szakasz is megmarad, az újat lehúzom róla)
  • Shift+Alt: a Shift lenyomása egy vonalban, szabályosan tartja a layert. Csak vízszintesen és függőlegesen mozog utána az új réteg
  • a Shift összességében a szabályosságot jelenti

Drótváz készítésének folyamata

  • üres Frame-eket el tudsz nevezni az oldalaidnak, amit éppen készítenél (pl. Főoldal)
  • globális beállítások
    • a Canvasra való kattintással bejönnek a különböző stílusok
    • leginkább a betűtípusokra, elsődleges és kiegészítő színre kell koncentrálnod
    • 6 különböző színt használunk globálisan (elsődleges, kiegészítő, sötét, világos, fekete, fehér)
  • szakaszok felépítése az üres Frame-ekre
    • mindig egy fejléc kerül legfelülre és egy lábléc legalulra
    • ezután jön az összes többi szakasz berakosgatása
    • így állnak össze az oldalaid, amiket pedig majd a WordPress-ben szépen fel tudsz építeni.

Persze bejönnek majd még design tényezők is. Tudom, hogy sok az infó, de így fog kialakulni benned a tudás, hogy miként is lehet egyszerűen, de mégis stratégiai, marketing és design szempontból is szuper minőségben építkezni.

A Figma és a WPKurzus UI Drótváz sablon óriási segítség lesz a számodra. Próbáld majd ki te is, játssz vele, kísérletezz, gyakorolj.

WPKurzus UI Drótváz Csomag (Figma)