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

Wat zijn components?

Components gebruik je voor alle elementen die terugkeren in je design. M.a.w, je creëert een herbruikbaar blokje om je design consistent te houden en efficiënt aan te passen.

Components aanmaken

Selecteer een element op je canvas

• Rechtermuisknop > create component
• Shortcut: option + cmd + K (Mac) of Ctrl + Alt + K (Windows)

Components aanmaken

Je wordt gevraagd om een naam te geven aan je component

• Standaard wordt de naam van de layer overgenomen
• Je kan werken met een slash-systeem om mappen aan te maken

"Buttons/primary", maakt een component "primary" aan binnen de map "Buttons"

Components aanmaken

Hierna kom je op een apart canvas terecht waar je varianten en hover-states kan aanmaken.

Components gebruiken

Vanuit het assets tabblad kan je nu rechtstreeks components slepen naar je design

Een item vervangen

Wanneer je bijv. een button in je design hebt staan die je wilt vervangen door een bestaand component:

• Selecteer de button en open de quick actions menu
• Zoek op de naam van het component en kies voor "replace with..."

Detach component

Om een item los te koppelen van een component gebruik je 

rechtermuisknop > detach instance

Een component aanpassen

Om naar "edit"-modus van het component te gaan:

• Dubbelklikken op component
• "Edit component" knop in rechterbalk
• Rechtermuisknop op component > edit

Variants

In deze edit-modus kan je makkelijk verschillende varianten aanmaken van hetzelfde component

Variants

Deze varianten vind je terug in de rechterzijbalk wanneer je een component selecteert binnen je design

Hover-states

De edit-modus van een component maakt het ook makkelijk om een hover-state toe te voegen voor elke variant.

Framer voegt standaard een transitie toe die je nog kan aanpassen

Variables

Wanneer je button-components toevoegt doorheen je site, zal je merken dat deze overal dezelfde tekst heeft, én dat je deze tekst niet zomaar kan aanpassen. 

→ Wanneer je de tekst in edit modus aanpast, veranderen alle buttons doorheen je site mee

Wat zijn variables?

We moeten nog instellen wat er variabel moet zijn per component. Wat moet altijd hetzelfde blijven en wat moet je bij elk component kunnen aanpassen?

• tekst
• kleuren
• link
• foto's
• ...

Variables instellen

Selecteer wat aanpasbaar moet zijn, bijv. de tekst van een button. In het rechterpaneel zie je een plusje staan naast alle zaken die je kan instellen als variable

Variables instellen

Bij een butten wil je bijv. dat de content van de tekst aanpasbaar is, dus dan druk je op het plusje naast "content"

Variables instellen

Er verschijnt een scherm waar je de variable kan instellen

• Name: Geef een algemene titel, bijv "button text"
• Optional: Kies of deze variable altijd ingevuld moet zijn of niet
• Default: Geef de standaard tekst mee

Variables gebruiken

Variables worden getoond in het rechterpaneel wanneer je een component selecteert in je design. Hier kan je ze invullen.

Variables

Wat moet allemaal variabel zijn bij een card-component?

Components nesten

Hoe complexer je design, hoe meer components je kan nesten in elkaar, zoals bijv een button binnen een card

Components nesten

Wanneer je components nest, moet je variables van dieper-liggende componenten naar boven brengen door deze opnieuw in te stellen bij het "bovenste" component.