Transcripciones
1. Introducción: Hola. Bienvenido al curso de introducción Two Sigma. Y en este curso vamos a aprender algunos de los conceptos básicos del diseño utilizando el
software gratuito basado en la nube llamado Figment. Mi nombre es Nina. Tommy, soy tu instructor para este curso. He sido diseñadora desde hace más de 10 años, trabajando en múltiples proyectos, tanto móviles como web tanto para clientes como para starups que han trabajado en si estás interesado en aprender diseño. Y esta es la primera vez que diseñas o has estado diseñando desde hace algún tiempo. Y ahora quieres aprender higo, MMA, este curso es exactamente para ti. En este curso, vamos a aprender por qué fungments una herramienta tan poderosa y cómo puede ayudarte a ti y a tus
proyectos de diseño . Vamos a seguir adelante y empezar con ello. Al enviar arriba, vamos a pasar por algunas de las barras de herramientas a las que tienes acceso y las propiedades, paneles y capas paneles donde puedes organizar tu proyecto. Entonces vamos a pasar a usar realmente algunas de nuestras herramientas con forma para crear formas. A Zwolle ha aprendido a manipular y combinar formas juntas también. Entonces si estás listo para empezar a aprender sigma, entonces salta a la derecha y te veré en este curso
2. ¿Qué es Figma?: Entonces, ¿qué es el estigma? Finger es un software de diseño basado en Web que súper fácil de usar. Es completamente gratuito de usar, y es genial para equipos y colaboraciones todo desde poder trabajar juntos en mismo entorno, algo así como Google Sheets y Google dogs hasta poder dejar comentarios para tus colegas, um, o incluso saltar y ver en qué están trabajando. Por lo que una vez que tienes un proyecto de diseño terminado, es súper fácil verlo en vivo en acción. Ya sea en tu dispositivo móvil, tu dispositivo Web, y es súper fácil de compartir con los clientes y realmente hacerlos saltar y probarlo
también . Y de nuevo, está basado en la nube. Para que no tengas que preocuparte por guardar tu proyecto constantemente o instalar otro software porque tienes fácil acceso a él en la Web desde tu navegador Web favorito. Por lo que en realidad te pones a empezar con Sigma. Acabas de dirigirte a figure dot com on en la siguiente lección, vamos a pasar por registrarnos para
3. Regístrate: para conseguir Sigma cabeza encima a higo mi punto com. Y si ya tienes algún conteo, en realidad
puedes iniciar sesión desde aquí. Si no lo haces, en realidad
puedes seguir adelante e inscribirte desde aquí. Adelante y rellena la información de tu cuenta y luego haz clic en crear cuentas que te pregunten cuál es tu nombre y qué tipo de trabajo haces? Entonces vamos a elegir diseño y luego crear cuentas por lo que podría tomar algún tiempo para llegar a esta página, así que solo dale algo de tiempo. Pero una vez que estás aquí, esto es esencialmente sólo una página de bienvenida. Si quieres iniciar un proyecto con el equipo, aquí es donde realmente puedes darle un nombre a tu equipo. Si no, realidad
puedes ir de la mano y hacer click. Haz esto más tarde, que es lo que vamos a hacer. Enfriar. No te dará un tutorial rápido de todo el mapa de higo, pero en realidad vamos a repasar este tour nosotros mismos en la siguiente lección. Entonces por ahora, solo lo
voy a cerrar, pero siéntete libre de pasar por esto también, si quieres. Por lo que ahora estamos apuntadas para fig MMA, y estamos listos para aprender lo básico
4. Lo básico: Por lo que una vez que nos inscribimos para fig MMA it. Ya nos hemos puesto en un archivo iniciado aquí, pero en realidad volvamos a la página principal del músculo de higo. Podemos repasar los conceptos básicos y luego seguiremos adelante y crearemos un nuevo proyecto también. Entonces subamos aquí. Aquí es donde ves tu opción de menú. Adelante y presione y luego adelante y haga clic en la primera opción volver a los archivos. Enfriar. Por lo que esto nos llevará a la página principal de Sigma. Um, veo aquí, me ha dado un tutorial que si ya tienes un archivo de boceto realmente puedes importar desde aquí, Um, esta es una de las características súper cool que cubrirán en una lección futura. Por ahora, voy a seguir adelante y sólo cerrar la ventana aquí, pero siento miedo de ir por ese pequeño tutorial de la página principal también. Vamos a repasar las mismas cosas aquí también. Entonces primero lo primero del lado izquierdo. Aquí, verás tu nombre aquí arriba, información de
tu cuenta para que realmente puedas entrar aquí y cambiar tu cuenta. Y cuatro, si quieres hay una pequeña barra de búsqueda por aquí donde puedes buscar proyectos que hayas creado. Verás tu reciente seguido aquí donde podrás navegar por todos los archivos que has iniciado. Uh, plug ins es algo super cool que pasará en un futuro Lección también. Esencialmente ayuda a hacer su proceso de diseño más fácil. Hay borradores, que es esencialmente donde se puede iniciar un nuevo proyecto desde aquí y abajo. Es tu equipo de trabajo. Entonces si estás trabajando con un equipo o múltiples equipos o múltiples clientes, definitivamente
podrías iniciar equipos y verás todos tus equipos listados así como los proyectos que tienes para ellos aquí mismo. En un principio, podrías notar que la FIG debe crear un equipo para ti. Ah, con el primer proyecto, que es donde empezamos. Podrás iniciar nuevos equipos desde aquí, y vamos a estar haciendo esto también en futuras secciones, para solo repasar cómo se puede trabajar realmente con equipos en fig MMA del lado derecho. Por aquí tienes el botón de importación, que te ayuda a traer de nuevo archivos como PNG J Peg e incluso archivos de boceto con los que has trabajado antes en Fichman realmente convertido en un archivo de figment. A partir de aquí, puedes crear un nuevo archivo de figment, que es donde realmente puedes empezar a diseñar tus proyectos. Por supuesto. En el centro aquí tenemos todas las palabras iniciadas archivos fig mi pupilo para darte un par de archivos para repasar los conceptos básicos de prototipado y encuadre de alambre. Eres más que bienvenido para pasar por estos, pero a lo largo de este curso, repasaremos prácticamente todo lo que necesitas saber sobre el producto. Si alguna vez te encuentras atascado en algo, siempre
tienes una opción de ayuda aquí abajo. El recurso de Acela es que puedes referirte a eso que incluye, ya
sabes, si son foros comunitarios de centro de ayuda, tutoriales e incluso si quieres ir por el tutorial en un principio, siempre
puedes hacer eso al haciendo clic en reiniciar en el embarque. Ten en cuenta que siempre tienes la opción de enviarme la pregunta también a mí Ah, donde ya sea yo o uno de los otros alumnos te ayudará también. Entonces vamos a hacer una pausa muy rápida aquí, y luego en la siguiente lección, realidad
vamos a empezar nuestro primer proyecto y entrar en más detalles. Ahí
5. Crear nuevos archivos: hay un par de formas de iniciar un nuevo archivo. Puedes o bien seguir adelante y presionar el icono más aquí en tus borradores o aquí arriba, o si quieres iniciar una nueva falla en un proyecto específico. También puedes hacer eso aquí. Pero para los efectos de esta lección, vamos a simplemente crear un nuevo proyecto en nuestra carpeta Drafts, que es esencialmente donde vas a estar creando la mayoría de tus archivos desde Vamos a seguir adelante y haz clic aquí en el icono más. Y como pueden ver, estamos en un nuevo archivo aquí y puedo ver que este archivo, llamado titulado pertenece también al borrador de carpeta. Desde aquí a la izquierda veremos nuestro panel de capas. Veremos nuestra barra de herramientas principal en la parte superior, y veremos el panel de propiedades debajo justo aquí en la sección que viene pasará por encima de cada opción que tengas en tu barra de herramientas así como tu panel leer y Propiedades. Pero por ahora, vamos a seguir adelante y en realidad archivo Neymar simplemente ir por aquí donde dice titulado y haga clic en él, y sólo vamos a nombrar a esto nuestro primer archivo presiona enter y ahí lo tienes. También tienes acceso al historial de versiones desde aquí ya que realizamos cambios en nuestro archivo, figment guardará múltiples versiones para nosotros en caso de que cometimos un error o en caso de
que solo necesitemos volver atrás y ver qué hemos hecho antes. Vamos a repasar esto a detalle en los próximos apartados. Ten en cuenta que a medida que hagas cambios, fig mo guardará auto tu trabajo. Y así realmente no hay necesidad de presionar guardar. Y si intentas
hacerlo, solo mencionará esa cifra. En realidad, auto guarda tu trabajo, Así que esto es realmente genial y realmente útil. Yo sí quiero repasar algunas de las opciones de menú que tienes aquí, así que pinchamos en este ícono de aquí. Tienes acceso a tus opciones de menú. Ya sabemos lo que hacen estos compañeros traseros. Simplemente nos llevaría de vuelta a la pantalla principal. Puedes buscar cosas aquí, y también puedes crear nuevos archivos desde aquí. Colocar imágenes. También puedes guardar tu archivo de figment en algún lugar de tus carpetas de tu máquina local. Humanidad, guarda todo hasta ahora en una historia de versiones que de nuevo pasará. Se puede exportar desde aquí y agregar un panel. Sí, acceso a algunas de las opciones comunes, como Indue Redux Copy Paste también estará utilizando muchas de estas herramientas en nuestro futuro. Lecciones desde la vista. Tienes acceso a pixel y layout grid, que usarán en nuestros futuros proyectos. Tienes acceso a algunas de tus opciones de zoom. Puedes elegir qué mostrar y ocultar en cuanto a los paneles de izquierda y derecha. Definitivamente vamos a repasar las otras opciones a medida que empezamos a diseñar. Algo que sí quiero mencionar es que si estás más cómodo teniendo fig MMA como aplicación de
escritorio , también
tienes la opción aquí con Get ese stop up. Eso ya lo tiene instalado en mi máquina. No voy a seguir adelante y salvarlo, pero siéntete libre de hacerlo. Si lo haces, deseas continuar en el escritorio arriba, que es lo que voy a estar haciendo. Ten en cuenta que casi todo va a ser igual entre el clima en el escritorio arriba. Por lo que si sí deseas continuar en la aplicación Web, por todos los medios, puedes hacerlo
6. Importación del boceto: Por lo que en la última lección, mencioné que también puede importar archivos desde sketch. Esto es súper útil en caso de que ya hayas iniciado un proyecto con boceto que quieres pasar a fig MMA. Entonces como ejemplo aquí tengo un archivo de boceto que digamos, Ahora quiero pasar a fig mo. La forma más fácil de hacerlo Es un ir adelante y secar tu archivo de boceto justo en la
app fig MMA . A partir de aquí, empezará a importar los archivos, y esto podría llevar algún tiempo. Una vez hecho, verás que dice Seguir importante con éxito. Rápido hecho. Puedo seguir adelante y hacer doble click para abrirlo. Y como puedes ver, todo se ve bastante bien aquí, excepto que faltan algunas fuentes en este proyecto. Por lo que para tu proyecto, es posible que
tengas que seguir adelante y renunciar a algunos de los fondos o descargarlos en tu máquina, y vamos a repasar cómo descargar fuentes y hacerlas funcionar con el producto. Web up en las lecciones futuras también, si dibujas antes notarás que muchos de los elementos se han convertido en elementos de
fig MMA lo cual es genial. Ten en cuenta que siempre es mejor repasar tus tableros de arte o tus marcos para asegurarte de que todo se haya importado con éxito.
7. La barra principal de herramientas: Entonces en esta sección vamos a explorar las herramientas a las que tenemos acceso en fig MMA, si aún no lo has hecho desde la última sección, adelante y crea un nuevo archivo. Pero ir a redactar y presionar este signo más aquí. Si continúas, adelante y solo abre tu primer archivo que acabamos de crear en la última sección. Y esta lección vamos a pasar por todo lo que tenemos acceso aquí en la parte superior
o la barra de herramientas principal Sigma. Primero lo primero es la opción de menú a la que tienes acceso desde aquí. Entonces aquí estoy, corriendo el escritorio de figment. Y como podrían notar, mis muchas opciones ahora están apareciendo aquí en lugar moviéndose hacia la derecha. Tienes tu mudanza Herramienta así es que haces click. Tienes acceso a una escala a la herramienta de movimiento es la herramienta en la que vas a estar mayormente ya que te permite mover objetos y redimensionarlos rápidamente. La escala a, como su nombre podría sugerir, es ideal para re dimensionar sus objetos. A continuación, tenemos acceso a marcos. Los marcos son esencialmente lo que nos ayuda a organizar nuestro diseño y lo repasaremos y futuras lecciones justo al lado. Tenemos formas. Entonces desde aquí podemos crear formas como rectángulos,
líneas, líneas, flechas Elect dice Polygon star, e incluso podemos colocar imágenes de aquí justo al lado de ella. Tenemos el lápiz, que nos ayuda a crear formas más personalizadas. De aquí. También tienes acceso al lápiz para entonces tenemos texto a simplemente un proyecto de textura. Contamos con una herramienta de mano que nos ayuda a movernos por nuestro proyecto sin editar de manera excelente algo. Tenemos un taburete común. Por lo que para trabajar con múltiples personas es una gran manera de comunicarse y dejar comentarios para ellas dentro de tus diseños, dondequiera que estés y tu proyecto, siempre
puedes volver a la herramienta principal de movimiento aquí ya sea presionando escape en tu teclado o V en el medio. Aquí tenemos más acceso a nuestras opciones de archivo. Ahora estos iconos de avatar representan a personas dentro de mi proyecto. Entonces este soy yo y luego los otros también yo porque tengo el proyecto abierto tanto en
escritorio como en web. Si voy a mi aplicación Web y la cierro, verás que ahora solo soy yo aquí. Esto será más útil cuando estés trabajando con equipos. También tienes la opción de compartir aquí,
lo que te ayuda a compartir tu archivo con otras personas y a darles ciertos permisos. Eso lo repasaremos con más detalle más adelante. De lo último aquí tenemos presente. Entonces esto es genial cuando estamos trabajando con clientes o quieres mostrar a nuestro equipo lo que hemos construido La última opción aquí. Tenemos acceso al zoom,
también, también, lo que ayuda a acercar y alejar nuestros archivos. El medio aquí es donde nuestros campus. Entonces todos tus diseños entrarán aquí, y la siguiente lección vamos a repasar nuestro panel de propiedades.
8. El panel de propiedades: Entonces en la última lección aquí, pasamos por encima de nuestra barra de herramientas principal, que vamos a estar usando mucho en nuestros proyectos del lado derecho. Aquí, notarás que está el panel de propiedades. Entonces en este momento, porque no tenemos nada seleccionado en nuestro lienzo, sólo
podemos cambiar el color de fondo de nuestro campus aquí. Voy a seguir adelante y deshacer eso presionando Comando Z, o si estás en una PC, será control Z. También
tienes acceso a opciones de exportación, que pasarán en las secciones posteriores. Ahora este panel de propiedades cambiará dependiendo de lo que hayas seleccionado en tu campus. Entonces para los efectos de esta lección, sigamos adelante y creemos un rectángulo haciendo clic en el rectángulo hasta aquí. Adelante y sólo dibujemos un rectángulo aquí. Como pueden ver, mis opciones del lado derecho aquí ahora han cambiado. Tener acceso a la posición de mi rectángulo dentro del campus aquí. Entonces esa es la X y la Y. también
puedo ver el ancho y la altura de mi rectángulo aquí, y en realidad puedo cambiarlo desde aquí también. Pero está haciendo clic en él y arrastrando a la derecha para aumentarlo o a la izquierda para disminuirlo. Tengo acceso a opciones de rotación aquí, y si quieres especificar un número específico, siempre
puedes saltar aquí y poner un número. Voy a deshacer eso. Y también tienes acceso al año radio fronterizo, que cambia cómo alrededor de tus esquinas rectángulos están aquí abajo. Puedo editar el relleno de estos rectángulos. Puedo cambiar el color si quiero. Puedo agregarle un trazo, y puedo aumentar el tamaño del trazo aquí. Puedo elegir si debe ser en el centro, el interior del rectángulo o el exterior. Entonces lo voy a dejar afuera. Aquí abajo, tienes acceso a algunos efectos, como Drop Shadow dice Puedes ver aquí se agrega un poco de sombra debajo de un rectángulo, que pasará sobre cómo agregarla más adelante. Enviar opciones de efectos. Tienes acceso a más efectos que descubrirán más adelante, y por último, puedes exportar el rectángulo aquí yendo aquí y haciendo clic en Exportar. El formato predeterminado es PNG, pero puedes seguir adelante y cambiarlo. Jay Peak, SPG pdf aquí también. Vamos a repasar la exportación y más detalles después también. Ahora sigamos adelante y seleccionemos texto y sigamos adelante y solo haz clic en tu lienzo aquí y está vestido apretado, algo al azar. Vamos a hacer click de distancia. Ahora tengo un texto aquí. Como ves, podrías notar que ahora mis opciones aquí han cambiado, y aún tengo acceso a mi posición y suspiros aquí. Pero ahora, como pueden ver aquí abajo, tengo una opción de texto desde donde puedo establecer la fuente de mi texto. Puedo cambiar el peso de la fuente, ponerla en negrita o hacerla. Entonces puedo cambiar el tamaño de fuente desde aquí así algunas opciones de texto más detalladas aquí, que pasaremos en futuras lecciones.
9. El panel de capas: Entonces ahora vamos a explorar el panel de capas de la izquierda aquí. Vas a estar usando mucho este panel porque almacena todos tus elementos en tu proyecto. Dice que puedes ver puedo acceder a este texto aquí desde aquí y mis capas. Tengo acceso a este rectángulo aquí. Si sigo adelante y sostengo a Ault, en realidad
puedo ir adelante y arrastrar otro rectángulo y realmente duplicar eso de aquí y ahora tengo dos rectángulos. Como puedes ver, una cosa a tener en cuenta aquí es que cuando tu objeto en el panel de letras es más alto que otro objeto, se presentará encima de ese objeto. Por lo que esto crea una jerarquía de vista. Entonces sólo para mostrarles un ejemplo, voy a ir a este segundo rectángulo aquí, cambiar el relleno a azul. Y ahora si sigo adelante y coloco esto por aquí, notarás que va encima del rectángulo rojo aquí porque esto está encima en el panel de
capas. Si lo muevo a abajo ahora, ya ves el ángulo recto rojo irá encima del azul. Si hago lo mismo con mi texto aquí, Subirlo aquí. No te des cuenta que ahora mismo está encima del rectángulo rojo porque está en la parte superior de las capas. Si lo muevo todo el camino hacia abajo, o incluso solo uno hacia abajo será bloqueado por los otros objetos de aquí. También tienes acceso a activos desde aquí pero lo pasarás en futuras lecciones. Y usted tiene ISIS decretado múltiples páginas para su archivo aquí también, que cubrirá con más detalle también.
10. Marcos: Entonces, ¿qué es un marco? Y higo? Los marcos MMA son esencialmente una forma de ayudarnos a organizar nuestros objetos dentro de nuestro proyecto. Entonces si tienes múltiples pantallas para, veamos, una aplicación móvil en la que estamos trabajando, cada marco representará cada página dentro de esa aplicación. Entonces si quiero poner estos objetos en un marco, puedo hacerlo subiendo aquí. ¿ Dónde está su marco? O otra opción está presionada la tecla F del teclado. Y ahora si sigo adelante y drogo un marco alrededor de estos objetos, va a crear un marco que podemos ver tiene este fondo blanco ahora y ahora. Estos objetos se han agregado automáticamente a mi marco uno. Entonces para el primer fotograma aquí, creé un marco con un tamaño aleatorio. Pero si quieres conseguir algunas opciones para algunos tamaños para tus marcos, cuando sigas adelante y creas un nuevo marco o presionas F, aquí
verás en el panel derecho opciones para tamaños de teléfono, como el iPhone 11 Pro Max Google Pixel Opciones de Tablet Impresionantes Aquí escritorio. Si estás trabajando en la aplicación Web o de escritorio, mira papel y redes sociales, lo cual es súper útil. Entonces, ¿por qué no vamos adelante, vamos a la parte superior del teléfono aquí y creamos aquí un marco para el iPhone 11 pro? Como puedes ver, Sigma inserta automáticamente un marco en tu proyecto. Con ese tamaño de dispositivo específico, puedes duplicar fotogramas teniendo uno seleccionado y presionando el comando D. Si estás en un Mac o controla el si eres todas las ventanas o alternativamente, puedes mantener Ault y seleccionar uno libre y simplemente arrastra hacia una nueva posición en tu lienzo. Entonces ahora tengo tres marcos aquí. Voy a usar desplazamiento de comando para simplemente seguir adelante y acercar una onza. Una cosa realmente necesaria es que puedes usar herramientas de alineación para alinear tus marcos. Entonces digamos que tus marcos están desalineados y quieres que se espacien uniformemente. Adelante y selecciónalos todos con sólo arrastrar aquí. Y luego si vas en la esquina inferior derecha aquí, hay una pequeña opción. Y si presionas eso, seguiremos adelante y nos daremos un espaciado uniforme entre todos los marcos de aquí. Ahora bien, si quieres que todos los marcos también estén alineados verticalmente también, puedes subir aquí y luego seguir adelante y encontrar este alinear centros verticales. Y ahora, como pueden ver, todos
han sido bien organizados verticalmente también. Algo que necesita de los marcos es que puedes seguir adelante y copiar y pegar elementos dentro de ellos dentro de la misma posición. Entonces como ejemplo, vamos a crear un texto aquí. Vamos a cocinar ahora. Si sostienes viejo aquí, puedes ver dónde está tu objeto dentro de tu marco para que pueda ver que son 53 picos es de la parte superior 41 de la izquierda, 2 38 de la derecha y 7 17 de abajo. Si quieres que todos tus amigos tengan este texto, adelante y cópielo presionando comando. Ver o ir a editar copia. Acude a tu nuevo marco y simplemente pegado presionando el comando V y automáticamente pagará Sit dentro de esa misma posición. Simplemente voy a deshacer los que sean súper útiles. Sigamos adelante y eliminemos este año de texto, y luego vamos a explorar algunas de las opciones de diseño y cuadrícula de píxeles también
11. Cuadricas y guías: ahora, si trabajas con otras herramientas de diseño antes probablemente usaste rejillas, si no lo has está totalmente bien. Las setas esencialmente nos ayudan a mantener todos los objetos dentro de nuestro marco organizados y distribuidos adecuadamente para crear una cuadrícula dentro de tu marco. Adelante y seleccionado, y luego el panel de propiedades. Aquí verás una cuadrícula de diseño de opciones. Adelante y agrega uno presionando el signo más aquí y ahora. Como se puede ver, un tener un gran dentro de mi marco. Hay un par de opciones en cuanto a tu cuadrícula de diseño. Podemos cambiar esas opciones haciendo clic en este pequeño icono de cuadrícula aquí. este momento, estoy usando una cuadrícula regular, pero también puedes crear Colin Words, que son bastante comentario y aplicaciones Web, así que podría hacer un recuento de 12 y ahora tener un gran de 12 columnas espaciadas uniformemente. Puedes cambiar el color de tu cuadrícula o la capacidad aquí, lo que, por ejemplo, podemos ajustarla al 5% aquí y ahora es un poco más ligera, por lo que hace más fácil ver tus objetos dentro de tu marco. Puede cambiar el tipo a una cuadrícula central si desea agregar espaciado a la derecha y a la izquierda. O podrías hacer algo como que dejó la línea o escribir una línea para tu cuadrícula. La opción de estiramiento. Por lo general, las líneas son geniales de manera uniforme en todo tu marco. Aquí también puedes agregar un margen,
como 20. Y esa es otra forma de agregar espaciado a la izquierda y a la derecha y hacer, digamos, un margen más grande y usar eso como tipo de guías para nuestro proyecto. También puedes editar la opción de canalón aquí para que puedas tener canaleta más grande aquí o una más pequeña . Así que siéntete libre de jugar con esto encendido. Realmente encuentra una rejilla óptima para tu proyecto. Si estás trabajando verticalmente, también
puedes usar una cuadrícula de filas, y eso te ayudará a distribuir tus elementos a lo largo del acceso vertical para la buena
opción principal . Aquí. También puedes elegir la talla, así que si elijo una, acerco zoom. Puedo ver que tengo una cuadrícula uno por uno píxel dentro de mi marco. Puedes tener varias cuadrículas simplemente presionando el icono más aquí en la asignación y nueva cuadrícula, como, digamos, llamar a agarre. Entonces ahora tengo tanto cuadrícula de colon y una cuadrícula de píxeles en altura y un ocultarlos o seguir adelante y simplemente eliminarlos del marco de aquí también. Otra opción para organizar tus objetos dentro de tu marco emite lo que se llama regla. Aquí puedes usar shift our para mostrarlo y ocultarlo, o también puedes cambiarlo de vista show rulers. Una cosa genial de la regla es que él puede usarlo para agregar guías a tu marco pasando por encima de él y simplemente haciendo clic y arrastrando y creando guías dentro de tus marcos mientras pasabas por encima de una guía. También puedes usar Ault para ver exactamente cuánto espacio estás trabajando aquí. Lo mismo vale para una guía horizontal aquí para quitar guías de tu marco, adelante y solo tienes que hacer clic y arrastrarlo de nuevo a tu regla y deshacerte doble de ellas. Y así es como usas rejillas y guías dentro de tus marcos.
12. Crear formas de creación de formas: Entonces esto no lo hace Vamos a explorar formas un poco más. He ido adelante y borrado todos los fotogramas. Mi enemigos, solo
estoy para que sea sencillo volver a crear una forma. Podemos dirigirnos por aquí donde tenemos nuestras herramientas de forma y tenemos una variedad de formas, desde un rectángulo hasta línea hasta flecha hasta elipses estrella poligonal E incluso podemos colocar imágenes desde aquí. Esto es súper útil, y lo repasaremos y futuras lecciones. Pero por ahora, repasemos algunas de las formas comunes que estarás dibujando en fig MMA primero y ante todo, una herramienta de rectángulo. Vas a estar usando mucho esto para crear rectángulos y tus archivos. Simplemente puedes seguir adelante y dibujar un rectángulo donde quieras. Ahora, una cosa que quiero señalar es que si quieres crear un cuadrado para que quieras crear un rectángulo con lados iguales, puedes mantener pulsado el turno mientras estás secando tu forma y Dow limitará proporciones fuera ancho y alto. Entonces es lo mismo. Ahora mismo. Tengo un cuadrado de 300 pixel de ancho y 300 pixel de altura. Vamos a hacer clic de distancia y vamos a crear un círculo también yendo a la herramienta vamos Y nuevo, voy a mantener el turno para crear un círculo perfecto y luego crear mi forma por aquí. Sólo voy a soltarme. Si no obtienes de nuevo el tamaño exacto que quieres aquí, siempre
puedes ir al panel de propiedades aquí y darle el tamaño exacto que quieras. Entonces si hago estos 300 pixeles que ves automáticamente, también establecerá la altura de 300. Y eso se debe a que este pequeño icono de proporción limitada está activado. Si apagas eso y cambias el ancho y la altura, cambiará de forma independiente, y no cambiará el otro para agregar algunos estilos a tu forma, simplemente pasa a la forma que quieres darle al estilo, también. Y desde aquí puedes hacer cosas como cambiar el relleno de tu forma de un trazo, y eso es exactamente lo que vamos a hacer. Entonces cambiemos primero el relleno de esta plaza yendo a este pequeño ícono de color sobre escuchar pinchando sobre ella. Y así es como nosotros todavía nuestro pequeño picker de color bonito aquí desde aquí puedes seguir adelante y cambiar el color al color que te guste. Voy a hacer un bonito azul por aquí Si quieres agregar ingrediente en lugar de solo un
color sólido . Se puede hacer eso a partir de aparecer cambiando su sólido a ya sea lineal una radio y pescador o diamante InTs Grady pero el más comúnmente utilizado como un Grady lineal. Y aquí Así que eso es lo que voy a estar haciendo si notan que el primer color re recogido está la izquierda ahora, que está en la parte superior del Grady aquí en el color inferior. Actualmente está establecido en un pase cero iti, lo
que significa que realmente no se está mostrando en la pantalla. Entonces si quieres seguir adelante y traer esto todo el camino hacia arriba y yo solo voy a mover esto a tal vez un bonito morado solo para demostrar ingredientes, ahí lo tienes. Si quieres cambiar los lados, puedes hacerlo moviendo estos círculos Por aquí. Puedes configurar tu calificación para que empiece en medio de tu forma, o puedes hacer un bonito radiante en ángulo como así que siéntete libre de jugar con ella hasta que llegues a la Grady en tu gusto, solo
pinchemos escapar aquí para volver aquí. No una cosa realmente genial del estigma es que puedes seguir adelante y agregar esquinas redondeadas muy fácilmente para hacerlo. Adelante y selecciónela. Pasa a este pequeño círculo y la esquina no importa qué esquina y solo sigue adelante y tira de ella. Y mientras haces clic en él y eso creará bonitas esquinas redondeadas para tu forma, voy a deshacer eso presionando Comando Z. Si quieres agregar un radio de borde a solo un lado, puedes hacerlo manteniendo presionado viejo o la opción él en tu teclado y luego arrastrando en esa esquina. Por lo que ahora ves, solo
tienes una esquina redondeada en una de las esquinas, y sus otras esquinas están en el radio de esquina cero. Puedes cambiar todo esto seleccionando la forma aquí e yendo a la derecha por aquí. Vemos ahora tener un radio de esquina que está mixto. Y así desde aquí, también
puedes hacer algunos retoques también. Entonces si solo quieres ponerlo a cero, volverá a la normalidad. Si uno en un radio de esquina apagado 20 a la parte superior. Yo puedo hacer eso. También puede desactivar este rincones independientes para volver a tener solo un radio de esquina que también puedes establecer desde aquí. Enfriar. Añadamos un paseo aquí es largo para nuestra forma. Como puedes ver inicialmente, el trazo es muy ligero, por lo que puedes seguir adelante y solo subir este número. Va a hacer 20 de aquí. Puedes seguir adelante y cambiar el color. Realmente no necesitaría nada de los modelos de fig que se pueden copiar estilos entre formas muy fácilmente. Y para ello, sigue
adelante y selecciona la forma de la que quieres copiar el estilo y luego ve a editar , baja a copiar propiedades. Alternativamente, puede mantener presionado el comando de opción. Ve, ve a la forma a la que quieres aplicarla, y luego comando de opción V. Eso te daría el nuevo estilo en esta nueva forma Una vez más, controlas esas herramientas desde editar copiar y pegar propiedades aquí. Enfriar. Entonces ahora tenemos dos formas con los mismos estilos. Es importante mencionar que tienes control total sobre tus formas, Así que si quieres tomar tu forma y manipulada de alguna manera puedes hacerlo haciendo doble clic en ella. Y una vez que ves este pequeño patrón por aquí, eso significa que estás dentro de la forma y puedes hacer cosas como extender el borde por aquí y puedes hacerlo a cualquier borde que quieras. Y si quieres alrededor de uno de tus bordes, puedes hacerlo manteniendo presionado el comando o el control en las ventanas y luego arrastrándote. Puedes ajustar tu curvatura usando estas herramientas aquí también. Así que adelante y experimenta un poco. Si quieres, notarás que también se está manipulando mi trazo con mi forma. Si quieres separar estos dos componentes el uno del otro para que puedas hacer la forma sin tomar el trazo o tratar el trazo de una manera diferente, realmente
hay necesidad de eso. El estigma sí, y vamos a anotar eso primero. Hagamos click hecho aquí, así que terminamos de manipular con la forma mientras tienes tu forma seleccionada. Pasar a los objetos, encontrar contorno, trazo. Ten en cuenta que estas muchas opciones podrían estar por aquí si estás usando la aplicación Web una vez que selecciones trazo de contorno en mi panel de capas. Puedo ver que ahora tengo dos rectángulos diferentes, una formas, una es para el trazo y otra para la forma real. Y puedo demostrarlo con tan solo sacar la forma y ahora verás que están completamente separadas. Entonces si lo hago mando Z para deshacer eso por ahí, así que ahora si manipulo mi forma aquí, lo hará sin impactar el paseo por aquí. Simplemente voy a deshacer todo eso presionando el comando Z un montón de veces. Simplemente voy a deshacer hasta que consiga esta forma aquí, que se parece a un icono de etiqueta de precio, que es bastante genial.
13. Herramienta con bolígrafo y lápiz lápiz y lápiz: y la última lección exploramos formas y empezamos a crear algunos afeitados y
manipularlos también. Entonces ahora vamos a aprender sobre la herramienta de bolígrafo, que está aquí arriba. Puedes seleccionarlo simplemente subiendo aquí o presionando p en tu teclado. El lápiz te da vivir más libertad en cuanto a crear tus formas. Una vez que lo tengas seleccionado, en realidad
puedes seguir adelante y hacer clic en cualquier parte de la pantalla. Y eso creará un punto y te dará otro punto que tuvo lugar en la pantalla. Israel s Entonces, ¿por qué no vamos adelante y tratamos de crear? Puede ser una forma similar, pero usando la herramienta de pluma. Entonces vamos a seguir adelante y hacer clic aquí ahora, mientras tienes tu herramienta de bolígrafo, puedes mantener el turno para que tu siguiente punto encaje a, um, ya
sabes, un 90 grados, 45 grados o ah, ángulo de cero grados aquí, por lo que eso lo hace un poco más fácil. Y como puedes ver aquí, simplemente
se encaja automáticamente. Me están diciendo que estoy en el mismo punto, así que ahora sólo puedo alejarme. Vamos a crear otro punto aquí, y entonces si en realidad vas al primer punto, seguirás adelante y cerrarás tu forma por ti. Entonces ahora tenemos una forma bonita que creamos con nuestra herramienta de bolígrafo. En cualquier momento, puedes presionar la tecla escape para salir de ese mental. Y ahora tenemos nuestra forma. Si terminas de editar tu forma y quieres volver atrás y añadir más puntos ahí dentro, simplemente sigue adelante y dobla rápido en ella y para agregarle más puntos, solo
puedes subir aquí de nuevo al muro de herramienta de bolígrafo. Estás dentro de la forma. Entonces, ¿qué ,
estamos, en un punto por aquí? Sostén de nuevo el 45 grado por aquí antes de salir de mi forma. Rollem dentro de aquí. Te voy a mostrar la herramienta de cubo de pintura. Puedes seleccionar la herramienta de cubo de pintura de aparecer, y esencialmente nos permitirá llenar solo partes de nuestro objeto si lo deseas. Cuando sigamos adelante al color de relleno por aquí y lo cambiamos a, um, tal vez un bonito color azulado. Aquí nuevamente, la herramienta de cubo de pintura nos permite agregar color a sólo una cierta porción de la forma aquí. Pareja cosas geniales que puedes hacer también, mientras estás dentro del lápiz de nuevo desde cualquier borde. Si mantienes el comando, puedes seguir adelante y agregarle alrededor de su borde, al igual que lo hicimos cuando estábamos dentro de nuestra forma. Cuando aparecen unos comandos que para volver aquí, también se
puede acceder a la Herramienta Ben desde y eso hará exactamente lo mismo. Así que siéntete libre de experimentar con eso aquí cuando estés todo terminado, click hecho o el escape él Y como puedes ver por defecto, mi herramienta de pluma me da un paseo aquí como si quisieras editar ese trazo. Puedes subir aquí otra vez. Otra forma de cambiar el grosor del trazo es que solo puedes pasar el cursor por aquí y hacer clic y arrastrar sobre el icono en sí. Y eso aumentará a medida que vaya a la derecha y disminuya a medida que vaya a la izquierda. Entonces aumentemos. Dicen que son seis por aquí, voy a cambiar el color del dedo del pie blanco. Entonces ahora te das cuenta que el medio de mi forma no lo tiene, Phil, Si quieres agregar una sensación a esta sección también, puedes hacer doble clic aquí otra vez, ve a la herramienta de cubo de pintura y haz lo mismo aquí y luego usa llave de escape para salir de ahí. Ahora notarás que mi trazo tiene bordes muy duros, así que si quieres alrededor de los bordes de tu trazo, selecciona tu forma. Aquí, ve a donde tienes tu derrame cerebral. Haga clic en tres puntos por aquí y luego siga adelante y cambie la articulación por aquí para redondear. Y eso se redondeará o acariciará un poco. Aquí está si me acerco ahora, no
es tan duro. Es redondeado y agradable y suave también. Todavía tienes acceso a su opción de radio de esquina aquí, así que siéntete libre de jugar con eso para conseguir el nous redondeado que quieres. Y así es otra forma en que puedes crear formas más complejas. Ahora te voy a mostrar algo necesita que puedas hacer con un lápiz también. Um, si vuelves a hacer doble clic en tu forma y luego vas a aparecer el lápiz, sigamos adelante y acercemos esta esquina aquí para que realmente podamos crear un bonito precio, ese tipo de icono. Entonces, ¿qué? El Penta fue seleccionado. Adelante y agrega un punto. Sólo estoy sosteniendo turno aquí otra vez para alinear las cosas correctamente. Y luego en otro punto, vamos a cerrarlo. Ahora tenemos un bonito círculo por dentro. Ahora pasemos a la herramienta de cubo de pintura ahora, ya que ya tenemos un relleno dentro de aquí y queremos realmente quitarlo para crear una especie de agujero. Por lo que ahora en realidad podemos crear un agujero por aquí en se forman simplemente presionando la herramienta de
cubo de pintura . En realidad va a seguir adelante y quitar el relleno ahí y en realidad creó un agujero para nuestra forma aquí. Entonces ahora si me alejo, él está al mando Scroll. Te das cuenta que tengo una buena forma aquí con en realidad un agujero en el medio así que justo debajo de nuestra herramienta de
bolígrafo. Si sigo adelante y hago clic aquí y hago clic en lápiz, obtendré un tipo de herramienta de pluma que fluye más gratis, y no tendremos el lápiz para seleccionar. Puedo crear aún más libre tipo de formas fluidas aquí, o líneas aquí, soy figura, intentará que sea agradable y suave y redonda así siéntete libre de jugar con eso también. Voy a seguir adelante y borrar facilidad desde aquí. Por lo que ahí lo tienes. Ese es tu bolígrafo y lápiz a en fig MMA
14. Formas personalizadas con operaciones boolean: Entonces si te caes hasta ahora Ah, hemos creado múltiples formas aquí. Incluso hemos utilizado una herramienta de bolígrafo para crear una forma más avanzada. Y esto. Escucha, quiero mostrarte algo que realmente necesitas llamado operaciones booleanas. Sé que suena un poco avanzado, pero en realidad es realmente simple, y podría ser realmente útil cuando estás creando formas. Entonces cuando tengas varios objetos seleccionados Así que, por ejemplo, voy a seguir adelante y seleccionar estas dos formas aquí. Puedes hacerlo haciendo clic en una forma y luego rodar sosteniendo, desplazando, haciendo clic en otra forma. Por lo que ahora tengo ambos seleccionados. Ahora notarás un pequeño ícono que saldrá por aquí llamado Grupos Booleanos. Si hago clic en él, tienes cuatro opciones. Tienes un sindicato, restar, cruzar, excluir. Vamos a pasar por cada uno de estos. Entonces, al final de esta lección, sabrás exactamente lo que hacen. Pero antes de que hagamos eso, sigamos adelante y acerquémoslo más. Eso se ve bien. Por lo que ahora tenemos dos formas separadas aquí que poco más colocadas una encima de la otra. Entonces de nuevo, voy a seleccionar a ambos esta vez sólo voy a secar a través de ambos. Por lo que ahora puedo ver ambos son seleccionados aquí, ir a grupos de bullying y una selección sindical. Ahora tengo una sola forma. Entonces, ¿qué selección sindical toma esencialmente mis dos formas y las combina en una sola? Si haces doble clic en él, verás que aún tienes acceso a ambas formas Aquí. Es para que pueda seguir adelante y en realidad moverlos por ahí y luego seguir adelante y presionar escape. Y estas dos formas esencialmente, ahora unidas. Entonces solo voy a mandar z puñado de veces hasta que volvamos a tener dos formas . Y entonces ahora vamos a intentar, restar selección, restar selección permite quitar esa parte de la forma de la otra forma
que había seleccionado. Entonces, como puedes ver, esta parte de los labios ahora se retira de esta forma que hemos creado antes y otra vez, puedo saltar aquí, doble click si muevo mis labios, puedes ver que ahora puedo manipular aquí mi nueva forma. Entonces ahora de nuevo, voy a presionar comandos que un montón de veces hasta que lo traiga de vuelta a aquí donde tengo a formas, seleccioné la selección de Intersect. Seguiremos adelante y solo quedamos con lo que esté en medio. Por lo que cualquier parte de la forma que se superponga entre estas dos formas, que resulta ser esta porción de aquí mismo se mantendrá y todo lo demás se
quitará . Y si vuelvo, por último, tenemos selección de exclusión. Esencialmente, eso hará lo contrario y eliminará esa parte que estas formas se superponen y se quedará todo lo demás. Por último, hemos aplanado la selección. Como mencioné, si vas adelante y doblas rápido aquí, aún
tienes acceso para emitir tus formas, y puedes seguir adelante y moverlas como quieras. Pero cada vez que hayas terminado de editar y estás seguro de que quieres mantener la forma tal como está, puedes usar la selección divertida para realmente combinarla, y esto ahora realmente actuará como una sola forma. Vamos a deshacer todo eso, y sólo voy a arrastrar las formas lejos el uno del otro ahora. Enfriar. Entonces esos son tus grupos de bolos. Te voy a hacer un poco de ejercicio. Ahora, quiero que sigas adelante e intentes recrear algo como esto donde tienes un hoyo en medio de esta forma aquí, similar a lo que tenemos por aquí usando estas dos formas y usando un grupo booleano. Si quieres saltar, este ejercicio también se revisará cómo hacerlo en la siguiente lección.
15. Solución de ejercicios de operación boolean: Entonces la última lección que aprendimos grupos de bullying y luego te doy un poco de ejercicio para
tratar de recrear esta forma. Entonces solo vamos a seguir adelante y hacerlo aquí un oleaje así de nuevo para entrar en efecto así, queremos usar la selección excludes en nuestros grupos de bullying para sacar el círculo de esta parte de la forma que tenemos aquí. Entonces antes de que
hagamos eso, sigamos adelante y seleccionemos ambas formas año simplemente arrastrando a través de ambas. Yo sólo voy a ir a la derecha aquí y donde es un derrame cerebral. Yo sólo voy a cambiar este 22 5 De lo contrario, si excluye esta forma fuera de aquí, va a crear un agujero gigantesco aquí porque el trazo será demasiado alto. Entonces ahora es como el círculo aquí. Llevarlo a donde queremos crear nuestro todo y la otra forma. Simplemente voy a redimensionar eso usando turno para que mantenga un círculo perfecto. Hagamos 28 por 28 otra primavera. Bajen aquí hasta donde parece que está centrado. Entonces una vez que lo tengamos por aquí, en realidad
voy a traer la forma aquí arriba, y la razón por la que hago eso es que porque quiero mantener el estilo de esta forma, de lo contrario va a estropear nuestro estilo para la forma aquí. Entonces sigamos adelante y ahora seleccionamos estos dos y notarás que verás un esquema para todo
el derecho debajo a menos que hagan grupos de bullying y luego excluyan la selección. Y ahora tenemos un bonito agujero hecho de esa forma por ahí. Entonces esa es otra forma de manipular tu forma y conseguir algo similar usando
grupos de bullying .
16. Herramientas de alineación: cool. Entonces en esta lección, vamos a repasar algunas de las herramientas de alineación a las que tienen acceso aquí. Por lo que he creado un marco con un montón de rectángulos en ellos. Ahora están completamente por todo el lugar. Uno de ellos incluso se va fuera del marco por aquí. Por lo que para poder aprovechar nuestras herramientas de alineación, vamos a seguir adelante y seleccionar todos los rectángulos que van a hacer. Queremos aplicar ciertas propiedades de alineación para, como, ir por aquí. Y luego voy a ir por aquí y explorar algunas de las diferentes opciones que tengo. En primer lugar, voy a explorar una línea a la izquierda. Esto tomará todos mis objetos que tengo aquí y los alinearán al objeto más izquierdo que tengo. Entonces ahora ya ves, todos
están forrados en el lado izquierdo. Ahora bien, si deshago eso en una línea a centro, tratarán de encontrar el centro de todas esas formas que sucede que está aquí. Y entonces un derecho de línea hará en realidad lo mismo está acostado a la izquierda, excepto que todo irá a la derecha. ¿ Tienes una línea top que lo llevará todo y los alineará a la parte superior un centro de línea hará lo mismo, pero dentro del centro de esos tonos. De igual manera, tenemos una línea de fondo. Recuerde, todos estos cambios de alineación están sucediendo dentro de este cuadro de límite exterior, que está encerrando todos los objetos que estoy alineando ahora. Desde aquí, se
puede ver que tengo acceso a cosas como ordenar, distribuir espaciado vertical y distribuir espaciado horizontal, que son super cool. Empecemos con ordenado. Tratará de crear un espaciado uniforme entre todas las formas aquí. Por lo que ahora se puede ver que hay uniformemente espaciados. En realidad puedo controlar eso yendo por aquí al medio, donde hay una pequeña línea rosa y voy adelante y arrastre a la izquierda si quiero menos espaciado entre ellos o a la derecha si quiero más espaciado entre ellos. Entonces eso es super cool. Solo voy a mover algunos de mis elementos de ahora y ahora, si los selecciono aquí usando el espaciado vertical de distribuir cuando
selecciones esa opción ,intentará tomar todos los objetos que tengas dentro de este cuadro limitador y tratar de , distribuirlos verticalmente y misma idea para el espaciado horizontal. Entonces ahora se ha ido adelante e intenta espaciar todo de manera uniforme, horizontal. Entonces si levitas ambas opciones juntas, realmente
intentará realizar todos tus objetos dentro de esa caja de una bonita manera horizontal y vertical. Por lo que realmente puedes usar esos cuando tienes múltiples elementos que necesitan una distribución adecuada. Definitivamente usaremos mucho las herramientas de alineación en nuestro próximo proyecto.
17. ¿Qué sigue?: Está bien, para que eso concluya nuestra introducción a Fig Mahir. Sé que fue muy corto y breve amable, por
supuesto, y ese fue realmente el punto de que te familiarizaras solo con lo básico por ahora. Pero se puede ir en muchas direcciones a partir del año. Entonces, ¿qué sigue para ti? Bueno, si estás buscando hacer diseño gráfico, entonces por supuesto, puedes aprovechar esta oportunidad para seguir adelante y saltar a fig MMA, jugar con más de las herramientas que tienes acceso para crear más formas y tal vez incluso intenta recrear algunos de los proyectos que ves en línea que te gustan. Ah, usando fig MMA. Y luego la próxima semana, aquí en cuota de habilidad, estaré compartiendo un curso sobre cómo en realidad se puede construir un simulacro de móvil completo usando
dinero falso . Pero mientras tanto, definitivamente
puedes seguir adelante y encontrar inspiración en línea para ti mismo. Aquí mismo. Acabo de tener a Pinterest abierto. Busqué inspiraciones de aplicaciones móviles. Así que siéntete libre de buscar eso en Pinterest para conseguir algunas ideas de móvil que diseñé. Si eso es algo de interés, tú o tú puedes hacer web, depende completamente de ti. También hay otro gran sitio web, patrones de
carbón dot com, que espelta así y que también te da algunas ideas para buen tipo de ti me inspiraciones que puedes tomar y aplicar a tus propios proyectos. Yo sí animo a que tomes algunas ideas de aquí o de otra parte y sigas adelante en fig MMA y tratas de recrear aquellas con las herramientas de forma que aprendimos en este curso. Incluso puedes experimentar con la opción de texto aquí también, pero de nuevo, pasaremos por crear un marcado móvil completo en el próximo curso aquí sobre cuota de habilidad. Ahora, cualquiera que sea el diseño en el que estuvieras trabajando, definitivamente me lo puedes enviar para que me lo comenta. O incluso si tienes preguntas, puedes seguir adelante y enviarme un correo electrónico. Mi correo es lo inteligente en gmail dot com. Incluso puedes seguir adelante y hacer clic en este pequeño botón de compartir en tus proyectos de higment y admitir tu proyecto, y dejaré comentarios directamente en tus diseños de higment también. Te agradecería mucho que también me hicieras saber cómo encontraste este curso. Si lo encontraras útil, Um, sería impresionante si dejaras la crítica para ello también y sin dicho, espero que hayas aprendido algo en este caballo y con ganas de verte la próxima semana en nuestro curso de diseño móvil .
Nima Tahami, Entrepreneur & Product Designer
