Primeros pasos con Plasmic Studio

El contenido de este artículo proviene de los archivos del tutorial en el sitio web oficial de Plasmic , combinado con la comprensión personal, y no está completamente traducido de acuerdo con el texto original . Si hay alguna expresión inapropiada, por favor corrígeme.

Las palabras en negrita son comentarios personales o diferencias con las operaciones de Figma.
color de fondo amarilloEl texto es una descripción oficial, que se refiere principalmente a las precauciones en el desarrollo de front-end.

Al leer este artículo, utilice el archivo tutorial oficial para aprender y practicar mientras aprende. Los archivos de tutoriales oficiales están disponibles en la parte superior de la página de la lista de proyectos después de iniciar sesión.

---

bienvenido

1. Presione PageUp/ PageDowno Fn+↑/ Fn+↓para cambiar rápidamente de página
2. Cmd+Zrevocar
3. Al iniciar sesión, el archivo se guardará automáticamente
4. +/ -puede hacer zoom en la mesa de trabajo
   

Base

1 Editar estilo de texto

1. Haga doble clic para editar el texto Cmd+Enterpara salir del editor de texto
2. El tamaño del texto se puede ajustar en el panel derecho.
   

2 Mover y cambiar el tamaño

1. La mayoría de los elementos de la página son pilas dispuestas horizontal o verticalmente, y el orden se puede ajustar arrastrándolos directamente.
2. Cuando el mouse se mueve hacia el borde de la imagen, aparece una línea azul; arrastrar la línea azul puede cambiar el tamaño de la imagen. También se puede arrastrar con la etiqueta de nombre azul que se encuentra sobre la entrada.
3. Las pilas se pueden anidar, como una pila horizontal anidada dentro de una pila vertical.
   

3 Ajustar el diseño

1. Seleccione el elemento más externo y podrá establecer la alineación vertical y horizontal en el Diseño en la columna de la derecha. El espacio entre filas es el espacio entre filas cuando se apilan verticalmente, y el espacio entre columnas es el espacio entre columnas cuando se apilan horizontalmente.
2. Cuando se selecciona un elemento de texto, arrastre el borde naranja superior o inferior para ajustar los márgenes. (margen), arrastre el borde verde para ajustar el relleno y mantenga presionada la tecla Mayús para ajustar todos los lados al mismo tiempo. ( Nota: independientemente de ajustar los márgenes internos o externos, arrastre hacia el centro del elemento para aumentar el valor ) .
3. Cuando el ancho W se establece para estirarse en Tamaño a la derecha, el elemento se estirará completamente para llenar el padre.
   

4 Construye la página

Al editar una página, puede ver los efectos de escritorio y móviles al mismo tiempo.

1. Haga clic en el botón azul de importación en la esquina superior izquierda para seleccionar los elementos básicos que desea importar.
2. Los elementos básicos que se pueden importar incluyen pilas, botones, imágenes, texto, íconos, etc.
3. Después de importar elementos de imagen, puede cargar imágenes locales o vincular imágenes de red a la derecha
4. Teclas de acceso directo de uso común:
   • T Insertar texto
   • Pila vertical en V
   • H pila horizontal
   • Q abre el menú de inserción
     

5 Crea páginas responsivas

De forma predeterminada, los cambios se aplicarán a todas las pantallas de diferentes tamaños, pero podemos "Grabar" específicamente las ediciones para una pantalla específica. Por ejemplo, establezca un tamaño de fuente diferente para el terminal móvil.
Haga clic en cualquier parte de la esquina inferior derecha para mover la vista y habrá una barra de herramientas flotante sobre la vista. Al hacer clic en la variable gris "solo móvil", el cuadro se volverá rojo y se registrarán todos los cambios.


Cuando se selecciona la pila, marque Invertir para invertir el orden.

En Plasmic, se puede configurar cualquier número de puntos de interrupción (llamados "variantes de pantalla") y su orientación (primero el escritorio o el móvil).

6 Crear componentes reutilizables

Haga clic con el botón derecho y seleccione " Crear componente " en el cuadro emergente , o presione la tecla de método abreviado Cmd+Option+K.
Haga doble clic en cualquier componente o variante de componente para ingresar al modo de edición y el fondo se atenuará para resaltar ese componente.
Ajuste el tamaño del icono en cualquier componente, y otros componentes cambiarán sincrónicamente.

