Presentación: la plataforma de Figma

El primer paso hacia un ecosistema de diseño abierto.

Hoy, nos complace lanzar la plataforma Figma, una forma de mejorar los flujos de trabajo de diseño conectando Figma a otras herramientas, scripts e incluso aplicaciones web. Comenzamos con un nuevo concepto para el espacio de diseño: una API web.

Es una locura que una API web sea innovadora en 2018, pero que sepamos, nadie ha creado una para una herramienta de diseño profesional antes. ¿La razón? El diseño tradicionalmente tiene lugar en un mundo de software de escritorio fuera de línea, mientras que Figma vive en línea donde todo está conectado.

Al aprovechar la naturaleza abierta de la web, nuestra API sienta las bases para formas únicas de colaboración de diseño. Las empresas ya lo están utilizando para crear herramientas personalizadas que satisfagan sus necesidades únicas. Por ejemplo, Uber creó una transmisión en vivo de lo que su equipo de diseño está trabajando para aumentar la visibilidad en toda la organización. GitHub automatizó parte de su proceso de creación de iconos para mejorar su eficiencia.

Nuestra API sienta las bases para formas únicas de colaboración de diseño

Esas ideas son solo el comienzo: estamos abiertos a una serie de proyectos de demostración que van desde un corrector ortográfico de Figma hasta una herramienta de arte generativa y un método para colocar sus diseños en la cadena de bloques Ethereum. También presentamos integraciones nuevas y mejoradas con otras herramientas de diseño como Avocode, Haiku, Zeplin y Pagedraw.

Estamos muy emocionados de ver qué hará nuestra comunidad. Siga leyendo para obtener más información sobre cómo funciona nuestra plataforma y las formas de comenzar. (Y vea el excelente artículo de Fast Company de Harry McCracken sobre la importancia de nuestra API para la industria tecnológica en general).

Cómo funciona

La primera versión de Figma Web API tiene tres capacidades principales:

  1. Leer archivos de diseño en un formato de archivo JSON abierto
  2. Leer / escribir comentarios para diseñar archivos
  3. Renderizar archivos de diseño (y partes de archivos de diseño) en formatos de imagen estándar (png, svg, etc.)

Nuestro formato de archivo abierto permite que las herramientas de terceros consuman diseños de Figma de manera confiable. A diferencia de nuestros competidores de escritorio, la API web de Figma no está vinculada a sistemas operativos, rutas de archivos específicas o versiones de software de diseño. Esto significa que es posible acceder al estado actual de un diseño desde un software que se ejecuta en computadoras completamente diferentes, o incluso en la web como la propia Figma, preparando el escenario para una clase completamente nueva de integraciones de diseño.

El empleado de Uber mira una transmisión en tiempo real de diseños alimentados a un televisor por la API de Figma

Una vez que conozca la clave única de un diseño de Figma, que está contenida en la URL, puede extraer una instantánea en vivo del árbol de formas, texto, componentes, enlaces prototipo, transiciones, restricciones, etc. que definen cómo se ve un diseño de Figma y se comporta También puede hacer ping a un punto final para generar un JPG, PNG o SVG de cualquier archivo o subárbol de archivos.

Hemos diseñado la API para que sea lo más ergonómica posible, de modo que sea rápido y fácil mejorar las secuencias de comandos en los flujos de trabajo internos de la empresa o integrar Figma con otras herramientas. Debido a que está basado en la web, no necesita aprender lenguajes de secuencias de comandos esotéricos para hacerlo. Puede confiar en los marcos de programación con los que está familiarizado e interactuar directamente con una API web bien definida en lugar de vincularse innecesariamente a otro marco de plugins propietario. (Esto hará que sea más fácil mantener las integraciones actualizadas y, por lo tanto, ¡menos errores!)

Sabemos que se pregunta qué sucederá pronto. Aquí hay una vista previa:

  1. Webhooks A continuación, planeamos lanzar Webhooks que transmiten devoluciones de llamadas a eventos en Figma. Puede adjuntar un Webhook a un archivo o equipo. Volverás a asignar eventos a actualizaciones de archivos.
  2. Escribir API Si bien nuestra API de comentarios permite a los clientes escribir en Figma, la versión de hoy trata principalmente de habilitar casos de lectura y abrir Figma al mundo exterior. Planeamos presentar una API de escritura a finales de este año ... ¡es algo que nos entusiasma muchísimo!
  3. Extensiones Si tuviéramos $ 1 por cada vez que los clientes solicitaran extensiones de aplicación, podríamos no haber necesitado recaudar nuestra última ronda de financiación. Dicho esto, hemos visto cómo nuestros competidores agregaron modelos de extensión que otorgaron a los desarrolladores libertad a expensas de la calidad, la solidez y la previsibilidad. Estamos ansiosos por aprovechar la increíble capacidad intelectual colectiva de la comunidad de Figma para mejorar nuestra herramienta, pero no vamos a introducir extensiones hasta que estemos seguros de que nuestro modelo de extensión es robusto. Todavía no hay ETA, pero estamos explorando activamente cómo construir esto de una manera sólida.

