Exportación de tokens del sistema de diseño de Figma a WordPress

Publicado: 2022-12-09

Uno de los desafíos clave de ejecutar un sitio o una serie de sitios a escala es garantizar la consistencia del diseño y el cumplimiento de un sistema de diseño. A menudo, la definición del sistema de diseño vive en Figma, pero se implementa manualmente en el código. Si hay algún cambio en el sistema durante el desarrollo o reemplazos a gran escala en el cambio de tema, la definición y la implementación pierden sincronización.

Para resolver este desafío, hemos creado una herramienta para mantener los sistemas de diseño en Figma sincronizados con los temas de WordPress. Lo hemos estado usando en nuestro propio sitio, wpvip.com, y hemos descubierto que simplifica enormemente este proceso al tiempo que garantiza la coherencia.

Nuestro objetivo es tener una única fuente de verdad para el sistema de diseño, de modo que no haya desconexión entre el diseño y la implementación. Al utilizar el complemento Figma Tokens, creamos esta única fuente de verdad, mantenemos todos nuestros tokens de diseño en un sistema de control de versiones y automatizamos las actualizaciones del sistema de diseño en el código del tema.

El proceso funciona así:

  1. El sistema de diseño se define en un documento Figma.
  2. Utilizamos el complemento Figma Tokens para definir los tokens de diseño utilizados en Figma.
  3. Usando el almacenamiento GitHub de Figma Token, exportamos tokens a un repositorio.
  4. Con la herramienta vip-design-system-bridge, insertamos tokens de diseño en WordPress a través de la sección personalizada theme.json.
  5. En el código y CSS, usamos las clases personalizadas generadas por WordPress para hacer referencia a los tokens de diseño.

Esto hace que los cambios en el sistema de diseño y los retemas sean fáciles de incluir en el código. Cuando se realizan cambios en Figma, se sincronizan con los tokens de Figma y ejecutamos la herramienta vip-design-system-bridge. Luego, los tokens de diseño se actualizan en la configuración de nuestro tema sin realizar otros cambios de código o CSS.

Hemos reunido un sistema de diseño y un tema de ejemplo para demostrar el proceso de Figma a WordPress. En esta publicación, cubriremos los pasos para:

  1. Haga una copia de un sistema de diseño de ejemplo.
  2. Use el complemento Figma Tokens para agregar tokens de diseño.
  3. Cambie un token de color en Figma y exporte nuevos tokens de diseño.
  4. Ejecute una copia local de WordPress con el administrador de entorno local de VIP para ver el tema de ejemplo de WordPress.
  5. Use la herramienta vip-design-system-bridge para actualizar el tema de WordPress con nuevos tokens de diseño.

Estos recursos también están disponibles para ayudarlo a comenzar:

  • Sistema de documentos de diseño simple en Figma basado en la plantilla Material 3 Design Kit.
  • Conjunto de tokens de diseño utilizados para integrarse con Figma Tokens.
  • Ejemplo de tema de WordPress configurado para utilizar los colores y la tipografía proporcionados por el sistema de diseño.

Configurar fichas de Figma

Comenzaremos con el flujo de trabajo del diseñador usando un sistema de diseño en Figma y exportando tokens de diseño.

Para instalar Figma Tokens, inicie sesión en Figma y visite la página del complemento Figma Tokens. En la esquina superior derecha, haga clic en el botón "Pruébelo". En la página siguiente, haga clic en el botón "Ejecutar". Una vez instalado, el complemento estará disponible para su uso en los documentos de Figma.

1. Obtenga una copia del sistema de diseño

Usaremos un pequeño sistema de diseño en Figma basado en la plantilla Material 3 Design Kit para nuestro ejemplo.

  1. Abra el sistema de diseño Figma de ejemplo. Haremos una copia local de este documento para usar con el complemento Figma Tokens.

2. En el lado derecho del título del documento, haga clic en la flecha hacia abajo y seleccione "Duplicar en sus borradores":

3. En la ventana emergente en la parte inferior de la página, haga clic en el botón "Abrir":

El documento del sistema de diseño duplicado también se puede encontrar en sus borradores de Figma.

2. Conecte los tokens de Figma para diseñar tokens

Hemos creado un conjunto de tokens de diseño que están listos para ser importados al documento del sistema de diseño usando Figma Tokens. Estos tokens de diseño se crearon directamente en Figma utilizando el complemento Figma Tokens. Aquí se explica cómo conectar el complemento Figma Tokens a los tokens de diseño existentes:

  1. Abra el documento Figma del paso anterior. En la parte superior izquierda de la página, haga clic en el botón del menú principal y seleccione Complementos -> Figma Tokens.