7 Use la ranura para personalizar la instancia del componente

Las ranuras permiten una mayor personalización de los componentes. Haga doble clic en el componente para ingresar al modo de edición, haga clic con el botón derecho en la imagen o el contenido de texto que debe cambiarse y seleccione " Convertir en un objetivo de ranura
" en la lista emergente , y luego puede cambiar el contenido interior.
Se puede insertar cualquier cantidad de cosas en una ranura, y no se limita a cubrir un solo texto/imagen.
En el modo de edición, haga doble clic en la etiqueta azul de la ranura para cambiar el nombre.

8 Resumen

Además de diseñar en la página de edición visual, Plasmic también puede hacer lo siguiente:

• Publique en cualquier base de código de sitio web/aplicación web o pila de tecnología.
• Arrastre y suelte componentes desde el código base en sus sistemas de diseño, datos e interacciones.
• Importe diseños de Figma con el complemento Plasmic Figma.
  

Avanzado

1 dibujar un cuadro

Presiona la tecla R para dibujar un rectángulo.
Este rectángulo no es solo un rectángulo, puede entenderse como un marco en Figma.

2 caja de manipulación

Arrastre el cuadro para mover la posición.
Al cambiar el tamaño, debe arrastrar la línea azul en el borde, no la línea verde o amarilla.
Nota: por lo general, los cuadros son solo divs, pero también es posible configurarlos como elementos HTML como formulario, sección, a, li, etc.

3 Dale estilo a la caja

El cuadro se puede rellenar, trazar, redondear y otros estilos en el panel derecho.
Copiar estilo: haga clic con el botón derecho en un elemento y copie el estilo Cmd+Option+C, luego haga clic con el botón derecho en otro elemento y pegue el estilo Cmd+Option+V. (Esto no elimina los estilos configurados, por lo que no elimina el color de relleno de fondo).

4 juegos de cajas múltiples

Apile cajas encajables al presionar la tecla R para dibujar varias cajas.
Cuando se mueve la caja grande, la caja pequeña del interior también se moverá sincrónicamente.

5 Agregar texto

Presione T para aumentar el cuadro de texto.
Para el ajuste de línea, se debe establecer el ancho del cuadro de texto.

6 Crea algunos cuadros de diseño automático

Hasta ahora hemos estado usando el posicionamiento absoluto en lugar del diseño real.
Presiona S para dibujar una pila, arrastra un cuadro fuera de una fila de íconos y los íconos que no estén alineados se alinearán automáticamente y decidirán automáticamente si deben organizarse horizontal o verticalmente.
Los elementos de la pila son todos posiciones relativas, pero también se pueden establecer en posiciones absolutas, que se mencionarán más adelante.

7 Cambiar el contenido del diseño automático

Después de copiar ( ) un elemento en la pila Cmd+D, las posiciones se redistribuyen uniformemente.

8 Cambiar la disposición de Auto Layout

Realice cambios de diseño dentro de la pila a través del panel derecho.
Flex-Gap es una característica de diseño común de la que carecen algunos navegadores en las implementaciones de aplicaciones actuales. La pila Plasmic implementa un espacio entre navegadores para flexbox creado para compatibilidad con el estándar de espacio flexible.

9 Haz un diseño de mosaico

Ajuste la disposición del diseño automático activando Ajustar en el Diseño del panel derecho.

Sugerencia: al cambiar el tamaño de un contenedor, mantenga presionada la tecla Alt y arrastre para cambiar el tamaño simétricamente.
Plasmic implementa un espacio flexible que se puede usar con Wrapping.

10 Haz una caja que cambie automáticamente de tamaño según el contenido

Seleccione un cuadro con contenido y configúrelo para "abrazar" en el panel derecho, o haga doble clic en el borde del cuadro. (Esto también se conoce como cambio de tamaño automático o cambio de tamaño de contenido en CSS).

11 Uso de cuadros de tamaño automático anidados

Debe ajustar la altura del cuadro interior para "abrazar", y ajustar el ancho y la altura del cuadro exterior para "abrazar", y luego cambiar el contenido del texto en el interior, encontrará que el ancho del cuadro sigue siendo el mismo , y la altura cambiará con el contenido.

