Si eres un desarrollador de iOS o Android y el diseño de tu proyecto se desarrolla en Figma, lo más probable es que encuentres problemas al exportar recursos: los colores no se pueden descargar y los íconos e imágenes son inconvenientes para exportar. En este artículo, te diré cómo puedes hacer tu vida más fácil y automatizar la exportación del UI-Kit de Figma directamente a Xcode y Android Studio.
Cada vez más equipos de desarrollo móvil se están cambiando a Figma. Antes, muchos (y nosotros también) usábamos un paquete de Sketch + Zeplin o Figma + Zeplin. Y fue conveniente. Pero cuando en uno de los proyectos agregamos soporte para el tema oscuro, la situación empeoró. Zeplin no es compatible con el tema oscuro, por lo que debe buscar soluciones que le hagan pensar: ¿se necesita Zeplin ahora? En este caso, Zeplin es una pérdida de tiempo del diseñador manteniendo y sincronizando proyectos en dos herramientas, además de costos adicionales para la empresa.
Después de abandonar Zeplin y pasar a Figma, nosotros (los desarrolladores) comenzamos a experimentar dolor al exportar el UI-Kit de Figma.
Figma, a diferencia de Zeplin, no interactúa con Xcode o Android Studio de ninguna manera. Los complementos evitan que Figma se integre estrechamente con ellos. Encontramos una utilidad de línea de comandos que exportaba colores y estilos de texto, pero no nos funcionó: no admitía la exportación de imágenes y un tema oscuro. Por eso escribí mi utilidad.
Pero un poco más de detalle sobre los problemas.
¿Por qué es inconveniente para los desarrolladores móviles exportar activos desde Figma?
Problema n. ° 1: no poder exportar colores
¿Qué vemos los desarrolladores cuando abrimos el UI-Kit en Figma? En el caso más simple, varios círculos de diferentes colores.
Pero si el proyecto es grande y admite un tema oscuro, la paleta contendrá muchos más colores:
¿Planea agregar compatibilidad con temas oscuros? Vea cuánto más grande puede volverse una paleta
Figma no tiene la capacidad de exportar colores. Lo máximo que puede hacer es seleccionar el color y copiar el valor HEX. Y si el diseñador cambia algo, entonces, en el caso de una paleta grande, el desarrollador tendrá que dedicar mucho tiempo a comparar la paleta en el código y en Figma.
El nombre del color tampoco siempre funciona bien para copiar. Algunos diseñadores usan el carácter "/" en el nombre del estilo, pero no es compatible con iOS y Android. Este símbolo es necesario para agrupar colores en grupos.
Ejemplo. El color en Figma se denomina fondo / primario . Para los desarrolladores de Android, debe especificar un color llamado background_primary , y para los desarrolladores de iOS, backgroundPrimary .
Otro problema con los colores es el tema oscuro. Ninguna herramienta de diseño (Figma, Zeplin, Sketch) te permite tener una paleta clara y oscura al mismo tiempo. Hay dos enfoques: crear un archivo separado con una paleta oscura o almacenar todos los colores en un archivo, pero asígneles un nombre con sufijo, por ejemplo, background_primary_day, background_primary_night.
Lo que queremos como desarrolladores es poder exportar la paleta de colores de Figma directamente a proyectos de Xcode o Android Studio.
Problema n. ° 2: exportación inconveniente de iconos mediante herramientas estándar
Aquí también hay varias dificultades.
Una vez más, sucede que los diseñadores usan el carácter "/" en el nombre de los iconos para agruparlos. Por ejemplo, si el icono con el nombre ic / 24 / tab / profile se exporta usando las herramientas estándar de Figma, obtendremos dicho anidamiento.
Es imposible trabajar con esto. Tengo que cambiar el nombre del archivo. El archivo debe llamarse ic24TabProfile.pdf . Esto es para desarrolladores de iOS.
Para los desarrolladores de Android, es costumbre nombrar los recursos en el estilo snake_case . En este caso, el archivo se llamará ic_24_tab_profile.xml. Pero Figma no hace eso.
Los iconos exportados desde Figma deberán transferirse manualmente al proyecto. Y no es suficiente que los desarrolladores de iOS los migren. Cada icono debe estar marcado con: Preservar datos vectoriales, Escala única, Renderizar como imagen de plantilla.
Lo que queremos como desarrolladores es poder exportar todos los íconos de Figma directamente a proyectos de Xcode o Android Studio.
Problema n. ° 3: exportación inconveniente de ilustraciones con herramientas estándar
Los iconos son imágenes vectoriales pequeñas, a menudo en blanco y negro, y pueden cambiarse de color (el sistema o el desarrollador) y el tamaño. Si habilita la accesibilidad, algunos iconos crecen con el texto. Su principal problema son los nombres: el carácter "/", que mencioné anteriormente, y el hecho de que los desarrolladores de iOS usan nombres de camelCase y los desarrolladores de Android usan snake_case.
Las ilustraciones son imágenes en color de gran tamaño que difieren en temas oscuros y claros. En un tema oscuro, los colores deben silenciarse. Si la ilustración es demasiado clara, entonces se destaca contra la oscuridad, "impactará" con una luz brillante en los ojos.
Las ilustraciones tienen los mismos problemas que los iconos, pero también hay algunos nuevos.
Los desarrolladores de Android exportan iconos e ilustraciones de Figma como archivos SVG y luego, utilizando las herramientas integradas de Android Studio, convierten los archivos SVG en archivos XML dibujables en vectores. Si necesita exportar 50 iconos o ilustraciones, llevará bastante tiempo convertirlos todos. Esto se puede automatizar.
Los desarrolladores de iOS exportan ilustraciones como mapas de bits a tres escalas. Si la aplicación admite un tema oscuro, habrá 6 imágenes en total. Así es como se ve en un proyecto de iOS:
Ahora, imaginemos que hemos descargado 50 ilustraciones de Figma. Resulta que tenemos 50 * 6 = 300 imágenes PNG, que deben transferirse manualmente al proyecto mediante arrastrar y soltar, y luego todas ellas, nuevamente, deben ser renombradas manualmente. ¿Quieres hacer esto? - No. Hay cosas más importantes que hacer ...
Lo que queremos como desarrolladores es poder exportar todas las ilustraciones de Figma directamente a proyectos de Xcode o Android Studio.
Por qué Zeplin no ayudó:
- no es compatible con el tema oscuro;
- no permite tener varios colores con el mismo valor HEX, sino nombres diferentes: si nombra los colores según el lugar de su aplicación, puede suceder que dos colores tengan nombres diferentes, pero los mismos valores HEX. Por ejemplo, backgroundPrimaryPressed (color de fondo principal cuando se presiona) y backgroundSecondary (color de fondo) deben tener el mismo valor HEX. Zeplin no te dejará hacer eso. Existe una solución alternativa: cambie el valor HEX al valor más bajo posible. Ejemplo # F4F5F8 y # F4F5F7;
- requiere recursos de diseñador adicionales para sincronizar diseños y kit de interfaz de usuario con Figma;
- cuesta dinero extra. Figma cuesta $ 12 por diseñador por mes para una organización. Si compra Zeplin, son otros $ 10,75 por diseñador al mes;
Cómo automatizamos la exportación de activos de Figma
Al darme cuenta de que esto ya no es posible para vivir así, miré para ver si Figma tiene alguna API o la capacidad de ampliar con complementos para automatizar la exportación, y resultó que sí. Tenía dos caminos: escribir un complemento de Figma o usar la API de Figma .
El complemento Figma funciona directamente en la aplicación Figma. Usando la API de Figma, puede escribir una utilidad de consola. El complemento no solo puede leer información de archivos Figma, sino también realizar cambios en ellos. Debido a esto, los complementos de Figma requieren que el desarrollador tenga permiso para editar el archivo. Figma API solo puede leer información de archivos Figma.
El complemento está escrito en JavaScript. Usando la API de Figma, puede escribir una envoltura alrededor de cualquier cosa. Pero el complemento Figma no puede funcionar con el sistema de archivos en la computadora del desarrollador (usuario). Por eso no lo hice.
Soy un desarrollador de iOS, así que decidí crear una utilidad de consola en Swift. Comencé con un prototipo que debería exportar una paleta de colores de Figma directamente a un proyecto de Xcode. En un par de semanas estuvo listo. Fue algo. Ejecuté mi utilidad y después de unos segundos obtuve toda la paleta en Xcode. Así es como debería funcionar una exportación de Figma perfecta :)
Después de un par de meses, mi utilidad para exportar activos desde Figma estaba lista. Puede encontrar un enlace al final del artículo.
Cómo funciona el proceso de exportación
Colores
El desarrollador llama al comando
figma-export colors. Si es un proyecto de iOS, los colores se exportan a la carpeta Assets.xcassets .
Además, se crea un archivo Color.swift para que pueda usar colores directamente desde el código.
import UIKit
extension UIColor {
static var backgroundSecondaryError: UIColor { return UIColor(named: #function)! }
static var backgroundSecondarySuccess: UIColor { return UIColor(named: #function)! }
static var backgroundVideo: UIColor { return UIColor(named: #function)! }
...
}
Si es un proyecto de Android, los colores se exportan a values / colors.xml y values-night / colors.xml si se admite el tema oscuro.
valores / colores.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="button">#7701FF</color>
<color name="button_ripple">#8A80FF</color>
<color name="button_disabled">#D9DCE1</color>
<color name="text_primary">#FFFFFC</color>
<color name="text_primary_pressed">#A680FE</color>
<color name="text_primary_disabled">#FFFFFE</color>
<color name="text_secondary">#101828</color>
<color name="text_tertiary">#A5ACBD</color>
...
valores-noche / colores.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="button">#6F01EC</color>
<color name="button_ripple">#7D6AF0</color>
<color name="button_disabled">#3F334B</color>
<color name="text_primary">#E6D9F6</color>
<color name="text_primary_pressed">#E6D9F3</color>
<color name="text_primary_disabled">#544761</color>
<color name="text_secondary">#E6D9F5</color>
<color name="text_tertiary">#7B6F98</color>
...
Iconos
El desarrollador llama al comando Si se trata de un proyecto de iOS, los iconos se exportarán como archivos PDF con el parámetro Renderizar como imagen de plantilla a la carpeta Assets.xcassets . Si se utilizarán iconos en UITabBar , puede especificar opcionalmente Preservar datos vectoriales para admitir la accesibilidad. Si es un proyecto de Android, los iconos se exportarán a la carpeta dibujable como archivos xml vectoriales. Debajo del capó, la utilidad convierte archivos SVG a XML utilizando la herramienta vd oficial (herramienta de diseño vectorial) que utiliza Android Studio.
figma-export icons.
Ilustraciones
El desarrollador llama al comando Todo es igual, solo las imágenes se exportan como archivos PNG. Si es un proyecto de Android, las ilustraciones se exportarán a la carpeta dibujable y dibujable-noche como archivos vectoriales xml.
figma-export images.
Cómo se puede configurar la exportación
FigmaExport tiene muchas configuraciones que se almacenan en un archivo de configuración y se pasan cuando se inicia la utilidad.
./figma-export colors -i figma-export.yaml
El archivo de configuración contiene parámetros para iOS, para Android y parámetros generales. También contiene el identificador del archivo Figma, donde se encuentran los colores, iconos e imágenes. El ID del archivo se puede encontrar en la barra de direcciones si lo abre en un navegador.
Aquí, por ejemplo, está la dirección de nuestro UI-Kit: www.figma.com/file/GVHjNNE8PKKRf1KtnMPY9m/RTC-Key-UI-kit
El identificador del archivo lightFileId en nuestro caso: GVHjNNE8PKKRf1KtnMPY9m
Ejemplo de un proyecto de configuración para un iOS
---
figma:
lightFileId: shPilWnVdJfo10YFo12345
darkFileId: KfF6DnJTWHGZzC9Nm12345
ios:
# Path to the Assets.xcassets directory
xcassetsPath: "./Resources/Assets.xcassets"
# Parameters for exporting colors
colors:
# Should be generate color assets instead of pure swift code
useColorAssets: True
# Name of the folder inside Assets.xcassets where to place colors (.colorset directories)
assetsFolder: Colors
# Path to Color.swift file where to export colors for accessing colors from the code (e.g. UIColor.backgroundPrimary)
colorSwift: "./Sources/Presentation/Common/Color.swift"
# Color name style: camelCase or snake_case
nameStyle: camelCase
# Parameters for exporting icons
icons:
# Name of the folder inside Assets.xcassets where to place icons (.imageset directories)
assetsFolder: Icons
# Icon name style: camelCase or snake_case
nameStyle: camelCase
# [optional] Enable Preserve Vector Data for specified icons
preservesVectorRepresentation:
- ic24TabMain
- ic24TabHistory
- ic24TabProfile
# Parameters for exporting images
images:
# Name of the folder inside Assets.xcassets where to place images (.imageset directories)
assetsFolder: Illustrations
# Image name style: camelCase or snake_case
nameStyle: camelCase
Un ejemplo de un archivo de configuración para un proyecto de Android:
---
figma:
lightFileId: shPilWnVdJfo10YFo12345
darkFileId: KfF6DnJTWHGZzC9Nm12345
android:
mainRes: "./main/res"Cómo organizar un archivo Figma para la exportación automatizada de recursos
Para que el UI-Kit se descargue automáticamente, se deben observar las siguientes reglas.
General
- Si un color, icono o ilustración es exclusivo de iOS o Android en sus propiedades, el campo de descripción debe contener "ios" o "android" . Si el color, el icono o la ilustración no deberían estar disponibles para la exportación, su propiedad de descripción tendrá "ninguno" . Por lo tanto, FigmaExport determinará qué se debe exportar a un proyecto de iOS, qué es un proyecto de Android y qué no se debe exportar en absoluto.
Ejemplo. El icono de compartir se ve diferente en iOS y Android. Las capturas de pantalla a continuación indican que el icono ic24ShareIos se exportará solo a un proyecto de iOS. ios se especifica en la propiedad Descripción del componente, y el icono ic24ShareAndroid se exportará solo a un proyecto de Android;
- Los iconos y las ilustraciones deben ser componentes.
- Los estilos y componentes de color deben publicarse en la biblioteca del equipo.
- Solo se exportan los iconos y las ilustraciones que se agregan a los marcos de Iconos e Ilustraciones.
Ejemplos
Archivo Figma con UI-Kit (tema claro)
Archivo Figma con UI-Kit (tema oscuro)
Nombres de recursos Los
colores, iconos e ilustraciones pueden denominarse con cualquier nombre que contenga letras az, AZ y símbolos "_" y "/".
Dado que los nombres de las variables en el código no pueden tener un símbolo "/", FigmaExport lo reemplaza automáticamente con un símbolo "_". Luego, la cadena resultante se convierte en camelCase para iOS o snake_case para Android.
| Nombre del color | iOS | Androide |
|---|---|---|
| botón / presionado | botón presionado | botón_primido |
| background / primaryPressed | backgroundPrimaryPressed | background_primary_pressed |
| Nombre icónico | iOS | Androide |
|---|---|---|
| ic / 24 / sound_off
|
ic24SoundOff
|
ic_24_sound_off |
| Título de la ilustración | iOS | Androide |
|---|---|---|
| img / demo / camera_archive
|
imgDemoCameraArchive
|
img_demo_camera_archive
|
Para mayor coherencia y conveniencia, puede, por ejemplo, nombrar todos los iconos en su propio formato: ic / size / name . Un ejemplo es ic / 24 / open . Y las ilustraciones son img / group / title . Un ejemplo es img / zero / nointernet. Puede leer sobre colores en el artículo "Diseñador de aplicaciones: cómo crear y transferir un tema oscuro" .
En el archivo de configuración figma-export.yaml, puede usar expresiones regulares para habilitar la validación de nombres antes de exportar. Si algún recurso tiene un nombre incorrecto, FigmaExport lo informará.
common:
colors:
# RegExp pattern for color name validation before exporting
nameValidateRegexp: '^[a-zA-Z_]+$' # RegExp pattern for: background, background_primary, widget_primary_background
icons:
# RegExp pattern for icon name validation before exporting
nameValidateRegexp: '^(ic)_(\d\d)_([a-z0-9_]+)$' # RegExp pattern for: ic_24_icon_name, ic_24_icon
images:
# RegExp pattern for image name validation before exporting
nameValidateRegexp: '^(img)_([a-z0-9_]+)$' # RegExp pattern for: img_image_name
Tema oscuro
Si su proyecto admite un tema oscuro, debe crear un archivo separado con componentes de interfaz de usuario, que contendrá una paleta de colores oscuros e ilustraciones oscuras.
Colores
En el archivo Figma, los colores se deben diseñar como estilos de color y se deben publicar en la Biblioteca del equipo.
Para comodidad de los desarrolladores, es recomendable hacer una tabla de todos los colores, que indicará qué color se usa y dónde.
Iconos
El archivo Figma debe tener un marco llamado Iconos. Este marco debe contener componentes para cada icono. Ejemplo:
ilustraciones
El archivo Figma debe tener un marco llamado Ilustraciones, que contiene los componentes de cada ilustración. Ejemplo:
Salir
Gracias a FigmaExport, nos deshicimos de muchos problemas al trabajar con Figma. Exportar recursos ahora lleva unos segundos. Algunos ejemplos de cómo el uso de la utilidad nos hizo la vida más fácil.
1. Uno de los proyectos tenía 52 iconos. El diseñador decidió que todos debían combinarse con un solo estilo. Después de que los actualizó, tuvimos que actualizarlos en casa.
¿Cómo los actualizaríamos manualmente? Exportamos todos los íconos de Figma como un archivo zip, cambiamos el nombre de 52 archivos, transferimos los íconos al proyecto, escribimos todas las propiedades necesarias, nos aseguramos de que no olvidaran nada. Esto tomaría al menos una hora.
La forma en que los puso al día a partir FigmaExport: nos encontramos con la iconos Figma-exportación de comandos .Después de 10 segundos, todos los cambios se apretaron, lanzamos la aplicación en el simulador y vimos que se reemplazaron todos los íconos.
2. En uno de los sprints, decidimos lanzar una nueva función. En el UI-Kit, el diseñador agregó cuatro nuevos íconos, eliminó dos íconos antiguos y agregó dos nuevos colores.
En lugar de pasar una hora discutiendo con el diseñador lo que cambió en el UI-Kit, la exportación manual de iconos y colores, simplemente ejecutamos el comando figma-export colors y figma-export icons y a través de Git vimos lo que se eliminó, lo que se agregó y Qué cambió. E inmediatamente comenzaron a crear diseños utilizando nuevos iconos y colores.
3. Hicimos una función en la que era necesario realizar un onboarding avanzado con 4 secciones, cada una de las cuales tiene hasta 7 páginas con imágenes.
La exportación manual llevaría mucho tiempo. Habiendo ejecutado el comando figma-export images en menos de un minuto, obtuvimos todas estas imágenes en el proyecto, listas para usar.
Pocas desventajas
- Es necesario ponerse de acuerdo con el diseñador sobre cómo almacenar colores, iconos e imágenes en el UI-Kit para que puedan descargarse automáticamente.
- La exportación solo funciona para aquellos componentes que se agregan a la biblioteca del equipo, por lo que los diseñadores deben tener una suscripción paga a Figma.
Planes:
- agregar la capacidad de exportar estilos de texto,
- agregar la capacidad de exportar imágenes de mapa de bits para Android,
- agregar soporte SwiftUI.
Un agradecimiento especial a Artur Abrarov y Katya Rokityan por ayudarnos a finalizar el UI-Kit.
Enlace de utilidad
Descarga FigmaExport en GitHub .
Me alegraría si probaras mi utilidad. Preguntas, deseos, comentarios: escríbame a d.subbotin@redmadrobot.com