Figma į HTML, OpenCart ir WordPress: kaip veikia mūsų keitiklis

Figma į HTML keitiklis – tai įrankis, kuris Figma dizaino failą paverčia HTML ir CSS kodu su tokiu pat maketu, šriftais, spalvomis ir tarpais. Kodas vis tiek turi atitikti tuos pačius reikalavimus kaip ir rankomis rašytas: pavyzdžiui, WCAG 2.2 AA lygis įprasto dydžio tekstui reikalauja bent 4,5:1 kontrasto, todėl vien atkartoti dizaino spalvas neužtenka.

Mūsų vidinis keitiklis žengia dar vieną žingsnį: iš prisitaikančio HTML ir CSS jis sukuria OpenCart arba WordPress temą, todėl prekės, kainos ir likučiai ir toliau imami iš pačios parduotuvės. Tai nėra viešas įskiepis: kiekvieną puslapį peržiūri programuotojas, o atsiskaitymo logiką, integracijas ir animacijas kuria rankomis.

Pavyzdžiui, prekės puslapio Figma kadras tampa vienu prisitaikančiu prekės šablonu. Prieš – kadre matyti pavyzdinis pavadinimas ir kaina, po – šablonas rodo tikrą kiekvienos prekės pavadinimą, kainą ir likutį iš OpenCart ir yra patikrintas 1440, 1024, 768 ir 390 px pločiuose.

Keitiklį naudojame kurdami OpenCart ir WordPress svetaines. Jūs atsiunčiate baigtą Figma dizainą, o mes grąžiname veikiantį kodą arba įdiegtą temą, ne neapdorotą eksportą. Įrankis perima matavimus, struktūrą ir pasikartojantį HTML žymėjimą, dėl kurių kodavimas pagal maketą rankomis ilgai užtrunka, o programuotojai savo laiką skiria tam, ko įrankis įvertinti negali.

Kai Figma dizainą į prisitaikantį HTML paverčia įrankis, o ne vien žmogaus rankos, matyti trys praktiniai skirtumai. Pirmoji veikianti versija paruošiama greičiau. Vėlesni dizaino pakeitimai pritaikomi iš naujo, o ne kuriami nuo nulio. O papildomi puslapiai kuriami pagal tą pačią dizaino sistemą ir nenutolsta nuo originalo. Kaip įrankiai ir DI keičia programavimo laiko apskaitą – atskira tema, ją aptariame įraše apie DI padedamo programavimo apmokėjimą.

Keitiklis labiausiai praverčia:

• Dizaineriams, kurie nori, kad svetainėje išliktų jų tarpai, šriftai ir spalvos, o ne apytikslė jų kopija.
• Agentūroms, kurios dizainą kuria pačios ir ieško programavimo partnerio HTML, OpenCart ar WordPress darbams.
• OpenCart parduotuvių ir WordPress svetainių savininkams, turintiems naują dizainą jau naudojamai platformai.
• Naujiems verslams, kuriems pirmą svetainės versiją reikia sukurti pagal patvirtintą dizainą.

Gaunate prisitaikantį HTML ir CSS kodą, OpenCart temą arba WordPress temą – priklauso nuo to, kur dizainas turi veikti. Pradiniai duomenys visada tie patys: Figma failas arba nuoroda į jį su peržiūros teise.

Ką apima kiekvienas rezultatas:

• HTML, CSS ir JavaScript – semantinis, prisitaikantis kodas kiekvienam unikaliam dizaino puslapio šablonui. Jis tinka statinei svetainei arba kaip sąsajos pagrindas jūsų programuotojams.
• OpenCart tema – sukurta iš galutinio HTML ir įdiegiama per OpenCart administravimo skydelį, nekeičiant OpenCart branduolio failų.
• WordPress tema – tame pačiame pirmajame etape sukurtas HTML paverčiamas individualia tema pagal WordPress temų standartus; puslapius, meniu ir paveikslėlius galima redaguoti WordPress administravimo skydelyje.

Figma į HTML ir CSS konvertuojama dviem etapais: pirmiausia sukuriama prisitaikanti kiekvieno puslapio šablono HTML versija, palyginta su Figma kadru, o tada iš to HTML – platformos tema. Kadangi etapai atskirti, dizainas būna galutinai sutvarkytas dar prieš pridedant OpenCart ar WordPress logiką.

