Progettazione dell'interfaccia collaborativa con Figma
() translation by (you can also view the original English article)
Figma è qualcosa di un po ' speciale in questo momento. A prima vista è solo un'applicazione di disegno di web-basata, ma mentre ci sono altri programmi con le somiglianze, ciò che rende questo uno diverso è la capacità di soddisfare le specifiche esigenze di progettisti di interfacce.
È chiaro che la gente dietro Figma capisce che la maggior parte dei progetti di design di interfaccia sono basate su team o collaborativo in qualche modo. Ovviamente sono anche consapevoli del dolore punti squadre spesso devono lavorare attraverso quando si gestisce la sincronizzazione e collaborazione, con studi in genere bisogno di cobble insieme soluzioni che comprendono progettazione multipla, terze parti archiviazione e controllo della versione strumenti.
Figma Elimina la necessità di questo approccio disgiunto fornendo:
- Avanzate funzionalità di collaborazione diretta che consente di mantenere automaticamente tutti i membri del team sincronizzati.
- Combinato di progettazione, prototipazione e sviluppatore avverra in un'unica applicazione così più può essere fatto in un unico luogo.
- Accesso su tutti i sistemi operativi desktop, cioè Mac, Windows, Linux e ChromeOS.
Nonostante il fatto di Figma "su tela" strumenti sono grande e probabilmente abbastanza per convincere un sacco di progettisti di utilizzare il software, è l'approccio orientato alla collaborazione che sta portando molti studi di mettere da parte di altre applicazioni e consolidare in utilizzando Figma invece.
"Ora abbiamo un ambiente dinamico e collaborativo che ci permette di riflettere insieme, rimbalzare idee fuori di a vicenda e, in definitiva, essere più creativo." — Taylor Madaffari, Copywriter, navata Rocket Studios
In questo articolo vedrete voi stessi perché le squadre stanno prendendo un tale interesse in Figma, come illustra come è possibile usufruire della sua gamma completa di strumenti di collaborazione.
Se non hai ancora un account Figma si può ottenere uno gratis e seguire insieme a tutto il copriamo.



Stiamo andando a coprire parecchio in questo post, così si potrebbe desiderare di prendere un caffè in primo luogo:
- Come avviene la collaborazione in Figma
- Creare e gestire le squadre
- Controllo livelli di accesso del membro Team
- Stili e componenti ha condiviso la foto di squadra
- Condivisione e incorporamento
- Commenti
- Cronologia delle versioni
- L'integrazione con strumenti Extra
Lavorare insieme, il documento stesso, tempo reale
Uno dei più eccezionali funzionalità di collaborazione di Figma è la possibilità di avere più membri del team lavorano insieme contemporaneamente, sullo stesso documento, come si aggiorna in tempo reale.
Ciò è reso possibile dal fatto Figma è un'applicazione basata su web. Nel passato basati su web design applicazioni forse non sono stati presi tutto sul serio, ma nel caso di Figma sua natura online è una parte fondamentale di ciò che rende così attraente.



Per ogni persona con un particolare Figma file aperto, gli altri collaboratori vedrà un po' puntatore del mouse galleggianti intorno alla tela con il nome di quella persona collegato ad esso, che indica dove essi punto. Qualsiasi modifica da che loro apportata al documento verrà inoltrato a tutti gli altri membri, che vedranno tali modifiche vengono visualizzati in tempo reale. Tutto ciò che cambia in un file di Figma è disponibile per tutti gli altri, istantaneamente.
Questo aggiornamento centralizzato in tempo reale di collaborazione file significa:
- Non più l'invio di file avanti e indietro tra i membri del team.
- Non più la conversione da un formato in un altro a che fare con diversi software per diverse fasi del progetto.
- No più caricamento dei file di archiviazione di terze parti così altri membri del team possono accedere le modifiche.
- Non più sempre sincronizzati fra i cambiamenti un membro ha nei loro file e quelli un altro membro ha in loro.
- Possono lavorare insieme, attraverso idee e suggerimenti come si sta discutendo di loro.
- Allo stesso modo, è possibile implementare il feedback del cliente istantaneamente come si stanno mostrando loro un disegno.
Così come andate circa permettendo alle persone di collaborare in questo modo? Scopriamolo.
Come avviene la collaborazione in Figma
In Figma ci sono due modi che si può lavorare in modo collaborativo.
- Uno è la creazione e la gestione dei team di cui tutti i membri hanno accesso a progetti congiunti (un ottimo approccio per studios).
- L'altro è attraverso la condivisione di documenti, che possono essere eccellente per una maggiore cooperazione basata sulla comunità di forma libera.
Inizieremo cercando in squadre, che sono il fuoco predominante di Figma collaborazione.
Creare e gestire le squadre
Per iniziare a lavorare con squadre in Figma è innanzitutto necessario creare una nuova squadra. Accedere al Figma e premere il pulsante di nuovo Team presso l'angolo inferiore sinistro dell'interfaccia:



