Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Web Design
  2. Figma

Diseño Colaborativo Con Figma

by
Read Time:13 minsLanguages:

Spanish (Español) translation by Jean Perez (you can also view the original English article)

Figma es algo un poco especial en este momento. A primera vista es sólo una aplicación de diseño basada en la web, pero mientras que hay otros programas similares, lo que hace diferente este es su capacidad para atender a las necesidades específicas de los diseñadores de la interfaz.

Está claro que las personas detrás de Figma entienden que proyectos de diseño de interfaz más son en equipo o colaborativo de alguna manera. Obviamente son también conscientes del dolor puntos equipos a menudo tienen que trabajar a través de manejo de colaboración y sincronización, con los estudios por lo general necesidad de improvisar soluciones que comprende diseño múltiple, terceros almacenamiento y control de versiones herramientas.

Figma elimina la necesidad de este enfoque desarticulado al proporcionar:

  • Avanzadas capacidades de colaboración en que automáticamente todos los miembros del equipo sincronizados.
  • Combinado diseño, prototipado y desarrollador entregue en una sola aplicación por lo que más se puede hacer en un solo lugar.
  • Acceso en todos los sistemas operativos desktop, es decir Mac, Windows, Linux y ChromeOS.

A pesar del hecho de Figma "sobre lienzo" herramientas son grandes y, probablemente, suficiente para convencer a un montón de diseñadores para usar el software, es la estrategia basada en la colaboración que lleva muchos estudios para poner a un lado otras aplicaciones y consolidar en la utilización de Figma en su lugar.

"Tenemos ahora un entorno dinámico y colaborativo que nos permite buscar juntos, rebotar ideas de otros y, en definitiva, ser más creativo." — Taylor Madaffari, Redactor, Aisle Rocket Studios

En este artículo usted verá por usted mismo por qué equipos tienen tanto interés en Figma, como nos paso a cómo puede tomar ventaja de su gama completa de herramientas de colaboración.

Si todavía no tienes una cuenta de Figma se puede obtener uno gratis y seguir junto con todo lo cubrimos.

Figma start hereFigma start hereFigma start here
Interfaz de Figma

Vamos a cubrir bastante en este post, así que usted puede tomar un café en primer lugar:

  • Cómo Se Realiza la Colaboración en la Figma
  • Crear y Gestionar Equipos
  • Niveles de Acceso de Miembro de Equipo de Control
  • Estilos y Componentes de Equipo Compartido
  • Incrustación y Compartir
  • Comentarios
  • Historial de Versiones
  • Integración Con Herramientas Adicionales

Trabajar Juntos, Mismo Documento, Tiempo Real

Uno de los más sobresalientes características colaboración de Figma es la capacidad de que varios miembros del equipo trabajar juntos al mismo tiempo, en el mismo documento, como actualiza en tiempo real.

Esto es hecha posible por el hecho de Figma es una aplicación basada en web. En el pasado diseño basado en la web aplicaciones quizás no tomaron completamente en serio, pero en el caso de Figma su naturaleza online es una parte fundamental de lo que la hace tan atractiva.

Para cada persona con una Figma particular archivo abierto, los demás colaboradores verán un poco puntero flotando alrededor de la lona con el nombre de la persona unido a él, señalando donde señalan. Cualquier cambio que hacen en el documento se transmitió a todos los miembros que se ven esos cambios aparecen en tiempo real. Todo lo que los cambios en un archivo de Figma está disponible para todo el mundo, al instante.

Esta actualización centralizado, real tiempo de colaboración archivos significa:

  • No enviar archivos de ida y vuelta entre los miembros del equipo.
  • No más convertir de un formato a otro para tratar con diferentes software para diferentes etapas del proyecto.
  • No más cargar archivos al almacenamiento de información de terceros para que otros miembros del equipo pueden acceder a cambios.
  • No más sincronizada entre cambios uno de los miembros tiene en sus archivos y los otro miembro tiene en ellos.
  • Puede trabajar a través de ideas y sugerencias, como son discutirlas.
  • Asimismo, puede aplicar retroalimentación al instante como ellos muestran un diseño.

Entonces, ¿cómo vas sobre permitir a las personas colaborar de esta manera? Vamos a averiguar.

Cómo Se Realiza la Colaboración en la Figma

