Hvordan du kan udvikle en Figma-prototype ved at undersøge mulighederne i WP.

Blokke i Woocommerce

Der findes et meget stort antal blocks i Woocommerce. Denne artikel viser de fleste. Der findes desuden mange plugins og patterns, der giver yderligere muligheder.

Når du skal udvikle et design i WP, så kan “reversed engineering” være en rigtig god ide. Før du designer noget, så må du vide, hvordan de enkelte blocks ser ud og hvilke indstillingsmuligheder der er i dit theme – herunder hvor custom HTML / CSS kan blive nødvendig.

Øvelse

Lav en side, der simpelt hen lister de enkelte blocks, sådan som de ser ud i dit theme.

1. Lav en side med samtlige blocks, som du får brug for i dit design.
2. Inddel dine designs i groups.
3. Gem disse groups som genbrugelige patterns.

Dette er ikke en layout-opgave; men derimod en opgave, der handler om at finde ud, hvordan de enkelte blocks ser ud, således at du kan genskabe dem i Figma.

Reversed engineering handler om at arbejde ud fra det som er kendt. Det er lidt som at designe med Lego-klodser, der jo har en forud defineret form.

Eksempel

Herunder er et eksempel på en liste, der kan bruges til Figma reversed engineering.

---

Søgning

Søg

Søg

Håndplukkede varer

Minikurv

Blokgrupper fra Woocommerce

Etc. etc.

Fortsæt ind til du har et passende antal varer. Se evt. hvordan templates, som shop / butik opgygger groups og patterns, når varer præsenteres.