Auto-layout: Introduktion til stakke - Flexbox til sketch

Stakke ændrer alt, hvad du vidste om responsivt layout i Sketch

Opdatering: Eksporter responsiv HTML & CSS fra Sketch med Anima ToolKit.
Opret responsive og interaktive High-Fidelity-prototyper, alt inden for sketch

Ligesom Flex Box i CSS, UIStackView i iOS og FlexboxLayout i Android - Auto-Layout's med sin nye Stacks-funktion ændrer endnu en gang spillet.

For første gang er Sketch-appbrugere i stand til at anvende Flexbox-teknologi direkte i Sketch uden at bruge CSS.

Vi mener, at det at gøre magtfulde designkoncepter tilgængelig for designere er nøglen til at fremme designøkosystemet.

Flexbox har ændret spillet, og selvom det har været omkring et par år, skal du bruge det til at bruge CSS i en browser og derfor utilgængeligt for mange designere for at bruge det.

Stacks er en meget enkel og intuitiv version af Flexbox, mens den er kraftig den samme. Det gør det muligt for designere at tænke og designe med hensyn til kolonner, rækker og gitter - hvilket gør design mere ensartet.

Hvad er en stak?

En stak er en speciel type gruppe, der definerer layoutet for dets underordnede lag.

Et Stack Group-ikon har en særlig blå farve og en indikator for dens retning.Sådan stables lag - vælg dem, og klik på knappen Stak i panelet Auto-layout.
Pro Tip:
- Brug af stak fører til konsistens.
- Konsekvens fører til klarhed.
- Brug af stak fører til klarhed.

En stak har 3 egenskaber:

  • Retning: Definerer, om stabling af underlag er vandret eller lodret.
Retning
  • Justering: Kan være top / center / bund / spredt
Justering
  • Afstand: Definerer afstanden mellem hvert barnelag.
Stakke kan indlejres!
Indlejrede stakke

Løs dette puslespil!

9 ud af 10 designere begår det forkert første gang!
Hvor mange stabler der er på dette billede:
Rul ned for at afsløre svaret

Det rigtige svar er 3:

Et stakikon har en særlig blå farve og en indikator for dens retning.
  1. Lille rød vandret stak med 2 indre emner: Stjerner og gennemgangstælling.
  2. Mellemstor blå lodret stak med 4 indre emner: Appnavn, forfatter, kategori og stakgruppe 1.
  3. Den største grønne vandrette stak med 2 indre emner: App-ikon og stakgruppe 2.

Nogle interessante fakta om Stacks:

  • Stakke er en fantastisk måde at definere layoutbegrænsninger mellem søskende lag på.
  • Tilføjelse eller fjernelse af lag inden i en stabel justerer dens underlag igen.
  • Tekstlag kan skubbe søskens lag, når de udvides. Hent
  • Trækning og slip af dem er en nem måde at omarrangere børnelag på.

Walkthrough Video Tutorial af Pablo Stanley

Flex Grid vha. Stack

️ Alan Roy, et produktivt medlem af vores beta-program, har oprettet et Flex Grid-system ved hjælp af Stack.

Han skrev en detaljeret forklaring, inklusive en 10 minutters video. Vi anbefaler stærkt at læse og se denne fantastiske tutorial. Det er sindets åbning.

Vores mission hos Anima er at give designere mulighed for at eje deres design. Vi opretter en arbejdsgang, der gør det muligt for designere at definere, specificere og arkivere alle de bits og stykker, der omfatter brugergrænseflade / oplevelse og til sidst automatisk generere native code, der er 1: 1 til den originale definition. Dette gør det muligt for designere at være uafhængige af andre parter i teamet, såsom engineering, der undertiden har andre prioriteter end designteamet.

Hent Anima-plugin (Auto-layout er nu Anima-layout)

Vejledning & dokumentation

Opret responsive og interaktive High-Fidelity-prototyper, alt inden for sketch

Fra dine venner på Anima App

Til diskussion er du velkommen til at melde dig ind i vores Facebook-gruppe