Design native brugerflow lige inde i Figma og Sketch med Flowkit 2.0

Det er en virkelig smerte at tegne og redigere masser af linjer og bokse til brugerstrømme i ethvert designværktøj. Hvis du nogensinde har gjort det, ved du, hvad jeg taler om.

Selv hvis du formår at få det til dit aktuelle projekt, er der altid det næste projekt, der har brug for næsten den samme behandling.

Næsten. Det er problemet. Dine gamle linjer og bokse stemmer ikke helt overens med det, du har brug for nu, og der er ikke let måde at genbruge, hvad du allerede har gjort.

Efter at have oplevet denne smerte selv på flere klientprojekter igen og igen, besluttede jeg endelig at gøre noget ved det.

Jeg besluttede at lave mit eget genanvendelige flowbibliotek. Jeg tænkte på enhver mulig retning, linjekurve, variation osv., Som jeg muligvis vil have i et flowkomponentbibliotek. Derefter lavede jeg det.

Jeg brugte det, som nogle ville betragte som en urimelig mængde tid på at lave hver eneste lille detalje. Jeg har endda ændret navnekonventionen flere gange baseret på, hvor brugbar og mindeværdig hver komponent var.

Jeg havde et dusin eller så folk testet den oprindelige version tilbage i oktober 2017, lige før jeg gik live med version 1.0.

Spol et helt år frem, og jeg bruger stadig Flowkit på mine projekter og har stadig folk, der fortæller mig, hvor meget de elsker det, og hvor meget tid det har gemt dem på deres projekter.

Efter et helt år med personlig brug og uformel feedbackindsamling ønskede jeg at genopbygge Flowkit fra bunden til at arbejde med flere designværktøjer og inkorporere et par opdateringer her og der.

Hvad er nyt i 2.0?

Flowkit er blevet redesignet fra bunden af ​​både Figma og Sketch. Begge filer indeholder det samme indhold med hensyn til symboler og komponenter, men hvert format blev designet naturligt til at udnytte de unikke funktioner i hvert designværktøj.

Hvad med Studio og XD? På dette tidspunkt understøtter de ikke i øjeblikket alle de indlejrede komponentfunktioner, som Flowkit skal være fuldt funktionsdygtigt. Når de gør det, opdaterer jeg Flowkit.

Bemærk, brugen af ​​ordkomponenten, der bruges i resten af ​​artiklen, gælder for henholdsvis både Figma-komponenter og skissesymboler.

Nyt gitter

Hver komponent er blevet redesignet til 360x360 pixels med polstring inkluderet. Dette betyder, at alle strømme, blokke, kommentarer osv. Nu kan justeres side om side med nulmargen og have en jævn afstand mellem hele dokumentet. Dette eliminerer behovet for at gætte dimensionerne og den korrekte afstand for enhver specifik komponent, der bruges i din strøm.

Master komponenter

Masterkomponenterne er grundlæggende stykker, der skaber alle komponentforekomster. Det samlede antal Master-komponenter til strømningslinjerne er reduceret fra 22 komponenter i Flowkit 1.0 til nu kun 12 Master-komponenter i Flowkit 2.0.

Hver variation af Master-komponenterne skaleres alle korrekt, mens de manuelt skalerer en afgrænsningsboks for en komponent eller ved hjælp af tastaturgenveje som ⌘ (↑ → ↓ ←) og ⌘ ⇧ (↑ → ↓ ←). Eventuelle ændringer foretaget af disse komponenter vil påvirke alle forekomster i biblioteket. Det anbefales ikke at ændre masterkomponenterne.

Master Varianter

Der er flere mastervarianter til hurtigt at ændre kernestilen i Flow-instansen. Disse inkluderer stiplet, rød, grøn, blå og lys.

Forudbyggede stilarter er tilgængelige for alle komponenter i Flowkit. Der er flere muligheder for stregformater, fyldfarver og mere indbygget direkte i både Figma og Sketch ved hjælp af deres egen unikke måde at håndtere stilarter på.