12 Hacer estiramiento para llenar su contenedor principal

Un elemento también se puede configurar para "estirar" para llenar su contenedor principal, que es lo opuesto a lo que hace "abrazo".

13 Establecer múltiples entradas para estirar

Establezca el ancho de cada botón para "estirar" y el estiramiento llenará el espacio restante de manera uniforme.
Nota: Esto establece flex-grow y flex-shrink, pero también establece flex-basis al 100% para que todos los elementos de estiramiento tengan el mismo peso. De lo contrario, la base flexible se establece de forma predeterminada en ancho, y el ancho se establece de forma predeterminada en automático, por lo que terminará con diferentes pesos según la longitud del texto.
Este es otro ejemplo de cómo Plasmic abstrae el diseño en un modelo más simple e intuitivo, pero siempre puede configurar la flexión exacta que desee a través de las opciones de tamaño avanzadas del popover.

14 Establecer diferentes alineaciones para diferentes elementos

Seleccione la alineación en Posición en el panel derecho, y también puede usar ←las →teclas de flecha / para ajustar la alineación.

15 Adición de elementos flotantes libres al diseño automático

La mayoría de los elementos de la interfaz de usuario deben colocarse automáticamente, pero a veces se requiere un posicionamiento absoluto.
Un cuadro de diseño automático dispone automáticamente sus elementos, pero también podemos sacar elementos específicos de ese diseño para que se coloquen de forma absoluta.
Seleccione el elemento que necesita un diseño flotante, seleccione Libre en posición y luego establezca la posición absoluta.

16 Crear componentes reutilizables

El proceso de creación es el mismo que en la Sección 6 de la parte básica .
Todos los componentes de este proyecto se pueden ver y administrar desde la pestaña Componentes en el carril izquierdo, y los componentes también se pueden insertar haciendo clic o arrastrándolos al diseño.

17 Actualizar componentes

Haga doble clic para ingresar al estado de edición del componente y haga clic fuera del componente para salir del estado de edición.
Sugerencia: Además de hacer doble clic, también puede Cmd+Entereditar un componente seleccionándolo y luego presionándolo. El contenido del componente se puede editar haciendo doble clic en cualquier instancia y todas las instancias se actualizarán. Esto le permite actualizar los componentes en cualquier momento durante el uso real.

18 Texto en instancia de componente personalizado

El proceso de operación es el mismo que en la Sección 7 de la parte básica .
Siempre que sea necesario cambiar el contenido, debe convertirse en un espacio antes de editarlo.

19 Más personalización de componentes

Primero convierta las imágenes y los textos que deben modificarse en ranuras, use las teclas de método abreviado Cmd+Option+Sy luego cambie el contenido interno. Si necesita agregar contenido, simplemente cópielo y péguelo.


La ranura no es solo una superposición de texto, puede adaptarse a lo que quieras. La capacidad de poner cualquier cosa en una ranura es una forma poderosa pero simple de agrupar componentes. Por ejemplo, puede convertir todo el diseño de la página en un componente con ranuras para garantizar la coherencia y la capacidad de mantenimiento del diseño en todas las páginas, al tiempo que actualiza el contenido de cada página.
Sugerencia: al editar un componente, se puede cambiar el nombre de las ranuras para que sean más descriptivas para el usuario del componente. Por ejemplo, nombramos las ranuras en el componente que se muestra en el destino "imagen de configuración", "nombre" y "nombre de usuario".

20 Uso de variantes de componentes

Algunos componentes (como los botones) generalmente tienen múltiples variantes. Si se han definido varias variantes, puede establecer Tipo en Principal en las Variantes en la parte superior de la barra lateral derecha.

21 Uso de combinaciones de variantes

Estos componentes de botón vienen en tres conjuntos de variantes: tipo, borde y tamaño.
Con las variantes, puede expresar muchas posibilidades definiendo solo algunas (por lo que no necesita agotar todas las posibilidades como en Figma).
Las variantes se pueden componer porque se definen como anulaciones sobre los estilos base del componente. Por ejemplo, la variante redondeada simplemente anula el radio del borde. Por eso se puede combinar con Danger y Large, donde el primero solo cubre el color y el segundo solo cubre el acolchado.


