Introduktion af Diya - Timeline Animation direkte i Sketch

Diya er et Sketch-plugin, der bringer tidslinje-animation direkte til Sketch. Når vi designer apps eller websteder, bruger vi flere værktøjer til at oprette, prototype og animere vores designs. Men at hoppe mellem værktøjer bare for at teste vores interaktioner er ikke en ideel arbejdsgang. Diyas mål er at bygge bro over dette hul ved at bringe animationsfunktioner direkte ind i Sketch.

Med Diya kan du holde dig inde i Sketch og animere dine designs med rige interaktioner, få vist dem og endda overdrage til udviklere.

Jeg hedder Suresh V. Selvaraj. Jeg er fra Chennai, Indien og er grundlæggeren og producenten af ​​Diya. Lad mig tage dig med på en hurtig rundtur i, hvad du kan opnå med Diya

Tidslinje-animation

Tidslinje-animation i Diya

Du kan tilslutte dine tegnebræt, vælge en interaktionstype, og Diya vil automatisk animere alle dine lag for dig. Du kan derefter justere dine overgange og timing ved hjælp af den indbyggede tidslinje.

Tilpasset lette og fjedre

En kurveeditor giver dig mulighed for at oprette den perfekte lempelse til dine animationer. Eller hvis du foretrækker fjedre, kan du visualisere og anvende disse også.

Symbolanimation

Symbolanimation

Opret en animation en gang og brug dem overalt. Dette er en af ​​de mest brugte og elskede funktioner ved Diya!

Specifikation aflevering

Diya eksporterer en live HTML-prototype med et indbygget spec-ark til dine udviklere. Du behøver ikke at sidde gennem lange møder for at forklare din animation for dem. De kan se animationen og specifikationerne begge på én skærm.

Hvis du er interesseret, kan du prøve Diya med det samme ved at få din gratis kopi https://www.diyahq.com/

Da jeg først annoncerede plugin den 23. november 2017, ramte Diya # 1 på Designer News og # 2 på Product Hunt. I dag animerer designere på Facebook, Google, Plume, Thalmic Labs og mere deres projekter med Diya. Det er klart, at animering i Sketch er et behov for designere over hele verden. I denne artikel vil jeg give dig et bagved kulisserne se på, hvordan Diya begyndte, hvorfor jeg laver dette plugin, og hvad der er i vente i fremtiden.

Begyndelsen

Tilbage i 2014 blev interaktionsdesign langsomt mere mainstream, da jeg frigav min første animationsprototype-app kaldet Mitya. Det blev skrevet i JavaScript ved hjælp af HTML Canvas.

Eksempel på Mitya i 2014

Appen var foran noget andet værktøj på markedet dengang. Desværre var det plaget af tekniske problemer og kunne virkelig ikke få fat på det. For at løse disse problemer besluttede jeg at omskrive hele appen ved hjælp af native macOS-teknologier. Undervejs tilføjede jeg en avanceret tidslinje, scriptfunktioner og HTML-eksport. Men jeg havde undervurderet den tid, en komplet omskrivning ville tage. Da jeg relancerede i 2016, var prototype-markedet allerede blevet overfyldt og begyndte at slå sig ned omkring Framer, Principle og Flinto. Mens Mitya samlet en brugerbase, var det en enorm udfordring at komme alvorligt ind på markedet.

Native Mitya-app

Jeg ledte efter måder at øge Mityas brugerbase på. Mens jeg talte med brugerne, kunne jeg tydeligt se, at markedsbehovet var flyttet ud over et "prototype-værktøj" og i "et designværktøj med prototype". Animationsdesign i UI blev nu mainstream, og designere blev irriterede over konstant at bevæge sig mellem værktøjer for at nå deres mål. Ser jeg på dette behov, indså jeg, at jeg havde to valg. Jeg kunne enten udvide Mitya med UI-designfunktioner, eller jeg kunne bringe animation inde i Sketch.

Pivoten

At udvide Mitya ville tage enorme ressourcer, og det var ikke en praktisk mulighed. Så jeg gik med den anden mulighed. Jeg havde ikke nogen erfaring med at designe avancerede plugins, så jeg begyndte at skrive et par bevis på koncepter. Målet var at se, om jeg kunne integrere mig med Sketch og få det til at føles som om det var en indbygget funktion i appen, snarere end en kludgy tilføjelse.

For at dette skulle ske, havde jeg brug for to ting:

1. Brugergrænsefladen for plugin måtte leve inde i Sketch's UI, både i inspektøren og på lærredet

2. Brug af Gem, fortryd og forny skal være indbygget i Sketch

Tilføjelse til inspektøren blev gjort let med den fremragende ressource af James Tang - Sketch Plugin Xcode Template.

Dernæst prøvede jeg at tilføje mine egne brugerdefinerede visninger på toppen af ​​Sketch's lærred. Dette krævede lidt mere indsats, men i sidste ende var det meget enklere, end jeg forestillede mig.

Når UI'en var taget af, kiggede jeg derefter efter måder at tilslutte sig til Sketchs filsystem. Heldigvis tilføjede Bohemian Coding to funktioner til deres API, som var afgørende for at få Diya til at fungere:

1. De havde åbnet deres filformat og tilladt plugins at gemme data direkte i Sketch-filen

2. Handlingens API gjorde det muligt for plugins at lytte til brugerbegivenheder dybere end nogensinde før

Med alle de tekniske stykker på plads, kunne jeg endelig begynde at arbejde på det faktiske plugin.

Genfødselen

Jeg begyndte at overføre kodebasen for Mitya og bringe den til Diya. Hovedanimations- og preview-motoren blev portet på mindre end to uger. Det meste af den tid blev brugt på at finde ud af, hvordan man læser Sketches data fra dens tegnebræt og lag. Jeg har også forenklet nogle af de komplekse funktioner i Mitya, så jeg kunne nå et v1-produkt hurtigere.

Diya i skitse

Den 23. november 2017 annoncerede jeg projektet offentligt med et enkelt indlæg om DN og Spektrum. Jeg var endnu ikke sikker på, hvor interesserede designere ville være i denne idé. Heldigvis var et stort antal designere interesseret! Diya blev hurtigt top nr. 1 på DN og produkt nr. 2 på produktjagt.

Betaen

Efter meddelelsen, hver dag gennem december 2017 og januar 2018, inviterede jeg et par hundrede brugere til at prøve beta. Deling af en beta er altid en bitter oplevelse. Det er spændende at dele, hvad du har arbejdet med så længe privat, men det er lige så smertefuldt at høre klagerne og crashrapporterne. Heldigvis har jeg mødt nogle meget tålmodige og venlige designere, der har hjulpet Diya med at blive, hvad det er i dag.

Endelig den 22. februar 2017 nåede Diya en åben beta. Siden da har tusinder af designere fra hele verden downloadet Diya. Det har været vidunderligt at høre historier fra brugere om, hvordan Diya har forenklet deres daglige arbejdsgang.

Jeg har oprettet et par videotutorials for at komme i gang! Tjek den hurtige introduktionsvideo nedenfor!

Fremtiden

Jeg arbejder hårdt for at gøre Diya til det bedste animationsværktøj til dig inden for Sketch. Så mange vidunderlige ideer i Diya er baseret på brugerfeedback fra vores fantastiske samfund, som jeg er taknemmelig for

Diya er i øjeblikket i åben beta og vil være kommercielt tilgængelig ved udgangen af ​​denne måned. Du kan deltage i diskussionen om vores Slack og Facebook-gruppe samt følge mine Diya-opdateringer. Du kan også finde mig på Twitter!

Jeg håber du kan lide at animere med Diya!