Tutorial n°5 : Estilizar su proyecto a partir del diseño Figma

Este tutorial le mostrará la integración de una página de Login que fue creada previamente en Figma. Figma te proporciona automáticamente el CSS afiliado a los elementos de la página que has creado, vamos a ver cómo integrarlo en el Studio.

Nota : Actualmente hemos creado el diseño con Figma (una herramienta gratuita) pero otras como Adobe XD también te proporcionan CSS automático.

Etapa 1 : Crear un nuevo proyecto

La página de inicio de sesión que vas a recrear ya ha sido creada en figma.
Aquí está el enlace para acceder a ella :

https://www.figma.com/file/ltNjfK14DfBCIvrRZ
 ekR6k/Styling_tutorial-design?t=T5PdI13kCqktNIYY-1

NB: Tienes que usar o crear una cuenta (gratuita) en Figma para acceder al CSS.
‍
Como puedes ver, se puede hacer clic en cada elemento del diseño, y en la parte derecha de la página, en la sección"inspeccionar", se genera automáticamente el CSS para cada elemento. Eso es lo que usaremos para diseñar esta misma página en el Studio.

Ahora que ya sabes eso, vamos a crear nuestra aplicación :
Para crear un nuevo proyecto, ve a Archivo -> Nuevo -> Proyecto y busca"Convertigo Low Code FullStack Web/Desktop or Mobile app project" y nómbralo"styling_tutorial".

Una vez que tu proyecto haya sido creado, simplemente usa el botón "play" para abrir el Visual App Viewer.
Nota: No olvides que si nombras tu proyecto de otra manera, no podrás continuar correctamente el tutorial..
Paso 2 ᐅ
Éxito !

Ha completado con éxito este paso, por favor haga clic en el botón Siguiente Paso para ir al siguiente paso del tutorial
Cerrar
No ha completado todas las acciones requeridas en este paso, ¿está seguro de que desea ir al paso siguiente?
SíNo