Automaatne paigutus: virnade tutvustamine - Flexbox visandile

Stacks muudab kõike, mida te Sketchi tundlikust paigutusest teadsite

Värskendus: eksportige reageeriv HTML ja CSS visandist Anima ToolKiti abil.
Looge reageerivad ja interaktiivsed ülitäpsed prototüübid, visand visandiga

Nii nagu CSS-is Flex Box, iOS-is UIStackView ja Androidis FlexboxLayout - automaatne paigutus oma uue virnade funktsiooniga on jälle mängu muutmas.

Esmakordselt saavad Sketchi rakenduse kasutajad Flexboxi tehnoloogiat rakendada otse Sketchis, CSS-i kasutamata.

Usume, et disainiökosüsteemi edendamiseks on võimas disainilahenduste kättesaadavaks tegemine disaineritele.

Flexbox on mängu muutnud ja ehkki juba mõni aasta on möödas, peate selle kasutamiseks brauseris kasutama CSS-i ja seetõttu paljudele disaineritele juurdepääsematuks.

Stacks on Flexboxi väga lihtne ja intuitiivne versioon, samas võimas. See võimaldab disaineritel veergude, ridade ja ruutude osas mõelda ja kujundada - muutes kujundused ühtsemaks.

Mis on stäkk?

Korstnatüüp on eritüüpi rühmad, mis määratlevad alamkihtide paigutuse.

Korstnagrupi ikoonil on spetsiaalne sinine värv ja selle suuna indikaator.Kihtide virnastamiseks - valige need ja klõpsake automaatse paigutuse paneelil nuppu Korstnat.
Tip Pro-näpunäide:
- Virnade kasutamine viib järjepidevuseni.
- Järjepidevus toob selguse.
- Pinu kasutamine annab selguse.

Korstnal on 3 omadust:

  • Suund: määratleb, kas lapsekihtide virnastamine on horisontaalne või vertikaalne.
Suund
  • Joondus: võib olla ülaosas / keskel / alt / laiali
Joondamine
  • Spacing: määratleb iga alakihi vahelise vahe.
Korstnad saab pesastada!
Pesastatud korstnad

Lahenda see mõistatus!

9st kümnest disainerist saab see esimesel korral valesti!
Mitu virna on sellel pildil:
Kerige vastuse kuvamiseks allapoole

Õige vastus on 3:

Korstnaikoonil on spetsiaalne sinine värv ja selle suuna indikaator.
  1. Väike punane horisontaalne virn, millel on 2 sisemist eset: tähed ja arvustuste arv.
  2. Keskmise suurusega 4 sisemise elemendiga sinine vertikaalne pinu: rakenduse nimi, autor, kategooria ja 1. rühm.
  3. Suurim roheline horisontaalne stäkk, millel on 2 sisemist eset: rakenduse ikoon ja 2. grupp.

Mõned huvitavad faktid korstnate kohta:

  • Korstnad on suurepärane viis õdede-vendade kihtide paigutuse piirangute määratlemiseks.
  • Kihtide lisamine või eemaldamine virnas korrigeerib selle alamkihte.
  • Tekstikihi abil saab õdesid-vendi kihte laiendada. Lae alla
  • Lohistamine ja kukutamine on lihtne viis lapsekihtide ümberkorraldamiseks.

Läbikäigu videoõpetus Pablo Stanley poolt

Flex Grid kasutades Stack

️ Meie beetaprogrammi viljakas liige Alan Roy on Stacki abil loonud Flex Grid süsteemi.

Ta kirjutas üksikasjaliku selgituse, sealhulgas 10-minutilise video. Soovitame seda suurepärast õpetust lugeda ja seda vaadata. See on meeles avamine.

Meie missioon Animas on anda disaineritele volitused oma disaini omamiseks. Loome töövoo, mis võimaldab disaineritel määratleda, täpsustada ja arhitektuurida kõiki kasutajaliidese / kogemusega seotud bitte ja tükke ning genereerib lõpuks loomuliku koodi, mis on algse määratluse suhtes 1: 1. See võimaldab disaineritel olla sõltumatu meeskonna teistest osapooltest, näiteks insener, kellel on mõnikord erinevad prioriteedid kui disainimeeskonnal.

Hankige Anima pistikprogramm (automaatne paigutus on nüüd Anima paigutus)

Juhend ja dokumentatsioon

Looge reageerivad ja interaktiivsed ülitäpsed prototüübid, visand visandiga

Teie sõpradelt Anima rakenduses

Liituge julgelt meie Facebooki grupiga