Si el complemento no está visible, asegúrese de que esté instalado a través de la página del complemento Figma Tokens.

2. Después de que se inicien Figma Tokens, seleccione el botón "Comenzar". Debería ver un conjunto vacío de fichas en la página siguiente:

3. En la parte superior del complemento, haga clic en la pestaña "Configuración". En la sección "Almacenamiento de tokens", haga clic en el botón "URL":

Haga clic en el botón "Agregar nuevas credenciales". En el campo "Nombre", ingrese cualquier nombre (por ejemplo, tokens de ejemplo). En el cuadro URL, ingrese esta URL:

 https://raw.githubusercontent.com/Automattic/vip-design-system-bridge/trunk/docs/design-tokens-example/tokens.json

4. El resultado debería verse así:

Haga clic en el botón "Guardar".

5. En "Almacenamiento de tokens", haga clic en el botón "Documento local". En la ventana emergente de confirmación, haga clic en "Sí, establecer en local".

6. Debido a un pequeño error en los tokens de Figma, la página debe actualizarse para permitir la edición de los tokens importados desde la URL. Tenga en cuenta que en un proceso de diseño real, los tokens se pueden sincronizar a través de la opción de almacenamiento de tokens de GitHub; este paso solo es necesario para este ejemplo de tutorial.

  • Después de cambiar la opción de almacenamiento de tokens a "Documento local", vuelva a cargar la página.
  • Vuelva a abrir Figma Tokens a través del menú del complemento.

7. En Figma Tokens, vaya a la pestaña "Tokens" para ver todos los tokens. Usando las casillas de verificación a la izquierda, seleccione los conjuntos de fichas "global", "material-3-color" y "material-3-text". Ahora debería poder ver las fichas de diseño de tipo y color en el panel principal:

El conjunto "global" representa la paleta de colores completa y las opciones de tipografía disponibles en el sistema de diseño. El conjunto "material-3-color" contiene colores de token de diseño con nombre utilizados por el sistema de diseño, por ejemplo, "tema/luz/principal" y "tema/luz/fondo". El "material-3-texto" contiene opciones de tipografía utilizadas por el sistema de diseño.

Nota: este tutorial utiliza el almacenamiento de tokens de URL para simplificar la configuración. En un documento de sistema de diseño real, se debe usar un sistema de almacenamiento de tokens versionado como "GitHub" o "GitLab". Estos permiten que los tokens se extraigan y publiquen directamente en un repositorio desde Figma.

3. Cambiar un token de diseño y exportar

Esta sección cubrirá el cambio de un token de diseño para el fondo a un nuevo valor y la exportación del archivo de token actualizado para su uso en un sistema de diseño.

  1. En Figma Tokens, haga clic en el conjunto de colores "material-3-color". A continuación, en el documento de Figma, en la sección "Tema claro", seleccione el bloque "Fondo" y vea que el token de diseño coincidente está seleccionado en Figma Tokens:

2. En Fichas de Figma, haga clic con el botón derecho en la ficha de color de fondo y seleccione "Editar ficha". Cambie el valor a {color.error.70} (u otro token de color de paleta de su elección) y haga clic en "Actualizar":

Como se muestra arriba, el bloque de color de fondo seleccionado debería cambiar para coincidir con el nuevo token de color.

3. En la esquina inferior derecha del complemento Figma Tokens, haga clic en "Exportar". Marque "Todos los conjuntos de tokens", luego vaya a la parte inferior del cuadro de diálogo y haga clic en el botón "Exportar".

Esto descargará un archivo llamado `tokens.json`. Utilizaremos este archivo para actualizar un tema de WordPress en el paso 5.

Nota: cuando se utiliza un sistema de almacenamiento de tokens con versiones como "GitHub", los cambios de tokens se pueden enviar directamente a una rama del repositorio en lugar de descargarlos a través del navegador.

Herramientas de configuración para WordPress

En los próximos dos pasos, usaremos los tokens de diseño exportados de Figma para actualizar un tema de WordPress que se ejecuta localmente. El uso de estas herramientas requiere algo de experiencia con GitHub, ejecutar comandos de terminal y npm. Siga con las siguientes herramientas:
Descargue o clone una copia del repositorio vip-design-system-bridge. Los clientes VIP de WordPress también pueden usar directamente su código de WordPress existente con una copia del tema del token incluido.

  1. Instale la herramienta de terminal vip dev-env, que se utiliza para ejecutar una copia de WordPress y ver los cambios de token:
 $ npm install -g @automattic/vip

