Importeren uit Figma

Send to Vibr is een Figma-plug-in. Die leest het bestand dat je in Figma open hebt (variabelen, stijlen, componenten, frames en prototypelinks) en slaat het op als één bestand. Vibr importeert dat bestand en bouwt ermee met je designsysteem en je model.

De plug-in installeren

Open in Figma het menu Plugins, zoek naar Send to Vibr en voer de plug-in uit. De plug-in werkt op elk Figma-abonnement, ook Starter.

Kiezen wat je stuurt

De plug-in stuurt het niveau van het bestand dat je kiest, van het hele bestand tot één element:

• Het hele bestand: de prototypeflows van elke pagina, of anders de schermen, pagina voor pagina. Omslag-, miniatuur- en scheidingspagina's worden overgeslagen.
• Een pagina zonder selectie: de flows ervan, of anders elk scherm erop.
• Een sectie: de frames erin, elk als scherm.
• Een frame: dat scherm.
• Een element: een component, een instance of een willekeurige laag in een frame. Vibr bouwt het los als herbruikbaar component.

Selecteer wat je wilt, of kies bovenaan de plug-in This page or selection of Whole file. De plug-in toont wat hij gaat sturen. Je kunt combineren: een scherm en twee elementen gaan samen mee.

Kies daaronder wat er meegaat:

• Screens and elements, with layout and prototype links (schermen en elementen, met layout en prototypelinks), en Include frames they link to, zodat een flow compleet aankomt. Foto's erin gaan ook mee, bijgesneden zoals je ontwerp ze toont.
• Variables, text styles and shadows, uit het hele bestand.
• Components, met hun varianten. De componenten die je schermen gebruiken, komen eerst.

Eén bestand bevat maximaal 12 schermen en elementen, 12 foto's, 80 componenten en 1.500 variabelen.

Het bestand opslaan

Kies Save file for Vibr. De plug-in slaat een bestand op dat eindigt op .vibr-figma.json. Copy zet hetzelfde in plaats daarvan op het klembord.

Het in Vibr importeren

Kies in het invoerveld + en daarna Importeren uit Figma, en kies het bestand. Je kunt het bestand ook op het invoerveld neerzetten, of plakken wat Copy op het klembord heeft gezet.

Het dialoogvenster toont wat Vibr gaat maken. Vink uit wat je niet wilt:

• Kleurthema uit de variabelen, toegevoegd aan je bibliotheek.
• Typografische schalen, één per lettertypefamilie, toegevoegd aan je bibliotheek.
• Foto's uit de frames, toegevoegd aan je bibliotheek zoals geüploade afbeeldingen, zodat de schermen de echte afbeeldingen tonen.
• Te bouwen schermen en elementen, in de volgorde waarin je flow ze bezoekt.

Kies Schermen bouwen. Vibr bouwt elk scherm als apart verzoek met je designsysteem en model, slaat het op onder de naam van het frame en gaat door naar het volgende. Een balk boven het invoerveld toont bij welk scherm het is. Stoppen beëindigt de run en houdt de schermen die al gebouwd zijn.

Als de run klaar is, opent Vibr het eerste scherm. Kies Afspelen om door de flow te klikken. Zie Flows.

Als je hetzelfde bestand opnieuw importeert, hergebruikt Vibr het thema en de typografische schalen van de eerste import.

Wat wordt wat

In Figma	In Vibr
Kleurvariabelen	Een kleurthema. Schalen zoals Brand/500 en korte namen zoals color/clay worden de kleuren ervan; Vibr bouwt er de lichte en donkere rollen mee en controleert ze op contrast.
Variabelen voor radius en afstand, schaduwstijlen	De hoeken, afstandseenheid en schaduwen van het thema.
Tekststijlen	Een typografische schaal per lettertypefamilie, met groottes, gewichten, regelhoogtes en letterafstand. Vibr haalt de lettertypen bij Google Fonts als ze daar staan.
Afbeeldingsvullingen	Foto's in je bibliotheek, genoemd naar hun lagen (een laag met de naam Photo: latte pour wordt @image/latte-pour), die de schermen gebruiken.
Frames	Schermen. Het model krijgt een afbeelding van het frame en een opbouw van de lagen: auto layout, tekst, componenten en de tokens die elke laag gebruikt.
Prototypelinks	Links tussen de schermen. Terug gaat naar het vorige scherm. Een overlay wordt ingebouwd in het scherm dat hem opent, als dialoogvenster of sheet, met eigen links.
Componenten	Het model krijgt je componenten en hun varianten te zien, en bouwt met de bijbehorende onderdelen van je designsysteem.
Een element	Een los gebouwd component, gecentreerd op de pagina.

Privacy en veiligheid

• De plug-in heeft geen netwerktoegang. Er verlaat niets Figma behalve het bestand dat je opslaat.
• Vibr controleert het bestand voordat het dat leest. Tekst komt binnen als platte tekst, zonder verborgen tekens, en elke waarde wordt gecontroleerd en in grootte beperkt. Elke afbeelding moet een echte afbeelding zijn van een grootte die Vibr opent, en Vibr tekent haar opnieuw, waardoor de metadata verdwijnen. Foto's komen in je bibliotheek via dezelfde controles als een upload. Tekst gaat door dezelfde inhoudscontrole als een getypt verzoek.
• Niets in het bestand wordt uitgevoerd. De tekst gaat bij elk verzoek naar je model als materiaal om mee te ontwerpen, net als een bijgevoegd document. Zie Sleutels, privacy en opslag.

Tips

• Geef frames de naam die je de schermen wilt geven. Een frame met de naam Checkout wordt @screen/checkout.
• Stuur bij een groot bestand een pagina of selectie in plaats van het hele bestand.
• Verfijn na een run elk scherm met een gewoon verzoek, zoals “maak van de winkelwagen een bottom sheet”.