En general, las variantes también pertenecen al propio componente, por lo que solo necesita un componente de botón y puede acceder a sus variantes en cualquier lugar donde haya una instancia de botón.

22 Editar componentes en la paleta de componentes

En el cuadro Vista previa, haga clic con el botón derecho en la instancia del componente y elija Editar componente en la nueva mesa de trabajo .
Las mesas de trabajo ahora se pueden considerar como vistas aisladas de cualquier componente, con tantas vistas del componente subyacente como necesite.

23 editar variantes

Para cambiar el rojo en Peligro a naranja, primero seleccione la paleta Componentes básicos, haga clic en la barra de herramientas flotante sobre la mesa de trabajo y seleccione la variante "Peligro". En este punto, ahora estamos "documentando" la anulación de esta variante y cualquier cambio será "documentado". Finalmente, establezca el texto y el borde en naranja.


Cuando se graba una variante, se mostrará en la barra de grabación ubicada en la parte superior central del lienzo.
Mientras usaba Plasmic hasta ahora, es posible que haya notado puntos de colores junto a varios controles de estilo. Un punto azul indica que el estilo se anula en la variante editada actualmente. Puede hacer clic con el botón derecho en un estilo para desactivarlo como la variante actual.
Deje de registrar variables seleccionando la variable "base" o usando la barra de registro.

24 nuevas variantes

Digamos que queremos agregar una variante "Éxito".

1. Seleccione el panel de componentes base
2. En la parte superior del riel derecho, presione el botón aplanado "mostrar más" debajo del nombre del componente para revelar todas las propiedades de la variante, si lo desea.
   
3. Agregue una nueva variable en el grupo "Tipo" y asígnele el nombre "Éxito".
4. Actualice los estilos de relleno, trazo, color del texto, etc. cuando se seleccione "Éxito".
5. Actualice el estado a "Éxito" en la instancia, complete.
   

25 Editar variante base

1. Haga doble clic en cualquier instancia para editar el componente base (o edítelo en su propia mesa de trabajo).
2. Se puede configurar el peso de la fuente.
3. Haga clic en "Más..." en el área de estilo de texto para habilitar la transformación de texto en mayúsculas.

De forma predeterminada (siempre que se haga doble clic en un componente), la variante base "siempre" se está editando. Es por eso que los cambios de texto afectan a todas las variantes de botones.
Al modificar el estilo de texto en la variante, no es necesario seleccionar la capa de texto, solo la capa del componente.

26 Hacer tragamonedas con estilos variantes

La variante puede especificar el estilo del contenido de la tragamonedas.

1. Haga doble clic para editar el componente Botón.
2. Cambie a orientar la variante principal.
3. Seleccione la ranura y cambie el color del texto a blanco.
4. Haga clic para salir del componente de edición y configurar la instancia del botón para usar la variante principal. Tenga en cuenta que el color del texto del botón es blanco.

Al editar un componente, siempre es posible diseñar la ranura en sí desde el panel derecho. Estos son los estilos de tipografía predeterminados de los que heredará el contenido.
Cualquier instancia puede anular este estilo predeterminado.

27 Aplicación de estilo a varios elementos a través de variantes

Hasta ahora, nuestro componente de botón consta de un solo elemento. Lo siguiente configurará un componente que contiene más elementos.
Las variables están asociadas con todo el componente. Por lo tanto, una variante de un componente puede anular los estilos de cualquier elemento dentro de ese componente.

28 Controla cualquier ajuste con variantes

Las variantes no se limitan a los estilos.
Por ejemplo, la tarjeta de perfil debería verse diferente dependiendo de si ya estás siguiendo a un usuario.

1. En la mesa de trabajo más a la derecha, seleccione el botón Seguir. Este es un componente de botón de acción.
2. Establezca su "Tipo" en "Principal". (¡Tenga en cuenta que esta es una variante del componente Botón de acción, no del componente Tarjeta de perfil!)
3. Cambie su ventana de texto a "Dejar de seguir".
4. Seleccione el botón "Bloquear" y presione la tecla de retroceso o eliminar para ocultarlo en la variante.

Puede representar elementos condicionalmente, establecer texto, establecer variables en instancias anidadas, establecer contenidos de espacios, establecer cualquier propiedad/accesorio. Todos los ajustes pueden ser controlados por variantes.
Nota: la representación condicional no se trata solo de la visibilidad OR display: none, sino también de la existencia real del nodo.

