El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Herramientas y Características Básicas

Siguiente ►
►

En esta sección, exploraremos las herramientas y características fundamentales de Figma que te permitirán comenzar a crear diseños de manera eficiente. Este módulo es crucial para establecer una base sólida antes de avanzar a técnicas más complejas.

  1. Herramientas de Dibujo

Figma ofrece una variedad de herramientas de dibujo que te permiten crear formas y líneas básicas. Aquí te presentamos las más esenciales:

  • Herramienta de Forma (Shape Tool): Permite crear rectángulos, elipses, líneas, polígonos y estrellas. Estas formas son la base de muchos diseños.
  • Herramienta de Pluma (Pen Tool): Utilizada para crear formas personalizadas y trazados vectoriales. Es ideal para diseños más detallados y precisos.
  • Herramienta de Lápiz (Pencil Tool): Permite dibujar formas a mano alzada, útil para bocetos rápidos.

Ejemplo Práctico: Creación de Formas Básicas

1. Selecciona la herramienta de forma desde la barra de herramientas o presiona la tecla "R" para un rectángulo.
2. Haz clic y arrastra en el lienzo para dibujar la forma.
3. Ajusta el tamaño y la posición utilizando los controladores de la forma.

  1. Herramientas de Texto

El texto es un componente esencial en cualquier diseño. Figma proporciona herramientas para agregar y personalizar texto fácilmente.

  • Agregar Texto: Selecciona la herramienta de texto (presiona "T") y haz clic en el lienzo para comenzar a escribir.
  • Propiedades de Texto: Ajusta el tamaño, la fuente, el color y el espaciado desde el panel de propiedades.

Ejemplo Práctico: Añadiendo Texto

1. Selecciona la herramienta de texto o presiona "T".
2. Haz clic en el lienzo y escribe "Bienvenido a Figma".
3. Usa el panel de propiedades para cambiar la fuente a "Roboto" y el tamaño a 24px.

  1. Capas y Organización

La organización de capas es crucial para mantener un diseño limpio y manejable.

  • Panel de Capas: Muestra todas las capas en tu diseño. Puedes renombrar, agrupar y reorganizar capas para una mejor organización.
  • Bloqueo y Visibilidad: Bloquea capas para evitar cambios accidentales y ajusta la visibilidad para centrarte en áreas específicas del diseño.

Ejemplo Práctico: Organización de Capas

1. Crea varias formas y texto en el lienzo.
2. Abre el panel de capas y observa cómo se organizan automáticamente.
3. Arrastra y suelta capas para reorganizarlas.
4. Haz clic en el icono de ojo para ocultar una capa temporalmente.

  1. Propiedades y Estilos

Figma permite aplicar estilos a tus elementos para mantener la consistencia en el diseño.

  • Relleno y Trazo: Ajusta el color de relleno y el trazo de las formas desde el panel de propiedades.
  • Efectos: Añade sombras, desenfoques y otros efectos visuales para mejorar el diseño.

Ejemplo Práctico: Aplicación de Estilos

1. Selecciona una forma en el lienzo.
2. En el panel de propiedades, cambia el color de relleno a azul (#3498db).
3. Añade un trazo de 2px de grosor y color blanco.
4. Aplica una sombra con un desenfoque de 10px y desplazamiento de 5px.

Ejercicios Prácticos

Ejercicio 1: Crear un Botón Simple

  1. Usa la herramienta de rectángulo para crear un botón de 150x50px.
  2. Añade texto centrado que diga "Enviar".
  3. Aplica un color de fondo verde (#2ecc71) y un texto blanco.
  4. Añade una sombra sutil para darle profundidad.

Solución:

1. Dibuja un rectángulo de 150x50px.
2. Selecciona la herramienta de texto, escribe "Enviar" y colócalo centrado en el rectángulo.
3. Cambia el color de relleno del rectángulo a #2ecc71 y el color del texto a blanco.
4. Aplica una sombra con un desenfoque de 5px y desplazamiento de 2px.

Ejercicio 2: Organizar Capas

  1. Crea tres formas diferentes en el lienzo.
  2. Renombra las capas como "Fondo", "Medio" y "Frente".
  3. Organiza las capas para que "Fondo" esté detrás de las otras dos.

Solución:

1. Dibuja tres formas en el lienzo.
2. En el panel de capas, haz clic derecho en cada capa y selecciona "Renombrar".
3. Arrastra las capas para que "Fondo" esté en la parte inferior de la lista.

Conclusión

En esta sección, hemos cubierto las herramientas y características básicas de Figma, incluyendo la creación de formas, texto, organización de capas y aplicación de estilos. Estas habilidades son fundamentales para cualquier diseñador que desee crear prototipos efectivos en Figma. En el próximo módulo, profundizaremos en el diseño utilizando colores, estilos y componentes para mejorar aún más tus habilidades de diseño.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados