Seizoen 2/1: wat Framer is, hoe het werkt en waarom

Ontwerpen, delen en publiceren: je nieuwe site staat sneller online dan ooit, zonder één regel code.

Bij Flatline beginnen we aan een nieuwe blogreeks. Die gaat, zoals de titel al verraadt, over het werken met Framer. In deze eerste aflevering lees je wat Framer is, voor wie het interessant is en hoe je het opzet. Daarna lopen we rustig door de basisfuncties en de interface heen. Genoeg inleiding, we beginnen met de eerste twee onderwerpen:

Wat is Framer, en voor wie is het bedoeld?

Framer is een designtool voor interactieve, responsive websites, prototypes en interfaces van mobiele apps. Het verschil met andere tools zit in de combinatie: ontwerp en code staan in hetzelfde bestand, waardoor een prototype dicht bij het eindproduct komt te liggen. Je krijgt een canvas waarop je animaties, interacties en user flows uitprobeert, zonder dat je iets van code hoeft te weten.

Daarmee is de vraag “voor wie?” nog niet beantwoord. Framer bedient meerdere soorten gebruikers, elk met een eigen doel. De grootste groep bestaat uit UI/UX-designers; zij bouwen er gedetailleerde prototypes mee zonder ooit een regel code te hebben geschreven. Daarnaast zijn er product managers die hun productideeën zichtbaar willen maken, en developers die de afstand tussen ontwerp en bouw willen verkleinen. Alleen of in een team: alle drie hebben ze baat bij een interface die voor zichzelf spreekt, en bij de code die ze er zelf naast mogen zetten om het product beter te maken voor de gebruiker.

Je eerste project opzetten: stap voor stap

Een account maken kost minder dan dertig seconden en je kunt meteen gratis aan de slag. Volg de stappen hieronder of bekijk de video.

Een Framer-account aanmaken

1. Ga naar de website van Framer.

2. Klik op de knop “Sign up” of “Get started”.

3. Vul je e-mailadres in en kies een wachtwoord, of meld je aan met je Google- of GitHub-account.

4. Volg de stappen op het scherm tot je account klaarstaat.

De eerste stappen in je project

1. Frames toevoegen: met de tool ‘Frame’ bepaal je de vlakken waarin je ontwerpelementen komen te staan.

2. Bestanden importeren: sleep afbeeldingen, iconen en andere media rechtstreeks in je project.

3. Kant-en-klare componenten gebruiken: in de componentenbibliotheek staat functionaliteit die je meteen kunt inzetten.

De begrippen van Framer

Framer heeft een handvol functies die het werken zo eenvoudig maken. Voordat we uitleggen hoe die werken, zetten we eerst de begrippen op een rij die daarbij steeds terugkomen.

Frames: een site in Framer bestaat volledig uit blokken, met blokken daarin en daar weer blokken in. Die blokken heten “frames”. In één frame zet je tekst, een afbeelding, een CTA of iets anders. 

Component: een ontwerpelement of een groep elementen die je door je hele project opnieuw gebruikt. Je legt per component de eigenschappen en de interacties vast, zodat je ze maar één keer hoeft te bedenken.

Breakpoint: zodra het scherm een bepaalde breedte in pixels bereikt, verandert de opmaak mee met het formaat, de stand of de verhouding van dat scherm. Denk aan een telefoon naast een tablet: dezelfde opmaak past daar niet op. Met breakpoints bepaal je zelf hoe je site er op elk formaat uitziet.

Belangrijke functies

Stack: heb je een reeks frames, dan selecteer je ze en laat je Framer ze automatisch ordenen, horizontaal of verticaal. Uitlijnen en verdelen doe je zo in één handeling.

Prototype: het werkende model van je ontwerp, dat je kunt testen en delen. In Framer koppel je frames en componenten aan elkaar met interacties en animaties, zodat je de route door een app of site alvast kunt lopen.

Animation: de bewegingen en overgangen die je aan elementen in een prototype meegeeft. Framer heeft daar een flink aantal opties voor, zodat je prototype aanvoelt als het echte product.

Zelf verder leren

Nog een paar plekken waar je meer over Framer leert, ook over de functies die verder gaan dan de basis. Framer heeft een YouTube-kanaal met veel uitleg, waar je snel iets terugvindt. Daarnaast is er de updatepagina van Framer, met alle verbeteringen en fixes die erbij komen; juist daar zie je wat er allemaal mogelijk is. Kom je er met de site van Framer zelf niet uit, kijk dan op het communityforum. Andere gebruikers zetten daar hun vragen en oplossingen neer, en de kans is groot dat jouw vraag er al tussen staat.

Tot slot

Framer zet ontwerp en code in één omgeving, en dat scheelt UI/UX-designers, product managers en developers een hoop heen-en-weer. Met auto-layout, breakpoints en interactieve prototypes bouw je een site die op elk scherm klopt en die meteen aanvoelt als af. 

Omdat ingewikkelde stappen wegvallen en je samen in hetzelfde bestand werkt, staat een idee sneller overeind dan in de meeste andere tools. Dat maakt Framer waardevol voor iedereen die aan een website of app werkt. Probeer het en kijk hoe ver je je ontwerpen en prototypes krijgt.

Vraagt een project om meer dan Framer zelf kan, dan bouwt het custom development-team van Flatline die functionaliteit erbij.

Neem een kijkje op de website van Framer en begin aan de site die je al zo lang voor ogen hebt!