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

Oefening 2.3

• Maak twee kleurvariaties op de button met combo classes
• Volg het stappenplan van de Canvas oefening

Layout opties

Style panel

• Opmaak & layout toevoegen aan elementen
• Margin, padding, flexbox, kleur, font...
• Ook mogelijk om custom CSS te schrijven

Selectoren

• De manier om elementen te selecteren en een gedefinieerde stijl toe te kennen
• Drie soorten:
  • ​Tag selectors
  • Class selectors
    • ​Base classes
    • Combo classes
    • Global classes
  • Id selectoren

Tag Selectors

• Stijl toepassen op alle elementen van een bepaald type, bv alle h3-elementen
• body, links, h1, h2...
• Gelijk aan type-selector in css:

• Herkennen aan paarse tag-kleur
• Wordt gebruikt voor globale styling

Oefening 2.1

• 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

Class selectors

• Eigen class met stijlen aanmaken en toewijzen aan elementen
• Werkt zoals class-selector in CSS:

• Herkennen aan blauwe tag-kleur
• Wordt het meest gebruikt

Oefening 2.2

• Style de eerste paragraaf door de class "intro" aan te maken
• Style de buttons door de class "primary-button" aan te maken
• Style de diensten door de class "service-item" aan te maken
• Volg het stappenplan van de Canvas oefening

Combo classes

• Extra stijlen toevoegen op een bepaalde class
• Bv: Als je een paarse titel wil maken, voeg je de class "heading" en "purple" toe. In CSS zou dit er zo uitzien:

• De stijl "purple" hangt vast aan "heading" en kan niet apart gebruikt worden

Global classes

• Stijlen combineren, bv dropshadow die doorheen je site terugkomt
• Je maakt aparte class "dropshadow" aan. Deze stijl kan je nu toevoegen bovenop reeds bestaande classes, zoals bv. "service-item"
  → wordt wel toegevoegd als combo class

• Verschil met combo class: global class kan je apart gebruiken en op verschillende elementen toevoegen

Oefening 2.4

• Maak een globale class "dropshadow" aan
• Volg het stappenplan van de Canvas oefening

States

• Verschillende states van bv een button of link opmaken
• Hover, Pressed, Focused, Visited
• Inherit default styling maar kan aangepast worden per state
• Herkennen aan groene kleur

Oefening 2.5

• Maak een hover state aan voor de blauwe button
• Maak een hover state aan voor de bordeaux button
• Volg het stappenplan van de Canvas oefening

Style Selector Panel

• Overzicht van alle tags die aangemaakt en gestyled zijn
• Tag, Class, ID & combo selectors
• Toont CSS code als je hovert over tag
• Zoeken naar tags
• Overbodige tags opruimen

Inheritance van stijlen

• Stijlen worden doorgegeven aan child-elementen (net zoals bij css)

• Geef child-elementen een nieuwe class als je stijlen van het parent-element wil overschrijven

• Kleur label in stylepanel geeft je meer info over van waar de stijl komt

  • Oranje = Stijl inherited van parent

  • Blauw = Stijl komt van deze class

• Stijlen resetten: Alt/option + klik op label in panel

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