29 Agregar variantes interactivas

En Plasmic, los estados de interacción comunes como pasar el mouse, presionar, deshabilitar y enfocar se representan con efectos de primera clase.

1. Seleccione el componente base a la derecha.
2. En el panel Variantes en la esquina superior derecha, agregue una nueva variable de interacción. Seleccione Pasar el cursor de la lista desplegable.
3. Cambie el color de fondo al grabar en esta nueva variante de desplazamiento.
4. Agregue otra variable de interacción para el estado presionado.
5. Cambia el fondo a otro color.
6. Haga clic en el botón de reproducción en la barra de herramientas superior para verificar si la interacción tiene efecto.

NOTA: Esto dará como resultado pseudo-selectores en su código si la variante interactiva solo anula los estilos. Pero (al igual que con las variantes normales) puede anular cualquier otra cosa y funcionará en el código.
Para permitir la desactivación de estilos y estados enfocados, el tipo de etiqueta HTML del elemento debe cambiarse del "div" predeterminado al tipo de etiqueta HTML del elemento; puede hacerlo desde la esquina superior derecha de la barra lateral derecha. Aquí establecemos el tipo de elemento en "botón".

También puede personalizar la apariencia cuando las variables de interacción y cualquier otra combinación de variables están activas. Por ejemplo, es posible que desee diferentes efectos de desplazamiento/presionar/desactivar para los botones de inicio, botones de trazo, etc.
​

30 tomar un descanso

En este punto, ha aprendido el concepto de variante más difícil en Plasmic.
Ahora ingresa a la etapa final del sprint.
​

31 Usa fichas de color

Los colores se pueden guardar como fichas de colores reutilizables.
Seleccione un color en el componente y luego haga clic en la esquina inferior derecha de la paleta para agregar tokens de color.

​

Podemos definir tokens recursivamente en términos de otros tokens. Un uso común es: Es posible que primero deba definir una paleta de azul-100 a azul-900 y luego, sobre esta base, definir el color de acento como Azul-700.

32 Uso de fichas de intervalo

Se puede aplicar a relleno, márgenes, tamaños, espacios, posiciones y más.

1. En "Diseño" en la barra lateral derecha, haga clic en la entrada "Brecha" y seleccione "crear nuevo token" en el menú desplegable.
2. Asigne un nombre al token y ajuste el valor.
3. En "Espaciado" en la barra lateral derecha, haga clic en "Relleno" y luego seleccione el nombre del token que acaba de establecer en el menú desplegable.

Al igual que con las fichas de color, las fichas se pueden definir de forma recursiva en términos de otras fichas.
Además de los tokens de espaciado, también se pueden definir tokens de otros tipos numéricos, incluido el tamaño de fuente, la altura de línea y la opacidad.

33 Uso de mezclas de estilo

Los tokens de estilo son simplemente valores reutilizables y los "mixins" son paquetes de estilo reutilizables.

1. Por ejemplo, seleccione un elemento de texto en la mesa de trabajo

2. En el panel derecho, haga clic con el botón derecho en cualquier encabezado de propiedad (o haga clic en los tres puntos en el extremo derecho) y seleccione **Extraer todos los estilos para mezclar** > **Nueva mezcla**.

3. Crea un Mixin llamado Encabezado.

4. Seleccione el segundo cuadro de texto sin estilo.

5. En la sección de mezclas de la barra lateral derecha, seleccione Encabezado para aplicar la mezcla que acaba de definir.

6. Establezca el tamaño de fuente en 20 px. Esto anulará los tamaños de fuente más grandes en el mixin.

Si solo realiza las operaciones anteriores en un atributo, solo coloque este atributo en Mixins; si desea agregar varios atributos, puede hacer clic con el botón derecho en el título del atributo que se agregará, seleccionar "Extraer todos los estilos para mezclar". y seleccione el nombre The Mixins recién creado.
Los mixins son flexibles, podemos definir cualquier subconjunto de estilos como un mixin.
También podemos combinarlos, se pueden aplicar múltiples mixins en un elemento. A diferencia de las clases CSS normales, podemos especificar el orden de mezcla, por lo que las mezclas posteriores pueden anular los estilos establecidos por mezclas anteriores.

