Skip to content
Studiu de caz · FB-Media (proiect intern) 2026

Patru teme WordPress personalizate din Figma.

Patru teme WordPress personalizate proiectate în Figma și construite ca teme block de producție, sport, politică, lifestyle, business.

4

Teme livrate

Figma → PHP

Sursă

Brief

Patru teme WordPress pentru proprietățile FB-Media, sport, politică, lifestyle, business, construite ca teme block de producție. Fiecare temă onorează un sistem tipografic per nișă proiectat în Figma. Brief-ul a insistat pe lipsă de overlay-uri de teme terțe: temele trebuie să fie cod original, deținute de client, modificabile fără un plan de upgrade.

GDPR și specificul pieței românești încorporate: banner de cookie-uri per pagină, casetă de autor pe fiecare articol, pagini de contact + confidențialitate + cookie-uri cu identitatea SRL inline.

Arhitectură

Fiecare temă este un director standalone de temă block (wp-content/themes/<site>-figma). Nu împărtășesc cod, compromisul a fost deliberat. Partajarea unei teme de bază ar fi însemnat că schimbările breaking se propagă pe patru proprietăți de producție pe același deploy. Temele independente înseamnă că un tweak la tema de sport poate fi livrat fără să se atingă tema de politică.

Calea Figma → PHP folosește Figma Variables pentru token-uri (culoare, typography, spațiere) exportate către o schemă theme.json per temă pentru block-editor. Pattern-urile de block reflectă componentele Figma Auto-Layout 1-la-1. Fonturile personalizate (Inter pentru politică + business, Playfair Display pentru lifestyle, Bebas Neue pentru sport) sunt găzduite local ca woff2 preîncărcate.

Un mic mu-plugin per site împachetează banner-ul de cookie-uri + caseta de autor + shortcode-urile de formular de contact, acestea trăiesc în afara temei astfel încât o schimbare de temă să nu le strice.

Rezultate

  • 4 teme livrate, sport, politică, lifestyle, business.
  • Cod original, clienții dețin direct directoarele de teme.
  • Tipografie per nișă, fiecare temă onorează limbajul vizual editorial al nișei sale.
  • GDPR-ready, banner cookie-uri, casetă autor, pagini legale incluse.
  • Lighthouse mobile: peste 90 pe toate cele patru site-uri la lansare (preîncărcare fonturi + JS minim).

Ce urmează

Două elemente pe lista pentru iterația următoare:

  1. Crează un singur fișier CSS partajat de design-token-uri pe care toate cele patru teme să-l consume, drift-ul tipografic între teme a fost cel mai mare cost de QA în săptămâna de lansare FB-Media. Un tokens.css partajat (cu suprascrieri per site) ar fi prins drift-ul mai devreme.
  2. Mută codul mu-plugin într-un pachet composer privat, în prezent fiecare site are propria copie a codului de cookie + autor + contact. Un pachet partajat (versionat, instalabil per site) ar permite ca actualizările să curgă prin toate cele patru site-uri deodată.

The tech

Tehnologii folosite

  • WordPress
  • PHP
  • Figma

Ce aș face altfel

Aș crea un singur fișier CSS partajat de design-token-uri pe care toate cele patru teme să-l consume, drift-ul tipografic între teme a fost cel mai mare cost de QA.

Vrei ceva similar pentru echipa ta?

Apel de descoperire de 30 de minute. Fără prezentare comercială. Discutăm despre ce vrei să livrezi, ce te încurcă și dacă te pot ajuta. Dacă da, primești o ofertă fixă într-o săptămână.