Teleport 2.0: il builder UI low-code collaborativo

Dopo mesi di iterazioni e feedback da parte dei nostri utenti, siamo entusiasti di lanciare l'ultima versione della nostra piattaforma!

Questa nuova versione include notevoli miglioramenti, tra cui un motore di collaborazione completamente nuovo che consente ai team di creare interfacce utente con un’efficienza senza precedenti. Inoltre, rappresenta un passo significativo verso la realizzazione di applicazioni front-end complete.

In questo post del blog descriveremo brevemente alcune delle funzionalità che abbiamo aggiunto e ne presenteremo altre previste nella nostra roadmap.

Un nuovo motore di collaborazione in tempo reale#

Il nuovo motore consente sessioni di collaborazione tra decine di utenti. Inoltre, permette al nostro team di sviluppo di rilasciare nuove funzionalità più velocemente che mai!

Dietro questo motore c’è un anno di lavoro sull’infrastruttura. Invece di limitarci ad aggiornare il motore esistente, abbiamo deciso di impegnarci a fondo e riscrivere l’intera piattaforma. È stata una scelta strategica, volta a privilegiare un investimento dai benefici a lungo termine.

Approfondiremo questa scelta, le sfide e le relative implicazioni in un post del blog dedicato.

Il trascinamento della selezione fa un salto di qualità!#

Rilascia gli elementi dove vuoi, spostali, raggruppane automaticamente più di uno o posizionali liberamente. La funzione di trascinamento della selezione della piattaforma è ora molto più potente, intuitiva e facile da usare.

Sei un designer e vuoi posizionare gli elementi nel punto giusto? Ci pensiamo noi!

Sei uno sviluppatore e vuoi lavorare rapidamente senza dover pensare a quale proprietà flex impostare? Si tratta di justify-content o di align-items? Ti basta posizionare gli elementi dove vuoi: agli aggiornamenti pensiamo noi.

Inserisci gli elementi in un contenitore

Modifica la posizione e raggruppa gli elementi

Supporto migliorato per le proprietà dei componenti#

Lavorare con i componenti e le relative proprietà è ora più semplice. Da oggi, le proprietà vengono rilevate e create automaticamente per testi, link e immagini.

Nel prossimo rilascio introdurremo le sovrascritture degli stili e le varianti per i tuoi componenti.

Associazione automatica delle proprietà dei componenti

Un ispettore visivo molto più intuitivo#

L'ispettore visivo non è più solo un insieme di proprietà CSS in un'interfaccia grafica: è facile da usare.

Nella versione iniziale, l'utente doveva sapere cosa comportava impostare display flex, block, inline, oppure none e conoscerne tutte le implicazioni. Per capire come funziona, era necessaria una solida conoscenza tecnica dei CSS.

La nuova versione offre un'esperienza più intuitiva a designer e utenti non tecnici, consentendo comunque agli sviluppatori di lavorare direttamente con le proprietà CSS.

Questi miglioramenti fanno parte della nostra ricerca continua per offrire a ogni membro del team un’esperienza di creazione personalizzata e intuitiva, indipendentemente dalle sue competenze tecniche.

Ispettore visivo semplificato

Stati dell’interfaccia utente#

Questa nuova versione consente di impostare facilmente gli stati al passaggio del mouse, attivo, disabilitato, o altri stati, dal pannello dell’ispettore.

Imposta facilmente gli stati di interazione

Token di design#

Abbiamo aggiunto anche i token di design. Un token di design può essere un colore, uno stile di carattere o una proprietà dimensionale. Per ogni progetto puoi definire set di token personalizzati.

Una volta creato, un token è disponibile come variabile in tutto il progetto. Invece di impostare ripetutamente e manualmente le proprietà di elementi simili, puoi usare uno dei token esistenti. Se modifichi il valore del token, aggiorneremo automaticamente tutti gli elementi dipendenti.

Oltre agli evidenti vantaggi di velocizzare il lavoro e offrire una panoramica centralizzata degli stili atomici, anche il codice viene ottimizzato in background. Per ogni token di design creato e utilizzato, i generatori di codice producono uno stile CSS globale riutilizzabile, riducendo le dimensioni del pacchetto di codice.

Definisci la palette di colori

E adesso?#

Per ulteriori informazioni sui nostri piani futuri, sulle prossime versioni e sulle funzionalità richieste, consulta la nostra roadmap pubblica disponibile su Trello.

Tra gli elementi in evidenza:

• Sessione anonima
• Crea interfacce utente senza dover creare un account. Condividi un progetto con un utente che non ha un account.
• Plugin per Figma
• Importa i design di Figma direttamente nella piattaforma
• Classi CSS
• Una funzionalità attesa da tempo. Condividi gli stili tra gli elementi senza creare componenti né copiare e incollare manualmente gli stili da un elemento all'altro. È la base per il supporto ai fogli di stile esterni, come Tailwind CSS, Bootstrap, Chakra UI, Material UI e altre librerie.
• Interattività, gestione degli eventi e rendering condizionale
• Aggiungi gestori di eventi per le azioni di clic, mostra o nascondi gli elementi in base a condizioni o azioni dell'utente e molto altro.
• Recupero e mappatura dei dati
• Ecco a noi JAMstack! Integra il tuo CMS headless preferito e collega i dati alla tua interfaccia utente: sei pronto.
• Elementi ripetibili
• Usa tabelle, elenchi o altri elementi iterabili.
• Integrazione del flusso di lavoro per sviluppatori
• Integra il tuo progetto con GitHub o CodeSandbox. Aggiungeremo un’interfaccia a riga di comando per integrare il tuo design con una base di codice esistente.

Desideriamo ringraziare tutti i nostri utenti per i preziosi feedback e per il tempo che ci hanno dedicato durante le interviste. Questa versione non sarebbe stata possibile senza il loro prezioso contributo.