34 Uso de iconos SVG

1. Haga clic en la pestaña Activos de imagen en la barra lateral izquierda.
2. Aquí, Plasmic enumera todos los íconos e imágenes que existen en el proyecto actual.
3. Los iconos se pueden arrastrar a las mesas de trabajo desde el panel izquierdo.

Al insertar imágenes en Plasmic (p. ej., al pegarlas), las imágenes SVG se insertan como elementos SVG verdaderos, y los íconos SVG en particular se reconocen como elementos SVG verdaderos y permiten cambiar el color.
Sugerencia: En Figma, se puede hacer clic derecho en cualquier selección y copiarla como SVG.

35 Insertar formulario

Hasta ahora hemos tratado principalmente con cuadros, texto, botones, imágenes e íconos. Las entradas de formulario son los únicos tipos de elementos primitivos restantes.

1. Desde el botón azul para agregar en la esquina superior izquierda, inserte una "entrada de texto".
2. En la sección Atributos del carril derecho, establezca su valor en vacío y su texto de marcador de posición en "Ingresar correo electrónico"

Esto producirá una entrada de texto real (interactiva) en modo de vista previa y códecs.

36 Configuración de estilos de elementos

Con las entradas de formulario, puede diseñarlas por completo, incluido su texto de marcador de posición.
Seleccione este componente de entrada y, en " Estados de elementos ", seleccione "Marcador de posición" para ingresar al estado de edición del estilo de marcador de posición.

37 Establecer el estado del estilo del elemento

Los estados de elementos no son solo para marcadores de posición de entrada. También son una forma conveniente de diseñar rápidamente elementos con estados de interacción especiales sin necesidad de definir componentes con variantes.
Seleccione el icono o componente que necesita establecer el estado, agregue un "Hover" en " Estados de elementos " y luego restablezca el color y otros estilos.

38 Utilice teclas de método abreviado para mejorar la eficiencia

¡Uno de los mayores trucos para mejorar la eficiencia es aprender las teclas de método abreviado y usar menos el mouse!
Escriba Shift + ?para ver una lista completa de teclas de método abreviado.
Las siguientes son algunas operaciones de teclas de método abreviado de uso común:

1. Enter: ingrese un subconjunto o edite texto
2. Cmd+Enter: complete la entrada o ingrese al modo de edición de componentes
3. ↑// ↓/ ←: →Alinear o ajustar el orden en la pila
4. Tab: Seleccione el siguiente elemento hermano
5. Shift+Enter: regresar padre
   

39 Cambiar entre páginas, componentes y vista principal

En la parte superior de la pestaña del árbol en la barra lateral izquierda, puede mostrar una lista de todas las páginas, componentes y áreas visuales principales del proyecto actual.

40 Generación de código en el código base

Una de las funciones especiales principales de Plasmic le permite integrar diseños en cualquier base de código.
Haga clic en el botón de la barra de herramientas "Código" para comenzar, y aquí se muestran los inicios rápidos para los diversos marcos.
Consulte el proyecto de inicio rápido para desarrolladores para ver un ejemplo más resumido (disponible en la página principal de listado de proyectos). Haga clic en "?" en la esquina inferior izquierda para ver la documentación y los tutoriales completos para desarrolladores.

41 Importar desde Figma

Podemos importar borradores de diseño desde Figma.
Haga clic en el ícono de Figma en la parte inferior de la barra de herramientas izquierda para obtener un enlace al complemento de Figma .
El proceso de importación convierte todo el estilo de bajo nivel de los medios gráficos de Figma en la representación basada en código de Plasmic.
¡Asegúrese de leer la documentación sobre cómo usar mejor el complemento de importación y comprender qué esperar! Un video de ejemplo
del uso del complemento para importar un diseño de Figma .

fin

Estilo, diseño, componentes, tragamonedas, variantes, tokens, mixins... Estos son los conceptos centrales de Plasmic.
¡Gracias por estar aqui! Me alegro de que estemos progresando juntos.
Los foros oficiales de Plasmic son Slack y Twitter .
Para el próximo contenido de aprendizaje, puede hacer clic en "Ayuda" para ingresar al centro de aprendizaje, donde puede ver tutoriales en video, leer documentos de desarrollo, ver proyectos de muestra y más.
​