Nella pagina si è successivamente portato in, immettere un nome per il nuovo team:



Successivamente, viene visualizzata una pagina dove è possibile scegliere tra due tipi di piano di team. È possibile utilizzare il livello disponibile, che permette una squadra di due persone e illimitato agli spettatori di accedere fino a tre progetti, o un account a pagamento per altri membri del team e progetti, nonché alcune funzioni extra che potete leggere sulla pagina dei prezzi Figma.



Invitare i membri del Team
A questo punto il vostro team è stato creato ed è pronto per voi invitare i membri.
Nell'area del browser di file Figma, Guarda nella sidebar di sinistra per vedere il nome della squadra che appena configurato. Fare clic per andare nella finestra di gestione per il team:



In basso a destra dell'interfaccia di vedrete un'area con il titolo i membri del Team e sotto che voce si verrà visualizzato un link di invito. Fare clic sul collegamento per avviare il processo di invito.



Nella finestra popup che appare, Inserisci l'indirizzo email della persona che vuoi invitare. A questo punto si potrà anche impostare livello di accesso del membro del team per entrambi "admin", "può modificare" o ""può visualizzare"(andremo in cosa queste autorizzazioni dire poco).



Una volta invitati, la persona riceverà un avviso entro Figma o un'e-mail attraverso il quale possono accettare l'invito e far parte del team:



Creare progetti Team
Una volta che avete invitati i membri del team possono iniziare l'impostazione il team può accedere ai progetti.
La pagina di gestione del team, fare clic sul collegamento nuovo progetto che verrà visualizzato sotto il nome del team, sul lato sinistro nell'area gestione squadra.



