Figma: Diseño, prototipo y colaboración en toda la empresa

Figma

Los últimos meses, he estado ayudando a desarrollar e integrar una instancia de WordPress altamente personalizada para un cliente. Es todo el equilibrio de estilo, extender WordPress a través de campos personalizados, tipos de publicaciones personalizadas, un marco de diseño, un tema secundario y complementos personalizados.

La parte difícil es que lo estoy haciendo a partir de simples maquetas de una plataforma de creación de prototipos patentada. Si bien es una plataforma sólida para la visualización y el diseño, no se traduce fácilmente a HTML5 y CSS3. Agregue todas las otras iteraciones, y mis días se vuelven bastante frustrantes con el progreso extremadamente lento.

Una pieza del rompecabezas es que la agencia de diseño simplemente entregó los prototipos, sin proporcionar ningún tipo de hoja de estilo maestra ... así que estamos trabajando para lograrlo exportando los prototipos a dirigibley luego traducir el CSS a WordPress. La cantidad de pasos necesarios y las brechas entre plataformas hacen que sea un proceso difícil. Sin mencionar el intento de simplificar las complejidades de la velocidad y la escalabilidad.

Figma

Figma centraliza gran parte de este trabajo con una plataforma que permite el diseño, la retroalimentación y la colaboración en cada miembro de su equipo, que incluye:

  • Diseñadores - Colaborar en contexto y en tiempo real. Nunca se preocupe por que sus archivos estén desactualizados o sobrescriban el trabajo de los demás.
  • Interesados - Envíe un enlace para recopilar comentarios, obtener solicitudes de cambio y permitir que las partes interesadas realicen copias de actualizaciones en sus diseños.
  • Desarrolladores - Los ingenieros siempre tienen acceso a la fuente de la verdad actual y pueden inspeccionar elementos, exportar activos y copiar código.

Figma tiene algunas características únicas:

  • Operaciones booleanas - Con cuatro fórmulas: unión, resta, intersección y exclusión, puede combinar cualquier conjunto de capas de forma con precisión.
  • Componentes - Cree de forma más rápida y coherente con elementos reutilizables y escalables en sus archivos. Acceda a las capas en cada instancia para que pueda editar y anular texto e imágenes de forma intuitiva en línea.
  • Limitaciones - Escale su diseño para que se ajuste a cualquier tamaño de pantalla fijando objetos a un marco principal, ajustando el objeto a una cuadrícula o incluso creando componentes que escalen.
  • Marcos de dispositivo - Presenta tus diseños en los entornos adecuados. Incluso puede elegir entre el modo retrato y paisaje.
  • Interacciones - Haga que sus prototipos cobren vida definiendo interacciones al hacer clic, mientras se desplaza, mientras presiona y más.
  • Superposiciones - Con el posicionamiento relativo y manual, tiene control total sobre dónde y cómo aparecen las superposiciones.
  • Perfección de píxeles - La edición interactiva a 60 fps le ofrece exportaciones y vistas previas ultra nítidas y con píxeles perfectos.
  • prototipado - Cree flujos rápidamente conectando pantallas y agregando elementos como interacciones, transiciones, superposiciones y más. En lugar de sincronizar con otras herramientas, simplemente comparta una URL para recibir comentarios.
  • Responsive Design - Estire sus diseños y vea cómo responderán a los cambios en el tamaño de la pantalla.

Creación de prototipos receptivos

  • Desplazamiento - Habilite el desplazamiento horizontal, vertical o en cualquier dirección dentro de formas individuales o en todo el marco principal.
  • Estilos - Sincronice colores, texto, cuadrículas y efectos en todos sus proyectos. Mantenga menos estilos de texto y alinee sus diseños en diferentes dispositivos con los estilos de cuadrícula únicos de Figma.
  • Bibliotecas de equipo - Comparta componentes y estilos en Figma, sin necesidad de unidades compartidas ni herramientas adicionales. Usted y su equipo controlan cómo y cuándo se implementan los cambios con flujos de trabajo de publicación simples.
  • Redes de vectores - Figma creó la herramienta de lápiz para que sea más intuitiva, lo que permite la manipulación directa al tiempo que conserva la compatibilidad con las rutas con versiones anteriores.

Ayudas empresa clientes, Figma puede impulsar la coherencia, la eficiencia y la seguridad a escala. La plataforma permite a los clientes empresariales administrar fácilmente sistemas de diseño con bibliotecas de equipo y la capacidad de cargar y compartir fuentes personalizadas en toda su organización. Se incluyen el inicio de sesión único, los controles de acceso y los registros de actividad.

Empiece con Figma

Figma tiene una gran selección de tutoriales que mantienen en su Canal de Youtube, aquí hay un video de introducción:

Figma brinda a los desarrolladores la capacidad de inspeccionar, copiar, exportar activos y copiar CSS directamente desde el archivo de diseño. También puede habilitar sus flujos de trabajo existentes con integraciones, que incluyen dirigible, Avocode, Jira, Dropbox, ProtoPie, Principio para Mac. También tienen una API robusta.

Prueba Figma gratis

¿Qué piensas?

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.