Design systems

Wat is een design system?

Een verzameling van herbruikbare stijlen, componenten en richtlijnen en zorgt voor:

• Visuele consistentie doorheen (meerdere) site(s) en applicatie(s)
• Efficiënt hergebruik van stijlen en UX-patronen
• Betere samenwerking tussen designers onderling en tussen designers en developers

Voorbeelden

• Google's Material Design
• Apple's Human Interface Guidelines
• IBM's Carbon Design System
• Microsoft's Fluent Design System
• Atlassian's Design System
• ...

Design systems in Webflow

Vergelijkbaar met Figma:

• Variables voor kleur, typografie & spacing

Design systems in Webflow

Vergelijkbaar met Figma:

• Variables voor kleur, typografie & spacing
• Components voor structuur en herbruikbare patronen

Variables

Variables in Webflow

Dit zijn herbruikbare tokens voor

• Kleuren
  Primary, Secondary, Background,...
• Typografie:
  Font sizes, font families,... 
• Spacing:
  Padding & margin, gap, border-radius,...

Variables in Webflow

Waarom belangrijk?

• 1 wijziging = overal aangepast
  vb: Geüpdatete brand colors
• Helpt bij consistent design
  vb: Evenredige spacing in sections
• Schaalbaarheid grote projecten
  vb: Samenwerken met meerdere designers

Variables toevoegen

Optie 1: Via 'Variables' tab > '+ New variable'

Optie 2: Rechtstreeks in Styles Panel (Paars bolletje met plusje)

Soorten variabelen
Kleuren

• Text colors
• Background colors
• Border and text stroke colors
• Gradient color stops

Soorten variabelen
Sizes & Percentages

• Spacing (margin and padding) 
• Columns and row gaps
• Position
• Height & width 
• Typografie: font size, line height, letter spacing
• Border radius
• Filter and backdrop filter blur radius
• Drop shadows
• ...

Soorten variabelen
Numbers

• Flex child properties: grow & shrink
• Z-index
• Typography: font weight, line height
• Opaciteit

⚠️ Sommige CSS properties aanvaarden enkel gehele getallen

Soorten variabelen
Font family

Structuur & naming conventions

Gebruik duidelijke prefixes

• Color / <variable name>
• Font / <variable name>
• Space / <variable name>​

Deze zorgen voor een sub heading in je Variables overzicht.

Variables linken aan elkaar

Handig om bijvoorbeeld:

Tip

💡 Tip

• Eerst je basis kleurenset (color stack) te bepalen en die te hergebruiken in contextuele kleurvariabelen

• Een schaalbaar spacing-systeem op te zetten en daaruit consistente marges en paddings voor secties en containers af te leiden

Oefening 1

• Maak 5 kleurvariabelen, 3 typografie-variabelen
  & 3 spacing-variabelen aan
• Pas deze toe op een simpele layout
• Uitgebreide uitleg op canvas

Variable modes
Responsive variables

Mogelijkheid om automatisch andere waarden aan een variable toe te kennen op verschillende breakpoints.

Variables > "+ New mode" (Bovenaan rechts) > Automatic > Selecteer een breakpoint

Variable modes
Responsive variables

• Responsive typografie: grotere headings op desktop dan op mobiel

• Spacing laten toenemen op grotere schermen

Variable modes
Themes

• Variables > "+ New mode" (Bovenaan rechts) > Manual > Selecteer een breakpoint
• Selecteer de 'Variable mode' in het Settings Panel van een element

• Light / dark mode switch

• Verschillende kleurenschema’s voor sub merken

• Seasonal themes (kerst, zomer, promo,...)

❌ Variable modes combineren

Momenteel kan je maar één Variable Mode selecteren per breakpoint.

→ Automatische modus + Manual modus combineren
     lukt dus (nog) niet

Oefening 2

• Maak een nieuwe Variable Mode aan die de spacing & typografie automatisch verkleint vanaf Tablet
• Pas zo nodig de size variables aan op de juiste elementen
• Volledige briefing op Canvas

Components

Wat is een component?

Recap

Een herbruikbaar element met vaste structuur en soms met vaste stijl.

• Card
• Button
• Tag
• Navbar
• Footer
• ...

Wijziging → update wordt doorgevoerd op elke plaats waar het component wordt gebruikt

Components in Webflow

• Nieuw component aanmake
  cmd+shift+A (Mac)
  ctrl+shift+A (Windows)
• Component bewerken
  Dubbelklik op een instantie = edit mode

Tool bar > Components

Oefening 3.A

• In deze oefening maak je een eenvoudig Button component.
• Volledige briefing op Canvas

Component vs. Class

• Class = styling van een element
• Component = bundel van elementen (incl. gedrag & states)​

Classes blijven bruikbaar binnen components.

Oefening 3.B

• In deze oefening maak je een eenvoudig input-veld component voor een formulier.
• Je hergebruikt de eerder gemaakte Button class nu ook op de submit-button.
• Volledige briefing op Canvas

Component states

A11y

Oefening 4

• Pas de nodige styling voor verschillende states toe op het Input Field component en de Button.
• Hou rekening met toegankelijkheid
• Volledige briefing op Canvas

Properties

Component properties

Recap

= instellingen die je aan een Component kunt meegeven om specifieke onderdelen aanpasbaar te maken.

• Tekst

• Afbeeldingen

• Link URL’s

• Knoppen

• Visibility (zichtbaarheid tonen/verbergen)

• ...

Properties aanmaken

• Dubbelklik op het component

• Selecteer het element waarop je een property wilt toevoegen

• Ga naar het Element Settings Panel

• Klik op het Paarse bolletje

• Klik op "Create & connect new property"

Properties aanpassen

Elke aanpasbare property wordt zichtbaar in het rechterpaneel wanneer je een instance van de component selecteert.

Oefening 5

• Input field aanpasbaar maken

Nested components

TODO

(Extra) Libraries

Extra