En este artículo encontrarás una descripción de las herramientas para crear y modificar las formas que compondrán cada uno de tus proyectos. Aprenderás sobre las opciones básicas de edición de formas y características más avanzadas como grupos booleanos y creación de máscaras. ¿Cómo crear formas en Figma? Lee y descúbrelo.
Puedes añadir una forma utilizando la función Herramientas de forma que encontrarás en la Barra de herramientas. Esta función te permite crear formas vectoriales básicas: rectángulo, línea, flecha, elipse, polígono, estrella.
También puedes crear formas personalizadas utilizando las Herramientas de Dibujo. Puedes elegir entre un lápiz o un bolígrafo.
Al igual que en el caso de los marcos, hay muchas maneras de crear formas:
Cada forma, objeto de texto o imagen que añadas al lienzo será una capa separada. Esto te permite modificar las propiedades individuales de cada elemento.
Puedes ver y editar las propiedades del objeto en la pestaña Diseño del panel de propiedades. El tipo de capa determina qué parámetros se mostrarán aquí. La mayoría de los parámetros son los mismos en todos los tipos de capas. Si no eliges ninguna capa, el panel de propiedades mostrará todos los estilos locales para el archivo y el color del lienzo.
En la pestaña Diseño, puedes añadir los siguientes parámetros:
1. Alineación – las herramientas de alineación te permiten alinear correctamente las capas en el lienzo con respecto a las demás. Estas funciones solo están disponibles cuando se seleccionan dos o más capas.
2. Distribución y Organizar – esta función te permite organizar las capas creando un espaciado igual entre ellas. Estas funciones solo están disponibles cuando se seleccionan dos o más capas.
3. Posición del lienzo (X e Y) – aquí puedes ajustar la posición de las capas en el lienzo a lo largo de los ejes horizontal (X) y vertical (Y).
4. Dimensiones del objeto (Ancho y Alto) – aquí puedes cambiar el tamaño de una capa.
5. Restringir proporciones – te permite mantener las proporciones de la forma mientras cambias su tamaño. Puedes cambiar la altura o el ancho de la forma, y el segundo parámetro se ajustará automáticamente.
6. Rotación – aquí puedes establecer el ángulo de un marco.
7. Radio de esquina – con esta función puedes redondear las esquinas del marco.
8. Esquinas independientes – la configuración de esquina independiente te permite ajustar el radio de esquina para cada esquina.
9. Capa (Modos de fusión) – aquí puedes especificar cómo deben fusionarse dos capas. Solo puedes aplicar un modo de fusión a cada capa.
10. Relleno y Trazo – puedes aplicar rellenos y trazos a formas y capas de texto. Para añadir un relleno o trazo, selecciona la capa deseada y haz clic en el icono +. Puedes añadir varios rellenos y contornos a cada capa.
Para rellenos y trazos, el color sólido está configurado por defecto. Para ajustar las propiedades, haz clic en la muestra de color. Esto abrirá el sector de color, donde están disponibles las opciones: color sólido, degradado (lineal, radial, angular, diamante) e imagen.
Si necesitas modificar más el estilo del trazo, puedes usar la configuración avanzada de trazo, que está disponible bajo el icono de elipsis.
Consejo útil: Puedes activar y desactivar la visibilidad de cada propiedad en la capa activa utilizando el icono de ojo. Las propiedades activas se mostrarán en negro, por lo que puedes distinguirlas fácilmente de las inactivas.
11.Efectos – aquí puedes añadir una sombra o desenfoque a la capa. Para ajustar los valores del efecto, haz clic en Configuración de efecto, que se encuentra bajo el botón con el icono del sol.
12.Configuraciones de exportación – aquí puedes exportar la capa seleccionada al formato de tu elección: PNG, JPG, SVG y PDF.
Tarea 4.1. Planifica el diseño de los elementos de la interfaz de tu aplicación. Primero, crea wireframes utilizando formas simples.
Consejo útil: Recuerda dar nombres apropiados a cada capa de manera regular. Si no prestas atención a esto, seguramente harás un lío en tus capas.
Comencemos desde la pantalla de inicio de sesión:
Consejo útil: Si estás buscando un logo para tu proyecto, visita este sitio web: https://www.freepik.com/free-photos-vectors/logo y descárgalo gratis.
Cada archivo en Freepik.com tiene un aviso de licencia. Antes de descargar, asegúrate de que su licencia te permite usarlo como necesites.
También puedes usar un logo disponible en el plugin “Creador de logos”.
Ahora ocupémonos del marco de Inicio:
Consejo útil: Puedes añadir fácilmente íconos a tu proyecto, copiándolos de la biblioteca de Figma.
Comunidad. Encontrarás un archivo de muestra aquí: https://www.figma.com/community/file/1118814949321037573.
Solo haz clic en el botón Obtener una copia y se abrirá el archivo Iconia – un paquete de íconos totalmente editable de más de 1,300 íconos listos para usar y escalables en 6 estilos únicos. Para copiar los íconos seleccionados, ve a la página de la biblioteca de Iconia en el panel de capas.
Encuentra el ícono que deseas usar en tu archivo, haz clic derecho sobre él y selecciona Copiar. Luego regresa a tu archivo, haz clic derecho en cualquier lugar nuevamente y elige Pegar aquí. Otra forma de añadir íconos es usar plugins.
Recuerda que la consistencia de la interfaz es muy importante. Decide un estilo de íconos y mantente fiel a él en toda tu aplicación. Aplica el mismo principio más tarde a los estilos de texto, tamaños de imagen y otros elementos.
Una vez que hayas planeado el diseño de los elementos en la página de inicio, puedes pasar al marco de Producto:
Puedes modificar fácilmente todas las formas utilizando la herramienta Editar objeto que se encuentra en el medio de la Barra de herramientas. Para usar esta función, primero necesitas seleccionar la forma que deseas modificar.
Activar el modo de edición hará que aparezcan nuevas funciones en la Barra de herramientas, y verás puntos de esquina en la forma editada. Puedes hacer clic en el punto de esquina deseado y arrastrarlo para cambiar la forma de una figura.
También puedes añadir otros Puntos de esquina a la forma utilizando la herramienta de lápiz. Esto te permitirá hacer más modificaciones.
Puedes doblar formas libremente utilizando la herramienta de doblado. Selecciona la herramienta de doblado en la Barra de herramientas, y luego haz clic en el punto de esquina elegido.
La herramienta Cubeta de pintura te permite eliminar y restaurar el relleno de una forma. Para hacer esto, selecciona Cubeta de pintura y luego haz clic en la forma que estás editando.
Para salir del modo de edición, haz clic en Listo.
Si seleccionas dos o más formas, la herramienta de grupos booleanos aparece en la Barra de herramientas. Te permite crear formas personalizadas combinándolas, utilizando una de las cuatro fórmulas disponibles: unión, resta, intersección, exclusión.
Después de aplicar la herramienta de grupo booleano, todas las formas seleccionadas se fusionan en una sola capa, lo que significa que comparten propiedades de relleno y trazo. Puedes combinarlas con otras formas y realizar más operaciones lógicas.
Tarea 4.2. Practica modificando formas con las herramientas Editar objeto y Grupos booleanos. Incluso si no necesitas estas funciones en esta etapa de tu proyecto, vale la pena consolidar tu conocimiento a través de la práctica. Sé creativo y diviértete. También puedes intentar recrear las formas de muestra que ves en la siguiente captura de pantalla. Para hacer esto, crea una nueva página en el archivo o añade objetos junto a los marcos del proyecto, y luego simplemente elimínalos.
Las máscaras te permiten mostrar solo áreas seleccionadas de una imagen y ocultar el resto sin recortar. Esto significa que ninguna parte de las capas en el proceso de enmascaramiento se elimina o modifica, por lo que puedes modificar la máscara en cualquier momento si deseas mostrar otra parte de la imagen.
Para entender esto mejor, puedes imaginar un marco de imagen con una pequeña abertura. Solo verás parte de la foto en él, mientras que el resto está oculto, pero si abres el marco, aún puedes ver toda la foto.
Puedes usar cualquier capa como máscara, como formas vectoriales, capas de texto e imágenes. El orden de las capas es muy importante. La capa más baja se considera el contenedor de la máscara, es decir, la abertura a través de la cual verás la imagen.
Para crear una máscara, asegúrate de que las capas estén correctamente alineadas. Luego selecciona ambas capas y elige Usar como máscara en la Barra de herramientas.
Todas las áreas externas de la capa que están por encima del contenedor estarán ocultas. Solo aquellas áreas que estén dentro del área de la máscara permanecerán visibles.
Tarea 4.3. Usa máscaras para añadir imágenes de productos a tu diseño. Recuerda el orden correcto de las capas. La capa que será el contenedor debe estar debajo de la capa de imagen.
Consejo útil: Puedes descargar imágenes gratuitas para tus proyectos desde el sitio web https://unsplash.com.
También puedes usar el plugin “Unsplash”.
Acabas de aprender cómo crear formas en Figma. Lee también: 10 heurísticas de usabilidad para el diseño UX.
Si te gusta nuestro contenido, únete a nuestra comunidad de abejas ocupadas en Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.
Un diseñador gráfico y de UX que transmite en el diseño lo que no se puede expresar con palabras. Para él, cada color, línea o fuente utilizada tiene un significado. Apasionado por el diseño gráfico y web.
Recientemente, han surgido dos fenómenos en el mercado laboral relacionados con las actitudes de los…
¿Cómo vender en Pinterest y por qué deberías hacerlo? Vender en Pinterest es otra forma…
¿Eres un freelancer que busca formas de promocionar su portafolio? Hoy en día, no solo…
La gestión financiera digital y la contabilidad en línea se han vuelto cada vez más…
Los estatutos del proyecto son el pan y la mantequilla de la gestión de proyectos.…
Las organizaciones de diversas industrias establecen relaciones con posibles empleados, proveedores y socios todos los…