Scribd
Cargar
7 vistas4 páginas

Tutorial de Figma

Figma es una herramienta de diseño en línea para crear interfaces de aplicaciones y páginas web, así como prototipos interactivos, permitiendo la colaboración en tiempo real. El tutorial cubre desde la creación de una cuenta y un archivo nuevo hasta el uso de herramientas básicas, organización de capas, creación de componentes y trabajo colaborativo. También se ofrecen consejos prácticos para mejorar la eficiencia en el uso de la plataforma.

Cargado por

christian larreategui
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
7 vistas4 páginas

Tutorial de Figma

Figma es una herramienta de diseño en línea para crear interfaces de aplicaciones y páginas web, así como prototipos interactivos, permitiendo la colaboración en tiempo real. El tutorial cubre desde la creación de una cuenta y un archivo nuevo hasta el uso de herramientas básicas, organización de capas, creación de componentes y trabajo colaborativo. También se ofrecen consejos prácticos para mejorar la eficiencia en el uso de la plataforma.

Cargado por

christian larreategui
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

Tutorial de Figma: Guía para Principiantes y Nivel Intermedio

1. ¿Qué es Figma?

Figma es una herramienta de diseño que funciona directamente en el


navegador (también tiene versión de escritorio y móvil). Sirve para:

 Diseñar interfaces de apps y páginas web.


 Crear prototipos interactivos.
 Trabajar en equipo en tiempo real.

🔹 Como creamos una cuenta

 Ingresa en [Link]
 Regístrate gratis (puedes usar Google).

🔹 Crear un archivo nuevo

 Pulsa en New File (Archivo nuevo).


 Verás un lienzo en blanco: ahí diseñarás.

3. Interfaz principal

 Barra superior: opciones de archivo, comentarios y compartir.


 Panel izquierdo: capas, páginas y assets.
 Lienzo central: donde dibujas y diseñas.
 Panel derecho: propiedades de los elementos (color, tipografía,
efectos, etc.).

4. Herramientas básicas
 Move (V): mover objetos.
 Frame (F): crear marcos (equivalentes a pantallas, secciones o
artboards).
 Shape (R, O, L): dibujar rectángulos, círculos, líneas.
 Text (T): insertar texto.
 Pen (P): dibujar vectores personalizados.
 Hand (H): mover el lienzo.
 Zoom (Z): acercar o alejar.

5. Trabajar con objetos

 Para seleccionar un objeto → panel derecho y se muestran


propiedades.
 Se Puede:
o Cambiar color de relleno y borde.
o Ajustar esquinas redondeadas.
o Cambiar opacidad.
o Usar Auto Layout para organizar elementos automáticamente
(ideal para botones y listas).

6. Capas y organización

 Cada elemento se guarda en una capa (como en Photoshop o


Illustrator).
 Usa grupos (Ctrl + G) o Frames (F) para organizar.
 Nombra bien las capas para no perderte.

7. Componentes y reutilización
 Para crear un componente (Ctrl + Alt + K) y para elementos
repetidos (ej. botones, menús).
 Si se actualiza el componente maestro, todos sus clones cambian.

8. Prototipado

 Ve a la pestaña Prototype (en panel derecho).


 Para seleccionar un objeto → arrastra la flecha azul a otra pantalla.
 Para definir la interacción (ej: “On Click → Navigate to”).
 Se pulsa Play ▶️(arriba a la derecha) para probar.

9. Trabajo colaborativo

 Se pulsa Share → copia el enlace o invita por correo.


 Se puede dar permisos: Ver o Editar.
 Varias personas pueden trabajar al mismo tiempo, tipo Google Docs.

10. Plugins y recursos

 Vamos a Menú → Plugins → Browse Plugins.


 Ejemplos útiles:
o Icons8 → íconos.
o Unsplash → fotos gratis.
o Content Reel → textos de ejemplo.

11. Consejos prácticos

✅ Usa Auto Layout para mantener alineación automática.


✅ Agrupa y nombra todo para evitar caos.
✅ Aprende atajos de teclado (te hacen mucho más rápido).
✅ Usa grids (rejillas) en los frames para diseño responsivo.

Muchas Gracias

También podría gustarte