Kiekvienas projektas pereina šešis žingsnius:

1. 01Konvertuojame kiekvieną puslapio šabloną: kiekvienas unikalus Figma dizaino puslapis tampa semantiniu, prisitaikančiu HTML, CSS ir JavaScript kodu.
2. 02Lyginame kiekvieną puslapį su Figma keturiuose svarbiausiuose pločiuose – 1440, 1024, 768 ir 390 px – ir tikriname tarpinius pločius, kad maketas laikytųsi ne tik lūžio taškuose, bet ir tarp jų.
3. 03Peržiūrime keitiklio HTML rankomis: programuotojas ištaiso tai, ką įrankis padarė netiksliai, ir užbaigia detales.
4. 04Kuriame OpenCart ar WordPress temą iš peržiūrėto HTML specialiu temų keitikliu, o ne kopijuodami rankomis, todėl matomi tekstai imami iš platformos duomenų kiekviena kalba.
5. 05Pritaikome dizaino atnaujinimus iš naujo, kai dizaineris pakeičia Figma failą, nekartodami viso darbo.
6. 06Grąžiname pataisas į Figmą: gyvos svetainės testavimo metu rastos problemos taisomos pačiame dizaine, todėl kitas dizaino atnaujinimas jų nebesugrąžina.

Figma dizainas tampa OpenCart tema per tris žingsnius: patikriname parduotuvę, peržiūrėtą HTML paverčiame per administravimo skydelį diegiama tema ir kiekvieną šabloną susiejame su OpenCart duomenimis.

1. 01Patikriname parduotuvės OpenCart versiją, dabartinę temą ir įdiegtus plėtinius: filtrų modulis, vieno puslapio atsiskaitymas ar puslapių kūrimo įrankis generuoja savo žymėjimą, kurį naujas dizainas turi stilizuoti, užuot jį ignoravęs.
2. 02Paverčiame peržiūrėtą HTML tema, kuri diegiama per OpenCart administravimo skydelį nekeičiant branduolio failų, todėl būsimi OpenCart ir plėtinių atnaujinimai dizaino neperrašo.
3. 03Susiejame kiekvieną šabloną su OpenCart duomenimis: prekių pavadinimai, kainos, likučiai, parinktys, kategorijos ir visi matomi tekstai imami iš parduotuvės kiekviena kalba, todėl dvikalbėje parduotuvėje teisingai rodomos abi kalbos.

Pirmoji šiuo būdu sukurta mūsų tema naudojama dvikalbėje OpenCart 3.0.3.3 parduotuvėje Lietuvoje.

Kai dizainui reikia funkcijų, kurių viena tema nesuteikia, galime pridėti savo OpenCart modulius iš OpenCart Marketplace: Supplier Import, DPD Tracking, Universal XML Feed ir Product Video. Pavyzdžiui, Product Video prie Journal3 parduotuvių prekių puslapių prideda YouTube, Vimeo ir MP4 vaizdo įrašus.

Figma dizainas tampa WordPress tema per tą patį HTML etapą, po kurio kuriama individuali tema pagal WordPress temų vadove (Theme Handbook) aprašytą struktūrą. Tai bendras WordPress reikalavimas, ne Sparcley taisyklė: blokų temai WordPress reikalauja dviejų failų – style.css ir templates/index.html, – o visi kiti šablonai remiasi šia struktūra.

Kaip Figma dizainą paversti WordPress tema:

1. 01Paverskite dizainą peržiūrėtu, prisitaikančiu HTML – kaip ir kitoms platformoms.
2. 02Susitarkite, ką svetainės savininkas turi galėti keisti – pagrindinę antraštę, komandos sąrašą, kvietimo veikti bloką.
3. 03Sukurkite individualią temą pagal temų vadovą (Theme Handbook): šios dalys tampa redaguojamais laukais, o visa kita lieka susieta su dizainu.
4. 04Susiekite šablonus su WordPress puslapiais, įrašais, meniu ir paveikslėliais, kad juos būtų galima redaguoti administravimo skydelyje.
5. 05Palyginkite kiekvieną šabloną su jo Figma kadru ir peržiūrėkite rankomis prieš perduodami.

Dizainas saugomas temoje, o ne atskiruose puslapiuose, todėl redaguojant puslapį dizainas nekeičiamas, o WordPress atnaujinimai temos neliečia.

