Introduktion: Figmas platform

Det første trin mod et åbent designøkosystem

I dag er vi glade for at starte Figma-platformen, en måde at forbedre designarbejdsgange ved at forbinde Figma til andre værktøjer, scripts og endda webapps. Vi begynder med et nyt koncept til designrummet: En web-API.

Det er vanvittigt, at en web-API er banebrydende i 2018, men efter vores viden har ingen nogensinde skabt en til et professionelt designværktøj før. Grunden? Design finder traditionelt sted i en verden af ​​tavet, offline desktop-software, hvorimod Figma bor online, hvor alt er forbundet.

Ved at udnytte den åbne natur på nettet lægger vores API grundlaget for unikke former for designsamarbejde. Virksomheder bruger allerede det til at skabe tilpassede værktøjer, der imødekommer deres unikke behov. For eksempel skabte Uber et live feed af, hvad deres designteam arbejder på for at øge synligheden i hele organisationen. GitHub automatiserede en del af deres ikonoprettelsesproces for at forbedre dens effektivitet.

Vores API lægger grundlaget for unikke former for designsamarbejde

Disse ideer er bare begyndelsen - vi åbner sourcing af et antal demoprojekter, der spænder fra en Figma stavekontrol til et generativt kunstværktøj til en metode til at sætte dine designs på Ethereum blockchain. Vi introducerer også nye og forbedrede integrationer med andre designværktøjer som Avocode, Haiku, Zeplin og Pagedraw.