Navnekonventioner

Hver retningskomponent bruger følgende navnekonvention. Det begynder med udgangspunktet og slutter med destinationen.

Type / Retning 1 / Modifier 1 / Retning 2 / Modifier 2

  • Type kan være enten Flow eller Tap, afhængigt af typen af ​​flow, du opretter. Flow er beregnet til at blive brugt til brugerstrømme på højt niveau, mens Tap er beregnet til at blive brugt med wireframes eller faktiske skærmdesign alle på det samme tegnebræt.
  • Retning 1 bestemmer stiens oprindelige retning. Dette kan være Højre, Venstre, Op eller Ned
  • Modifikator 1 kommer umiddelbart efter den primære retning. Dette kan være lige, kurve eller slange.
  • Retning 2 kommer umiddelbart efter den indledende ændring. Højre og venstre komponenter kan enten være Op eller Ned, mens Up og Nedkomponenter vil have sekundære modifikatorer som venstre eller højre.
  • Modifikator 2 er det sidste afsnit af Flow-komponenten og bestemmer pilens retning. Dette kan være lige, U-sving eller krog.

strømme

Dette er de primære komponenter i systemet. Der er 11 indstillinger (vist nedenfor) for hver retning. Alle flowkomponenter kan skaleres uden skævhed eller strækning. Hver Flow-komponent indeholder også indlejrede endepunkter, der kan skjules eller tilsidesættes med forskellige slutpunkter.

Dette er de 11 kernestrømbyggesten.

Der er i alt 11 varianter for hver retning. For eksempel:

  1. Flow / Right / Straight
  2. Flow / Right / Curve / Down / Straight
  3. Flow / Right / Curve / Down / U-turn
  4. Flow / Højre / kurve / ned / krok
  5. Flow / Right / Curve / Up / Straight
  6. Flow / Right / Curve / Up / U-turn
  7. Flow / Højre / kurve / op / krog
  8. Flow / højre / slange / ned / lige
  9. Flow / Højre / Slange / Ned / Krok
  10. Flow / højre / slange / op / lige
  11. Flow / højre / slange / op / krog

Kraner og interaktioner

Kraner er beregnet til brug oven på UI-skærmdesign, når du lægger flowdokumenter. De følger det samme navnemønster som Flow-komponenter. Hvert slutpunkt er forud tilsidesat med Tap-slutpunktet og kan desuden ændres til andre interaktioner, såsom Swipe, Long Press og Double Tap.

Slutpunkter

I Flowkit 2.0 er hvert enkelt slutpunkt den samme dimension og kan udskiftes med enhver anden slutpunktforekomst for fuld tilpasning. Disse inkluderer cirkler, pile, vandhaner, swipes og mere.

Eksempel på højt niveau ved hjælp af Flowkit

blokke

Blokke bruges som hovedafsnit i brugerstrømme. Ligesom enhver anden komponent er de bygget på et 360x360 net. Der er flere blokkeindstillinger, som f.eks. Standard, stiplet, vægt og fast.

Der er også enhedsblokke til iOS, Android og browser.

Etiketter og kommentarer

Der er flere etiketformater, herunder solide og konturversioner af standard, rød, blå og grøn. Etiketter er beregnet til brug med Flow- eller Tap-linjer for at give mere kontekst om en bestemt brugerstier.

Der er to typer annotationskomponenter. De generelle annotationsetiketter kan bruges overalt i din strøm for at give mere situationskontekst, mens annotationspunkterne er beregnet til at udråbe specifikke områder i din skærmdesign.

Mørk tilstand

I min bedste Mugatu-stemme ...

“Mørk tilstand. Så varmt lige nu. ”

Flowkit 2.0 kommer med en omvendt farveindstilling til mørke grænseflader, mørke baggrunde og dem, der generelt kan lide at leve livet på den mørke side.

Ok godt. Hvordan bruger jeg det egentlig?