Inspírate en el flujo de trabajo de: Uber y GitHub

A medida que el diseño juega un papel cada vez más importante en las grandes empresas, cada vez más departamentos lo tocan. No es solo la persona de la interfaz de usuario que interactúa con las maquetas y las concepciones visuales de las ideas, también lo hacen los redactores, ingenieros, investigadores, especialistas en marketing, ejecutivos y muchos otros.

Esto bolas de nieve en grandes problemas. Las herramientas de diseño de escritorio tradicionales no se crearon para la colaboración, por lo que es doloroso para las personas trabajar juntas en los diseños. Los archivos deben exportarse y cargarse antes de que puedan compartirse y, por lo tanto, están desactualizados inmediatamente cuando cambia el diseño original. Los líderes no pueden ver y comentar fácilmente el trabajo en tiempo real; los ingenieros pasan horas buscando los activos correctos; los equipos luchan con problemas que, sin que ellos lo supieran, muchos otros resueltos en contextos anteriores.

Para una verdadera colaboración a escala, las empresas necesitan una mejor manera de compartir, buscar y ver diseños en tiempo real en toda la organización. Es por eso que estamos tan entusiasmados con la promesa de flujos de trabajo personalizados impulsados ​​por la API de Figma.

Un diseñador de Uber trabaja en Figma.

Uber

El servicio de transporte compartido bajo demanda cuenta con un equipo de diseño distribuido en 4 ciudades diferentes, que trabaja en una amplia gama de productos, desde Uber Eats hasta Uber Freight. Su nuevo vicepresidente de diseño quería una manera fácil de explorar estos proyectos, por lo que están creando herramientas internas para visibilidad con nuestra tecnología basada en la web.

"La API de Figma ha ayudado a hacer realidad las ideas con las que hemos soñado durante siglos", dijo Erik Klimczak, Gerente Senior de Diseño del Grupo de Tecnología Avanzada de Uber.

Uber planea transmitir diseños en progreso en televisores de la oficina, mostrarlos a través de un repositorio de sitios web tipo Dribbble y cargar diseños en una extensión del navegador Chrome para los empleados. Los diseñadores tendrán la autonomía de decidir cuándo compartir: la API no retomará su trabajo hasta que lo arrastre a un marco particular en Figma.

"La API de Figma ha ayudado a hacer realidad las ideas con las que hemos soñado durante siglos". - Erik Klimczak, Gerente de Diseño Sr., Uber

Otras compañías han fabricado productos similares para facilitar el intercambio de trabajo de diseño, pero esta es la primera vez que vemos a alguien crear un feed en tiempo real basado en una fuente de verdad en línea en lugar de un flujo de exportación desordenado. Descubrimos que la magnitud del esfuerzo de Uber es inspiradora, y esperamos ver a más equipos explorar conceptos similares.

GitHub

El GitHub Octicon se encuentra en Figma (izquierda) y GitHub (derecha)

Con la nueva API de Figma, GitHub puede enviar cambios a su sistema de iconos, Octicons, desde un único archivo de diseño. Cuando alguien necesita alterar un ícono, simplemente puede editar el archivo Figma, que sirve como la fuente de la verdad. Un diseñador o ingeniero puede enviar una solicitud de extracción con una referencia al diseño actualizado de Figma. Esto desencadena una nueva compilación a través de Travis CI que utiliza la API de Figma para extraer automáticamente los iconos del archivo de Figma y publica el conjunto de iconos actualizado en cada formato.

La conducción de los cambios desde un único archivo de diseño reduce la barrera para contribuir con dichos cambios. También permite que GitHub ejecute todo a través de servicios comunes de integración continua en lugar de configurar servidores Mac. En el futuro, cuando Figma lanza nuestra API de escritura, GitHub planea hacer que el flujo de datos sea bidireccional para que el repositorio y el archivo de diseño estén siempre sincronizados. De esta forma, cualquiera podrá realizar cambios en el conjunto de iconos de Octicons de la manera en que se sienta más cómodo, ¡ya sea diseño o código!

