Dispunere automată: introducerea stivelor - Flexbox pentru schiță

Stivele schimbă tot ceea ce știai despre aspectul receptiv din Sketch

Actualizare: Exportă HTML și CSS responsive din Sketch cu Anima ToolKit.
Creați prototipuri responsabile și interactive de înaltă fidelitate, toate în interiorul schiței

La fel ca Flex Box în CSS, UIStackView în iOS și FlexboxLayout în Android - Aspectul automat cu noua funcție Stacks schimbă, încă o dată, jocul.

Pentru prima dată, utilizatorii aplicației Sketch sunt capabili să aplice tehnologia Flexbox direct în Sketch, fără a utiliza CSS.

Considerăm că realizarea conceptelor puternice de design accesibile pentru proiectanți este esențială pentru avansarea ecosistemului de proiectare.

Flexbox a schimbat jocul și, deși au trecut câțiva ani, pentru a-l folosi, trebuie să folosiți CSS într-un browser și, prin urmare, inaccesibil pentru mulți designeri.

Stacks este o versiune foarte simplă și intuitivă a Flexbox, dar puternică la fel. Permite proiectanților să se gândească și să proiecteze în ceea ce privește Coloanele, Rândurile și Grătarele - ceea ce face ca modelele să fie mai consecvente.

Ce este o stivă?

Un Stack este un tip special de Grup care definește aspectul Straturilor copilului său.

O pictogramă Stack Group are o culoare albastră specială și un indicator al direcției sale.Pentru Stack layer - selectați-le și faceți clic pe butonul Stack din panoul Auto-Layout.
Sfat Pro:
- Folosirea Stivelor duce la consecvență.
- Coerența duce la claritate.
- Folosirea Stivelor duce la Claritate.

Un Stack are 3 proprietăți:

  • Direcție: definește dacă stivuirea straturilor pentru copii este orizontală sau verticală.
Direcţie
  • Aliniere: Poate fi Top / Center / Bottom / Spread
Aliniere
  • Spațiu: definește distanța dintre fiecare strat de copil.
Stivele pot fi cuibate!
Stive cuiburi

Rezolvă acest puzzle!

9 din 10 designeri au greșit prima dată!
Câte stive sunt în această imagine:
Derulați în jos pentru a dezvălui răspunsul

Răspunsul corect este 3:

O pictogramă Stack are o culoare albastră specială și un indicator al direcției sale.
  1. Pila mică orizontală roșie cu 2 articole interioare: stele și număr de recenzii.
  2. Pila verticală albastră de dimensiuni medii, cu 4 articole interioare: numele aplicației, autorul, categoria și grupul de stive 1.
  3. Cea mai mare stivă orizontală verde cu 2 articole interioare: pictograma aplicației și grupul 2 stivă.

Câteva fapte interesante privind stivele:

  • Stivele sunt o modalitate excelentă de a defini restricțiile de dispunere între Straturile fraților.
  • Adăugarea sau eliminarea straturilor din interiorul unei stive își realignează straturile copilului.
  • Stratul de text poate împinge straturile fraților atunci când este extins. Descarca
  • Tragerea și aruncarea este o modalitate ușoară de a rearanja straturile pentru copii.

Tutorial video walkthrough de Pablo Stanley

Flex Grid folosind Stack

️ Alan Roy, un membru prolific al programului nostru beta, a creat un sistem Flex Grid folosind Stack.

El a scris o explicație detaliată, inclusiv un videoclip de 10 minute. Vă recomandăm să citiți și să urmăriți acest excelent tutorial. Se deschide mintea.

Misiunea noastră de la Anima este de a împuternici proiectanții să își dețină designul. Creăm un flux de lucru care să permită proiectanților să definească, să specifice și să arhitecteze toate piesele și piesele care înglobează interfața utilizatorului / experiența și, în final, generează automat un cod nativ care este 1: 1 la definiția inițială. Acest lucru permite proiectanților să fie independenți față de alte părți ale echipei, cum ar fi inginerii, care au uneori priorități diferite decât echipa de proiectare.

Obțineți Anima Plugin (Auto-Layout este acum Anima Layout)

Ghid și documentare

Creați prototipuri responsabile și interactive de înaltă fidelitate, toate în interiorul schiței

De la prietenii de la Anima App

Pentru discuții, nu ezitați să vă alăturați grupului nostru de Facebook