Wat is Framer?

Framer

• Een low-code/no-code sitebuilder 
• Opgericht in 2014
• Opkomend platform bij freelancers en kleine agencies als alternatief voor traditionele webontwikkeling
• Tegengewicht voor Webflow

Framer vs Webflow:
wat is het verschil?

• Design-first approach: focus op creatieve designs

• Eenvoudigere leercurve voor designers, voelt intuïtief

• Eenvoudig uitgebreide animaties en interacties toevoegen

• Ideaal voor kleinere sites zoals landing pages, portfolio's...

Framer

Framer vs Webflow:
wat is het verschil?

• Focus op performantie: correcte code bij online publiceren

• Grotere leercurve: vooral handig als je al kennis hebt van code

• Sterk eigen CMS systeem

• Ideaal voor kleinere sites, maar ook grotere, complexe sites

Webflow

Voorbeelden

💡 Overzicht van sites in Framer

Starten met Framer

Studenten profiel

Vraag hier je studentenprofiel aan 

Dashboard

• Het overzicht van jouw workspaces en websites

Workspaces

• Vergelijkbaar met een team in Figma
• Je kan switchen tussen verschillende workspaces

Overzicht sites

• Overzicht van al jouw webprojecten
• Per site extra instellingen (via bolletjes menu)

Framer Interface

Framer Editor

= Waar je jouw website samenstelt & opmaakt

3

4

1. Toolbar

2. Left sidebar

3. Properties panel

4. Canvas

Toolbar

1. Menu met acties
2. Insert (secties, componenten, icons...)
3. Layout (frames, grid, stacks...)
4. Text
5. Shapes
6. CMS 
7. Naam van de file (+ url van live site)

13

8. Collaborators in file

9. Customizen talen/regio's

10. Site settings

11. Analytics

12. preview mode

13. Nodig andere collaborators uit

14. Publish: site live zetten

Left sidebar

• Pages: De verschillende pagina's van jouw site
• Layers: lagenpaneel
• Assets: Components, styles, templates...

Properties panel

Inhoud afhankelijk van het element dat je selecteert

• Styling
• Uitlijning
• Animaties
• Accessibility
• ...

Canvas

• Bevat je design
• Toolbar onderaan met hand, comments, darkmode, plugins en zoom

Content toevoegen

& opmaken

Pages

Wanneer je in het linker-panel een pagina opent of een nieuwe page aanmaakt, staat er standaard een lege pagina op desktop-formaat klaar.

• De breedte van de pagina kan je aanpassen
• We zien later hoe we designen voor tablet en mobile

Tekst

• Toevoegen via de toolbar bovenaan of via shortcut T
• Klikken voor tekstblok, slepen voor tekstvlak
• Instellingen rond tekstvlak pas je in properties-panel aan bij "grow"

Tekst stylen

Wanneer je tekst selecteert kan je in de properties-panel zaken aanpassen zoals font, fontsize, color, line height...​

Tekst stylen

Via het plus-icoon rechtsboven in het paneel kan je nog extra styling-opties toevoegen

Fonts

• Standaard: system fonts & Google Fonts
• Mogelijkheid om custom fonts te uploaden
• Adobe fonts helaas niet mogelijk

Images

• Toevoegen via de toolbar bovenaan of via shortcut I
• Er wordt een placeholder toegevoegd op het canvas
• Via properties panel kan je afbeelding bepalen en stylen

Images

Via een ingebouwde plugin kan je snel foto's inladen van bijv. Unsplash en andere gratis beelddatabanken

Layout grid

Om je design uit te lijnen kan je gebruik maken van een layout grid

• Selecteer je breakpoint en voeg guides toe via het properties-panel
• Om de guides te verbergen klik je op het framer-menu linksboven > view > hide guides

Oefening 1

• Maak onderstaande pagina na met tekst en foto
• Voeg een layout grid toe om alles op uit te lijnen
• Details en specs vind je terug op de oefening op canvas

Frames

The box model

Elke website is opgebouwd uit blokken die content bevatten en blokken die andere blokken groeperen

Surf naar een website, open de editor en voeg de volgende code toe
* {border: solid 1px red; !important}

🤓 Tip

The box model: terminologie

• Parent: een blok die andere blokken groepeert
• Children: een blok binnen een andere blok
• Bij verschillende blokken binnen elkaar spreken we van nesting

Frames

In framer noemen we een blok een frame (zoals in Figma)

• Toevoegen via de toolbar bovenaan
• of via Shortcut F

Waarom hebben we Frames nodig?

Frames gebruiken we om layout-opties in te stellen (= Auto Layout). Deze layout-opties hebben we nodig om het design schaalbaar en responsive te maken voor elke schermgrootte.

Items groeperen met frames

Je kan eenvoudig meerdere elementen groeperen in een frame of een tekstblok omzetten in frame

• Selecteer element(en) op het canvas of in de layers-panel
• Rechtermuisknop > Add frame
• Shortcut: command + enter

Designen met frames

