Importa da Figma

Send to Vibr è un plugin di Figma. Legge il file che hai aperto in Figma (variabili, stili, componenti, frame e link del prototipo) e lo salva in un unico file. Vibr importa quel file e costruisce a partire da esso con il tuo design system e il tuo modello.

Installa il plugin

In Figma, apri il menu Plugins, cerca Send to Vibr ed eseguilo. Il plugin funziona con tutti i piani di Figma, incluso Starter.

Scegli cosa inviare

Il plugin invia il livello del file che scegli, dall'intero file fino a un singolo elemento:

• Intero file: i flussi del prototipo di ogni pagina, oppure le sue schermate, pagina per pagina. Le pagine di copertina, di miniatura e di separazione vengono saltate.
• Una pagina senza nulla selezionato: i suoi flussi, oppure tutte le schermate che contiene.
• Una sezione: i suoi frame, ciascuno come schermata.
• Un frame: quella schermata.
• Un elemento: un componente, un'istanza o qualsiasi livello all'interno di un frame. Vibr lo costruisce a sé, come componente riutilizzabile.

Seleziona ciò che vuoi, oppure scegli This page or selection o Whole file in cima al plugin. Il plugin elenca ciò che invierà. Puoi combinarli: una schermata e due elementi viaggiano insieme.

Sotto, scegli cosa includere:

• Screens and elements, with layout and prototype links e Include frames they link to, così un flusso arriva completo. Arrivano anche le foto che contengono, ritagliate come le mostra il tuo design.
• Variables, text styles and shadows, dall'intero file.
• Components, con le loro varianti. Quelli usati dalle tue schermate vengono per primi.

Un file contiene fino a 12 schermate ed elementi, 12 foto, 80 componenti e 1.500 variabili.

Salva il file

Seleziona Save file for Vibr. Il plugin salva un file che termina con .vibr-figma.json. Copy mette lo stesso contenuto negli appunti.

Importalo in Vibr

Nella casella della richiesta, seleziona +, poi Importa da Figma, e scegli il file. Puoi anche trascinare il file sulla casella della richiesta oppure incollare ciò che Copy ha messo negli appunti.

La finestra elenca ciò che Vibr creerà. Deseleziona ciò che non vuoi:

• Tema colori dalle variabili, aggiunto alla tua libreria.
• Scale tipografiche, una per famiglia di font, aggiunte alla tua libreria.
• Foto dai frame, aggiunte alla tua libreria come le immagini caricate, così le schermate mostrano le immagini reali.
• Schermate ed elementi da costruire, nell'ordine in cui il tuo flusso le visita.

Seleziona Costruisci. Vibr costruisce ogni schermata come richiesta a sé con il tuo design system e il tuo modello, la salva con il nome del suo frame e passa alla successiva. Una barra sopra la casella della richiesta indica a quale schermata è arrivato. Interrompi termina l'esecuzione e conserva le schermate già costruite.

Al termine dell'esecuzione, Vibr apre la prima schermata. Seleziona Riproduci per navigare nel flusso. Vedi Flussi.

Se importi di nuovo lo stesso file, Vibr riutilizza il tema e le scale tipografiche creati dalla prima importazione.

Cosa diventa cosa

In Figma	In Vibr
Variabili di colore	Un tema colori. Scale come Brand/500 e nomi brevi come color/clay diventano i suoi colori; Vibr ne ricava i ruoli chiari e scuri e ne verifica il contrasto.
Variabili di raggio e spaziatura, stili di ombra	Gli angoli, l'unità di spaziatura e le ombre del tema.
Stili di testo	Una scala tipografica per ogni famiglia di font, con dimensioni, pesi, interlinee e spaziatura tra le lettere. Vibr richiede i font a Google Fonts quando li ha.
Riempimenti immagine	Foto nella tua libreria, con il nome del loro livello (un livello chiamato Photo: latte pour diventa @image/latte-pour), usate dalle schermate.
Frame	Schermate. Il modello riceve l'immagine del frame e una struttura dei suoi livelli: auto layout, testo, componenti e i token usati da ogni livello.
Link del prototipo	Link tra le schermate. Indietro torna alla schermata precedente. Un overlay viene costruito dentro la schermata che lo apre, come finestra di dialogo o pannello, con i suoi link.
Componenti	Il modello viene informato dei tuoi componenti e delle loro varianti, e costruisce con le parti corrispondenti del tuo design system.
Un elemento	Un componente costruito a sé, centrato nella pagina.

Privacy e sicurezza

• Il plugin non ha accesso alla rete. Da Figma non esce nulla tranne il file che salvi.
• Vibr controlla il file prima di leggerlo. Il testo arriva come testo semplice, senza caratteri nascosti, e ogni valore viene verificato e limitato nelle dimensioni. Ogni immagine deve essere un'immagine vera, di dimensioni che Vibr accetta di aprire, e Vibr la ridisegna, rimuovendone i metadati. Le foto entrano nella tua libreria con gli stessi controlli di un caricamento. Il testo passa per lo stesso controllo dei contenuti di una richiesta digitata.
• Nulla nel file viene eseguito. Il suo testo arriva al tuo modello con ogni richiesta come materiale da cui progettare, come accade con un documento allegato. Vedi Chiavi, privacy e archiviazione.

Consigli

• Dai ai frame il nome che vuoi per le schermate. Un frame chiamato Checkout diventa @screen/checkout.
• Per un file grande, invia una pagina o una selezione invece dell'intero file.
• Dopo un'esecuzione, perfeziona qualsiasi schermata con una normale richiesta, come «trasforma il carrello in un pannello dal basso».