Vil du have Figma API-inspiration? Her er 8 samfundsdrevne projekter

Style guide generatorer, PDF eksport og mere!

ICYMI, i sidste måned frigav vi Figma Platform med den første Web API til et professionelt designværktøj. Vi håbede, at samfundet ville tage dette projekt i nye retninger, men vidste ikke, hvad de kunne forvente.

Nå - din kreativitet tog ikke lang tid at inkubere. Inden for få dage oversvømmer du vores Twitter-tidslinje med imponerende kreationer. Fra stilguidegeneratorer til Alexa-Echo-integrationer tilpasser folk API'en til mange arbejdsgange.

Vi ønskede at afslutte nogle af de sejeste projekter, vi har set i de få korte uger siden vores API-lancering. Tak til dem af jer, der har indsendt dit arbejde på vores Show & Tell-kanal på Spectrum, og specielt råb til folk, der åbner sourcing af deres projekter for andre at bruge.

Bemærk: Integrationsskaberne leverede billeder og GIF'er til Figma.

Integrationer til at begejstre designere

Dette er de projekter, folk har bygget, der kan bruges lige fra flagermus af andre - også dem uden programmeringsfærdigheder. Stick en Figma URL i en webstedsformular, og få magi til at ske (husk at dette er alle tredjepartsintegrationer, så Figma er ikke ansvarlig for tilladelsens indstillinger eller vedligeholdelse af integrationer).

1. Figma PDF-eksportør

Med denne nye API-integration kan du eksportere rammer i dine Figma-designs som en PDF. Bare vælg en ramme, og kopiér derefter fil-URL'en på denne webstedsformular. Hvis du ønsker at opbygge en eksportør for dig selv, skal du bare passe det åbne GitHub-projekt bygget af Gweltaz Calori.

2. Style guide generator

Indsæt et link til dit Figma-dokument på denne webstedsformular, og denne generator opbygger en stilguideside baseret på alle skrifttyper, farver og andre stilarter, du brugte. Læs flere detaljer om, hvordan det fungerer her på Spectrum, fra dets skaber Liam Martens, grundlægger af Freighter designstudie.

3. Alexa integration

Selv om vi tvivler på, at enhver designer faktisk vil bruge Alexa til at læse kommentarer, der er tilbage på deres design (er velkommen til at bevise os forkert), skubber dette eksempel grænserne for det, vi forestillede os, at folk bygger med Figmas API. Og hvis du kobler din Figma-konto op til en lignende stemmeaktiveret funktion, skal du vise os, hvad du gør med den! Det blev bygget af Jon Gold, en designteknolog hos Airbnb.

_____

Integration inspiration til udviklere

Lurer du på en ingeniør, hvor du skal starte med Figma API? Et webbaseret design-API kan gøre det meget lettere at automatisere din design-udvikler overlevering. Tjek disse projekter for inspiration.

4. Figma.js

Ud over en Alexa-integration byggede Jon Gold et uofficielt bibliotek til brug af Figma API i Javascript. Indpakningen hjælper dig med at komme hurtigt i gang med at opbygge JS-integration med Figma. Jons indpakning bruges allerede til andre programmer, f.eks. Et åbent GraphQL-stik, der giver folk mulighed for at skrive GraphQL-forespørgsler mod Figma API. GraphQL-stikket blev lavet af designer-udvikler Bernardo Raposo med hjælp fra Sara Vieira.

5. Synkronisering af Figma-design til at reagere komponenter

En af de API-muligheder, vi er mest begejstrede for, er potentialet for automatisk konvertering af Figma til andre rammer. Vi ser allerede det: PageDraw introducerede en React-integration for andre at bruge, og Sara Vieira, en frontend-udvikler fra Portugal, byggede en måde, hvorpå React-komponenter kunne gengives direkte fra en Figma-fil ved hjælp af det nævnte GraphQL-stik, hun arbejdede på ().

Sara Vieira's React-demo

Florian Nagel, softwareingeniør hos Candis, oprettede også sin egen Figma → React-konverter, og han arbejder på at åbne det.

6. Volvo Car Mobility

For at automatisere levering af aktiver brugte design- og udviklingsteamet hos Volvo Car Mobility Figma API til at forenkle deres arbejdsgang. Med brugerdefinerede Slack-kommandoer kan en designer eller udvikler starte processen, og bag kulisserne opretter en webservice en ny filial i et GitHub-lager.

Derfra bruger webtjenesten Figma API til at eksportere ikoner i et specifikt dokument med eksportindstillinger for de rammer, der indeholder ikonerne. Brugeren kan se begivenhedsloggen og URL'en for grenen for at oprette pull-anmodningen, alt sammen inden for Slack. Skaber: Volvo Car Mobility team

Volvo Car Mobility Slack-kommandoer, der automatiserer eksport af design

7. Figma OAuth2-strategi for pas

Hvis du bruger Passport i dit Node.js-program til at autentificere, kan du opbygge din service, så folk kan logge ind med deres Figma-identitet med dette modul fra Liam Martens (han byggede også stilguidegeneratoren ).

8. Ring let til Figma API fra dit valg af sprog

I mellemtiden byggede David Siegel, medskaber af quicktype, en nem måde for folk at kalde Figma API fra Swift, Objekt-C, Flow, TypeScript, JavaScript, C #, C ++, Go, Rust, Java, Elm og Ruby. Han genererede typer og JSON-kode på alle disse sprog.

Dette er kun en brøkdel af de integrationer, som folk producerer. Det vil være interessant at se omfanget af denne indsats udvikle sig over tid, og hvilken rolle de spiller i udformningen af ​​designarbejdsgange for både enkeltpersoner og teams.

Vi fortsætter disse integrationshøjdepunkter i fremtidige round ups, så hvis du arbejder på noget cool, så giv os en holler i vores Show & Tell-kanal over på Spectrum! Og hvis du ønsker at komme i gang, kan du se vores udviklerdokumentation her.