En Figma hay dos maneras que usted puede trabajar en colaboración.

  1. Una es a través de la creación y gestión de equipos cuyos miembros todos tienen acceso a proyectos conjuntos (un gran enfoque para estudios).
  2. La otra es a través del intercambio de documentos, que pueden ser excelentes para más cooperación basado en la comunidad de forma libre.

Comenzaremos por mirar los equipos, que son el centro predominante de Figma colaboración.

Crear y Gestionar Equipos

Para empezar a trabajar con equipos de Figma primero debe crear un nuevo equipo. Inicie sesión en Figma y presione el botón de Nuevo Equipo en la esquina inferior izquierda de la interfaz:

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

En la página que estás tomado posteriormente a, escriba un nombre para su nuevo equipo:

Name your teamName your teamName your team

A continuación, serás llevado a una página donde se puede elegir entre dos tipos de plan de equipo. Usted puede utilizar el nivel gratuito, que permite a un equipo de dos personas y espectadores ilimitados a hasta tres proyectos, o una cuenta pagada de más miembros del equipo y proyectos, así como algunas características adicionales que se puede leer en la página precios de Figma.

Choose your team planChoose your team planChoose your team plan

Invitar a los Miembros del Equipo

En este momento su equipo ha sido creado y está listo para que usted pueda invitar a los miembros.

En el área de búsqueda de archivo de Figma, busque en la barra lateral izquierda para ver el nombre del equipo que acaba de programar. Haga clic en él para entrar en la ventana de administración de ese equipo:

find teamfind teamfind team

En la parte inferior derecha de la interfaz verás una zona con el título de Miembros del Equipo, y bajo ese título verás un enlace de +Invitar. Haga clic en el enlace para iniciar el proceso de invitación.

invite membersinvite membersinvite members

En la ventana emergente que aparece, introduzca la dirección de correo electrónico de la persona que desea invitar. En este punto también se podrá definir nivel de acceso de miembro del equipo sea "admin", "Editar" o ""ver"(iremos en lo que estos permisos significan poco).

permissionspermissionspermissions

Una vez invitado, la persona recibirá una alerta dentro de Figma o un correo electrónico a través del cual pueden aceptar la invitación y formar parte del equipo:

invite emailinvite emailinvite email

Crear Proyectos de Equipo

Una vez que los miembros de su equipo invitados puede comenzar a configurar proyectos de que equipo puede acceder.

En la página de administración del equipo, haga clic en el + Nuevo Proyecto link verás bajo su nombre de equipo, en el lado izquierdo en el área de gestión de equipo.

new projectnew projectnew project

Usted recibirá una ventana emergente con un campo en el cual usted puede Agregar el nombre de su nuevo proyecto y una lista desplegable para establecer los permisos de nivel de proyecto para el equipo.

Nota: en el nivel libre sólo se puede elegir la primera opción de permiso, "todo el mundo en <team>puede editar" (estos permisos se explicará un poco más adelante).</team>

set permissionsset permissionsset permissions

Ahora cuando usted mira la lista de "Proyectos" debería ver el proyecto recién creado, listo para tu equipo empezar a trabajar en el.

newly created projectnewly created projectnewly created project

Niveles de Acceso de Miembro de Equipo de Control

Cada miembro del equipo puede tener su nivel de acceso establecer individualmente en una de cuatro opciones:

  • Propietario.
  • Admin.
  • Editor.
  • Visor.

Estos Control de Niveles de Acceso:

  • Si usted puede editar o sólo ver los archivos.
  • El nivel de miembro del equipo que puede invitar al proyecto.
  • El nivel de miembro del equipo para los cuales puede modificar permisos.

Nivel de acceso de un miembro del equipo se aplicará a todos los proyectos y archivos de ese equipo.

¿Quién Puede Cambiar Archivos?

Todos los niveles excepto los espectadores pueden realizar cambios en archivos.

Propietario y administrador invitaciones y valor del permiso de

Propietarios y administradores pueden autorizar a un equipo con holgura, invitar a los miembros del equipo como administradores, redactores o los espectadores y también cambiar los permisos de miembro de equipo.

Los propietarios y administradores son funcionalmente lo mismo, pero sólo puede haber un conjunto de persona con estatus de dueño por lo que parece ser principalmente sobre la comunicación que está a cargo de un proyecto. Un propietario puede transferir ese estatus a otro miembro del equipo.

Editor y Visor Invitaciones y Valor del Permiso

