Framer – virnad ja raamid (stacks & frames)

Ühed peamised Frameri ehitusplokid on raamid ja virnad, ehk frame´d ja stack'id.

Frame vs Stack

Frame

Frame ehk raam(mis on mõneti nagu loll nimi) on nagu DIV HTML-is, sobivam nimetus talle oleks vast konteiner. Ehk, et tegemist on plokiga, mis hoiab endas mõnd kindlat kujundusüksust. Nii disainifailis kui HTML-is.

Stack

Stack ehk virn seevastu on kogumik konteinereid (või ka erinevaid virnu ehk stack-e), mida saab siis sarnase loogika alusel samas rütmis paigutada – reas või ülalt alla, võrdsete vahedega sama taustavärviga vms.

Virnas olevat elementi saab kujundada nagu Flex või Grid meetodit CSS-is. Ehk, et stack'is olevad asjad paigutuvad kindlas rütmis. Figmaga sina peal olevale inimesele on see nagu Auto layout.

Ja sellest lähtub ka valik, millal üht või teist kasutada. Stack'i elemente lisades püüab see neid korrapärastada – joondada, puhvrit jätta jne. Konteinerisse või raami ehk Frame'i elemente pannes saab need panna ka ligadi-logadi. Ehk siis Stack on nagu disaineri tööriist ja Frame'i kasutab kunstnik (kui see nii lihtne oleks).

Joonis 1. Vasakpoolsel ribal näha Frame'id ja Stackid (kaks sinist pulka kõrvuti horisontaalselt või vertikaalselt), paremal ülal Frame ja all Stack. Nagu näha siis alumisel on asi korrapärane ja ülemisel nii kuis kasutaja kastid ja tekstid vedanud on.

Kui disain HTML-i lasta, on frame´i display parameetriks block, stackil aga flex või grid.

Joonis 2. HTML-is suurt vahet pole peale selle, et Frame on block ja Stack on Flex

Olulised eripärad, mida silmas pidada Stacki või Frame valimisel

Avastasin juhtumisi, et kui luua Frameris komponent ja anda selle sees olevale stack'ile semantiline väärtus, nt "nav" siis valmis lehele see ei jõua. Ilmselt mingi Frameri eripära. Või bugi. Seega vali komponendi sees, kui vaja semantilisi märgendeid kasutada, frame. Loe siit semantika ja Frameri kohta lähemalt.