De la design la codul de reacție prietenos pentru dezvoltatori în câteva minute cu Anima

Acesta este un articol sponsorizat prietenos, scris cu ajutorul amabil al prietenilor noștri dragi de la Anima, care vă ajută să proiectați prototipuri de înaltă fidelitate complet interactive cu Sketch, Figma sau Adobe XD. Mulțumesc!

Promisiunea de proiectare fără întreruperi pentru traducerea codului se întoarce la primii constructori de pagini WYSIWYG. În ciuda obiectivului admirabil, cel mai mare defect al lor (dintre multe) a fost codul oribil pe care l-au generat. Scepticismul rămâne până astăzi și ori de câte ori această idee reapare, cele mai mari preocupări sunt întotdeauna legate de calitatea și mentenabilitatea codului.

Acest lucru este pe cale să se schimbe, deoarece noile produse au făcut salturi mari în direcția corectă. Scopul lor final este de a automatiza procesul de proiectare la cod, dar nu cu prețul calității codului. Unul dintre aceste produse, Anima, încearcă în cele din urmă să reducă decalajul oferind un design complet platformei de dezvoltare.

Ce este Anima?

Anima este un instrument de proiectare până la dezvoltare. Acesta își propune să transforme procesul de transfer al designului într-o colaborare continuă. Designerii pot folosi Anima pentru a crea prototipuri complet receptive, care arată și funcționează exact ca produsul finit (nu este necesară codarea). Dezvoltatorii , la rândul lor, pot prelua aceste modele și le pot exporta în cod React/HTML ușor de dezvoltat. În loc să codifice UI de la zero, ei sunt liberi să se concentreze pe logică și arhitectură.

Face acest lucru cu ajutorul unui plugin care se conectează direct la instrumentul dvs. de proiectare și vă permite să configurați modele și să le sincronizați cu platforma web Anima. Acolo, restul echipei poate accesa prototipul, discuta despre el și alege specificații sau active utile. Pe lângă funcționalitatea de colaborare, le oferă dezvoltatorilor un avans datorită codului generat.

Acest lucru ar putea face o mare diferență în dansul tradițional înainte și înapoi care merge între designeri și dezvoltatori. Păstrează totul într-un singur loc, sincronizat și permite ambelor părți să facă modificări folosind fie cod, fie instrumente de proiectare.

Instalarea pluginului și configurarea unui proiect

Începeți cu Anima este simplu. Mai întâi trebuie să creați un cont și apoi să instalați pluginul. Deși voi folosi Figma pentru această prezentare, Anima acceptă toate instrumentele majore de design: Sketch, Figma și Adobe XD.

• Anima pentru Sketch
• Anima pentru Figma
• Anima pentru Adobe XD

Odată ce ați făcut acest lucru, asigurați-vă că creați un proiect pe platforma Anima - acolo vor apărea design-urile noastre când le sincronizăm.

Pluginul în sine este separat în trei secțiuni principale, fiecare cu o listă de opțiuni. Majoritatea a ceea ce vom face este pur și simplu să selectăm una dintre aceste opțiuni și apoi să aplicăm un anumit strat sau cadru în Figma .

Crearea unui prototip receptiv

În scopul articolului, am proiectat o experiență de onboarding care va fi transformată într-un prototip interactiv. Până acum am pregătit ecrane pentru cele mai comune trei puncte de întrerupere și le-am legat împreună folosind funcțiile de prototipare Figma.

Unul dintre lucrurile interesante pe care le putem realiza cu Anima este realizarea de prototipuri care se potrivesc tuturor dimensiunilor de ecran. Prototipurile tradiționale realizate din imagini pe care se poate face clic sunt statice și adesea eșuează la diferite dimensiuni de ecran.

Pentru a face acest lucru, faceți clic pe opțiunea „Puncte de întrerupere” și Anima vă va cere cadrele pe care doriți să le conectați. Selectați toate cadrele pentru a le adăuga ca puncte de întrerupere. Apoi confirmați selecția făcând clic pe „Terminat”.

După ce sunteți gata, faceți clic pe „Previzualizare în browser” pentru a vedea rezultatul. Atunci Anima vă va converti desenele în cod.

Primul lucru pe care îl veți observa este că prototipul este acum transformat în HTML și CSS. Tot conținutul este selectabil și revine pe măsură ce ecranul este redimensionat. Acest lucru este cel mai vizibil atunci când selectați modul „Respunsiv” în previzualizatorul prototip și vă jucați cu diferite dimensiuni de ecran.

Pentru a obține tranziții mai fine, este important să utilizați caracteristicile de constrângere ale Figma atunci când vă proiectați componentele. Asigurați-vă că bifați și caseta „Utilizați constrângeri Figma” în secțiunea „Aspect” a pluginului.

Dă viață modelelor tale cu straturi inteligente

Putem duce lucrurile puțin mai departe. Deoarece Anima convertește design-urile în cod, posibilitățile sunt nelimitate pentru lucrurile pe care le putem adăuga pentru a face prototipul nostru mai realist.