Vi er mest glade for at se, hvad vores samfund vil gøre. Læs videre for at lære mere om, hvordan vores platform fungerer og måder at komme i gang på. (Og tjek Harry McCrackens fremragende Fast Company-artikel om vores API's betydning for den bredere tech-industri.)

Hvordan det virker

Den første udgivelse af Figma Web API har tre kernefunktioner:

  1. Læs designfiler i et åbent JSON-filformat
  2. Læs / skriv kommentarer til designfiler
  3. Gengiv designfiler (og dele af designfiler) til standardbilledeformater (png, svg osv.)

Vores åbne filformat gør det muligt for tredjepartsværktøjer at forbruge Figma-design på en pålidelig måde. I modsætning til vores desktop-konkurrenter er Figmas Web API ikke bundet til operativsystemer, specifikke filstier eller versioner af designsoftware. Dette betyder, at det er muligt at få adgang til den aktuelle tilstand for et design fra software, der kører på helt forskellige computere, eller endda på internettet som Figma selv - hvilket sætter scenen for en helt ny klasse af designintegrationer.

Uber-medarbejder ser på et realtidsfeed af design, der er fodret til et tv ved Figmas API

Når du kender den unikke nøgle til et Figma-design - som er indeholdt i URL-adressen - kan du udtrække et levende snapshot af træet med figurer, tekst, komponenter, prototype-links, overgange, begrænsninger osv., Der definerer, hvordan et Figma-design ser ud og opfører sig. Du kan også pinge et slutpunkt for at generere en JPG, PNG eller SVG af en hvilken som helst fil eller filundertre.

Vi har designet API'en til at være så ergonomisk som muligt, så det er hurtigt og nemt at script-forbedringer til interne virksomheds arbejdsgange eller integrere Figma med andre værktøjer. Da det er webbaseret, behøver du ikke lære esoteriske scripting-sprog for at gøre dette. Du kan stole på de programmeringsrammer, du er bekendt med, og interface direkte med et veldefineret web-API i stedet for at binde dig unødigt til en anden proprietær plugin-ramme. (Dette vil gøre det lettere at holde integrationerne ajour - og derfor mindre buggy!)

Vi ved, at du spørger dig selv, hvad der snart kommer op. Her er en forhåndsvisning:

  1. Webhooks. Dernæst planlægger vi at frigive Webhooks, der streamer tilbagekald til begivenheder i Figma. Du kan vedhæfte en webhook til en fil eller et team. Du får kort over begivenheder til filopdateringer.
  2. Skriv API. Mens vores Kommentar API giver klienter mulighed for at skrive til Figma, handler dagens frigivelse hovedsageligt om at aktivere læsesager og åbne Figma for omverdenen. Vi planlægger at introducere en Write API senere på året ... det er noget, vi er super begejstrede for!
  3. Udvidelser. Hvis vi havde $ 1 for hver gang kunder anmodede om appudvidelser, havde vi måske ikke brug for at hæve vores sidste finansieringsrunde. Når det er sagt, har vi set, da vores konkurrenter tilføjede udvidelsesmodeller, der gav udviklere frihed på bekostning af kvalitet, robusthed og forudsigelighed. Vi er ivrige efter at udnytte Figma-samfundets utrolige kollektive hjernekraft til at gøre vores værktøj bedre, men vi vil ikke introducere udvidelser, før vi er overbeviste om, at vores udvidelsesmodel er robust. Der er endnu ingen ETA endnu, men vi undersøger aktivt, hvordan man bygger dette på en solid måde.

Tag workflow-inspiration fra: Uber & GitHub

Idet design spiller en voksende rolle hos store virksomheder, rører flere og flere afdelinger det. Det er ikke kun UI-personen, der interagerer med mockups og visuelle forestillinger om ideer - det samme gør kopieredaktører, ingeniører, forskere, marketingfolk, ledere og utallige andre.

Dette snebold ind i store problemer. Traditionelle skrivebordsdesignværktøjer var ikke bygget til samarbejde, så det er smertefuldt for folk at arbejde sammen om design. Filer skal eksporteres og uploades, før de kan deles, og de er derfor øjeblikkeligt forældede, når det originale design ændres. Ledere kan ikke let se og kommentere realtidsarbejde; ingeniører bruger timer på at jage de rigtige aktiver; hold kæmper med problemer, der - uvidende om dem - mange andre løst i tidligere sammenhænge.

For reelt samarbejde i skala har virksomheder brug for en bedre måde at dele, søge og se design i realtid på tværs af hele organisationen. Derfor er vi så begejstrede for løftet om brugerdefinerede arbejdsgange, der er drevet af Figmas API.

En Uber-designer arbejder i Figma

Uber

On-demand ridesharing-tjenesten kan prale af et designteam spredt over 4 forskellige byer, der arbejder på en bred vifte af produkter fra Uber Eats til Uber Freight. Dens nye VP of Design ønskede en nem måde at gennemse disse projekter på, så de skaber interne værktøjer til synlighed med vores webbaserede teknologi.

”Figmas API har bidraget til at bringe ideer, vi har drømt om i alderen til liv,” sagde Erik Klimczak, Senior Design Manager for Uber's Advanced Technology Group.

Uber planlægger at udsende igangværende designs på tv'er rundt om på kontoret, overflade dem gennem et Dribbble-lignende webstedopbevaringssted og indlæse designs på en Chrome-browserudvidelse for ansatte. Designere har selvstyret med at beslutte, hvornår de skal dele - API'en henter ikke deres arbejde, før de trækker det ind i en bestemt ramme i Figma.

”Figmas API har bidraget til at bringe ideer, vi har drømt om i alderen til liv.” - Erik Klimczak, Sr. Design Manager, Uber

Andre virksomheder har lavet lignende produkter for at lette delingen af ​​designarbejde, men dette er første gang, vi har set nogen oprette et realtidsfeed baseret på en online sandhedskilde i stedet for en rodet eksportstrøm. Vi fandt størrelsen af ​​Ubers indsats inspirerende, og vi håber at se flere hold udforske lignende koncepter.

GitHub

GitHub Octicon sæt i Figma (til venstre) og GitHub (højre)

Med den nye Figma API kan GitHub skubbe ændringer til deres ikonsystem - Octicons - fra en enkelt designfil. Når nogen har brug for at ændre et ikon, kan de blot redigere Figma-filen, der fungerer som kilden til sandhed. En designer eller ingeniør kan derefter indsende en pull-anmodning med en henvisning til det opdaterede Figma-design. Dette udløser en ny build via Travis CI, der bruger Figmas API til automatisk at udtrække ikoner fra Figma-filen og offentliggør det opdaterede ikonsæt i hvert format.

At køre ændringerne fra en enkelt designfil reducerer barrieren for at bidrage med nævnte ændringer. Det giver også GitHub mulighed for at køre alt via fælles kontinuerlige integrationstjenester snarere end at opsætte Mac-servere. Når Figma i fremtiden frigiver vores Writer API, planlægger GitHub at gøre dataflow tovejs, så depot og designfil altid er synkroniseret. På denne måde vil enhver være i stand til at foretage ændringer i Octicons-ikonsættet på den måde, de føles mest behagelige, hvad enten det er design eller kode!

En ny verden af ​​integrationer

Ud over at hjælpe virksomheder som Uber og Github med at tilpasse deres egne arbejdsgange, vil vores API gøre det lettere for tredjepart at opbygge - og vedligeholde - offentlige Figma-integration. Zeplin har netop udsendt en gennemgang af deres integration med vores nye API, og tre andre produkter har introduceret Figma-funktionalitet for første gang:

  1. Haiku - et værktøj til at oprette interaktive, tværplatformede UI-komponenter (findes i dag)
  2. Pagedraw - en produktionsklar React UI-kodegenerator (tilgængelig i dag)
  3. Avocode - udvikler afleveringsværktøj (kommer snart)

Integrationer som disse er vigtigere end nogensinde før for design. Vi lever i en verden med utallige arbejdsgange, hvor hvert team har forskellige processer til at få tingene gjort. Hos Figma ser det ud til, at det er indlysende for os, at intet selskab vil løse ethvert problem, så værktøjer er nødt til at arbejde godt sammen. Ved at samarbejde med tjenester som Haiku, Pagedraw, Avocode og Zeplin, kan vi låse nye brugssager op for vores samfund og ophæve blokerede teams med andre behov.

”Figma har længe været et af vores foretrukne designværktøjer.” - Zack Brown, administrerende direktør for Haiku

"Figma har længe været et af vores foretrukne designværktøjer," sagde Zack Brown, administrerende direktør for Haiku. "Med denne integration kobler vi styrken i Figmas designsamarbejdsplatform med Haikus app-produktionskraft."

Eksempel på projekter

For at hjælpe dig med at komme i gang brugte Figma-teamet (og familiens venner) et par dage på at bygge sjove projekter på toppen af ​​Web API. Alt nedenfor er åbent hentet på GitHub. Hvis du allerede har ideer til, hvad du vil bygge, håber vi, at disse eksempler vil være nyttige som referencemateriale. Hvis du ikke er sikker på, hvad du skal gøre endnu, opfordrer vi dig til at gaffel disse projekter og tage dem i nye retninger, som vi måske aldrig drømmer om!

(1) Figma Custom Mockup Generator

Figmas Custom Mockup Generator i aktion

Se, hvordan et design vil se ud i forskellige virkelige verdenskontekster - som en iPhone, busstopp eller billboard. Prøv det ved at åbne det offentlige depot på GitHub, downloade koden og køre den som en HTML-side.

(2) Figma Stavekontrol

Figmas stavekontroldemo bruger vores Kommentar-API til at notere forkert stavede ord i et design

Med Figma stavekontroldemo kan du køre et kommandolinjeværktøj, der scanner tekst i et design. Når ord er forkert stavet, vil det automatisk efterlade en kommentar, der antyder alternativer. Vi er glade for at se de forskellige ting, folk bygger med vores kommentar API, og dette er kun en idé.

(3) Figma Caleidoscope

En fotomosaisk måne lavet med vores Kalejdoskopdemo

Har du nogensinde set et billede, der er sammensat af hundreder eller tusinder af mindre billeder (jeg tror, ​​det officielle udtryk er fotomosaik)? Nu kan du gøre det i Figma. Vælg et fotografi (det "store billede"), åbn derefter Figma og tegn de ikoner, der fungerer som de mindre mosaikstykker. Du kan få adgang til vores offentlige GitHub-arkiv og bruge vores API til derefter at gengive disse figurer til et unikt stykke pixeleret kunst.

Til sidst oprettede Airbnb-backendingeniør Elena Nadolinski denne korte videovejledning om, hvordan man bruger Figmas API. Lær hvordan du opretter dine egne Ethereum-tokens, der repræsenterer emoji-kunst ved hjælp af en Figma-fil og Figmas Web API.

Kom godt i gang

Puha! Det var meget. Vi håber, at dette episke screed af en blog gav dig alle de oplysninger, du har brug for for at komme i gang med vores nye API. For mere information, se vores dokumentation her.

I tilfælde af at du ikke kan fortælle det, er vi virkelig glade for at se, hvad vores samfund bygger med denne teknologi. Hvis du opretter noget med vores platform, vil vi høre om det. Giv os et råb i "Show and Tell" kanalen i vores Spectrum brugerforum.