Pages & links

Meerdere pagina's

We zagen al dat je in de linkerzijbalk verschillende pagina's kan aanmaken, deze komen overeen met verschillende pagina's in je website.

⚠️ Let op: In Figma plaats je verschillende pagina's naast elkaar in dezelfde werkruimte, maar in Framer maak je telkens een nieuwe pagina aan in een nieuwe werkruimte

Subpagina's

Binnen deze pagina's kan je ook pagina's groeperen als subpagina, zoals bijv. een blog die doorlinkt naar verschillende blogposts.

URL

Let goed op de benaming van je pagina's, deze zullen namelijk terugkomen in de URL van je website

Een link toevoegen

Wanneer je een tekstblok, frame of blok selecteert, kan je in de rechterbalk een link aanmaken. Dat doe je door "Link To" in te vullen met:

• Een andere pagina uit je website
• Een link naar een externe website
• De naam van een sectie op dezelfde pagina

Een link toevoegen

New tab: moet de link zich openen in hetzelfde scherm of moet er automatisch een nieuw tabblad openen?

• Pagina in zelfde website: zelfde scherm
• Externe website: nieuw tabblad

Een link stylen

Een link krijgt automatisch een blauwe kleur. Deze styling kan je aanpassen door een nieuwe Link Style aan te maken

Een link stylen

Bij een Link Style kan je eerst de standaard (default) styling aanpassen:
hoe de link eruitziet zonder dat er iets gebeurt

Hover state

Wanneer je bij "Hover" op het plus-icoon klikt, kan je kiezen wat er in de hover-state moet veranderen. Je kan meerdere properties toevoegen & stylen.

Transition

Door een transition toe te voegen maak je de overgang tussen de default state en de hover state zachter i.p.v. instant

Current state

Wanneer je bij een navigatiebalk wil aangeven dat een bepaalde pagina op "active" staat, kan je de current state stylen

Scrollen naar een sectie

Om een link naar een specifiek sectie binnen dezelfde webpagina te laten scrollen, moet je eerst het volgende instellen bij de sectie zelf:

• Selecteer de volledige sectie in het layers panel
• Ga in de rechterbalk naar "Scroll Section" en voeg een naam toe

Scrollen naar een sectie

Wanneer je dan het nav item selecteert en een link toevoegt, kies je de huidige pagina, bijv "Home". Hierna verschijnt de optie om een scroll sectie aan te duiden.

Scrollen naar een sectie

Je kan aanduiden of dit instant moet gebeuren, of via een scroll effect naar de betreffende sectie

Een button laten linken

Je kan linken niet enkel toevoegen op tekst, maar ook op buttons of andere frames.

De hover optie komt er hier niet standaard bij in het paneel. We zien later hoe we een hover-effect toevoegen op bijv. een button.

Styles

Wat zijn styles?

Styles kennen we al van Figma: het zijn herbruikbare instellingen die je opslaat, kan toepassen op elementen en eenvoudig kan aanpassen.

In Framer kan je de volgende styles aanmaken:

• Link Styles
• Color Styles
• Text Styles
• CMS Styles

Link Styles

Hoe je verschillende Link Styles aanmaakt, zagen we al eerder in deze les. Eens een Link Style is aangemaakt, kan je deze eenvoudig toepassen op andere tekst.

Color Styles

Color styles kan je aanmaken wanneer je een kleur wil toevoegen. Nadat je de deze naam geeft en opslaat, verschijnen ze mee in het color-paneel

Text Styles

Geef je tekst eerst een specifieke opmaak, daarna kan je een tekst style aanmaken via het text-paneel

• Kies eerst de "hiërachie", pas daarna kan je de stijl eventueel hernoemen

Text Styles

Je kan somming zaken "overriden" bij een Text Style, dit kan van pas komen bij kleine aanpassingen

Bijv. wanneer je een specifieke styling hebt voor een zwarte heading 2, maar je wilt ook een rode variant waarbij alle andere properties verder hetzelfde blijven als de andere heading 2

Styles managen

Styles kan je altijd aanpassen in het rechterpaneel, maar je hebt ook een makkelijk overzicht onder het assets-tabblad

Styles managen

Hier kan je styles herorganiseren in extra mappen, hernoemen, verwijderen, aanpassen...

Styles managen

Text Styles kan je niet zomaar verwijderen, in tegenstelling tot Link Styles & Color Styles. Daarvoor moet je eerst alle tekst met deze style ontkoppelen (via Find)

Components

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

Responsiveness

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