Editores pueden invitar y cambiar los permisos de los editores y los espectadores. Los espectadores pueden invitar a otros televidentes pero no pueden hacer cualquier cambio de permisos.

Cambiar los Niveles de Acceso

Usted puede cambiar el nivel de acceso de un miembro del equipo en la esquina inferior derecha de la página del equipo, en Configuración de Equipo:

Changing Access LevelsChanging Access LevelsChanging Access Levels

O puede hacer clic en el icono de engranaje enlace Admin Dashboard en la parte superior derecha, cerca de la dirección de Configuración de Equipo:

Admin Dashboard linkAdmin Dashboard linkAdmin Dashboard link

Aquí tienes la opción de downgrade miembros al "Espectador":

downgrade members to Viewerdowngrade members to Viewerdowngrade members to Viewer

Permisos Avanzados para Equipos Profesionales

Si usted está en un nivel pagado en Figma pueden utilizar "Permisos avanzados", por el que los proyectos individuales pueden tener niveles de acceso que reemplace los niveles de acceso normal de los miembros del equipo. Estas son las opciones extras que mencionamos anteriormente disponible en reciben niveles al crear un nuevo proyecto.

Por ejemplo, si un proyecto se define como "todo el mundo en <team> puede ver", los miembros del equipo incluso con permiso de Editor no podrán hacer cambios en el proyecto.

La opción predeterminada, en niveles de gratis, es:

  • Todo el mundo en <team> puede editar: esta es la funcionalidad de acceso normal, permitiendo que los niveles de permiso de las personas para tomar precedencia.

Las opciones de permiso avanzado son:

  • Todo el mundo en <team> puede ver: los miembros del equipo pueden ver pero no modificar el proyecto.
  • Invitar sólo - me dejaste elegir quién tiene acceso: el proyecto es invisible a menos que explícitamente se invita a una persona.

Estilos y Componentes de Equipo Compartido

Componentes de Figma se hacen los objetos gráficos que se pueden reutilizar como sea necesario, tales como tarjetas, títulos y botones. Los estilos son por otro lado colecciones preconfiguradas de propiedades que se pueden aplicar a objetos, como el estilo del texto.

Por ejemplo, es una biblioteca completa de arrastrar y soltar componentes de interfaz de usuario de Material listos:

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

No entraré demasiado en las capacidades de los componentes y estilos, como nos estamos centrando en las herramientas de colaboración, pero si quieres aprender más sobre cada uno, visitan:

Compartir Bibliotecas

Bibliotecas de componentes y estilos pueden ser compartidas a través de equipos. En la página de administración del equipo para su equipo, busque en "Configuración de equipo" en la parte superior derecha y haga clic en el enlace de Permitir Bibliotecas.

Enable Libraries linkEnable Libraries linkEnable Libraries link

Verás una lista de bibliotecas potencialmente disponibles para el equipo y se puede alternar acceso o desactivar para cada uno:

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

Trucos para Evitar Cambios Accidentales de Componente

Nota: Si tienes acceso a permisos avanzados, como se describió anteriormente, usted puede utilizarlas para asegurar que nadie hace cualquier alteración accidental a los componentes luego haz rodado hacia fuera a través de la Junta. Apenas tenga los componentes maestro sólo proyectos, entonces los miembros de su equipo será capaces de ver y usar los componentes pero no modificarlos.

Incrustación y Compartir

Colaboración de Figma no es sólo para equipos solamente. También puede utilizar la función compartir para permitir que cualquier persona editar o ver uno de sus documentos, haciéndola grande para comunidades más libremente coordinadas y personas sólo buscan crear y activos de regalo a otros diseñadores.

Para compartir un documento Presione el botón azul Compartir en el extremo derecho de la barra de herramientas superior.

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

En la ventana emergente que aparece, haga clic en el enlace que dice Habilitar acceso de enlace.

Enable link accessEnable link accessEnable link access

Una vez hecho esto, al lado de la línea que dice Cualquier persona con el enlace, elija si desea la gente para poder editar o sólo ver el documento. También puede quitar enlace acceso aquí más tarde si es necesario.

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

Por otra parte, en eso mismo emergente de "Compartir" puede invitar a alguien directamente en lugar de acceso de enlace que permite. Así como es el caso de los miembros del equipo, todos los que obtiene acceso de edición a un documento a través del intercambio pueden colaborar en él en tiempo real.

