Advertisement
  1. Web Design
  2. UX/UI
  3. UI Design

Progettazione dell'interfaccia collaborativa con Figma

Scroll to top
Read Time: 14 min

() 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.

Figma start hereFigma start hereFigma start here
Interfaccia di Figma

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.

  1. Uno è la creazione e la gestione dei team di cui tutti i membri hanno accesso a progetti congiunti (un ottimo approccio per studios).
  2. 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:

new team button in Figmanew team button in Figmanew team button in Figma

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

Name your teamName your teamName your 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.

Choose your team planChoose your team planChoose your team plan

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:

find teamfind teamfind 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.

invite membersinvite membersinvite members

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).

permissionspermissionspermissions

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:

invite emailinvite emailinvite email

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.

new projectnew projectnew project

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>

set permissionsset permissionsset permissions

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

newly created projectnewly created projectnewly created project

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:

Changing Access LevelsChanging Access LevelsChanging Access Levels

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

Admin Dashboard linkAdmin Dashboard linkAdmin Dashboard link

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

downgrade members to Viewerdowngrade members to Viewerdowngrade members to 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.

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

a library full of drag drop ready Material UI componentsa library full of drag drop ready Material UI componentsa library full of drag drop ready Material UI components

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.

Enable Libraries linkEnable Libraries linkEnable Libraries link

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

toggle access on or off for eachtoggle access on or off for eachtoggle access on or off for each

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.

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.

To share a document hit the blue Share buttonTo share a document hit the blue Share buttonTo share a document hit the blue Share button

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

Enable link accessEnable link accessEnable link access

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.

choose whether you want people to be able to edit or just view the documentchoose whether you want people to be able to edit or just view the documentchoose whether you want people to be able to edit or just view the document

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.

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:

click the Public embed link at the bottomclick the Public embed link at the bottomclick the Public embed link at the bottom

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

embed a Figma document in a pageembed a Figma document in a pageembed a Figma document in a page

Aggiornamento di file incorporati in tempo reale, garantendo l'ultima versione è sempre mostrato.

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.

For communication thats not in real time the comments system comes into playFor communication thats not in real time the comments system comes into playFor communication thats not in real time the comments system comes into play

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.

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:

Show Version HistoryShow Version HistoryShow Version History

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

A list of saved versions will appear in the right sidebarA list of saved versions will appear in the right sidebarA list of saved versions will appear in the right sidebar

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.

a menu through which you can rename restore or duplicate that versiona menu through which you can rename restore or duplicate that versiona menu through which you can rename restore or duplicate that version

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.

Dribbble

Figma ha un flusso regolare di esportare una cornice e spingerlo direttamente fino a 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.

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.

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.

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:


Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.