Palyginimas pikselis į pikselį ir programuotojo peržiūra abiem platformoms tie patys. Skiriasi duomenys: OpenCart tema prekes ir kainas ima iš parduotuvės, o WordPress tema puslapius ir įrašus – iš svetainės.

Kiekvieną puslapio šabloną lyginame su jo Figma kadru šešiuose ekrano pločiuose, nuo 1440 iki 390 px, ir skirtumus ištaisome prieš perduodami darbą. Tie šeši pločiai – 1440, 1200, 1024, 992, 768 ir 390 px, o palyginimas matuojamas, ne vertinamas „iš akies“.

Prieš lyginant abi pusės užpildomos tuo pačiu turiniu, todėl ilgesnis prekės pavadinimas ar kita kaina negali paslėpti maketo klaidos. Krepšelio ir atsiskaitymo puslapiai lyginami taip pat kaip visi kiti šablonai, nes būtent ten maketo klaida parduotuvei kainuoja daugiausia.

Kai kurie skirtumai tikėtini ir paliekami sąmoningai: naršyklės šriftus atvaizduoja šiek tiek kitaip nei Figma, o tikras turinys dažnai būna ilgesnis ar trumpesnis nei maketuose.

Atitiktis dizainui – tik viena iš kelių patikrų. Puslapio greitis, struktūriniai duomenys ir prieinamumas tikrinami atskirai; kaip greitis užtikrinamas Next.js ir WordPress svetainėse, lyginame įraše apie Next.js svetainių kūrimo technologijas.

Po konvertavimo programuotojui vis dar lieka sąveikos, verslo logika, integracijos, turinio valdymas ir galutinė kokybės patikra. Keitiklis susitvarko su maketu, stiliais ir struktūra, bet nesukuria funkcijų, kurių Figma faile nėra.

Tvarkingas Figma failas nėra būtina sąlyga, bet nuo jo priklauso darbo apimtis. Laisvai sukurtam failui – be auto layout, su atjungtais komponentais ir persidengiančiais sluoksniais – reikia daugiau rankinių pataisų nei failui su auto layout, neatjungtais komponentais ir pavadintais kadrais. Kuris atvejis jūsų, pasakome vos peržiūrėję failą, o ne išrašę sąskaitą.

Net ir su tvarkingu failu šioms penkioms sritims reikia programuotojo rankų:

• Sąveikos ir animacijos – Figma prototipų perėjimai, slankikliai, dideli išskleidžiami meniu ir užvedimo efektai perkuriami kodu.
• Verslo logika – atsiskaitymo žingsniai, pristatymo ir mokėjimo taisyklės, prekių filtrai, paieška ir klientų paskyros.
• Formos ir integracijos – laukų tikrinimas, laiškų siuntimas, CRM jungtys, analitika ir sekimas.
• Turinio valdymas – sprendimas, kuriuos laukus redaguos svetainės savininkas, ir jų susiejimas su OpenCart ar WordPress.
• Kokybės patikra – prieinamumas, puslapio greitis, testavimas skirtingose naršyklėse ir įrenginiuose bei tikras turinys, kuris būna ilgesnis ar trumpesnis nei maketuose.

Svetainės pagal jūsų Figma dizainą kaina skaičiuojama kiekvienam unikaliam puslapio šablonui, o mokama trimis dalimis: 30 % – pradedant programuoti, 40 % – baigus programuoti ir pradedant testuoti, 30 % – patvirtinus ir perdavus darbą. Kainą ir terminą lemia trys dalykai: kiek dizaine unikalių šablonų, kuriai platformai jie skirti ir kiek funkcijų reikia programuoti rankomis.

Norėdami gauti pasiūlymą, atsiųskite Figma nuorodą ir nurodykite, kur dizainas turi veikti: HTML ir CSS, OpenCart ar WordPress. Pridėkite platformos versiją, dabartinę temą ir būtinas funkcijas. Peržiūrime failą, nurodome, kas pareikalaus papildomo darbo, ir pateikiame darbų apimtį, kainą ir terminą.

Kiekvienam projektui suteikiama 12 mėnesių garantija ir 3 mėnesiai nemokamos prieglobos.

Paleidus svetainę, ją galime toliau prižiūrėti pagal mėnesinį svetainės priežiūros planą „Skaitmeninė priežiūra“.