En Figma encuentras desde un diseño autoadaptable, variantes, componentes globales. Para que todo el proceso de diseñar sea el mas fácil y rápido.
Auto layout en Figma:
Para crear diseños flexibles y responsivos, tenemos la herramienta de Auto layout. Con este se consigue que el diseño se adapte de manera automática en base al tamaño y la posición de los diferentes elementos dentro de su contenido y limitaciones.
3 líneas verticales representan que la propiedad «Diseño automático» se ha aplicado a los elementos dentro de esa capa.
Modo de fusión (Blend Mode):
El botón «Modo de fusión» permite controlar cómo las capas u objetos se combinan con las capas que se encuentran debajo de ellos. Este lo puedes encontrar presente en la «Sección de relleno (Fill Section)» en el lado derecho. Puede crear diferentes efectos visuales afectando la forma en como los colores interactúan y se combinan. En Figma los modos de fusión asemejan las opciones de fusión que puedes encontrar en software de diseño Gráfico: Corel Draw, Adobe Illustrator, así como en Edición de Imágenes: Photoshop, Photopea, entre otros.
Componentes en Figma:
Los componentes en Figma son como bloques de construcción o plantillas Las cuales puedes crear y reutilizar a lo largo de tus proyectos de diseño. Estos componentes hacen referencia a un elemento o grupo de elementos específico, como botones, iconos o barras de navegación. Piensa en ellos como la versión principal de un elemento.
Arte de portada (Cover Art):
La miniatura o imagen con la cual interpretamos o localizamos rápidamente nuestros archivos en el Draft o Proyectos de Figma es a quien le damos el nombre de Covert Art o Imagen de portada.
Marcos (Frames):
Los marcos o mejor conocido como frames contienen las forma, textos o imágenes, que ayudan a organizar y agrupar elementos relacionados, en pocas palabras son contenedores que contienen dichos elementos.
Instancias (Instances):
Luego de crear un componente creamos las copias que estaremos ubicando a lo largo del proyecto. Cuando se realiza cambios en el componente principal, Todas las Instancias o copias de este se actualizaran automáticamente, facilita y mantiene la coherencia del proyecto, ahorrando tiempo en vez de modificar uno a uno cada instancia.
Ícono de máscara (Mask Icon):
Este icono aparece en la lista de capas como un cuadrado con un circulo dentro, Puede habilitar o deshabilitar dicha mascara con solo dar clic en este icono.
Sección:
Las secciones facilitan la colaboración o designación áreas especificas del lienzo. Tambien puedes crear un grupo/agrupación de imagen que pueden ser exportadas, listas para desarrollo o exportar por separado
Corte (Slice):
Los cortes de imagen o mascara de imagen son áreas designadas dentro de un archivo de imagen que se pueden exportar por separado. El corte es comúnmente utilizado en el diseño web y de interfaz de usuario con este podemos optimizar la exportación de partes específicas de una imagen, como iconos, botones u otros elementos de la interfaz, todo esto con el fin de exportar la imagen completa.
Cuando selecciona una imagen o un elemento en Figma y hace clic en el botón ‘Rebanar’, Figma generará automáticamente un marco rectangular que rodea la región que has seleccionado. Este marco representa la sección y te brinda la flexibilidad de ajustar su tamaño y posición según tus requisitos. Una vez que hayas configurado tus secciones, podrás exportarlas de manera individual o en grupo, según tus necesidades.
Variantes:
Las variantes consisten en diversas ediciones o alternativas de un elemento. Supongamos que posees un componente de botón con múltiples estados, como normal, desactivado y presionado. Cada estado representa una variante del componente de botón. Estas variantes te otorgan la capacidad de desarrollar distintas versiones de un elemento sin necesidad de crear componentes individuales para cada modificación.
por