Illustration af Justin Tran

Design med reelle data

Hvordan Dropbox bruger Framer X og reelle data til design

Tidligere i 2018 skrev jeg om desktop prototyping og hvordan indstilling spiller en vigtig rolle i design af desktop-grænseflader. Men skrivebordsættet manglede en afgørende komponent - reelle data.

Med frigivelsen af ​​Framer X begyndte vores team at genopbygge Desktop Kit fra bunden af ​​med rigtige data i kernen.

At bringe ægte data ind i Framer X

Framer X ligner og føles som ethvert andet designværktøj, men under hætten er alting bygget på React. Dette betyder, at enhver med lidt React-viden kan oprette nye komponenter, der gør næsten alt hvad du kan forestille dig. Vi er glade for at dele et par komponenter, vi oprettede i vores første uge med eksperimentering.

Lokaliseringstesting med Googles Translate API

Ønsker du hurtigt kunne oversætte din tekst til tysk for at kontrollere, om du har efterladt nok plads til lokalisering? Vi oprettede en oversætterkomponent, der bruger Google Translate API til at konvertere din tekst til over 100 sprog.

Dynamiske baggrunde med Unsplashs image API

Vil du hurtigt vise dit design i et realistisk browsermiljø? Vi oprettede en browserkomponent, der placerer din side i en Safari- eller Chrome-browser med et tilfældigt tapet fra Unsplash API.

Realistiske browsere med Statvoos favicon API

I vores tidligere Desktop Kit inkluderede vi kun en Safari-browser til trods for at Chrome havde næsten 60% af markedsandelen. Ved hjælp af Statvoo API til at trække ind på et websteds favoritum var vi endelig i stand til at oprette en realistisk Chrome-fane.

Fællesskabsfremstillede komponenter

Der er så mange utrolige datasæt, der er tilgængelige i offentlige API'er, at vi kun lige er begyndt at ridse overfladen på, hvad der er muligt. Samfundet har allerede offentliggjort nogle fantastiske komponenter i Framer X Store, der giver dig mulighed for at trække ting som realistiske avatarer, interaktive Google Maps, spillbare YouTube-videoer og endda en Spotify-afspiller.

Samfundet har allerede offentliggjort nogle utrolige komponenter, der gør det nemt at trække reelle data ind

Byg noget med din virksomheds API

Ikke alle virksomheder har en offentlig API som Dropbox, men der er en god chance for, at du kan få adgang til et internt API på din virksomhed. Jeg har fundet, at ingeniører normalt er begejstrede over at se designere bygge oven på deres API og er begejstrede for at give en hånd. Hvis du arbejder på et produkt, der har en intern API, kan du bruge de samme teknikker til at begynde at designe med reelle data.

”Når vi ikke arbejder med rigtige data, bedrager vi os selv”
- Josh Puckett

Målet med at trække reelle eller realistiske data ind i vores design er at bringe os tættere på det endelige produkt. Ved at designe med rigtige navne, rigtige fotos og rigtigt indhold får vi empati for de mennesker, der bruger vores slutprodukt.

At bringe Dropbox API ind i Framer X

At designe med faktiske brugerdata er noget, vi længe har drømt om, men som altid kun var uden for rækkevidde. Vi havde bygget et Framer Studio-modul, der trak brugerdata fra Dropbox API (ved hjælp af OAuth), men det krævede en række tekniske trin og JavaScript-viden for at konfigurere. Større virksomheder med dedikerede designværktøjsteam har bygget kraftfulde Sketch-plugins, der trækker anonyme brugerdata ind, men vi er bare ikke der endnu.

Med Framer X kunne vi hurtigt oprette en Finder-komponent, der trækker dataene nøjagtigt, som de findes i din Dropbox. I eksemplet herunder godkendte jeg min personlige Dropbox-konto med komponenten, så hvad du ser er mine rigtige Dropbox-mapper.

Vælg mellem generiske data eller reelle data fra Dropbox APIKoden, der forbinder Dropbox API til vores designkomponenter

Tilslutning af Dropbox API giver ikke kun vores team mulighed for at designe nye funktioner med deres egne mapper som kildemateriale, men vi kan også supercharge designundersøgelser ved at lade brugerne se deres faktiske indhold på skærmen.

Nu hvor vi har adgang til reelle data i Framer X, kan vi bringe næsten ethvert design til live med ægte datastrukturer. I Dropbox Desktop Kit (se nedenfor) finder du dette fuldt interaktive Finder-vindue - prøv det!

Gendannelse af Finder-oplevelsen med kun Framer X

Dropbox Desktop Kit X

Du kan nu downloade Dropbox Desktop Kit i Framer X Store. Vi genopbyggede det fra bunden med kode og ægte data blandet i for at gøre komponenterne mere kraftfulde end det originale Desktop Kit.

Inde i finder du over hundrede macOS UI-komponenter, der spænder fra knapper og push-meddelelser til arbejdsapplikationer.

Download og nyd!

Download Desktop Kit i Framer X Store, og lad os vide, hvad du synes! Vi planlægger at tilføje Windows 10-komponenter snart.

En stor tak til Justin Tran for illustrationen, Wes O’Haire for at hjælpe med at oprette Desktop Kit, og Andrea Drugay for at hjælpe med at skrive dette indlæg.

Vil du have mere fra Dropbox Design-teamet? Følg vores publikation, Twitter og Dribbble. Vil du lave magi sammen? Vi ansætter!