Da Flowkit blev oprettet i både Figma og Sketch, er installationen af ​​biblioteket ganske enkel, og der kræves ingen yderligere software.

Installation i Figma

Figma kræver, at brugerne har en betalt Team-konto for at oprette og få adgang til Figma-biblioteker. For at bruge Flowkit som et delt bibliotek mellem brugere og filer, skal du og dit team have en betalt Figma Team-konto.

  • Åbn flowkit-v2.fig med Figma.
  • Klik på bogikonet øverst til højre for at få adgang til biblioteker.
  • Naviger til Flowkit 2.0-linjeposten, og klik på Publicer.
  • Opret et Team-projekt kaldet Flowkit og klik på Move.
  • Flowkit vil nu være tilgængeligt som et bibliotek på tværs af alle Team-projekter.
  • For flere oplysninger om Figma-biblioteker, kan du læse Figmas dokumentation.
  • Sørg for, at du har den rette Flowkit Team-licens til at dele biblioteket med dit designteam. Har du en personlig licens og skal du opgradere? Fortæl mig det, og jeg tilslutter dig en opdateringskuponkode.
Gratis Figma-konti
Hvis du har en gratis Figma-konto, anbefales det, at du opretter brugerstrømme som yderligere sider inde i Flowkit-filen for at udnytte aktiverne som komponenter.

Installation i Sketch

Installation af Flowkit-biblioteket gør det tilgængeligt til brug med alle dine Sketch-filer.

  • Åbn Sketch-præferencer, naviger til fanen Biblioteker.
  • Vælg Tilføj bibliotek ... nederst til venstre.
  • Vælg flowkit-v2.sketch, og klik på Åbn
  • Nu er du klar til at bruge Flowkit 2.0 i ethvert Sketch 52+ -dokument.
Sketch Runner + Flowkit
Det anbefales stærkt at bruge Flowkit med Sketch Runner. Du kan downloade det gratis Sketch Runner-plugin her. Sketch Runner giver dig mulighed for at bruge tastaturkommandoer til at indsætte Flowkit-bibliotekssymboler på dit lærred. Brug ⌘ "til at åbne Sketch Runner, og skriv derefter det nemt at huske ™ Flowkit-navnekonvention Type / Retning 1 / Modifier 1 / Retning 2 / Modifier 2 for at placere det ønskede symbol.
Download dette gratis genvejsplugin for at bruge Flowkit endnu hurtigere.

Oprettelse af flow på højt niveau med Flowkit

Hver hovedkomponent inde i Flowkit er baseret på et 360x360 gitter. Hver af dem blev designet til at have 0px margen på alle sider, når man forbinder blokke og strømme.

Det anbefales at oprette en strøm på højt niveau fokuseret på en bestemt sektion eller funktion i dit projekt, pr. Stort tegnebræt, der senere kan deles eller eksporteres.

Strømme på højt niveau i Figma

  • Tryk på ⌥2 eller klik på komponentikonet nederst til venstre for at få adgang til Flowkit i panelet Komponenter.
  • Øverst på panelet Komponenter, søg efter blokstandard, vælg en blokkomponent og placer den på lærredet.
  • Søg nu efter flow til højre, vælg en flowkomponent og placer den på lærredet.
  • Fortsæt med at tilføje komponenter ved at søge og navigere efter komponentlisten efter behov.

Flow på højt niveau i Sketch

  • Brug ⌘ "til at åbne Sketch Runner.
  • Skriv blok standard og tryk på return.
  • Brug ⌘ "igen, og skriv strømmen lige ud.
  • Fortsæt med at tilføje komponenter med Sketch Runner eller ved at navigere i Flowkit-symbollisten fra Sketch-app-værktøjslinjen.

Skærm til skærmstrømme

Anbring ikke Flowkit-komponenterne oven på tegnebræt eller rammer, og prøv at forbinde dem til andre tegnebræt eller rammer. Dette vil resultere i klippede komponenter og ulykkelige Flowkit-brugere.