Animațiile și efectele hover ar fi o modalitate excelentă de a face prototipul mai viu și de a impresiona părțile interesate. Anima oferă o varietate de opțiuni care pot fi aplicate oricărui strat sau componentă. În cazul nostru, vom selecta stratul de titlu, apoi vom alege „Animația de intrare” și „Fade In”. În câmpul de întârziere, vom adăuga 0.5 .

Pentru fiecare câmp, vom adăuga un efect de strălucire la hover. Selectați stratul câmp, apoi „Efectul de trecere” și alegeți „Strălucire”. Repetați același lucru pentru butonul.

Acum că am aplicat toate modificările, putem vedea că prototipul începe să pară un produs real.

Una dintre caracteristicile unice pe care le oferă Anima este capacitatea de a adăuga câmpuri și formulare live la prototipuri. Deoarece proiectăm o experiență de onboarding, aceasta va fi de fapt utilă pentru noi. Introducerea datelor este unul dintre cele mai mari puncte de pierdere în orice experiență de produs și este foarte greu să testați ideile fără a le ține cont.

Similar cu cum am adăugat efectele anterioare, acum selectăm componenta câmp și alegem „Câmp text”. De acolo, va trebui să alegem tipul de câmp de care avem nevoie. Dacă alegem un câmp de parolă, de exemplu, intrarea va fi ascunsă și Anima va adăuga o funcționalitate de afișare/ascundere în câmp.

După cum puteți vedea, câmpurile funcționează acum așa cum este prevăzut. De asemenea, este posibil să aduni toate datele colectate din acele câmpuri într-o foaie de calcul. Selectați butonul „Continuare” și apoi faceți clic pe opțiunea „Butonul de trimitere” din Anima. Aceasta va deschide un dialog suplimentar, în care trebuie să bifăm caseta „Adăugați la foaia de calcul” și să selectați destinațiile de redirecționare în caz de succes sau eșec.

În continuare, vom adăuga o animație Lottie pentru ecranul nostru de succes, deoarece va fi o modalitate excelentă de a face experiența puțin mai captivantă. Pentru asta, trebuie să adăugăm un strat substituent în locul animației, apoi să îl selectăm și să alegem opțiunea „Video / GIF / Lottie” din plugin.

Apoi vom lipi adresa URL a animației noastre Lottie și vom bifa casetele „Redare automată” și „Fără controale”. În cazul nostru, nu dorim să avem comenzi pentru player video, deoarece aceasta este o animație de succes.

Aplicați modificările și deschideți modul de previzualizare pentru a vedea rezultatele. După cum puteți vedea, când completăm câmpurile și trimitem formularul, suntem redirecționați către pagina noastră de succes, cu o animație în buclă.

Partajați modele cu restul echipei

Până în acel moment, lucram la o schiță care era vizibilă doar pentru noi. Acum este timpul să -l împărtășim cu restul echipei . Modul de a face acest lucru în aplicație este făcând clic pe „Previzualizare în browser”, verificați cum arată și, dacă sunteți mulțumit, continuați cu „Sincronizare”.

Toți cei invitați la proiect vor avea acum acces la design și vor putea să previzualizeze, să lase comentarii și să inspecteze codul.

Dezvoltatorii pot obține cod React reutilizabil

După cum am menționat mai devreme, în calitate de dezvoltatori, suntem de obicei sceptici cu privire la instrumentele care generează cod, mai ales pentru că scrierea a ceva de la zero este întotdeauna mai rapidă decât refactorizarea a ceva care a fost scris prost. Pentru a evita acest lucru, Anima a adoptat câteva bune practici pentru a menține codul curat, reutilizabil și concis.

Când trecem la modul „Cod”, putem trece cu mouse-ul și inspectăm elementele designului nostru. Ori de câte ori selectăm un element, vom vedea codul generat dedesubt. Vizualizarea implicită este React , dar putem trece și la HTML și CSS. De asemenea, putem ajusta preferințele în sintaxă și convențiile de denumire.

Clasele refolosesc numele straturilor din instrumentul dvs. de proiectare, dar atât designerii, cât și dezvoltatorii pot redenumi și straturile. Totuși, este important să se convină asupra convențiilor de denumire unificate care să fie clare și directe atât pentru designeri, cât și pentru dezvoltatori.

Chiar dacă am lăsat unele straturi fără nume, dezvoltatorii le pot suprascrie și pot face modificări atunci când este necesar. Această experiență îmi amintește de funcția Inspectare element a Chrome, iar toate modificările sunt salvate și sincronizate cu proiectul.

Dacă utilizați Vue sau Angular, este de așteptat ca Anima să înceapă să accepte și aceste cadre în viitorul apropiat.

Abia aștept

După cum putem vedea, decalajul dintre design și cod continuă să crească. Pentru cei care scriu cod, utilizarea unui astfel de instrument este foarte practică, deoarece poate reduce multă muncă repetitivă în frontend. Pentru cei care proiectează, permite crearea de prototipuri, colaborarea și sincronizarea care ar fi dificil de realizat prin trimiterea de imagini statice înainte și înapoi.

Ceea ce este deja sigur este că Anima elimină o mulțime de activități risipitoare în procesul de transfer și permite atât designerilor, cât și dezvoltatorilor să se concentreze pe ceea ce contează: construirea de produse mai bune. Aștept cu nerăbdare să văd ce urmează în Anima!