Nota: Es posible que también deba instalar Node.js y Docker Desktop como requisitos previos para vip dev-env. Consulte la sección Requisitos previos en esta página de documentos para obtener más información.

4. Ejecute una copia local de WordPress

Para ver la actualización de nuestros tokens de diseño, ejecute una copia local de WordPress usando npm y vip dev-env. Asegúrese de que VIP CLI esté instalado y de que se haya descargado localmente una copia del repositorio vip-design-system-bridge.

  1. Con la carpeta del repositorio vip-design-system-bridge descargada localmente, ejecute estos comandos para crear un sitio web local de WordPress:
 cd vip-design-system-bridge/docs/design-tokens-example vip dev-env create --multisite=false --php=8.0 --wordpress=6.1 --mu-plugins=demo --elasticsearch=false --phpmyadmin=false --xdebug=false --app-code=token-site/ --slug=token-site --title=Tokens

2. Una vez completada la instalación, ejecute este comando para iniciar el entorno.

 vip dev-env start --slug=token-site

El resultado debería verse así:

3. A continuación, active el tema del token ejecutando:

 vip dev-env exec --slug=token-site -- wp theme activate token-theme

La versión local de WordPress ahora debería estar ejecutándose con nuestro tema de token habilitado.

4. Visite la instancia de WordPress que se ejecuta localmente en http://token-site.vipdev.lndo.site/. Debería ver una página de WordPress usando el tema simplificado de la interfaz de usuario de Material 3:

5. Use tokens para actualizar el tema de WordPress

Ahora que el tema predeterminado está visible, podemos actualizar nuestro tema en el lugar y ver los resultados de los cambios de token.

Navegue hasta el repositorio vip-design-system-bridge descargado en una terminal e instale las dependencias npm para el script de procesamiento de tokens:

 cd vip-design-system-bridge/ npm install

A continuación, ejecute el siguiente comando. Actualice –tokenPath para que coincida con la ruta de tokens.json descargada en el paso 3:

 node ingest-tokens.js --tokenPath=~/Downloads/tokens.json --themePath=./docs/design-tokens-example/token-site/themes/token-theme --sourceSet=global --layerSets=material-3-color,material-3-text --overwrite

Aquí hay un desglose de las banderas utilizadas en este comando:

 –tokenPath=~/Downloads/tokens.json # The path to the tokens.json file downloaded from Figma Tokens. Change # this to match the path of the tokens.json file downloaded in step 3. --themePath=./docs/design-tokens-example/token-site/themes/token-theme # The path to the WordPress theme folder that'll receive the updated tokens --sourceSet=global # Use the tokens in the “global” set as a source. Source sets are excluded # from the output, but can still be referenced by other token sets. This # option is used to avoid including the whole color palette and typography # choices in the resulting tokens. --layerSets=material-3-color,material-3-text # Use the “material-3-color” and “material-3-text” token sets to produce the # final output. All tokens included in these sets will be available to # WordPress.

Cuando se ejecuta el comando anterior, debería producir este resultado:

 Using source and layer sets for tokens (source: global, layers: material-3-color, material-3-text) ︎ Processed with token-transformer wordpress-theme-json ︎ src/build/tokens.json ︎ Processed with Style Dictionary ︎ Wrote theme file: ~/vip-design-system-bridge/docs/design-tokens-example/token-theme/theme.json

Ahora que los tokens se han actualizado en WordPress, visite http://token-site.vipdev.lndo.site/ o actualice la página. Debería ver que el color de fondo ha cambiado al valor del token asignado en Figma:

En conclusión

Hemos demostrado el proceso de extremo a extremo para crear una única fuente de verdad para un sistema de diseño y llevarlos a un tema de WordPress. Sin embargo, hay temas importantes y complejos que no se han tratado en esta publicación, como el proceso de creación de tokens para Figma Tokens y el diseño de un tema de bloque de WordPress que pueda aprovechar esos tokens.

Dicho esto, esperamos que esto proporcione un proceso útil para aquellos que luchan con la implementación del sistema de diseño en WordPress, y que el código de ejemplo pueda usarse como punto de partida.

Para temas relacionados con el sistema de diseño, consulte estos recursos:

Complemento Figma Tokens – Primeros pasos.

Autores

Alec Geatches, desarrollador de software sénior en Automattic

Desarrollador de WordPress empresarial y entusiasta de los sistemas de diseño que vive en Taipei, Taiwán.

Gopal Krishnan, desarrollador de software sénior en Automattic

Gopal trabaja en la oferta de WordPress desacoplada de WordPress VIP, con interés en los sistemas de diseño y Gutenberg. Tiene su base en Sydney, Australia y recientemente se mudó de Canadá.