Placer Flowkit-komponenterne oven på artboard-forekomster på et gigantisk artboard. Dette er den anbefalede skærmstrømningsteknik, når du bruger Flowkit.

Der er forskellige måder at oprette skærmstrømme på både Figma og Sketch - dynamiske skærme og eksporterede skærme.

Skærmen flyder i Figma

Dynamiske skærme (anbefales)

  • Vælg en ramme, og tryk på ⌘⌥K for at konvertere til en komponent
  • Kopier og indsæt en forekomst af din rammekomponent på en større ramme for at begynde at opbygge din strøm.
  • Når din første rammeforekomst er på plads, skal du navigere til komponentpanelet med ⌥2 og søge efter tryk let til højre.
  • Skyl og gentag om nødvendigt.
  • Eventuelle justeringer foretaget på dine master frames afspejles automatisk i din flow frame.
  • Glem ikke at flytte dine flowkomponenter, hvis du refactor dine design.

Eksporterede skærme (alternativ)

  • Dette er en hurtig måde at skabe en strøm på, når dynamiske skærme ikke betyder noget.
  • Højreklik på en hvilken som helst ramme og vælg Kopier som> Kopier som PNG.
  • Indsæt bitmappen på din store strømningsramme.
  • Tryk på ⌥2 eller klik på komponentikonet nederst til venstre for at få adgang til Flowkit i panelet Komponenter.
  • Søg efter tryk højre lige, og anbring flowkomponenten på din store strømningsramme.
  • Skyl og gentag om nødvendigt.

Skærmen flyder i skitse

Dynamiske skærme med plugins

  • Installer enten gratis vinkel eller magi spejl plugin.
  • Opret et stort tegnebræt til at indeholde dine skærmstrømme.
  • Tegn et rektangel i samme størrelse som det første tegnebræt, du gerne vil bruge.
  • Anvend Magic Mirror eller Angle plugin på rektanglet for at spejle dit tegnebræt. Se plugin-dokumentationen for at få flere oplysninger om dette.
  • Brug Sketch Runner ⌘ "og søg tryk let til højre for at placere dit første flow-symbol.
  • Skyl og gentag om nødvendigt.

Dynamiske skærme med symboler

  • Konverter dine tegnebræt til symboler.
  • Opret et stort tegnebræt til at indeholde dine skærmstrømme.
  • Placer symbolforekomsten af ​​dit tegnebræt på det store tegnebræt.
  • Brug Sketch Runner ⌘ "og søg tryk let til højre for at placere dit første flow-symbol.
  • Skyl og gentag om nødvendigt.

Eksporterede statiske skærme

  • Vælg et tegnebræt, og vælg Gør eksporterbar nederst til højre på kontrolpanelet
  • Brug Sketch Runner ⌘ "og søg tryk let til højre for at placere dit første flow-symbol.
  • Skyl og gentag om nødvendigt.

tilsidesætter

Uanset om du bygger komplekse strømme eller skifter interaktioner på tappekomponenter, leveres Flowkit med masser af forbygde overstyringsfunktioner til at skjule eller vise bestemte slutpunkter.

Sammenkobling af strømningskomponenter

Der er tidspunkter, hvor det er nødvendigt at knytte flere flowkomponenter sammen for at give dig bare den skøre linje, du ønsker i dit dokument. Du kan opnå udseendet af en kontinuerlig linje ved at skjule de indlejrede endestykker.

Opbygning af en kompleks strøm i FigmaOpbygning af en kompleks strømning i Sketch

Ændring af trykinteraktioner

Standardinteraktion for skærmstrømme er tap, men det kan let tilsidesættes med dobbelttryk, svej (op, ned, venstre, højre) og lang tryk.

Overstyres i FigmaTilsidesætter i skitse

Snag Flowkit til dig eller dit team

Besøg https://useflowkit.com og tag den licens, der passer til dig!

Har du stadig spørgsmål? Jeg ville være glad for at hjælpe dig, bare twit til mig.