Figma-prototype: nu med overgange

Design involverer langt mere end bare designeren i disse dage. Ingeniører, marketingfolk, projektledere og andre interessenter samarbejder, indtil det bedste produkt kommer frem. For at gøre dette effektivt er teamene afhængige af prototyper - høj-trofaste repræsentationer af en app - for at kommunikere om en mockup, inden den sendes til ingeniører.

Følelsen af ​​en app kan ændres fuldstændigt af noget så grundlæggende som animationen mellem rammer. Uden de detaljer, der er på plads, risikerer interessenter at blive rystet med uophørlige frem og tilbage. Hvem har tid til det?

Lær hvordan du prototype i Figma med disse to videoer

Derfor er vi glade for dagens nyheder: Vi introducerer overgange til Figma-prototyper. Når du bygger en klikbar prototype af dit design, skal du tilføje en opløsnings-, glide- eller skubbeeffekt for at linke rammer til hinanden. Dette vil få prototypens overgange til at føles mere realistiske for seeren, uanset om denne person er en udvikler, potentiel klient eller en pårørende, der stadig ikke forstår, hvad du rent faktisk gør for en levevej.

Vil du "glide" fra den ene ramme til den næste i løbet af et par millisekunder? Nu kan du. Brug for at efterligne den animerede bevægelse af en iOS-app for at bringe den til live og imponere en ny klient? Håndteres.

Disse overgange er vigtige for at få dine ideer igennem, og du har kæmpet for dem med en oversvømmelse af feedback via Spectrum og Twitter. Vores samfund har anmodet om denne funktionalitet direkte, da vi først annoncerede Figma 2.0 med prototype.

Som vi lovede dengang, vil vi fortsætte med at opbygge prototyper i Figma for at imødekomme behovene hos alle involverede i softwareudviklingsprocessen.

Hvad gør Figma-prototyper hurtigere og lettere?

For de ukendte har Figma-prototyper superkræfter, som andre værktøjer mangler ().

  1. Live design: Fordi vi er en webbaseret platform, forbliver dine prototyper automatisk opdaterede. De er bundet til dine designs, så når du laver et par justeringer til dine rammer, er der ikke noget behov for dig at eksportere dem til din prototype igen.
  2. Figma TED-tale: Du kan bruge din telefons webbrowser på Android og iOS til at navigere præsentationer via mobil. Det er Figma TED-snak - så du kan henvende dig rundt i rummet og guide demoen fra din telefon. Dette er især nyttigt under klientmøder. Interessenter kan klikke på din avatar i Figma-prototypen (observationstilstand) og derefter følge med på dit designstrøm fra deres egne bærbare computere.
  3. Komponenter + prototype: Brug Figma-komponenter i dine prototyper for at spare masser af tid. Når du indstiller en navigation fra en komponent én gang, udfyldes den automatisk gennem alle tilfælde. For eksempel spretter din hjemmeknap altid tilbage til din startskærm.

Ud over de eksisterende prototypefunktioner håber vi, at vores nye overgange tilføjer et ekstra lag polsk til dit arbejde. Du kan vælge varigheden af ​​animationen og lege med, hvordan en ramme bliver lettere i en anden. Dette betyder, at du har kontrol over, når en animation er lidt hurtigere i begyndelsen eller i slutningen.

Til sidst har prototype-værktøjslinjen en forhåndsvisningskasse, så design af overgangene mellem rammer er et øjeblik. (Eller et dias.)

Sørg for at tjekke denne video for at lære det grundlæggende i prototyper i Figma. Og når du er klar til at introducere overgange til dine prototyper, kan du gå herover.

Hvad er det næste?

Vi håber, at denne fortsættelse af vores prototype-værktøj hjælper designere med at kommunikere deres vision lettere, hurtigere og med mere joie de vivre.

Ligesom med vores nylige arbejdsgangslancering af @mentions og filssortering, nudler vi konstant over, hvordan vi sparer alle teammedlemmer tid. Har du en idé til en ny Figma-funktion? Giv os et råb på Spectrum eller på Twitter. Vi lytter altid.

Og hold dig opdateret om flere prototyper-meddelelser.