Si otterrà un popup con un campo in cui è possibile aggiungere il nome del nuovo progetto e un elenco a discesa per impostare le autorizzazioni a livello di progetto per il team.
Nota: il livello disponibile può solo scegliere la prima opzione di autorizzazione, "tutti a <team>possibile modificare" (queste autorizzazioni verranno spiegate un po' più tardi).</team>



Ora quando si esamina l'elenco sotto "Progetti Team" si dovrebbe vedere il progetto appena creato, pronto per la tua squadra iniziare a lavorare.



- Gestione di team in più visita: Figma aiuto: creazione e gestione del team
Controllo livelli di accesso del membro Team
Ogni membro del team può avere loro livello di accesso impostato individualmente per una delle quattro opzioni:
- Proprietario.
- Admin.
- Editor.
- Visualizzatore.
Questi livelli di controllo di accesso:
- Se è possibile modificare o visualizzare solo i file.
- Il livello del membro del team è possibile invitare al progetto.
- Il livello del membro del team per il quale è possibile modificare le autorizzazioni.
Livello di accesso di un membro del team si applica a tutti i progetti e i file di quella squadra.
Chi può modificare il file?
Ogni livello tranne gli spettatori possa apportare modifiche ai file.
Proprietario e amministratore inviti e impostazione delle autorizzazioni
Proprietari e amministratori possono autorizzare una squadra con Slack, invitare i membri del team come amministratori, editor o visualizzatori e inoltre modificare le autorizzazioni di membro del team.
I proprietari e gli amministratori sono funzionalmente identici, ma ci può essere solo una persona insieme con lo stato di proprietario, così sembra essere principalmente sulla comunicazione che è responsabile di un progetto. Un proprietario può trasferire tale status a un altro membro del team.
Editor e Visualizzatore inviti e impostazione delle autorizzazioni
Gli editor possono invitare e modificare le autorizzazioni per gli editori e gli spettatori. Gli spettatori possono invitare altri spettatori ma non possono apportare modifiche dell'autorizzazione.
Modifica dei livelli di accesso
È possibile modificare il livello di accesso di un membro del team all'angolo inferiore destro della pagina squadra, sotto impostazioni di squadra:



O puoi cliccare sull'icona dell'ingranaggio Admin Dashboard link in alto a destra, vicino al titolo impostazioni di squadra:



Qui avete l'opzione di downgrade membri a "Viewer":



Autorizzazioni avanzate per squadre Pro
Se siete su una categoria, pagato a Figma è possibile utilizzare "Autorizzazioni avanzate", per cui i singoli progetti possono avere livelli di accesso che eseguono l'override di livelli di accesso normale dei membri del team. Queste sono le opzioni extra che abbiamo accennato in precedenza sono disponibili su pagato livelli quando si crea un nuovo progetto.
Ad esempio, se un progetto è impostato su "tutti a <team>possibile visualizzare", i membri del team anche che dispongono dell'autorizzazione Editor non saranno in grado di apportare modifiche nel progetto.</team>
L'opzione predefinita, disponibile su libero Seghettato, è:
- Tutti a <team> può modificare: si tratta di funzionalità di accesso normale, permettendo che i livelli di autorizzazione degli individui abbiano la precedenza.
Le opzioni avanzate dell'autorizzazione sono:
- Tutti a <team> possibile visualizzare: membri del team possono visualizzare ma non modificare il progetto.
- Solo ad invito - Fammi scegliere chi ha accesso: il progetto è invisibile a meno che una persona viene invitata in modo esplicito.
- Leggi tutto su Figma autorizzazioni a: aiuto Figma: autorizzazioni
Stili e componenti ha condiviso la foto di squadra
Componenti in Figma pre-sono fatti gli oggetti grafici che possono essere riutilizzati come richiesto, ad esempio pulsanti, intestazioni e carte. Gli stili sono invece raccolte pre-configurate di proprietà che possono essere applicati agli oggetti, ad esempio lo stile del testo.
Ad esempio, si tratta di una libreria material piena di trascinamento



Non voglio entrare troppo nelle funzionalità dei componenti e stili ora, come ci stiamo concentrando su strumenti di collaborazione, ma se volete saperne di più su ciascuna, visitano:
La condivisione delle librerie
Librerie di componenti e stili possono essere condivise tra i team. Nella pagina di gestione di team per la tua squadra, guardare sotto "Impostazioni Team" in alto a destra e fare clic sul collegamento di abilitare le librerie.



Vedrete un elenco di librerie potenzialmente disponibili per il team ed è possibile attivare o disattivare l'accesso per ciascuno:



Suggerimento per impedire modifiche accidentali componente
Nota: è possibile utilizzare li avete accesso alle autorizzazioni avanzate, come descritto in precedenza, per garantire che nessuno fa qualsiasi modifiche accidentali ai componenti che poi ottenere srotolato su tutta la linea. Basta tenere il vostro master componenti nei progetti di sola visualizzazione, quindi i membri del team sarà in grado di vedere e utilizzare i componenti ma non modificarli.
- Per la squadra in più librerie visitare: Figma blog: libreria Team 1.0
Condivisione e incorporamento
Collaborazione in Figma non è solo per squadre da solo. È anche possibile utilizzare la funzione di condivisione per consentire a chiunque di modificare o visualizzare uno dei tuoi documenti, che lo rende ideale per le comunità più scarsamente coordinate e la gente solo cercando di creare e regalo beni ad altri progettisti.
Per condividere un documento premere il pulsante di condivisione blu all'estremità destra della barra degli strumenti superiore.



Nella finestra popup che appare clicca sul link che dice Enable link accesso.



Una volta che è fatto, accanto alla riga che legge chiunque abbia il link, scegliere se si desidera persone per essere in grado di modificare o semplicemente visualizzare il documento. È inoltre possibile rimuovere link accesso qui più tardi se è necessario.



In alternativa, su quello stesso popup "Share" è possibile invitare qualcuno direttamente piuttosto che consentendo l'accesso link. Proprio come è il caso con i membri del team, tutti coloro che ottiene accesso in modifica di un documento tramite la condivisione possa collaborare su di esso in tempo reale.
- Saperne di più su Figma di condivisione documenti qui: aiuto Figma: condivisione di file e progetti
L'incorporamento
Se si desidera essere in grado di visualizzare un disegno Figma all'interno di un altro sito, è possibile farlo incorporando.
Mentre ancora nella finestra che si apre quando si preme il pulsante Condividi, fare clic il <> pubblico incorporare link in basso per ottenere la copia e incollare pronti codice embed:



Una volta che questo codice HTML viene utilizzato per incorporare un documento Figma in una pagina sarà simile a questo:



Aggiornamento di file incorporati in tempo reale, garantendo l'ultima versione è sempre mostrato.
- Per più su Figma di live incorporare lettura: aiuto Figma: incorporare Figma live
Commenti
Anche se la collaborazione può avvenire in tempo reale attraverso Figma, che non significa che sempre deve. Per la comunicazione che non è in tempo reale i commenti sistema entra in gioco, in modo che qualsiasi membro del team o il cliente con vista accesso possibile aggiungere feedback in qualsiasi posizione nell'area di disegno di progettazione.



Quando un commento viene lasciato, altri membri del team vedrà un avviso sopra l'icona di commento sulla barra degli strumenti, e quando tale avviso viene cliccato su una piccola bolla di discorso apparirà sulla pagina. A sua volta, quando la bolla è cliccata si aprirà un pannello di comunicazione di testo attraverso il quale le note possono essere scambiati.
- Per leggere più commenti su in Figma: aiuto Figma: Commenti
Cronologia delle versioni
Uno dei servizi di terze parti che un team collaborativo ha spesso bisogno di coordinare il loro flusso di lavoro è una sorta di sistema di controllo di versione. Con Figma questo è costruito a destra in e tutto avviene automaticamente, con versioni viene salvate ogni volta che c'è un periodo di inattività su un file per 30 minuti, cioè quando nessuno sta lavorando su detto file.
Versione storia va indietro 30 giorni il livello disponibile ed è illimitato sui livelli di pagamento.
Per visualizzare la cronologia di un file, aprirlo e poi premere v a forma di link a destra del nome del file sulla barra degli strumenti superiore e scegliere Visualizza cronologia delle versioni:



Verrà visualizzato un elenco di versioni salvate nella barra laterale destra:



Se si fa clic su uno di questi elementi la relativa versione del file caricherà sulla tela, l'elemento nell'elenco della cronologia di versione diventerà blu e tre puntini apparirà accanto ad esso. Se si fa clic su questi tre punti che si otterrà un menu tramite il quale è possibile rinominare, ripristinare o duplicare tale versione.



- Più su cronologia in Figma presso Figma aiuto: cronologia delle versioni
Integrazione con strumenti Extra
Figma ha praticamente coperto su tutto il che necessario per collaborare all'interno dello spazio di design. Ma anche ti aiuta a espandere le possibilità di collaborazione di là del processo di progettazione integrando con una gamma di strumenti di terze parti.
Margine di flessibilità
Integrazione Slack è un particolare punto focale per Figma, con la possibilità di convertire qualsiasi squadra Slack esistente in una squadra di Figma. Avrete anche le notifiche inviate tramite Slack quando commenti vengono lasciati sul file Figma.
- Più su Slack integrazione a: aiuto Figma: Figma Slack
Dribbble
Figma ha un flusso regolare di esportare una cornice e spingerlo direttamente fino a Dribbble.
- Più su integrazione di Dribbble a: aiuto Figma: Figma e Dribbble
Zeplin
Figma ha già i propri sviluppatori avverra strumenti, ma se avete ancora bisogno o desidera utilizzare Zeplin comunque Figma fornisce integrazione per facilmente esportare i fotogrammi in un progetto di Zeplin.
- Più su Zeplin integrazione a: aiuto Figma: Figma e Zeplin
Carta di Dropbox
Integrazione di Figma con Dropbox non è per fini di stoccaggio, piuttosto è che consente di incorporare rapidamente i disegni nei file di Dropbox carta. La carta è una servizio di modifica collaborativa dei documenti. Così il tuo team può collaborare anche su un documento, mentre un design Figma incorporato in esso gli aggiornamenti in tempo reale quando vengono apportate modifiche ad esso.
- Più su integrazione di Dropbox carta a: aiuto Figma: Figma e Dropbox
JIRA e Trello
Per aiutare con il lato di gestione di progetto delle cose, Figma si integra con entrambi Jira e Trello, permettendo di avere diretta incorpora Figma file all'interno di problemi / carte.
- Più su Jira integrazione a: aiuto Figma: Figma e Jira
- Più su integrazione di Trello a: aiuto Figma: Figma e Trello
Avvolgendo
Come potete vedere, Figma fornisce una serie impressionante di funzioni che aiutano i designer lavorano insieme in modo collaborativo ed efficiente interfaccia. Molti dei punti di dolore comune del progetto team basato andare via con questo centralizzata, approccio basato sul web.
E impressionante come gli strumenti di collaborazione di Figma sono, che è ancora solo una parte di ciò che lo rende un'applicazione interessante e accattivante.
Per ulteriori informazioni su perché si dovrebbe dare Figma una corsa, controllare alcuni dei nostri altri tutorial e corsi:
- FigmaFigma strati pannello suggerimentiMelina Bracey
- Progettazione dell'interfaccia utenteNuovo corso: Introduzione alla FigmaAndrew Blackman
- FigmaAndare oltre le nozioni di base della progettazione dell'interfaccia utente nel nostro nuovo corso FigmaAndrew Blackman