Descargar archivo de Figma preconfigurado
Comencemos por crear un componente en Figma. En este instructivo, usaremos un archivo de Figma existente para usarlo como ejemplo. Este archivo contiene un marco de diseño automático con una imagen y un título. Asegúrate de haber accedido a tu cuenta de Figma.
- Descarga este archivo de Figma en tu computadora: HelloFigma.fig.
En el navegador de archivos de Figma, coloca el cursor sobre Borradores. Aparecerá un ícono +. Haz clic en +, luego en Import... y selecciona el archivo HelloFigma.fig que acabas de descargar.
Abre el archivo importado en Figma.
Cómo crear un componente
Para usar el diseño importado con el complemento Relay for Figma, primero debemos convertirlo en un componente. Selecciona el marco Hello Card y, en la barra de herramientas, haz clic en Create Component.
Cómo crear un paquete de IU
El complemento Relay for Figma agrega información adicional al componente para que puedas trabajar con los desarrolladores que pueden usarlo en su código.
Abre el complemento Relay for Figma en tu archivo (en el menú de Figma: Plugins > Relay for Figma). Haz clic en Get Started.
Selecciona el componente y haz clic en Create UI Package.
Con el paquete de IU seleccionado, agrega una descripción a Summary. Por ejemplo: "Componente de tarjeta Hello World que se usa para mostrar el contenido de la imagen y el título"
Haz clic en Compartir con el desarrollador en la esquina inferior derecha del diálogo para pasar a la siguiente pantalla.
Compartir con el flujo del desarrollador
Ahora que creaste un paquete de IU, prepara tu componente para compartirlo con el equipo de desarrollo.
Crea una nueva versión con nombre del archivo del archivo de componentes. El uso de versiones con nombre del componente evita que los cambios no deseados afecten los componentes de producción.
Ingresa un nombre y una descripción para esta primera versión del componente y, luego, haz clic en Save.
A continuación, crea un vínculo de componente que se pueda compartir y cópialo en el portapapeles. Para ello, escribe CMD-L en una Mac o CTRL-L en Windows.
Siguiente paso
Ya está todo listo para entregar tu componente de IU a Android Studio.
Abre Android Studio para completar la siguiente parte de este instructivo.
Convierte los diseños a código en Android Studio