Incrustación

Si usted quiere ser capaz de mostrar un diseño de Figma de dentro de otro sitio, puede hacerlo por incrustación.

Mientras que todavía en el cuadro que se abre cuando se pulsa el botón de compartir, haga clic en el <> público insertar enlace en la parte inferior para obtener copia y pegar listo incrustar código:

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

Una vez que este HTML se utiliza para incrustar un documento de Figma en una página que se verá algo como esto:

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

Actualización de archivos incrustados en tiempo real, asegurando la última versión es mostrarse siempre.

Comentarios

A pesar de que la colaboración puede ocurrir en tiempo real a través de Figma, que no siempre tiene que. Para la comunicación que no es en tiempo real los comentarios sistema entra en juego, para que cualquier miembro del equipo o cliente con acceso a vista puede agregar comentarios en cualquier posición en el lienzo de diseño.

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

Un comentario, otros miembros del equipo, verá una alerta sobre el icono de comentario en la barra de herramientas, y cuando esa alerta se hace clic en un pequeño bocadillo de diálogo aparecerá en la página. A su vez, cuando la burbuja se hace clic en un panel de comunicación de texto se abrirá a través del cual se pueden intercambiar notas.

Historial de Versiones

Uno de los servicios de terceros a menudo necesita un equipo de colaboración para coordinar su flujo de trabajo es una especie de sistema de control de versiones. Con Figma esta se construye en y todo sucede automáticamente, con versiones salvos cada vez que hay un período de inactividad en un archivo de 30 minutos, es decir, cuando nadie está trabajando en dicho archivo.

Historial de versiones se remonta 30 días en el nivel gratuito y es ilimitado en niveles de pagadas.

Para ver el historial de versiones de un archivo, abrirlo pulsa la v en forma de enlace a la derecha del nombre del archivo en la barra de herramientas superior y elija Mostrar Historial de Versiones:

Show Version HistoryShow Version HistoryShow Version History

Aparecerá una lista de las versiones guardadas en la barra lateral derecha:

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

Si hace clic en cualquiera de estos elementos la versión relacionada del archivo de carga sobre el lienzo, el elemento de la lista de historial de versión dará vuelta al azul y tres puntos aparece junto a él. Si hace clic en estos tres puntos que obtendrás un menú a través del cual usted puede cambiar el nombre, restaurar o duplicar esa versión.

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

Integración con Herramientas Adicionales

Figma tiene cubierto casi en todo que lo necesario para colaborar en el diseño del espacio. Pero que también le ayuda a ampliar sus opciones de colaboración más allá del proceso de diseño mediante la integración con una gama de herramientas de terceros.

Slack

Integración de parafina es un foco particular de Figma, con la capacidad de convertir cualquier equipo flojo existente en un equipo de Figma. También puede tener notificaciones enviadas a través de Slack cuando se dejan comentarios en archivos de Figma.

Dribbble

Figma tiene un flujo uniforme a exportar un fotograma y empújelo directamente hasta Dribbble.

Zeplin

Figma ya tiene sus propias herramientas de mano de desarrollador, pero si todavía necesita o desea utilizar Zeplin todos modos Figma proporciona integración para exportar fácilmente los marcos en un proyecto Zeplin.

Dropbox Paper

Integración de Figma con Dropbox no es para fines de almacenamiento, sino para que pueda incorporar rápidamente los diseños en archivos Dropbox. El papel es un documento colaborativo de edición de servicio. Por lo que su equipo también puede colaborar en un documento, mientras que un diseño de Figma incrustados en ella actualizaciones en tiempo real como se realizan cambios en él.

Jira and Trello

Para ayudar con la parte de gestión de proyecto de cosas, Figma se integra con ambos Jira y Trello, que le permite tener vivo incrusta de Figma archivos dentro de temas / tarjetas.

Terminando

Como se puede ver, Figma proporciona un arsenal impresionante de características para ayudar a los diseñadores trabajan juntos de forma colaborativa y eficiente interfaz. Varios de los puntos de dolor común de proyecto de equipo basado en desaparecerán con esta centralizada, enfoque basado en la web.

Y tan impresionante como las herramientas de colaboración de Figma son, eso es sólo una parte de lo que la hace una aplicación interesante y atractiva.

Para conocer más acerca de por qué daría Figma una carrera, revisa algunos de nuestros otros tutoriales y cursos:


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