Figma es una herramienta de diseño de interfaces colaborativa que ayuda a superar la barrera de comunicación entre diseñadores y desarrolladores.
Esta guía explica cómo puedes colaborar con Figma.
Acceso
- Accede al enlace compartido: Puedes acceder al archivo de Figma del proyecto aquí.
- Inicia sesión: Si aún no has iniciado sesión, Figma te pedirá que lo hagas.
Las características clave solo están disponibles para usuarios registrados, como el modo desarrollador y la capacidad de seleccionar un marco dedicado.
No podrás colaborar efectivamente sin una cuenta.
Estructura de Figma
En la barra lateral izquierda, puedes acceder a las diferentes páginas del Figma de Twenty. Así es como están organizadas:
- Página de componentes: Esta es la primera página. El diseñador la utiliza para crear y organizar los elementos de diseño reutilizables que se usan en todo el archivo de diseño. Por ejemplo, botones, íconos, símbolos u otros componentes reutilizables. Sirve para mantener la consistencia a lo largo del diseño.
- Página principal: La segunda página es la página principal, que muestra la interfaz de usuario completa del proyecto. Puedes presionar Play para usar el prototipo completo de la aplicación.
- Páginas de características: Las otras páginas están típicamente dedicadas a características en progreso. Contienen el diseño de características específicas o módulos de la aplicación o sitio web. Normalmente, aún están en desarrollo.
Consejos útiles
Con acceso de solo lectura, no puedes editar el diseño, pero puedes acceder a todas las características que serán útiles para convertir los diseños en código.
Usa el modo Dev
El Modo Dev de Figma mejora la productividad de los desarrolladores al proporcionar una navegación fácil por el diseño, una gestión eficaz de assets, herramientas de comunicación eficientes, integraciones de caja de herramientas, fragmentos de código rápidos e información clave de capas, superando la brecha entre diseño y desarrollo. Puedes aprender más sobre el Modo Dev aquí.
Cambia al modo “Desarrollador” en la parte derecha de la barra de herramientas para ver las especificaciones de diseño, copiar CSS y acceder a los assets.
Usar el prototipo
Haz clic en cualquier elemento del lienzo y presiona el botón “Play” en el extremo superior derecho de la interfaz para acceder a la vista del prototipo. El modo de prototipo te permite interactuar con el diseño como si fuera el producto final. Demuestra el flujo entre pantallas y cómo los elementos de la interfaz, como botones, enlaces o menús, se comportan al interactuar con ellos.
- Entendiendo las transiciones y animaciones: En el modo Prototipo, puedes ver cualquier transición o animación añadida por un diseñador entre pantallas o elementos de UI, proporcionando instrucciones visuales claras a los desarrolladores sobre la conducta y el estilo intencionados.
- Aclaración de implementación: Un prototipo también puede ayudar a reducir las ambigüedades. Los desarrolladores pueden interactuar con él para obtener una mejor comprensión de la funcionalidad o apariencia de elementos particulares.
Para más detalles y orientación sobre el aprendizaje de la plataforma Figma, puedes visitar la Documentación Oficial de Figma.
Medir distancias
Selecciona un elemento, mantén presionada la tecla Option (Mac) o Alt (Windows), luego pasa el cursor sobre otro elemento para ver la distancia entre ellos.
Extensión Figma para VSCode (Recomendado)
Figma para VS Code
te permite navegar e inspeccionar archivos de diseño, colaborar con diseñadores, rastrear cambios y acelerar la implementación, todo sin salir de tu editor de texto.
Forma parte de nuestras extensiones recomendadas.
Colaboración
- Uso de Comentarios: Puedes utilizar la función de comentarios haciendo clic en el ícono de burbuja en la parte izquierda de la barra de herramientas.
- Chat de Cursor: Una característica agradable de Figma es el Chat de Cursor. Simplemente presiona
; en Mac y / en Windows para enviar un mensaje si ves a alguien más usando Figma al mismo tiempo que tú.
