Automaattinen asettelu: Pinojen esittely - Flexbox luonnoselle

Stacks muuttaa kaiken, mitä tiesit reagoivasta asettelusta Sketchissä

Päivitys: Vie reagoiva HTML & CSS Sketchistä Anima ToolKitin avulla.
Luo reagoivia ja interaktiivisia erittäin uskollisia prototyyppejä, All Inside Sketch

Aivan kuten CSS: n Flex Box, UIStackView iOS: ssä ja FlexboxLayout Androidissa - Automaattiset asettelut -sovelluksen uusi Stacks -ominaisuus on jälleen kerran pelin muuttaminen.

Aivan ensimmäistä kertaa Sketch-sovelluksen käyttäjät voivat käyttää Flexbox-tekniikkaa suoraan Sketchissä käyttämättä CSS: ää.

Uskomme, että voimakkaiden suunnittelukonseptien tekeminen suunnittelijoiden saataville on avain suunnittelun ekosysteemin edistämiseen.

Flexbox on muuttanut peliä ja vaikka se on ollut jo muutaman vuoden ajan, sinun on käytettävä sitä CSS: n avulla selaimessa, joka on siksi esteettömästi monille suunnittelijoille.

Stacks on erittäin yksinkertainen ja intuitiivinen Flexbox-versio, samalla tehokas. Sen avulla suunnittelijat voivat ajatella ja suunnitella sarakkeita, rivejä ja ruudukkoja - mikä tekee malleista entistä johdonmukaisempia.

Mikä on pino?

Pino on erityyppinen ryhmä, joka määrittelee alakerrostensa asettelun.

Pino Ryhmä -kuvakkeella on erityinen sininen väri ja osoitus sen suunnasta.Kerrosten pinottaminen - valitse ne ja napsauta Pino-painiketta Automaattiset asettelut -paneelissa.
Pro-vinkki:
- Pinojen käyttö johtaa johdonmukaisuuteen.
- Johdonmukaisuus johtaa selkeyteen.
- Pinojen käyttö johtaa selkeyteen.

Stackilla on 3 ominaisuutta:

  • Suunta: Määrittää, onko alakerrosten pinoaminen vaaka- tai pystysuuntainen.
Suunta
  • Kohdistus: Voidaan olla ylä / keskimmäinen / alhaalta / levittää
suuntaus
  • Väli: Määrittää välimatkan kunkin alakerroksen välillä.
Pinot voidaan pistää toisiinsa!
Sisäkkäiset pinot

Ratkaise tämä palapeli!

9 kymmenestä suunnittelijasta erehtyy ensimmäistä kertaa!
Kuinka monta pinoa tässä kuvassa on:
Selaa alaspäin paljastaaksesi vastauksen

Oikea vastaus on 3:

Pinokuvakkeella on erityinen sininen väri ja sen suunnan osoitin.
  1. Pieni vaakatasossa oleva punainen pino, jossa on 2 sisäosaa: tähdet ja arvostelulasku.
  2. Keskikokoinen sininen pystysuora pino, jossa on 4 sisäosaa: sovelluksen nimi, kirjoittaja, luokka ja pino-ryhmä 1.
  3. Suurin vihreä vaakataso 2 pykälää: sovelluskuvake ja pino Ryhmä 2.

Mielenkiintoisia faktoja pinoista:

  • Pinot ovat loistava tapa määritellä asettelurajoitukset sisarkerrosten välillä.
  • Kerrosten lisääminen tai poistaminen pinon sisällä tasaa sen alakerrokset.
  • Tekstikerros voi työntää sisaruksia Kerroksia laajennettaessa. ladata
  • Vedäminen ja pudottaminen on helppo tapa järjestää lapsikerroksia.

Opasvideo-opas Pablo Stanley

Joustava ruudukko pinoa käyttämällä

️ Beeta-ohjelmasi tuottava jäsen Alan Roy on luonut Flex Grid -järjestelmän Stack-sovelluksen avulla.

Hän kirjoitti yksityiskohtaisen selityksen sisältäen 10 minuutin videon. Suosittelemme lukemaan ja katsomaan tätä upeaa opetusohjelmaa. Se on mielessä avautumista.

Missiomme Animalla on antaa suunnittelijoille mahdollisuus omistaa suunnittelunsa. Olemme luomassa työnkulkua, jonka avulla suunnittelijat voivat määritellä, määritellä ja arkkitehtuuri kaikki bitit ja osat, jotka sisältävät käyttöliittymän / kokemuksen ja lopulta tuottaa automaattisesti natiivikoodin, joka on 1: 1 alkuperäiseen määritelmään. Tämän ansiosta suunnittelijat voivat olla riippumattomia ryhmän muista osapuolista, kuten tekniikasta, jolla on joskus erilaiset prioriteetit kuin suunnittelutiimillä.

Hanki Anima-laajennus (automaattinen asettelu on nyt Anima-asettelu)

Opas ja dokumentaatio

Luo reagoivia ja interaktiivisia erittäin uskollisia prototyyppejä, All Inside Sketch

Ystäviltäsi Anima App : lta

Keskustele keskustelemaan Facebook-ryhmämme kanssa