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
• Bij het frame moet "Layout" actief staan in het properties-panel

Frame vs stack

Wanneer je "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

Oefening 2

• Bouw verder op de structuur uit oefening 1
• Groepeer de zaken die samen horen in een frame,
  voeg telkens layout toe.
• Pas de instellingen in het layout paneel aan om tot een logisch resultaat te komen
• Hernoem je frames/stacks layers naar een logische naam

💡Tip

Wanneer je klikt op een element, selecteer je bij Framer standaard het child element, niet de groep waar het element in zit. Bij Figma is dit omgekeerd: je selecteert standaard de groep, en moet dubbelklikken om het child-element daarbinnen te selecteren.​

Als je dit wil aanpassen zodat de selectie werkt zoals in Figma:

• Framer menu > Preferences > deselect "Use Direct selection"

Sizing

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

Width & height: Fixed

Fixed betekend dat een frame of een item een vaste breedte of hoogte krijgt.

• Meestal standaard instelling
• Houdt geen rekening met de lengte van tekst, padding die wordt toegevoegd...

Width & height: Fixed

Width op "Fixed" zetten werkt wel goed samen met constraints. Wanneer je een item even breed zet als de pagina, zal je zien dat de constraints automatisch mee aangepast worden

• Hierdoor schaalt een item wel mee met de paginabreedte

Width & height: Fit Content

Bij "Fit Content" past een parent-element zijn breedte of hoogte automatisch aan aan de content. "Fit content" gebruik je meestal voor "Height"

• Een button die meegroeit met de lengte van de tekst
• Een sectie die langer wordt bij meerdere blokken
• ....

Width & height: Fill Content

Bij "Fill Content" past een child-element zijn breedte of hoogte automatisch aan aan de breedte of hoogte van het parent element.

Width & height: Fill Content

Wanneer meerdere blokken naast elkaar staan, kan je bij "Fill Content" spelen met fractions. Dit bepaalt hoe de breedte verdeelt wordt onder de verschillende blokken.

Width & height: Fill Content

Width & height: Fill Content

Sizing

Oefening 3

• Bouw verder op oefening 2
• Selecteer elk element in je lagenpaneel en ga naar de sizing instellingen. Speel met de opties tot je het gewenste resultaat krijgt
• Ga naar de preview-modus en schaal je scherm groter en kleiner om te kijken of de instellingen goed staan.
• Selecteer de volledige pagina (klik op het breakpoint) en voeg "Layout" toe.

Oefening 4

• Voeg zelf een nieuwe sectie met drie cards toe, let daarbij op de layout en sizing instellingen 
• Details en specs vind je terug op de oefening op canvas

Grids

Grids

Wat is grid?

De layout instellingen die we tot nu toe kennen lieten ons toe om blokken horizontaal of verticaal uit te lijnen binnen een frame (stack)

Wanneer je design ingewikkelder wordt, kan je ook gebruik maken van grid. Hiermee kan je complexe en flexibele layouts samenstellen via een grid dat je zelf instelt.

Wat is grid?

Wat is grid?

Bij een grid stel je eerst in hoeveel rijen en kolommen jouw grid bevat, daarna kies je hoeveel rijen en kolommen de blokken binnen het grid mogen innemen

Wat is grid?

Bij een grid stel je eerst in hoeveel rijen en kolommen jouw grid bevat, daarna kies je hoeveel rijen en kolommen de blokken binnen het grid mogen innemen

Terminologie

Een grid instellen

Een grid voeg je altijd toe op het parent element van de blokken die je wil uitlijnen. Daarna kan je in het properties paneel instellen hoeveel kolommen en rijen het grid moet hebben

Een item uitlijnen op het grid

De items positioneren zich automatisch op het grid. Als je een item selecteert kan je instellen hoeveel rijen en kolommen de items mogen innemen.

Een item uitlijnen op het grid

Je zal soms de width en height van een item nog moeten aanpassen zodat de hele cell opgevuld wordt

Een item uitlijnen op het grid

Je zal soms de width en height van een item nog moeten aanpassen zodat de hele cell opgevuld wordt

Grid

Oefening 5

Voeg een grid toe op de products section en speel met de instellingen om onderstaand resultaat te krijgen