Ühtne disaini-koodiks platvorm, nagu Anima, võib aidata teil veebisaitide ja rakenduste arendusprojekte kiirendada.
Anima on Figma, Adobe XD ja Sketchi disaini-koodiks pistikprogramm. See võimaldab disaineritel luua mobiilirakenduste, sihtlehtede või veebisaitide jaoks ülitäpsusega prototüüpe ning arendajad saavad hõlpsalt hankida reageerivaid, puhtaid ja korduvkasutatavaid koode, mis on ka tootmisvalmis.
See artikkel tutvustab Anima pistikprogrammi kujundamise ja kodeerimise funktsioone. Jätkake lugemist, et teada saada, kas see rakendus on teie kasutajaliidese/UX-i disainiprojektide jaoks kasulik.
1. Koodi teisendamine
The Anima pistikprogramm teisendab mobiilirakenduste või veebisaitide visuaalsed kujundused kiiresti arendajasõbralikeks koodideks. Saate hankida koode erinevates arenduskeeltes, nagu Vue, React, CSS, Sass ja HTML. Anima loodud koodid on kasutatavad ja mitte ainult masinaga genereeritud.
Arendajad saavad kogu disainikoodis navigeerida ja teha soovitud muudatusi. Samuti saavad nad kontrollida mis tahes muudatusi samal tööalal, kuna Anima kuvab programmeerimiskoodi graafilise esituse.
Anima töötab projektide kallal, et pakkuda Swiftile, ReactNative'ile ja Angularile uusi koodi teisendamise võimalusi.
2. Looge kõrge täpsusega prototüüpe
Anima pistikprogramm aitab teil Adobe XD, Figma või Sketchi disainiprojektide põhjal luua ülitäpsusega prototüüpe. Saate vaadata prototüüpi, mis meenutab tõeliselt lõplikku veebisaiti või rakendust, ja sellega suhelda.
Seotud: Parimad Figma funktsioonid, mida kõik disainerid peaksid kasutama
Saate lisada oma kujunduselementidesse katkestuspunkte ja visualiseerida oma prototüüpi brauseri reaalajas vaates. Saate muudatusi teha, kui vaatate veebisaidi, tahvelarvuti või mobiiliekraani suurust pidevalt üle.
Pistikprogramm pakub ka sisseehitatud efekte, et muuta staatilised kujundused elavateks elementideks. Saate lisada parallaksikerimise animatsiooni, rippmenüüd, hõljutusefekte, ekraani laadimise animatsioone, videoid ja palju muud.
Kokkuvõttes võimaldab see teil üle anda disaini prototüübi, millel on kõik vajalikud kasutajaliidese komponendid ja disainivarad.
3. Ekspordi Vue/React koodid tootmiseks
Saate hõlpsasti eksportida prototüübi disaini Vue/Reacti koode testimiseks, eeltootmiseks ja tootmiseks. Samuti saate kiiresti koodipõhise veebisaidi välja töötada, kasutades oma disainiprojekti HTML/CSS-koode.
Saate oma veebisaidi avaldada otse Figmast, Sketchist või Adobe XD-st. Esiteks kasutage Eelvaade brauseris funktsioonid veebisaidi välimuse testimiseks. Seejärel kasutage lihtsalt Sünkrooni Animaga funktsioon projekti ühendamiseks oma Anima pistikprogrammi armatuurlauaga.
Anima projekti tööruumis saate veebisaidi linki jagada kaastöötajate või klientidega. Samuti saate eksportida veebisaidi HTML/CSS-koode ja avaldada veebisaidi oma domeenis või jagada koodi veebisaidi arendajaga edasiseks töötlemiseks.
4. Töö materjalidisainiga
Anima toob teieni täiesti uut Materjalide disain Google'i viimaste juhiste põhjal. Materjalikujunduse teegile pääsete juurde aadressilt Vidinateek Anima pistikprogrammi Adobe XD, Figma või Sketchi jaoks.
Anima materjalikomponendid on interaktiivsed ehitusploki elemendid veebisaitide või mobiilirakenduste jaoks kaasaegse ja stiilse kasutajaliidese loomiseks. Saate surfata tohutul hulgal komponentide loendis ja lihtsalt pukseerida oma Figma, Adobe XD või Sketchi disainitööruumi.
Anima Material Designi teek koosneb praeguse seisuga üheksast komponendimenüüst: nupp, märkeruut, rippmenüü, FAB, Google'i fondi ikoon, raadionupp, liugur, lüliti ja tekstiväli.
Seotud: Mis on teie materjal? Kõik, mida peate Androidi uue välimuse kohta teadma
Arendaja väidab ka, et Anima on ainus platvorm, mis pakub tõeliselt toimivat materjalikujundust, mis on reaalajas ja reageeriv. Need kujunduselemendid tõlgitakse automaatselt ka neile vastavateks koodideks.
5. Koodipõhine prototüübi testimine
Võimalik, et kasutate kasutajaliidese disainiprojektide jaoks populaarseid disainitööriistu, nagu Adobe XD, Figma ja Sketch. Kuid nad ei toeta koodipõhist ja reaalajas prototüüpimist. Anima on üks populaarsemaid pistikprogramme, mis suudab genereerida prototüübi testimiseks vajalikku koodi.
Prototüübi testimise tööriistad, nagu Fullstory ja Hotjar, nõuavad edukaks kasutajatestimiseks teie disainiprojektis järgmist.
- Tundlikud disainielemendid.
- Interaktiivsed nupud, rippmenüüd, tekstiväljad ja meedia.
- Funktsionaalne kood, mille saate ülaltoodud testimistööriistades üles laadida.
Anima pistikprogramm aitab teil täita kõiki ülaltoodud nõudeid veebisaidi või mobiilirakenduse prototüübi edukaks ja lihtsaks testimiseks.
Anima teeb visuaalne koostöö disaini alal ja arendusprojektid on reaalajas kommentaaride abil lihtsamad. Kui teete koostööd mitme inimesega, nagu projektijuhid, disainerid, arendajad ja kliendid, on see ideaalne suhtlusmeedium kõigile.
Selle asemel, et kirjeldada oma töö edenemist meili teel, kirjutage lühikesed kommentaarid otse projekti sisse. Teie kaastöötaja näeb täpselt, mida te üritate edasi anda. Niimoodi stsenaariumi visualiseerides säästab igaüks aega ja väldib võimalikke konflikte.
7. Hallake ja jagage komponente
Anima koostöötööruum on keskne koht, kus iga projekti liige jagab ja haldab komponente või varasid. Saate hõlpsasti vältida ajaraiskamist, kui otsite projekti koosolekutel disainikomponente või koodivarasid.
The Koodirežiim jagab tööruumi kolmeks erinevaks osaks. Saate juurdepääsu Komponent ja Stiilijuhend ekraani alumisest menüüst. Parempoolses menüüs on kõik teie varad Varad sakk.
Ekraani keskel on kujunduse reaalajas kuva. Disainerid saavad arendajale viitamiseks luua ka kohandatud komponentide teegi.
8. Töötage reaalajas mustandite kallal
Paljud mobiilirakenduste ja veebisaitide arendusprojektid kannatavad mitme iteratsiooni tõttu ajakadu. Enamikul juhtudel on need iteratsioonid mõeldud lihtsalt väikesteks muudatusteks, mida disainer või arendaja saab teha mõne minutiga.
Teie disainer ja arendaja saavad projektiga pidevalt töötada ilma aega kaotamata. Disainer saab sünkroonida Figma, Sketchi või Adobe XD prototüübi uue versiooni Anima projekti armatuurlauale. Sealt pääseb arendaja juurde uuele kujundusele ja jätkab projektiga. Nii säästate teie ja teie meeskond reaalajas mustandite kallal töötades väärtuslikku aega.
Design-to-Code on Anima abil lihtne
Eespool nimetatud funktsioonid viitavad selgelt sellele, et disaini-koodiks muutev Anima pistikprogramm eemaldab mitmed kitsaskohad, mida paljud UI/UX arendusprojektid kannatavad. Teie rakenduse või veebisaidi kujundaja ja arendaja saavad teha tihedat koostööd, et luua töötav prototüüp, mis sarnaneb teie visiooniga.
Unustage tülikad disaini üleandmised, vigased kujunduskoodid ja viivitused reaalajas veebisaidi või rakenduse hankimisel. Nüüd saate keskenduda rohkem graafilise disaini elementidele, et oma sihtrühmale muljet avaldada.
Kas uus graafiline disain? Need elemendid on atraktiivse disaini loomisel võtmetähtsusega.
Loe edasi
- Loominguline
- Tootlikkus
- Interneti-tööriistad
- Rakenduste arendus
- Veebiarendus
Tamal on MakeUseOfi vabakutseline kirjanik. Pärast märkimisväärse kogemuse omandamist tehnoloogia, rahanduse ja ärivaldkonnas protsesse oma eelmises töökohas IT konsultatsioonifirmas, võttis ta 3 aastat tagasi täiskohaga erialaks kirjutamise. Kuigi ta ei kirjuta tootlikkusest ja viimastest tehnikauudistest, armastab ta mängida Splinter Celli ja vaadata Netflixi/Prime Videot.
Liituge meie uudiskirjaga
Liituge meie uudiskirjaga tehniliste näpunäidete, arvustuste, tasuta e-raamatute ja eksklusiivsete pakkumiste saamiseks!
Tellimiseks klõpsake siin
