Transcripciones
1. Introducción: ¿Estás trabajando duro para
corregir la inconsistencia en tu diseño y buscas
unificar tu experiencia de usuario
en toda Quieres aumentar la escalabilidad de
tu sistema, entonces estás en el lugar correcto En este curso,
utilizaremos el
token de diseño para traer la uniformidad
en todo nuestro proyecto. Al principio, nos
despediremos de nuestra actualización de TDS. Al igual que con el token de diseño, cambiaremos una ficha y
veremos cómo se ondea a
través de los diseños. También dejaremos de reinventar
la ballena ya que con los tokens promoveremos para reutilizar y agilizar
el Ideal para diseñadores de UIUX, diseñadores de
productos o individuos que
desean mejorar la eficiencia y estandarizar su proceso de diseño
con No se requiere conocimiento previo de
token, pero una comprensión básica
de Figma es útil Y por último, también vamos a cerrar la
brecha entre la comunicación de diseño
creando un lenguaje común para su
equipo. Empecemos.
2. Tu proyecto de clase: A medida que avances en el curso, practicarás a lo largo
creando tu propio token de
diseño en Figma. Por favor, descargue para el
token de diseño fortuden punto Figma archivo. Este archivo tiene un
enfoque práctico que le permite
construir habilidades en tiempo real y asegurarse dominar cada uno de los
conceptos a medida que se enseña. Entonces, una vez que abres el archivo, así es como se ve. Puedes leer el
nombre del archivo en la parte superior, diseñar fichas entre
parénteos para estudiantes, y si hago zoom un
poco en el Archivo, lo experimentarás. Intencionalmente he hecho este como gris para que puedas crear el token y
aplicarlo a medida que
avanzamos en el curso.
3. Qué son los tokens de diseño: ¿Qué son los tokens de diseño? El token de diseño se
trata de administrar las propiedades de diseño y el valor de una alineación diferente
a través de los sistemas de diseño. Al mirar la tarjeta en este momento, tiene algunos de los
elementos de la interfaz de usuario presentes en ella. Una es la propia tarjeta. El segundo es el texto. El tercero es el botón. Ahora, cada uno de los lamentos de UI tiene una propiedad
asociada a él. Una tarjeta puede ser redonda, un texto que tiene un color, tamaño, etc. Un botón también tiene un color,
tamaño, espaciado, pading y así sucesivamente Cada uno de estos valores es
al interior del token. Este valor se puede representar
en forma de color,
número, cepa o booleano En general, tenemos
tres tipos de fichas. Uno es el token primitivo, token
eeny y los tokens de
componentes Veamos en detalle las
fichas primitivas.
4. Tokens primitivos: color es una de las fichas primitivas más
utilizadas en cualquier sistema de diseño. También se le conoce como
los tokens globales. Vamos a crear algunas fichas
primitivas. Hay dos formas en las
que podemos crearlo. Uno es manual, y el
segundo es automático de capa. Golpeamos en cualquier parte del
lienzo y vamos a ir la derecha dentro y
dar click en éste, ken variables. Puedes hacer click
en cualquier parte de este espacio. Voy a abrir la
misma caja de marcación. creas manualmente, das clic en la
variable de grado, seleccionas el color. Te voy a dar un
nombre tiene 500 aquí. Es en este. Si abrimos este piloto de color, podemos simplemente seleccionar
cualquiera del color, perder este y ahora se crea la
variable. Ahora crear ese topen de
esta manera lleva mucho tiempo. Haga clic con el botón derecho y
eliminemos esta cosa. En cambio,
lo haremos de una forma inteligente. Vaya a la barra de herramientas y seleccione
este botón llamar a la acción. Puedes usar un atajo de Control K o si estás en Macintosh, puedes usar Comando K. Ve
al plug in y puedes usar este plugin llamado
Te unCSS Puedes usar cualquier plugin en la
medida en que te permita
generar las variables. Tengo Ph color a mano contigo. Copia este primer color.
Ingresó la guía de colores y borra las variables.
Esta es la primera. Hagamos este ejercicio para
el segundo color, Bightd,
copy, faced, y las variables creadas
. Ahora, ¿qué pasa? Cuando voy a dar click en
la variable local, no
encontramos nada. Pero si haces
clic en este desplegable, tiene una sección
llamada colores y
automáticamente crea automáticamente crea toda la variable que
estamos buscando. Estas son todas nuestras fichas
primitivas. Ahora voy a renombrar esta cosa como primitiva así que es
fácil de entender. Este voy a
hacer doble clic decir primaria, y este un doble
clic secundario. Hemos creado nuestras
primeras aperturas primitivas.
5. Crear variables: Después de ejecutar el enchufe del generador de
color de base, verá algunos
cambios sutiles en la interfaz. Si hago clic
en cualquier parte del lienzo, y si voy por el lado
derecho, se
puede ver en el estilo de color, anteriormente, esta
sección estaba en blanco. Ahora tengo un estilo azul
así como el estilo amarillo
que vienen aquí arriba. No queremos esta jerarquía. Entonces, lo que voy a hacer,
seleccionaré ambos
presionando la tecla Tamizar y dar
clic y arrastrarla en la parte superior En el momento en que haga esta acción, la fundación se borrará
automáticamente El siguiente paso sería crear este estilo
a la variable. Para eso, voy a utilizar un plugin que se llama
estilo a variable. Voy a ir en la parte inferior
y dar clic en la acción. Y aquí en la parte superior, verás estilo a variable. Quiero tomarme un tiempo y
quiero buscar éste. Ahora, verás entrar varios
plugins, pero el que
estamos usando es este. Entonces te mostraré los
detalles para que
todos estemos en la misma página y también obtengas
la misma experiencia. Este es un plugin muy bueno. Ya
lo he probado varias veces. Entonces déjame presionar Escape y
volveré a mi pantalla. Ahora, vamos a ejecutar ese plugin y déjame abrir la variable en
el lado derecho Ahora aquí es donde ocurre
la magia. Te dirá qué
colección quieres
crear ya que no tenemos ninguna
colección en nuestras variables, así que diré que queremos crear una colección y quiero
dar un nombre es primitivo. En el momento en que hago clic en Crear,
esto es lo que sucedió. Automáticamente creó
todos los tokens primitivos que se requieren
para nuestro sistema de diseño. No obstante, aún
requería de algún refinamiento, lo que lo haremos en
tan sólo unos segundos. Pero te puedes imaginar bien, uno, dos, y vamos a
crear algo más sobre eso. Ahora déjenme salir X de aquí y
déjenme salir también de aquí.
6. Tokens de afinación: Para afinar nuestro token, vayamos a la sección de
variables, haga clic en eso y averíguelo. ¿Qué todos los tokens tenemos
ahora mismo? Tenemos un azul. Tenemos un amarillo en el lado
izquierdo como grupo, y dentro de eso,
tenemos las fichas. Ahora, el azul es muy genérico. Cambiémosle el nombre a primario. Entonces esto agregará más
contexto, y el amarillo, quiero hacerlo como
secundario. Seleccione el primario. Quiero quitar el guión guión azul del
texto. O hago esto de
forma manual o
podemos usar un plug in para automatizar
esta cosa para nuestra necesidad. Déjame salir X de aquí. Déjame ir al
área de plug in, que es acción, e iré al plug in y
widget y usaré el plugin llamado
batch renombrar variable. Para asegurarte de que estás
en la misma página, te
mostraré el
detalle del plugin. Este es el plugin en el que estoy usando. Déjame ejecutar este plugin. Y déjame ir
del lado derecho y abrir la variable. Ahora voy a mantener la
cosa lado a lado. Para el lado derecho, voy a copiar este texto que
quiero encontrar,
y voy a dar click en
los cambios de vista previa. Al fondo, puedes ver, déjame quitar esta cosa para que la
veas con mayor claridad. ¿Está haciendo exactamente
lo que necesitamos? Se está quitando Blue
dash, el derecho por dentro. Ahora para verlo en proceso, simplemente
me desplazaré hacia abajo
y aplicaré los cambios. Déjame mantener ambos lado a lado. Déjame desplazarme hacia abajo
y aplicar los cambios para que puedas ver justo
dentro de él eliminar Bj Vamos a la secundaria. Déjame ver ser parte de
ello. Revisar los cambios. Nuevamente, haga clic en los cambios
aplicados. Ahora estamos en una posición de que
las fichas son algo que me encanta usar y
podemos escalarlo más a medida que
aprendemos en el curso
7. Tokens primitivos adicionales: Queremos agregar token primitivo
adicional
a nuestra colección primitiva. Ahora bien, lo que eso significa. ir del lado derecho
y abrir la variable. Entonces tenemos una colección, cuyo nombre es primitivo. Se puede ver en la
parte superior izquierda, y dentro de esta colección, quiero agregar algunas fichas más
primitivas a esta. Ahora voy a X salir de aquí y hacer el ejercicio similar que
hemos hecho un par
de videos de vuelta. Entonces iré por el
lado derecho y voy a generar los estilos que queramos
requeridos para crear el token. Pero antes de eso, hay que
hacer algún chequeo de cordura, quitar este amarillo y azul aquí para que no necesitemos ese
ciervo para ser Ir uno por uno. Déjame
copiar esta primera. Bajar, ir a cimentación Generador
de color. Y aquí puedo generar. Voy a ir al material, derecho, esto es
lo que estamos usando, usar lo mismo y sólo puedo dar
click en Crear Estilo. Número uno,
lo haré rápidamente por todas las
cosas una por una. A volvamos y verifiquemos
dos veces. Ahora los tenemos todos,
verdes, azules, bien. Y solo seleccionaré
uno, dos, tres, cuatro presionando
la tecla Control, seleccionaré y lo haré en la parte superior, así que no necesitamos esa jerarquía. Ahora, la parte más difícil aquí es, iré y
ejecutaré el mismo
enchufe en el que hemos corrido, que es de estilo a variable, pero esta vez, hay
que ser un poco Ahora, aquí preguntará
¿en qué colección necesitamos agregar? Si voy al lado derecho
y abro la variable, verás que tenemos una colección
llamada primitiva, así puedo seleccionar la primitiva
del menú desplegable Y el segundo es el modo. Ahora bien, este valor
no es más que el que viene
aquí del lado derecho. No he dado ala alguna, así que solo voy a decir luz, y voy a usar el mismo texto aquí. Ahora voy a crearlo y
actualizarlo y
se puede ver en un momento
todos los cuatro anaranjados, azules, marrones y verdes
están apareciendo aquí. Ahora rápidamente le renombraré cómo hemos hecho este ejercicio
y lo completaré por usted. Terminé los cambios, y así es como se ve nuestra salida
final. Sí tenemos
videos primarios y secundarios en el pasado que hemos creado y hemos
agregado con éxito el
token adicional como advertencia, información, éxito y error que a la forma en que
queremos que pese.
8. Solución alternativa de mover tokens: Queremos crear tokens
primitivos Sal para nuestro sistema de diseño que nos
ayuden a respaldar
los mensajes de advertencia, los mensajes información, los
mensajes de éxito y los mensajes lm. Ahora para hacer eso, seguiremos el mismo procedimiento,
pero hay una captura. Ver en nuestras variables locales, actualmente todas nuestras fichas
primitivas, tratamos de agruparla en
colección llamada primitiva. Cualesquiera que sean las nuevas fichas
primitivas que
creamos , también entran dentro de
esta colección en particular. Pero si I X fuera de aquí y si hago este ejercicio
una vez más, copia, vamos a hacer este tono
llamado acción, seleccionar generador de color Tin CSS, hacer una pasta, y
crear variables. Ahora se crean las variables, voy a X salir de aquí. Si vuelvo de nuevo, a la variable local, no
voy a ver esos
tokens subir aquí. En cambio, creó un grupo de colección
adicional, que es nombre como
color en la parte superior. Aquí donde se pueden ver todas las variables que
estamos buscando. Al momento de la grabación, no
existe ningún mecanismo para mover
una colección de variables o tokens de un grupo a otro grupo o de una colección a
otra colección. Ahora bien, para arreglar esta cosa, estoy usando una solución alternativa que
me gustaría compartir Voy a borrar esta cosa primero. Bien, voy a cambiar el nombre de Pim
hasta dos colores porque esto es lo que la carpeta de colección B
Deford es enertd por el Si salgo de aquí y
hago el mismo ejercicio, que he hecho hacer una pasta y crear
variables una
vez más y ya está hecho,
la creación está hecha. Ahora si voy a variables locales, se
puede ver que viene dentro de la misma colección
que estamos buscando. Voy a repetir este ejercicio uno por uno para todo
esto. Haré doble clic
y diré advertencia. Y una vez hecho esto, volveré a cambiarle el nombre a primitivo. Al hacer esto, toda
la ficha primitiva entra dentro de una sola colección y eso es exactamente lo que
estamos buscando. Terminé ese ejercicio y volveré a cambiar el nombre de esta
colección a primitiva.
9. Mueve cualquier ficha: Con los últimos retrasos de Wigma, ahora deberías poder mover una variable de
una colección a otra o un token de una colección a
otra colección Anteriormente, esto no
era posible. Sin embargo, esto no es
tan sencillo, pero podemos echarle un vistazo a eso. Vaya a la
variable local, haga clic en eso. Voy a crear dos colecciones
aquí. Se trata de la colección A. Fine. Y voy a crear una variable aquí también,
que es un color. Voy a poner un color A aquí. Voy a crear una colección
más. Crear colección y
voy a decir ésta como B. Ahora, una de las
capturas que quiero destacar aquí es que sólo se
puede copiar y pegar a menos que haya un token o una
variable adentro adentro. Digamos, por ejemplo,
tengo una colección A, tengo un valor aquí,
derecho li copy. Si voy a la colección B, aquí no tengo nada. No puedo hacer un
click derecho y hacer una pasta. Tienes que tener al
menos un valor dentro de esta
colección en particular. Bien. Ahora bien, si escribo
click and paste, me permitirá pegar el color A de
la colección A. Esto no se
limita solo al color. Se puede utilizar cualquier
variable en este caso. Digamos que baje y hago clic en Crear variable y esta
vez creo un número. Creé esta variable o token dentro de la colección
A. Puedo hacer clic derecho, copiarlo, ir a la colección B y
hacer una pasta de la misma manera. Uno de los inconvenientes aquí es
que una vez que copias y pegas, necesitas eliminar ese
valor de la colección A. Durante la grabación, no
tenemos una opción de corte en este menú en
particular. Sin duda en el futuro,
podrían agregarlo. Está evolucionando muy rápido. Bien.
10. Token semántico: token sinctico
suele hacer referencia a un token primitivo y nombre basado en el
contexto de sus puntos de vista También se les conoce como una capa abstracta de las fichas. Aprendamos con una analogía de libro de
contactos. Siempre que quieras guardar un
número en tu agenda telefónica, generalmente
le das un nombre
a ese número en particular, es fácil para ti realizar
la acción como llamada telefónica, messa o videollamada Este nombre no es más que un
token sintético que creamos. Tiene un contexto que para James, este es el número
y en el futuro, si se cambia el número, no
cambias el nombre de
la persona, actualizas el número
dentro de ese token. Empezar con dará un tokens primarios o digo fichas
primitivas elemento CO. Seleccionaré el elemento,
voy a la sección de aleta. Seleccione cien primarios. Haremos lo mismo por el botón y vamos a
aplicar un borde aquí. En el trazo,
seleccionaré 100. El token primitivo en sí
no tiene ningún contexto. ¿Qué quiere decir con cien
primarios? No sabemos dónde usarlo. De ahí que crearemos
un token semántico. Para ello, iré
a la variable local. En la parte superior, voy a crear una colección y dar
nombre como semanti Dentro de eso, voy a crear
una variable, variable de color, voy a dar superficie primaria
y voy a dar un valor. En lugar de teclearlo,
haré clic en esa, seleccionaré la biblioteca
y
seleccionaré hundredwd Ahora bien esto está indicando que
para este token en particular, estoy haciendo referencia al
centenar primario es una de las variables Hagamos esto
por la frontera. Voy a crear una frontera variable
más y me referiré diciendo
a primaria cien. Ahora volveré y
cambiaré este color. Aquí, en vez de 100, usaré nuestro
token semántico. Me desplazaré hacia abajo. Este es nuestro token semántico, creamos Surface
primario aquí también, seleccionaré surface primary Este, seleccionaré
un desplazamiento de borde hacia abajo, y este es borde. Como ya hemos aplicado
nuestros tokens semánticos, es fácil administrarlo. Ahora quiero cambiar el color de fondo
de estos dos UIL Mn Una es la tarjeta,
una segunda es el botón, pero no quiero
cambiar el borde. Anteriormente, no era
posible porque todos estos tres estaban conectados
a primaria 100 sí. Por token semántico, todo lo que tengo que hacer es
ir aquí en vez de 100, solo
diré, voy a dar
click en este Digamos que quiero
cambiarlo a 400. Eso es. Cambiará en
todas partes del sistema. No tienes que hacerlo manualmente
y es fácil de administrar.
11. Práctica de tokens semánticos: Mirando esta pantalla ahora, quiero que hagas
una pausa y pienses, ¿cuáles son todas las diferencias token
semático que
podemos crear Tenemos un texto. Podemos
crear un token para iconos, un fondo,
redondez y espaciado Siempre que crees un
token semántico o un token de alias, este debe estar asociado
con un contexto claro El token debe ser
lo suficientemente específico como para responder cómo, dónde o cuándo se
pretende usar. Creé un nombre token como texto, pero esta ficha es demasiado
genética y carece de valor. No sabes simplemente
dónde usar este texto. ¿Quieres
usarlo como primario? ¿Quieres usarlo como secundaria?
No tiene sentido. Cuando vas a crear
un token semántico, asegúrate de agregarle
un contexto. Le agregué valor a
nuestro token semántico, y así es como se ve Entonces yo en texto que es primario, sabemos que esto puede ser
usado como texto primario. También tenemos un
texto secundario como PM y SNI. Esto va tanto en
el texto secundario. Entonces tengo texto no secundario. Aparte de eso,
tengo un fondo así puedo usar superficie bajo cuadrado primario para dar
más contexto para icono, puedo usar el
clima ese es icono que es SNI porque en no app, si queremos
crear, entonces tengo una categoría de iconos que se usa específicamente
para el clima He usado la
nomenuclatura, el clima, como uno del grupo,
luego el elemento
y luego qué contexto se
encuentra dentro Intentemos crear los tokens
semánticos y aplicarlos. Iré a mi
variable local, haga clic en combate. Ya creamos
dos token semántico. Actualmente, estoy en grupo de colección de
tokens semánticos e intentaremos
crear tres más Uno es el texto primario. Pastel, duplicado. Podemos hacer esto secundario. Un duplicado más, y
haremos que este sea un guión meteorológico,
un guión de iconos soleado. Vinculemos este.
Entonces para el texto primario e ir a la biblioteca e ir a la sección donde
tenemos color gris. Manera esto es fácil de encontrar. Marquemos este como
950 para texto secundario. Otra vez, ve con el gris
que tenemos y para eso, creo que 500 deberían estar bien. Por el clima, podemos ir a Creo que 500 en la
sección de calentamiento deberían estar bien. Sí. Seleccionemos éste. Ir a llenar la
sección de color aquí ¿es? Podemos aplicar aquí
scroll en la parte inferior, tenemos superficie primaria, seleccionar esta, bajar, superficie primaria para
esta, para esta, así
como este número, así
como esta o de esta cosa cuatro
pulsando la tecla Control, puedo seleccionar uno por uno. Ahora lo damos a texto primario, PM, así como Sunny. Quiero hacer esto
dos como secundario. Déjame ir aquí, envía un mensaje de texto a la
secundaria. Eso está bien. W se refieren a este icono. Creo que puedo bajar, seleccionarlo y darle un color
que es donde ocurren bien. Sunoun Aquí creo que esta
herramienta se ve diferente. Bien. Vamos a copiar esta cosa, hacer clic
derecho, copiar la propiedad, seleccionar esta, hacer clic
derecho y hacer su propiedad de pegar.
Esto se ve bien. En lugar de mayúscula, necesitamos un caso de sentencia. Todo lo que haces es hacer que
este sea seleccionado, ir por la parte inferior
justo aquí y hacer que
este sea como una pocilga soleada y que se vea bien,
y creo que son buenas.
12. Nombramiento de tokens: A medida que nuestro sistema de diseño
continúa creciendo con el tiempo, necesitamos una convención de
nomenclatura mejorada para administrarlo de manera efectiva Nombrar tokens de diseño
es esencial para nuestro sistema de diseño, ya
que promueve la claridad, la
consistencia, la facilidad de mantenimiento
y la colaboración y Claridad que
le permite
comunicarse instantáneamente y su
propósito y la función. Consistencia,
debe poder
navegar fácilmente dentro
del sistema de diseño que aumente su eficiencia. Debe permitirse mantener fácilmente
el sistema de diseño, lo que
facilita su actualización
a largo plazo. Con respecto a la colaboración, permite promover una mejor comunicación
y colaboración. Entonces siempre que quiera
darle un nombre a mis fichas, esto
es lo que uso. Empiezo con la categoría, luego concepto, propiedad
y modificador. categoría y la
propiedad proporcionan una base sólida a la mayor parte de
la convención de nombre de token. Por ejemplo, color primario, donde el color es una categoría y primario es una
de las propiedades. A medida que avanzamos, queremos hacer crecer nuestra colección del token ya que nuestro sistema de diseño también crece. De ahí que tengamos que dividir
nuestros tokens en subconjunto. Eso es lo que organizamos
en los conceptos. Y los modificadores son el último nivel de nuestra jerarquía de nombres de
tokens Se puede usar de forma independiente o se puede emparejar
con la categoría, concepto y propiedad para darle un significado intencionado
a nuestras fichas Nombrar token puede ser un desafío, pero sigo un enfoque
sistemático que puede
refinarlo para que se ajuste a sus necesidades No hay single de tamaño
que se ajuste al formato. Depende totalmente de ti en
función de tu necesidad,
puedes escalarlo. Pero siempre y cuando establezca un entendimiento compartido entre el equipo multifuncional,
estará en el camino correcto. Agrupé categoría, concepto y propiedad en una base, mientras que rol, estado variante ,
escala y modo como modificador. Para aprender esto,
vamos a jugar un pequeño juego. En este juego, tu tarea es
colocar la ficha relevante
en un cubo respectivo. Para ello, el primero,
seleccionaré el color, y
lo colocaré en la categoría porque tengo una elevación también como categoría, así lo
voy a poner ahí. Entonces ahora tengo dos categorías. Para una superficie, es más
probable como propiedad, como fondo, así que la
guardaré aquí. Lo mismo, éste también va aquí. Esto se actúa como un papel. Entonces lo colocaré
en esta ubicación, y la superposición
también puede actuar como un papel, así que la colocaré aquí. Y o es una variante de una superficie que
estoy a punto de crear. Aquí no hay una respuesta correcta e
incorrecta. Depende totalmente de ti
cómo quieras colocarlo. Pero a lo largo de un periodo de tiempo, automáticamente
se va a
explicar por sí mismo cómo
usarlo de esta manera. En la anterior,
no hemos utilizado el concepto. Tomaremos un
ejemplo con concepto. Iré a este lugar
en particular. Ahora aquí tengo un color, así que voy a arrastrar y ponerlo
en la categoría de color. Esto lo voy a poner en una
categoría de un concepto, y estas todas las cosas, puedo arrastrarlo y ponerlo
debajo de la propiedad. Mi objetivo aquí es que quiera
mostrar un
mensaje de retroalimentación a mi usuario. Y por eso, lo agrupo dentro de un
concepto llamado retroalimentación. También tenemos múltiples
textos en nuestra pantalla. Un texto puede ser primario, sin embargo, otro texto
puede ser secundario. De ahí, necesitamos tener
dos fichas para eso. Entonces aquí, nuevamente, el color también
se puede aplicar sobre el texto, voy a poner esto en
una categoría de color. Dentro de esto, en lugar
de antecedentes, esta vez estamos apuntando al texto, así que lo
guardaré aquí. El rol sería primario y habría un
rol más que es secundario. Ahora nuestro token se ve
algo así. Anteriormente, era primario de
superficie. Ahora podemos
escribirlo de esta manera. Superficie de tablero de color,
tablero primario, lo.
13. Variante y tamaño: Variantes de ahí la creatividad del
diseño, mientras que al mismo tiempo, permiten flexibilidad
y escalabilidad dentro de nuestro sistema de tokens Siempre que se crea una variante, sería más probable
que sea cualquiera de este modificador,
repitiendo varias veces. Tenemos una variante
de nuestros antecedentes. Generalmente llamo al
fondo una superficie, así que escribí como superficie
en lugar de fondo. Tiene cuatro variantes diferentes. Uno es el bajo,
que es por defecto, uno es el más bajo,
hi y el más alto. Vamos a crear este
token semántico en nuestro sistema. Haré clic en las variables
locales y comenzaré a renombrar esta cosa Color, das superficie,
dT es el más bajo. Puedo copiar o duplicar esta cosa cuatro veces y
voy a cambiar el nombre de esta cosa. Uno es el más bajo, bajo,
más alto y alto. Esto es alto, y
esto es más alto. Para los más bajos, lo mantendremos 100. Esta gamma 200, esta
voy a dar 300, para esta, voy a tener más
probabilidades de darnos un 400. Salgamos X de aquí e intentemos aplicar esta
cosa en nuestro diseño. Seleccionaré el primero. Se selecciona el marco. B, así puedo aplicar
el más bajo aquí. Aquí, puedo dar una oportunidad para
potenciar la creatividad. Puedo desplazarme hacia abajo y seleccionar. En lugar de lo más bajo,
podemos usar el bajo. Aquí también puedo seleccionar los colores grises y puedo
aplicar lo mismo aquí. Probablemente más alto, y este que podemos hacer es uno
de los más altos. De esta manera, podrás potenciar tu creatividad mediante el
uso de las variantes. Vamos a entender el
tamaño en detalle. Aquí hay una simple analogía. Imagina tres tazas
de café frente a ti con
diferentes tamaños. Cada etiqueta con la cantidad de
café que pueden contener 250, 405 mil ML. Pero si alguna vez necesitas cambiar
la cantidad del café, esas etiquetas impresas no funcionarán porque no
son escalables. En cambio, si etiquetamos la
taza como pequeña, mediana y grande, podemos
cambiar fácilmente la cantidad del café sin
preocuparnos por la etiqueta fija. Esto hace que las cosas sean mucho más fáciles de ajustar y
administrar con el tiempo. La misma analogía se aplica a
nuestro sistema de diseño. Puedes aplicar pequeño,
mediano grande, no solo a la fuente, incluso a cualquier otro elemento de
nuestro sistema de diseño. Por ejemplo, tenemos un
tamaño de fuente como 24, 28 y 32. Pero en lugar de dar un tamaño fijo como
tenemos en la parte inferior, podemos usar nuestra analogía
pequeña, mediana y grande Podemos considerar esta la
primera como categoría, esta como una propiedad, y esta como una de
las variantes de esa.
14. Tokens de tipografía: Hay un par de formas en las que podemos crear nuestros tokens de
tipografía Una de las formas manual, mientras que la segunda es
un poco automática. Lo haces manualmente.
En primer lugar, tienes que seleccionar la para la
que quieres crear una tipografía, yo
he seleccionado esta Y luego después vas a la sección de tipografía y clic en este icono
que dice aplicar estilo Haga clic en el botón Plus que le permitirá
crear estilo. Aquí puedes
escribirlo aquí
como display ya que está escrito en
la parte superior, slash Large Al poner una barra diagonal
, creará automáticamente una jerarquía Déjame dar click en el
estilo de creación una vez hecho, si hago clic en esto,
verás que tan grande como un estilo entrando dentro de
la sección de visualización. Puedes hacer este ejercicio uno por uno a cada uno
y a todo, pero ese es un proceso TBS Vamos a crear el
estilo de una manera inteligente. En primer lugar,
eliminaré el estilo existente haciendo un clic derecho
y es un estilo de eliminación. Selecciona todos los estilos, así haré clic y arrastraré
para hacer una selección. Voy a usar un plugin para eso, bajar y dar clic en este botón de acción o presionar Control K si
estás en Windows. Vaya a la llamada plug in Generador de Estilo de
Texto. Una vez que lo hayas hecho, creará un destyle
automáticamente para ti Haga clic en cualquier parte del lienzo y se crean nuestros estilos de texto. Abra el cuadro de diálogo de variables. Para eso, vaya a la variable
local, haga clic en ella. Tenemos
dos colectas. Uno es primitivo,
el segundo es semántico. Voy a crear una
colección más aquí dando clic en este tres puntos y dando clic
en la colección Crear. Voy a dar un nombre
como tipografía. X fuera de aquí. Ahora
tomaremos una acción. Voy a ir al
botón de acción aquí, haga clic en eso, y voy a ejecutar un plugin llamado variableiz X styles.
Haga clic en eso. Seleccionaré la
colección que creamos recientemente,
que es tipografía, y quiero que todos los
parámetros se almacenen dentro del token y
presionaré el botón Crear Todo hecho. Deja que X salga de aquí. Volvamos a la variable
y verifiquemos dos veces. Aquí ahora en nuestra colección, que es la tipografía, tenemos todo el valor que se crea Saquemos X de aquí. Uno,
lo más asombroso aquí es que no solo crea la
tipografía que nos muestra En cambio, también le aplica. Si selecciono este, el texto y voy por el lado derecho, se
puede ver que no
viene del estilo, se aplica directamente
desde el propio token Realmente realmente increíble.
15. Tokens de espaciado: espaciado en el diseño se refiere al área
vacía entre el
elemento como texto, imágenes o componente de interfaz de usuario. Desempeña un papel fundamental en
hacer que un diseño sea estético, agradable, legible y utilizable. Vamos a crear nuestro token de espaciado
global. Iré a la variable local. Y aquí tenemos
tres colecciones,
primitivas, semánticas
y tipográficas Entonces iré a lo primitivo. Y dentro de esto, queremos
crear nuestros tokens de
espaciado primitivos, y agregaremos una subcategoría a esta colección
llamada espaciado En lugar de hacerlo manualmente, automatizaremos esta cosa. Así que deja que X salga de aquí, baje a la acción, haga clic en eso y busque el complemento llamado generador de
variables masivas. Ya tenemos nuestra colección, así que seleccionaré existente y
seleccionaremos primitivo. Y el nombre de la variable, se
puede ver en el lado
derecho que viene de manera muy sutil Pero queremos crear
una subcategoría, así que usaré el espaciado como
nombre y haré una barra diagonal Esta barra es lo que permite Figma crear una subcategoría
dentro Empezaremos desde el cero, y aquí haremos el
cambio a cuatro porque
necesitamos más posibilidades aquí para que podamos refinarla
en nuestro token semántico Ahora, todas las cosas se ven bien. Queremos hacerlo hasta el 128,
creo que está bien. Y vamos a dar click en el generar. Una vez hecho esto, vamos
a la variable local, una vez más, vamos a la primitiva, y aquí tenemos el espaciado
como nuestra subcategoría Y todo el valor o todos los tokens que queremos
están simplemente aquí en poco tiempo. He agregado valor aquí, que recientemente creamos. Ahora no los he
agregado todos, sólo esas cosas que
realmente nos preocupaban. Entonces aquí queremos darle
dimensionamiento a nuestros tokens. Entonces digamos que quiero
dimensionar algo como esto. Quiero decir que la ficha, que es el espaciado de ocho, quiero decir esto como un pequeño. Si es menor que eso, quiero contarlo
como un extra pequeño, y para dos,
diré extra extra pequeño. misma manera si voy por
el lado superior del , voy a decir eso, bien, para 16, quiero hacer este como un espaciado de tamaño
mediano. 24 es un grande, 32 como extra grande. Y si voy un
poco más allá, y 64 es doble Excel. Ahora, vamos a crear
este token semántico. Para ello, bajaré
a nuestra variable local, pulsaré sobre eso, iré
a la semántica, y aquí intentaremos crear
una subcategoría dentro Crear variable. Y esta vez, seleccionaremos número. Queremos darle a este color. Lo sentimos, queremos
dar aquí como espaciado, así que pondré espacios extra
extra pequeños y presionaré Enter. Se ve en el lado izquierdo, se creó la categoría. Haga clic en eso. Derecha, da click sobre este valor y duplícalo. Entonces quieres duplicarlo al
menos de cinco a seis veces, así que voy a hacer este
ejercicio rápidamente. Entonces aquí tenemos extra pequeños. Yo lo haré capital. Extra extra pequeño, entonces
tenemos extra pequeño, pequeño, mediano, doble
clic, grande, extra grande. Y doble extra grande. Esto es
suficiente a partir de ahora. Incluso puedes agregar más a medida que avanzas en tu viaje de
diseño. Entonces en el
lado derecho, iremos a este icono donde
seleccionaremos nuestra variable. Entonces aquí en la lista
para extra pequeños, queremos que sean dos que
no tenemos ahora mismo,
así que lo dejaremos. Para extra pequeños,
haremos éste como cuatro. Esto se vuelve para pequeños, tenemos un valor como ocho. Para medio, tenemos
un valor como 16. Para grandes,
haremos éste como 24. 32, creo 32, comprobemos primero
dos veces. Entonces para grandes, tenemos 24. Bien, ve por la parte de atrás. Esa es la razón por la que hacemos este ejercicio. 24 para que no nos
falte nada. Entonces 32 es extra grande. Entonces aquí hay 32 que
se vuelve extra grande. Y para Excel doble, haremos éste como 64. No obstante, esta queda, así que voy a ir del lado
izquierdo, ir a la ficha primitiva, ir al espaciado, y voy a
crear uno de estos aquí. Entonces voy a ir en la parte inferior, clic
derecho, crear duplicado, y este sería 002, y el número también está
aquí, lo voy a poner como dos. Ve al token semántico y
mapearemos ese valor aquí. Entonces aquí, desplácese
hacia abajo y deberíamos tener 002 en la
lista aquí estamos allá. Entonces así es como creamos nuestro token semántico
para nuestro espaciado Así que vamos a sacar X de ella y la
aplicaremos a nuestro diseño. Seleccione la alineación en la que
desea agregar espaciado. Entonces seleccionaré esta tarjeta. Y dentro
de esta tarjeta, iré
al lado izquierdo y
seleccionaré el contenido. En el diseño automático, tenemos algo de espaciado aquí. Seleccione este icono, que
dice aplicar variable, haga clic en eso, desplácese hacia
abajo y seleccione 16. De la misma manera,
haremos este ejercicio. Asegúrate de no
seleccionarlo de la primitiva. Te diré en algún tiempo
cómo administrar este, pero desplázate hacia abajo y
selecciona 16 aquí. Y de la misma manera aquí en este, verás un desplegable. Haga clic en eso. Y entonces verás un valor
llamado variable Ople. Así que una vez que haga
clic en Aplicar variable, desplácese hacia abajo y
seleccione medio aquí. Ahora en el futuro, si quieres
cambiar la definición de medio, digamos que si
vuelvo atrás, antes, esto es lo que era nuestro medio. Ahora digo que no queremos
decir 16 píxeles como nuestro medio. Queremos decir 20 como médium. En ese caso, todo lo que tienes que hacer es dejarme acercar un poco
este para que
lo veas con mayor claridad. Ir a la variable local. Lo voy a poner un poco lejos de aquí para que en realidad puedan
ver qué pasa. Entonces, si voy a medio, déjame salir X de ti. Y aquí tenemos valor de 16. Todo lo que digo es que
en vez de 16 como médium, considere 20 como médium. Y en el momento en que hago
esto, esto consigue un cambio. Ahora imagina que has usado este tipo de cosas
en todo el sistema de diseño. Ahí es donde las fichas
se vuelven muy poderosas. No es necesario cambiarlo
manualmente. Simplemente cambia la
definición de lo que es
el medio
basado en la analogía de la copa, y puede cambiar fácilmente
en todo el sistema Por lo que voy a volver a los
16 en este punto en el tiempo. Incluso puedes aplicarlo
al botón también. Entonces aquí, en este caso,
déjame ir por el lado izquierdo y
lateral, seleccionar el botón, y en el
lado derecho, solo podemos decir, Bien, aquí ya
le hemos dado 16 píxeles. Eso está bien. Aquí podemos bajar
rápidamente y hacer el
mismo ejercicio rápidamente. Y aquí son ocho, así que me
desplazaré hacia abajo y
seleccionaré este ocho.
16. Gestión de tokens: Entonces en la conferencia anterior, hemos dado nuestro espaciado, pero queremos administrar nuestro
token de manera más efectiva. Veamos con ejemplo
del mundo real. Seleccionaré la tarjeta,
iré al contenido, e iré por el
lado derecho en el espaciado. Voy a hacer clic al final. Verás que el
cursor parpadea. Voy a quitar ese
valor token que he dado y voy a dar un valor
fijo para bean de tiempo. Ahora cuando hago clic en
esta variable de aplicar, se
puede ver que ya estoy
viendo primitiva, así
como mi token semático Ahora quiero que el miembro
de mi equipo solo vea este
token semántico porque en el pasado, muchas veces a sabiendas
o sin saberlo, equipo ha seleccionado
uno de los valores
de aquí y las
cosas que fuimos Ahora bien, para evitar esto, existe una de las grandes
características de InfigMA llamada Así que déjame hacer clic afuera. Ir a la variable local, ir a la primitiva,
nuestra colección y donde tenemos espaciado. Ahora, aquí en el lado
derecho, puede ver cuando coloco el cursor sobre,
me sale un deprimente ajuste de iconos, que es la variable de edición Cuando haga clic en esta
, obtengo un alcance, y me dirá dónde
quiere que esta variable
sea visible. Entonces déjame salir X de aquí. Entonces seleccionaré el
primero Desplácese hacia abajo, presione la tecla Mayús y
seleccionaré la última. Y voy a ir aquí y dar
clic en Editar variable. Ahora, actualmente, se está
mostrando en todas partes, así que lo
desmarcaré y
asegurémonos de que el alcance sea
el seleccionado en todas partes Entonces ahora si voy
arriba y reviso dos veces, el alcance, debería quedar
deseleccionado, y eso está bien Entonces lo que
acabamos de hacer es que
le estamos diciendo a la Figma que no muestran este valor
cada vez que se abre el menú
desplegable cuando
selecciono mi espaciado Entonces veamos X fuera de aquí, vaya a esta tarjeta y
seleccione el contenido. Ahora bien, si trato de aplicar aquí
en aplicar valor variable, verá que vienen los únicos
tokens semánticos No hay ficha primitiva. Entonces, incluso accidentalmente,
la gente no podrá seleccionarlo.
17. Tokens de radio: Puede que no necesitemos tantas fichas que hemos
usado en nuestro espaciado. Aquí es donde hemos
utilizado el token de espaciado. Tenemos uno, dos, tres, cuatro, cinco, seis y siete. Para radio, no creo que
necesitemos extra extra pequeño, así que voy a quitar este y
no creo que vaya a necesitar este
también, doble Excel. Voy a quitar esta.
Para nuestro token de radio, creo que este valor de cinco
debería ser suficiente, pero siempre se puede cambiar. No hay un
camino duro en este. Entonces iré a mi variable
local, y aquí iré a
la ficha semántica Adiós, voy a crear. Entonces déjame desplazarme hacia abajo. Voy a crear una variable
esta vez de nuevo un número, pero la escribiré como
un radio extra pequeño. Vaya por el
lado izquierdo, haga clic en ese. Ahora, haz clic derecho a
duplicar esta hora de WiFi. Vamos a hacer esto rápidamente. Fino extra pequeño, extra pequeño, pequeño, mediano, grande
y extra grande. Y podemos mapearlo de la manera en
que hemos hecho el espaciado. Entonces aquí usaremos el mismo token global
primitivo que tenemos. Entonces vamos a hacer
este uno como cuatro. Este es ocho.
Este tiene 16. Esto puede ser el 24. Este como 32. Ahora, apliquemos nuestro
radio a nuestra tarjeta. Para ello,
seleccionaré la tarjeta, voy a ir al alument
llamado foto Paisaje En el lado derecho, puedo ver la redondez en la apariencia y donde puedo dar click
en Aplicar variable Pero esta vez, puedo ver tanto el
espacio como el radio. Para evitar el error, quiero que ese espacio no aparezca aquí.
Arreglemos esto. Voy a dar click afuera en
cualquier parte del lienzo, ir en la parte superior, dar
clic en la variable local. Esta vez iré en
la colección semántica. Aquí es donde está nuestro espacio. Los seleccionaré todos
presionando el tamizador. El primero, vaya al final, presionando la tecla Mayús, seleccione la última y haga
clic en la variable de edición. Y aquí voy a
definir los alcances. Entonces este es el
segundo, haga clic en eso. Y quiero que este valor sólo
llegue cuando haya una brecha. Entonces sobre esto, debería
haber espaciado corto muestra arriba. Déjenme salir X de
aquí. Eso está bien. Y para radio,
haré el mismo ejercicio. Y aquí quiero que mi radio se
muestre solo en radio de esquina. Desmarco esta, muestro
todas las propiedades soportadas, y quiero que esta variable solo
sea visible en la lista de radios de esquina,
y eso está hecho Vayamos a nuestra tarjeta. Seleccionemos el primero, foto paisaje y a la
derecha adentro, ya que voy a la apariencia
y hago clic ahora, solo
voy a ver radio. Ahora la vida se ve fácil. Voy a seleccionar aquí como un 16
pixel, eso debería estar bien. Aquí en esta tarjeta,
incluso puedo hacer esta
como 16 Pixel dos. Déjame seleccionar la
primera tarjeta una vez más. Apliqué en todas partes, 16 pixel, bien, que no es el caso. Quiero que el radio
aquí no sea 16, entonces es cero aquí también, es cero para que podamos
arreglar esta redondez aquí. Déjame salir de aquí
y eso se ve bien. En la apariencia ahora se mezcla el radio de
esquina. Déjame abrir esta cosa haciendo clic en este icono flecha
independiente. Aquí ponemos el valor del código duro. En lugar de poner un código duro, podemos pasar el token aquí. Para eso, déjame cerrar este y comprobar que
tenemos esta ficha a mano? Voy al radio,
no tenemos ficha como cero. Vamos a crear uno aquí. Haga clic en el número, lo
pondré como Z como cero, y el valor debe ser de nuestro primitivo en este
es el primero talla cero, cero, cero. Eso suena bien. Deja que X salga de aquí. Seleccione el paisaje fotográfico, vaya al interior derecho y vaya a la apariencia del área. Da click en este icono, que
es esquina independiente y aquí
seleccionaré valor como cero. En el futuro, si quiero
hacerlo redondo,
debería poder hacerlo. Eso incrementará significativamente la escalabilidad del diseño.
18. Tokens de diseño de componentes: ¿Qué son los tokens
específicos de componentes? Un token específico de componente almacena y representa
explícitamente una decisión de
diseño única y específica asociada con un componente
en particular. En la pantalla,
tenemos dos componentes. Una es la búsqueda, la segunda es
una lista desplegable. Ahora podemos bifurcar ¿cuáles son
los diferentes componentes que el token
específico puede ser creativo Un valor de marcador de posición dentro del componente puede ser un token específico de
componente Un borde, un icono, incluso un texto de apoyo a ese componente en particular también
pueden ser parte de él. Un icono de búsqueda también puede ser un token específico de
componente. Si ves a la derecha andside, sí
tenemos una estructura muy
similar donde tenemos un valor de
marcador de posición, esto también puede estar dentro de
un token específico, hay
un borde ahí, así
como también hay un icono Ahora hay demasiados
componentes específicos de token existen. Vamos a racionalizarlo en
nuestros próximos minutos. Anteriormente, tenemos dos
cosas en nuestra lista. Uno es la base y el
segundo es el modificador. Como estamos tratando con el token específico del
componente, he agregado un
valor más en la jerarquía, que es nombre como objeto. Dentro del objeto, tenemos
grupo, componente y elemento. Aprendamos esta cosa
con un ejemplo del mundo real. ¿Cuál debería ser el
nombre del token que defina el borde para un
componente específico? Vamos a averiguarlo. Voy a dar un nombre comenzar con la búsqueda así que estamos apuntando
al componente de búsqueda. Dentro de la búsqueda,
estamos apuntando a un color, eso a un borde, y a un estado predeterminado. El segundo gana V, este es un elemento en una forma
que estamos apuntando a un color, muerto a un borde,
y uno por defecto. Ahora bien, de estos dos, cuál crees que
es más significativo, haz una
pausa y descúbrelo. La respuesta es la segunda
, y veremos por qué. El primero es muy
específico para la búsqueda. Mientras que el segundo, no solo
es específico
de la búsqueda, sino que está apuntando a todo el
componente dentro de la forma. Para profundizar en los detalles, déjame alejarme un poco e ir
un poco más allá aquí. Ahora bien, el primero
donde tenemos una búsqueda, por lo que este es un componente. Dentro de un componente, tengo
una categoría llamada color. Estoy apuntando a un borde de propiedad, y en estado de incumplimiento. Mientras que el segundo,
estoy apuntando a un grupo, forma, color, propiedad
como borde y predeterminado. Tomemos otro
ejemplo para ello. Aquí, pueden ver que he
dado en forma de nombre, entrada, color y superficie. Ahora aquí, hay dos
imágenes que tenemos. Una es la búsqueda y
otra es una lista desplegable. En la búsqueda, estoy apuntando que quiero darle un
trasfondo específico a la búsqueda. También puedo escribir esta
cosa de esta manera. Aquí lo escribiré como búsqueda. Y por el momento, voy a esconder esta cosa.
Ahora, ¿qué pasa? Si lo haces de esta manera, estás apuntando explícitamente
solo para la búsqueda, token
muy específico
para la búsqueda. Pero en lugar de
hacerlo de esa manera, si lo hacemos,
escríbalo como un formulario, para que apunte
no solo a la búsqueda, si hay un campo de entrada en
algún lugar de esta forma en
particular, apuntará a esa área, también. Por lo que su token, fuerza, así
como la escalabilidad
conseguirán aumentar drásticamente Por lo que he hecho este ejercicio para todas las propiedades respectivas que estamos apuntando en este token
específico de componente en particular. Así que déjame hacer click y ponerla un poco abajo y
podrás ver en la pantalla. Si quiero apuntar a un texto de marcador de posición
dentro de un componente, estoy usando una
convención de nombre como Fm Dentro de un formulario, si hay control de entrada
MI y que
contienen texto de marcador de posición, entonces esta es la convención de nombre de
token que
tengo que usar y así sucesivamente Ahora la pregunta aquí es, ¿cuáles son los
tokens de etiqueta de
componente específicos que puedes crear?
Aquí hay un ejemplo. En una búsqueda,
tengo un ícono aquí. Ahora bien, este icono
viene explícitamente de la búsqueda solamente y puedo tener un token
específico para este icono. Cómo puedo hacer esto aquí es. Entonces, en lugar de poner
bajo una categoría de grupo, pondré este nombre bajo un componente para que
apunte a una búsqueda. Dentro de una búsqueda, quiero darle un color y eso
a una búsqueda de iconos. misma manera, tenemos un icono de cancelación de consulta que
viene en el lado derecho, que es muy específico para
esta búsqueda en particular. Puedo apuntar a
ese con búsqueda, color y cancelación de icono. Por lo que este token
apuntará a esta parte de la misma. Siempre que tengamos un
diseño múltiple de sistemas, en ese momento, esto te hará
la vida mucho más fácil en el futuro para cambiarlo y
cambiará fácilmente en todo el sistema. Así es como se verán nuestros tokens específicos de componentes
finos. Entonces primero, aquí está la
búsqueda, el color y el icono. Entonces, si elimino esta cosa, está apuntando a un componente,
que es la búsqueda. Dentro de la oleada,
está apuntando a un color y eso también a
un color de búsqueda de iconos. Este es también un token muy específico de
componente. Dentro de los componentes
estamos apuntando a un color, y eso, puedo cancelar uno. No obstante, el otro, son un poco más genéricos pero siguen conectados
con el componente. Están apuntando al grupo. Entonces dentro de la forma, estamos
apuntando a cualquier elemento que tenga un color y quiero
apuntar a un borde y
al estado predeterminado, y esto es lo que debería ser. Esto está apuntando
al texto de marcador para cualquiera de los componentes
dentro del formulario Esto es más probable que
apunte al texto de apoyo, que viene justo debajo de
este, que es grupo. Dentro de eso, hay una alineación
de entrada y tengo una propiedad que conecta
con el texto de apoyo. El último también está
conectado con la forma. Dentro de la forma, tengo
múltiples componentes. Si el componente tiene
una entrada donde tengo escribir algo,
en ese caso, hay un
color de fondo que está en la parte posterior y ese color está apuntando
por este token en particular. Ahora quiero que le hagan este
ejercicio a éste.
19. Crea tokens de componentes: Crea un token
específico de componente. Vamos por el lado derecho y hacemos clic en nuestras variables locales. Aquí, agregaremos una colección haciendo clic en
Crear una colección, y nombraremos esta
cosa como componente. Dentro de eso, comenzaremos a
crear nuestras variables, que no es más que el token. Esta vez, estamos
apuntando al color, así que seleccionaré el primero. Dentro de eso, lo
escribiré como una forma, que es slash Déjame esconder esto en el lado
izquierdo, así que es fácil. Haga doble clic una
vez más, color, barra diagonal. Tenemos un formulario, encontramos por lo que queremos dentro de que
grupos particulares forman entrada de
guión, texto de titular de clase. Entonces tenemos dentro de la forma, tenemos el
primero que creamos. Y de la misma manera crearemos
los otros tres rápidamente. Haga clic en blanco duplicarlo. Una vez más duplicarlo. Y creo que
necesitamos cuatro de ellos. Así que haga doble clic.
El segundo es entrada, quitar esta cosa, texto de
apoyo. El tercero está conectado
con la entrada. Ahí tenemos color, y luego tenemos superficie. Y la última es la forma sí
tenemos un color, eso es frontera, eso es por defecto. Vamos a crear una variable, hacer clic
derecho y duplicar. Queremos que este sea
específico de búsqueda. Aquí tenemos búsqueda CH Sarge color icon cancel Este es el primero, por lo que
va dentro del cubo. Dentro de la forma,
hay una subcategoría buscar y ulicar esta
cosa Necesitamos color de búsqueda. Todo lo que necesitamos cambiar es el último tablero. Aquí
está el icono de búsqueda. Ahora vamos a agregar el valor
aquí en el hside derecho. Empezaremos con
el icono de búsqueda. Para el icono de búsqueda, tenemos
un valor de gris 600. Vamos a hacer clic en el color,
ir a la biblioteca. Escribiré 600, desplazaré hacia abajo, y
aquí está el valor. Para cancelar icono, hemos
seleccionado un 800 gris. Déjame dar click aquí,
ir a biblioteca, escribir 800 y déjame
seleccionar ese valor. Ahora podemos ir al formulario, y aquí tenemos valor
a partir del texto de entrada. Hagámoslo un poco
grande para que sea fácil de leer. Bien. Tenemos texto de marcador de posición Para texto de marcador de posición,
tenemos grado 900. Seleccionaré el 900
aquí para texto de apoyo, tenemos gris 700. Voy a seleccionar 700. Ahí vas. Ahora
para superficie de color, tenemos primaria 50. Aquí vamos. Primaria, necesitamos 50. Entonces para el color del borde, tenemos gris 500. Aquí crecemos y
agreguemos 500 aquí. Seleccionaremos el campo de texto. Ir por el
lado derecho. Veremos el color de selección. Vamos a expandirlo. Ahora voy a reemplazar todo este valor con
los tokens que creamos. Voy a hacer clic aquí, desplazarme hacia abajo. Esta sería nuestra superficie
de color de entrada. Gris 500, esto
sería un borde, así que me desplazaré hacia abajo,
seleccionaré el borde aquí. 600 es más probable un icono, así que voy a dar clic en ir aquí, así seleccionaremos el icono de
búsqueda, gris 700. Gray 700 está conectado
con el texto de apoyo. Voy a ir con el texto de
apoyo, gris 700, desplazarse hacia abajo, texto de
apoyo. Para el gris 800, tenemos
nuestro ícono de cáncer. Bajar y seleccionar
el icono de cáncer. Aquí está él vamos a
verificar dos veces con el 900 gris. Gray 900 es para el marcador de posición. Déjame ir en la parte superior
y aquí hay un 900 gris, nos desplazamos hacia abajo y seleccionamos marcador de posición
de entrada Ahora hemos actualizado
todo el valor de este componente en particular con las variables
token específicas del componente.
20. Renombrar al volumen: Para entender el nombre
voluminoso de su token, propósito
he creado un token que no coincide Voy a la variable local y aquí si voy al espaciado, verás aquí el tamaño. Ahora bien, el tamaño generalmente dice
lo pequeño y grande que es, no qué tan lejos está, o tampoco está diciendo
qué tan redondo es. Esto es algo
que es engañoso en el contexto y vamos a
tratar de arreglarlo a granel. Vamos a utilizar un plugin
llamado variable Renail. Si tienes un
número pequeño de tokens, puedes cambiarles el nombre directamente. Sin embargo, si
hay muchos tokens, necesitarás
dar pasos adicionales. En ese caso, puedes usar conjuntos de
Google o Excel
dependiendo de tus preferencias. Navegue hasta el
área de acción en la parte inferior, haga clic en eso e intente encontrar un complemento llamado
nombre de variable. Haga clic en eso. Una vez abierto,
haremos clic en el botón,
Exportar variable nueve. Nos mostrará todos los tokens que tenemos dentro de
este archivo Figma Sin embargo,
solo nos interesa el espaciado, por lo que copiaremos solo
la parte
de espaciado desde aquí hasta aquí. Haga clic derecho en Copiar,
navegaremos hasta el
excel que tenemos, y aquí haremos una pasta. Ahora, quiero hacer
esto un poco genérico para que
podamos usarlo en forma, tamaño, así como en el radio. Voy a usar un control de llamadas corto
F para encontrar el tamaño de espaciado. Entonces va a apuntar a éste, y quiero reemplazar
esta cosa con SRS Este es el acrónimo que
he usado para espaciado, R significa radio, y el último S significa tamaño. Entonces cada vez que abro esta ficha, puedo recordar que
donde se va a
acostumbrar y N significa número. Los reemplazaré
todos y una vez hecho, haré clic derecho en la parte superior e insertaré una
columna a la izquierda. Déjame volver a nuestra Figma y copiar esta
sección una vez más. Copia, y volvamos de
nuevo al Excel Pi. Voy a hacer una pasta. Ahora, en el lado izquierdo, tenemos valor antiguo, y en el indside derecho
tenemos nuevo valor El último paso
que tenemos que hacer es tenemos que exportar esta
cosa en formato CSV. Entonces archivo, exporta esto en el CSV, y una vez descargado, vamos a abrir este archivo. Entonces este es el
archivo que tenemos. Haré clic derecho e intentaré abrir esta
cosa en un bloc Así que una vez hecho esto, Control A , haga clic
derecho, haga una copia, vaya a nuestro Figma, la derecha adentro,
seleccione todo esto y
hágalo delt y pegarlo Entonces este es nuestro viejo valor, y este es el nuevo valor. Ahora, haga clic en el botón
llamado renombrar variables. Bien, así que una vez hecho esto, no
tenemos ningún error y todas las cosas se ven bien.
Vamos a cerrar esta cosa. Ir a la variable local. Si nos desplazamos hacia abajo,
veremos que SRS ha sido creado y todo nuestro
token todo soga
renombrado correctamente No obstante, todavía veo que aquí
hay un espaciado porque mientras hacemos esta
selección, echamos de menos esta ficha. Agreguemos esta cosa manualmente. Para ello, antes que nada, sólo
voy a
checar token semántico Si estamos usando esta
cosa en cualquier parte, sí, estamos usando
aquí en nuestro espacio. Volvamos a la ficha
primitiva. Vaya al SRS, desplácese hacia abajo
y crearé un token, y crearé un token, haga clic
derecho y
duplicaré una variable Entonces diré N cero, 02, y agregaré un valor dos. Vuelve a la ficha
semática y
voy a cambiar la definición
por extra pequeña En lugar de espaciar, debería
provenir del n002 aquí mismo. Sí. Ahora, todo debería comenzar con SRS y
eso se ve bien. Comprobemos el radio, y esto también se ve bien. Vayamos a la ficha primitiva. Ahora podemos
eliminar con confianza esta cosa. De lo contrario, podría
suceder que lo borres de aquí y el valor del token aún
permanezca dentro como un roto.
21. Gracias: Gracias. Muchas
gracias por dar su tiempo. Realmente aprecio su
dedicación y espero que la habilidad que ha
adquirido le permita
crear un diseño escalable increíble. Sigue practicando y
espero con ansias ver tu increíble
proyecto que construyes. Si tiene alguna consulta, no dude en iniciar una conversación
en la pestaña de discusión. Estoy encantado de ayudarte y
comprometerte con tu consulta. También puedes hacer una pregunta
o compartir tu proyecto. Sigamos con el aprendizaje.
Anand Padia, Design, Technology and Product