Un nuevo mundo de integraciones.

Además de ayudar a empresas como Uber y Github a personalizar sus propios flujos de trabajo, nuestra API facilitará a terceros la creación y el mantenimiento de integraciones públicas de Figma. Zeplin acaba de publicar una revisión de su integración con nuestra nueva API, y otros tres productos han introducido la funcionalidad de Figma por primera vez:

  1. Haiku: una herramienta para crear componentes de interfaz de usuario interactivos y multiplataforma (disponible hoy)
  2. Pagedraw: un generador de código React UI listo para producción (disponible hoy)
  3. Avocode: herramienta de transferencia para desarrolladores (próximamente)

Las integraciones como estas son más importantes que nunca para el diseño. Vivimos en un mundo con innumerables flujos de trabajo, donde cada equipo tiene diferentes procesos para hacer las cosas. En Figma, nos parece obvio que ninguna compañía resolverá todos los problemas, por lo que las herramientas deben funcionar bien juntas. Al asociarnos con servicios como Haiku, Pagedraw, Avocode y Zeplin, podemos desbloquear nuevos casos de uso para nuestra comunidad y desbloquear equipos con otras necesidades.

"Figma ha sido una de nuestras herramientas de diseño favoritas". - Zack Brown, CEO de Haiku

"Figma ha sido durante mucho tiempo una de nuestras herramientas de diseño favoritas", dijo Zack Brown, CEO de Haiku. "Con esta integración, estamos uniendo la fuerza de la plataforma de colaboración de diseño de Figma con el poder de producción de aplicaciones de Haiku".

Proyectos de ejemplo

Para ayudarlo a comenzar, el equipo de Figma (y los amigos de la familia) pasaron unos días creando proyectos divertidos sobre la API web. Todo lo que sigue es de código abierto en GitHub. Si ya tiene ideas sobre lo que desea construir, esperamos que estos ejemplos sean útiles como material de referencia. Si aún no está seguro de qué hacer, ¡lo alentamos a que bifurque estos proyectos y los lleve a nuevas direcciones con las que nunca podríamos soñar!

(1) Generador de maquetas personalizadas Figma

El generador de maquetas personalizadas de Figma en acción

Vea cómo se verá un diseño en diferentes contextos del mundo real, como un iPhone, una parada de autobús o una valla publicitaria. Pruébelo accediendo al repositorio público en GitHub, descargando el código y ejecutándolo como una página HTML.

(2) Corrector ortográfico Figma

La demostración del corrector ortográfico de Figma utiliza nuestra API de comentarios para anotar palabras mal escritas en un diseño

Con la demostración de corrección ortográfica de Figma, puede ejecutar una herramienta de línea de comandos que escaneará el texto en un diseño. Cuando las palabras están mal escritas, automáticamente dejará un comentario sugiriendo alternativas. Estamos entusiasmados de ver las diferentes cosas que las personas crean con nuestra API de comentarios, y esta es solo una idea.

(3) Calidoscopio Figma

Una luna fotomosaica hecha con nuestra demostración Kaleidoscope

¿Alguna vez has visto una imagen compuesta de cientos o miles de imágenes más pequeñas (creo que el término oficial es fotomosaico)? Ahora puedes hacer eso en Figma. Elija una fotografía (la "imagen grande"), luego abra Figma y dibuje los íconos que servirán como piezas de mosaico más pequeñas. Puede acceder a nuestro repositorio público de GitHub y usar nuestra API para luego convertir esas formas en una pieza única de arte pixelado.

Por último, la ingeniera de backend de Airbnb Elena Nadolinski creó este breve video tutorial sobre cómo usar la API de Figma. Aprende a crear tus propios tokens Ethereum que representan arte emoji usando un archivo Figma y la API web de Figma.

Empezando

¡Uf! Eso fue mucho. Esperamos que esta versión épica de un blog le haya brindado toda la información que necesita para comenzar con nuestra nueva API. Para más detalles, consulte nuestra documentación aquí.

En caso de que no pueda saberlo, estamos realmente emocionados de ver qué construye nuestra comunidad con esta tecnología. Si crea algo con nuestra plataforma, queremos saberlo. Danos un grito en el canal "Show and Tell" de nuestro foro de usuarios de Spectrum.