Hoe gedetailleerder je design, hoe meer frames je nodig hebt. Dat maak het soms complex.

• Voeg eerst je basis content toe: tekst & afbeeldingen
• Groepeer zaken die (visueel) samenhoren in een frame
• Via het lagenpalet kan je items verplaatsen binnen of buiten bepaalde frames

Positioning &
layout opties

Wat is positioning?

Positioning gaat over hoe en waar een element op een webpagina wordt geplaatst en hoe dit element al dan niet beweegt t.o.v. zijn normale plek of andere elementen

• Moet het element altijd zijn exacte plaats behouden?
• Moet het element schuiven als het scherm groter wordt?
• Moet het element schuiven als andere elementen van plaats veranderen?
• Moet een element meescrollen?
• ...

Positioning in Framer

Position-instellingen pas je aan in het properties-panel. Je hebt de volgende opties:

• Absolute
• Relative
• Sticky
• Fixed

Absolute position

Absolute postion is de standaard instelling in Framer én andere design tools. Het geeft je de vrijheid om een element willekeurig op een canvas te plaatsen en het behoudt deze plaats wanneer de schermgrootte verandert of andere elmenten worden toegevoegd.

Absolute position

Door constraints toe te voegen kan je een absolute element wel laten meeschalen met het scherm.

Absolute position

Relative position

Relative position in Framer betekent dat de positie van een element afhangt van zijn parent-element (het frame waar hij inzit) en de andere child-elementen binnen hetzelfde frame.

• Het element verschuift als je padding toevoegt
• Het element verschuift als een ander element groter wordt
• Het element kan van plaats veranderen met andere items
• ...

Relative position

Wanneer je een element selecteert, zal je merken dat je de instelling "relative" vaak niet zomaar kan aanduiden.

Frames en layout

Er zijn namelijk twee voorwaarden voordat een item (automatisch) relative wordt.

• Je item moet gegroepeerd zijn in een frame
• In het properties-panel moet "Layout" actief staan

Frame vs stack

Wanneer je (auto) layout toevoegt op een frame, zal je merken dat dit in het lagenpaneel aangeduid staat als een "stack".
Een stack is een frame met (auto) layout instellingen.

Frame vs stack

Je kan items ook rechtstreeks groeperen in een stack i.p.v een frame. 

• Nadeel: een stack neemt automatisch de volledige breedte in van je pagina waardoor je opmaak vaker verspringt

Layout

Het layout-paneel bevat gelijkaardige instellingen als auto layout in Figma

• richting
• spreiding
• uitleining
• wrap
• gap
• padding

Relative position & stacks

Sizing

Wanneer je de eerste keer speelt met de layout-instellingen, zal je merken dat niet alles verandert zoals verwacht, dat heeft meestal te maken met de sizing-instelling

Sizing

Wanneer je de eerste keer speelt met de layout-instellingen, zal je merken dat niet alles verandert zoals verwacht, dat heeft meestal te maken met de sizing-instelling

Oefening 2

• Bouw verder op de structuur uit oefening 1
• Gebruik Tag-selectors om de body, H1, H2 en H3 op te maken
• Volg het stappenplan van de Canvas oefening

Fonts

Standaard fonts

• Standaard: webfonts en een beperkt aantal Google fonts
• Weinig keuze, meestal zal je dus een nieuw font moeten inladen

Eigen fonts inladen

• Kan bij site settings
• 3 manieren om naar instellingen te gaan
  • via fonts-panel (bovenaan)
  • Via Webflow-icoon (links boven)
  • Via dashboard

Eigen fonts inladen

Site settings

Google Fonts

• Dropdown bevat alle fonts van fonts.google.com
• Varianten/gewichten en taal kiezen
• Je kan meerdere fonts toevoegen, staan daarna in je style panel

(extra) Custom fonts

• Eigen bestanden uploaden (ttf, otf, woff)
• Zien we niet uitgebreid in deze cursus
• ⚠ Mag enkel met aangekochte fonts waar je de juiste licentie voor hebt

(extra) Adobe fonts

• Om Adobe fonts te kunnen gebruiken moet er een link gemaakt worden met je Adobe account → via API token
• Volg de stappen van deze tutorial

Oefening 3

• Bouw verder oefening 2
• Voeg in je site settings twee nieuwe Google Fonts toe
• Pas deze nieuwe fonts toe in je design
• Maak gebruik van de juiste selectoren en let op je classes
• Uitgebreide uitleg op Canvas

(extra)

Styleguide

Wat is een styleguide

• Een style guide is een aparte pagina waar de belangrijkste html-tags opgelijst staan en waar je al een aantal stijlen definiëert
• Als je een stijl aanpast op deze pagina, wordt de stijl via classes doorgegeven door heel je site
• Kan voor typografie, maar ook kleuren, buttons, componenten...

(Extra) Oefening 4

• Clone de styleguide template
• Voeg je eigen stijlen toe, maak gebruik van selectoren en selectors
• Maak een nieuwe pagina aan en test je stijlen uit
• Uitgebreide uitleg op Canvas