5 tips för att bygga snabbare i Framer
Framer är snabbt att komma igång med, men det är först när du bygger som ett proffs gör det som du verkligen sparar tid. De här fem vanorna skiljer en långsam Framer-fil från en som går att underhålla och bygga vidare på i åratal.
1. Bygg komponenter för allt som upprepas
Det första proffs gör i en ny fil är att bestämma vad som ska bli en komponent. Navigation, footer, knappar, kort och sektionsrubriker återkommer på nästan varje sida — bygg dem en gång som komponenter, så uppdateras varje instans automatiskt när du ändrar originalet. Byter kunden logotyp eller knappfärg fixar du det på ett ställe i stället för på trettio sidor.
Ta det ett steg längre med varianter. En knapp-komponent kan ha varianterna primär, sekundär och inaktiverad, och en hover-variant som Framer animerar mellan automatiskt. Du bygger interaktionen en gång och återanvänder den överallt.
Med properties gör du komponenten flexibel utan att bryta kopplingen till originalet. Ett kort kan ha en text-property för rubriken och en bild-property för toppbilden, så att varje instans visar olika innehåll men delar samma design. Faran att undvika är att detacha en instans för att göra en liten ändring — då tappar du den automatiska uppdateringen. Lägg hellre till en variant eller en property.
Samma princip gäller typografin: låt textstilar äga alla storlekar i stället för lokala värden. Hur du bygger en hel typskala med egna värden per brytpunkt visar vi i typografiguiden.
2. Låt Auto Layout göra jobbet
Att positionera element för hand är den vanligaste tidstjuven i Framer. Auto Layout, som Framer kallar stacks, är plattformens motsvarighet till Flexbox i CSS: element placeras i rad eller kolumn med ett bestämt mellanrum, och layouten flödar om av sig själv när innehållet ändras.
Nyckeln är att förstå fill och hug. Ett element som är satt till hug krymper till sitt innehåll, ett som är satt till fill växer för att fylla utrymmet. Med rätt kombination av de två blir en sektion responsiv utan att du rör en enda breakpoint — lägger du till ett kort i en rad så justerar sig de andra automatiskt.
Bygger du hela sidan av nästlade stacks — sektioner i en kolumn, kort i en rad, text i en kolumn inuti kortet — får du en struktur som håller på både desktop och mobil med minimal efterjustering. Det är samma princip som ren HTML och CSS, bara visuellt.
3. Lär dig kortkommandona
En timme på att lära sig kortkommandon betalar sig samma vecka. De du använder mest:
- Cmd/Ctrl + D — duplicera markerat element
- Alt + dra — kopiera medan du drar, för snabb utplacering
- Cmd/Ctrl + Option + K — skapa komponent av markering
- Enter — gå in i en grupp, komponent eller stack
- Cmd/Ctrl + / — sök efter valfri åtgärd eller inställning
Kombinera Alt+dra med Framers smart guides så snäpper elementen på plats med jämna avstånd, och du slipper mata in pixelvärden för hand. Sök-kommandot är det mest underskattade: hittar du inte en inställning behöver du inte leta i panelerna, bara skriva vad du vill göra.
4. Sätt upp CMS tidigt
Har sajten innehåll som upprepas — blogginlägg, case, teammedlemmar, produkter — så bestäm CMS-strukturen innan du designar färdigt, inte efteråt. Skälet är enkelt: bygger du först tio sidor för hand och sedan inser att de borde vara CMS-drivna, får du göra om jobbet och migrera in innehållet manuellt.
Med CMS på plats från start designar du en mall en gång och låter Framer generera resten. Lägg till ett nytt blogginlägg i samlingen, så bygger plattformen detaljsidan åt dig med egen URL och egna metadata. Det sparar mest tid över projektets livslängd av allt på den här listan. Vill du gå djupare har vi en praktisk guide till Framer CMS.
5. Designa mobile-first
De flesta börjar på desktop eftersom det är där de själva sitter. Vänd på det. När du designar mobilvyn först tvingas du prioritera: vad måste synas, vad kan vänta, vad kan strykas. Den disciplinen ger en tydligare sida på alla skärmar.
Det är dessutom tekniskt enklare. Att skala upp en enkel mobillayout till desktop är rakare än att pressa in en tät desktopdesign i en mobilskärm, där saker börjar krocka och radbryta. Och eftersom Google indexerar mobilversionen först är den vyn direkt avgörande för hur sajten rankar — inte en efterhandsjustering.
Sammanfattning
De fem vanorna hänger ihop: komponenter och Auto Layout ger dig en struktur som håller, kortkommandon gör dig snabb i den, CMS tar bort det repetitiva arbetet, och mobile-first ser till att resultatet fungerar där besökarna faktiskt är. Ingen av dem tar lång tid att lära sig, men tillsammans är de skillnaden mellan att bygga en sida och att bygga en sajt du kan förvalta.