Una nueva e impresionante extensión de Adobe XD para Visual Studio Code, nos permite utilizar Adobe XD sin salir del editor.
Los sistemas de diseño son el vínculo entre diseño y el desarrollo. Para construir un sistema exitoso, personalizado y ampliamente adoptado, tanto los diseñadores como los desarrolladores deben tener un hueco a la hora de la creación.
La nueva extensión de Adobe XD para Visual Studio Code permite a los desarrolladores mapear visualmente las fuentes de diseño, creadas en Adobe XD y disponibles en las Bibliotecas de Creative Cloud, al código específico de la plataforma utilizando tokens de diseño.
Los equipos de DesignOps podrán crear paquetes de sistemas de diseño (DSP) compartibles que contienen toda la información que los desarrolladores necesitan consumir durante la codificación, incluidos fragmentos de código y documentación.
Características de la Extensión de Adobe XD
- Introducción a los tokens de diseño: Comprende qué son los tokens de diseño, qué hacen y cómo se compilan en un código específico de la plataforma.
- Consumir un paquete de sistema de diseño (DSP) en VS Code: Aprenda a cargar DSP para crear aplicaciones y sitios web, acceder a documentación, tokens de diseño y fragmentos de código, sin tener que salir de Visual Studio Code.
- Design System Packages (DSP) Importación de activos desde bibliotecas: Cree y administre sus DSP, visualmente. Y si importa desde las Bibliotecas Creative Cloud, obtendrá colores, estilos de caracteres y componentes XD en segundos.
¿Qué es un paquete de sistema de diseño o DSP?
DSP es una nueva estructura de carpetas de formato abierto creada para ayudar a los equipos a compartir información del sistema de diseño entre herramientas.
¿Qué formato forma un paquete DSP?
Un paquete de sistema de diseño (DSP) es una carpeta que contiene subcarpetas con activos y archivos JSON que representan información del sistema de diseño:
- Detalles del paquete (por ejemplo, número de versión, estado, idiomas / plataformas).
- Páginas de documentación (por ejemplo, introducción, principios).
- Tokens de diseño agnóstico como color, tamaño, personalizado (numérico, de cadena o booleano) y alias. Además de documentación en markdown y etiquetas para ayudar con la búsqueda.
- Colecciones de fichas, como fichas de tipografía (por ejemplo, familia, peso, tamaño). Así como documentación y etiquetas.
- Documentación de componentes que incluye secciones de rebajas con soporte para HTML básico (p. Ej., Img, iframe), tokens específicos de componentes, fragmentos de código y etiquetas.
¿Cuál es la estructura de un paquete DSP?
Por ejemplo. Para los paquetes DSP de Adobe Spectrum. Los contenidos dentro del paquete son los siguientes:
- /assets
- /data
- /dist
- /ext
- dsp.json
La carpeta de assets
Esta carpeta contiene todos los activos estáticos incluidos en el DSP, como archivos SVG o PNG.
La carpeta data
Esta carpeta contiene todos los datos que componen el formato DSP. La carpeta no tiene archivos necesarios. Los ejemplos de archivos son components.json, docs.json, fonts.json y tokens.json.
La carpeta dist
Esta carpeta contiene código específico de la plataforma generado por un sistema de compilación. Por ejemplo, la extensión Adobe XD para Visual Studio Code tiene Style Dictionary como su sistema de compilación. Ejemplos de carpetas creadas por un sistema de compilación son / android, / css y / styledictionary. Dist también contiene código no específico de la plataforma, como los archivos y carpetas de entrada del diccionario de estilos ( configuración y propiedades ).
La carpeta ext
Esta carpeta podría contener archivos escritos por herramientas de terceros. Sus subcarpetas deben seguir la convención de nombre de dominio inverso de “com_partner_name” (por ejemplo, para Adobe, la carpeta debe llamarse “com_adobe”).
El archivo dsp.json
Este es el punto de entrada para el paquete de sistema de diseño (DSP). Incluye información, configuraciones e importaciones del paquete.
¿Cómo usar un paquete DSP a través de NPM?
Si decides utilizar NPM para distribuir su paquete, agregue un archivo package.json a la carpeta raíz siguiendo las instrucciones para publicar en NPM. Un ejemplo es Adobe Spectrum DSP en npm, que se puede instalar en su proyecto con
npm install adobe-spectrum-dsp
.
Para iOS, puede explorar compartir los tokens usando CocoaPods, y para Android puede explorar compartir los tokens como parte de un Gradle.
DSP y herramientas públicas disponibles
En la actualidad, ya existen, varios paquetes disponibles para su utilización y totalmente utilizables a travésde la extensión de Adobe XD para Visual Studio Code. Con el paso del tiempo, con seguridad el número de posibilidad irá aumentando con rapidez.
A continuación, vas a encontrar algunas de las herramientas, ya existentes:
Adobe Spectrum DSP
Paquete del sistema de diseño de Adobe, que incluye fragmentos de código de React Spectrum.
Adobe Spectrum Design System Package (DSP) beta, está basado en espectrum.adobe.com, que incluye tokens de diseño, colecciones tipográficas de tokens y componentes con fragmentos de código de Spectrum React.
¿Cómo instalar Adobe Spectrum DSP?
Para instalar Adobe Spectrum DSP en su proyecto, ejecute
npm install adobe-spectrum-dsp
.
¿Cómo utilizar el paquete Adobe Spectrum DSP?
Utiliza la extensión Adobe XD para VS Code para abrir este y otros DSP. Después de instalar Adobe Spectrum DSP con npm, abre la extensión Adobe XD para VS Code y selecciona
Load package
. Luego navega a tu carpeta
node_modules
y selecciona la carpeta
adobe-spectrum-dsp
(los DSP contienen un archivo dsp.json en el nivel raíz).
¿Qué hay en el paquete de Adobe Spectrum DSP?
Dentro del paquete vas a encontrar tokens de diseño compilados disponibles en /distAndroid, CSS, Flutter (Dart), iOS (Objective-C), iOS (Swift), JavaScript y SCSS. Además, de fragmentos de código disponibles como Spectrum CSS, Spectrum Web Components (HTML) y React Spectrum.
¿Dónde descargar Adobe Spectrum DSP?
https://spectrum.adobe.com/page/spectrum-xd-plugin/
Simplificador de Iconos DSP
1.285 iconos esenciales para interfaces móviles / web.
Concentrate en la codificación. Inserta rápidamente 1.285 iconos en Visual Studio Code, utilizando estos paquete DSP gratuitos. Accede instantáneamente a los íconos con el teclado: Aprovecha la búsqueda instantánea, el autocompletar, y la vista previa en el propio código. ¿Y la mejor parte de todas? Es que es totalmente gratis ?
- Iconos esenciales para interfaces: Después de instalar nuestro paquete DSP Streamline Symbols, obtendrá nuestros iconos altamente legibles disponibles en Visual Studio Code. ¡Simplemente comience a escribir “Streamline..” para insertarlos en una fracción de segundo!
- Altamente legible y perfectamente elaborado: Nuestros íconos de símbolos están diseñados en una pequeña cuadrícula de 14 píxeles, por lo que se pueden usar en un tamaño muy pequeño. Perfecto para usar en botones pequeños, menús laterales estrechos o incluso texto en línea. Diseñamos iconos desde 2010: obtendrá la calidad y la coherencia de una década de experiencia en el diseño de iconos … ¡gratis!
- Disponible como paquete de sistema de diseño / DSP: Los sistemas de diseño son el vínculo entre diseño y desarrollo. Para construir un sistema exitoso, personalizado y ampliamente adoptado, tanto los diseñadores como los desarrolladores deben tener un asiento en la mesa.
La nueva extensión de Adobe XD para Visual Studio Code permite a los desarrolladores mapear visualmente las fuentes de diseño, creadas en XD y disponibles en las Bibliotecas Creative Cloud, al código específico de la plataforma utilizando tokens de diseño.
Los equipos de DesignOps podrán crear paquetes de sistemas de diseño (DSP) compartibles que contienen toda la información que los desarrolladores necesitan consumir durante la codificación, incluidos fragmentos de código y documentación.
¿Cómo descargar el paquete de Iconos en DSP?
https://www.streamlinehq.com/dsp
Bootstrap 5 DSP
Componentes y fragmentos de código para la última biblioteca Bootstrap, creada por Foxbox Digital.
Facilita aún más el desarrollo con Bootstrap 5 utilizando nuestro el paquete de sistema de diseño gratuito (DSP) para Visual Studio Code. Obtén acceso directo a los fragmentos de código y la documentación de Bootstrap con Intellisense directamente en el editor de VS Code.
Esto te va a permitir mantener el flujo de trabajo y concentrarte en el desarrollo, en lugar de tener que estar cambiando entre tu editor y el resto de documentos.
El paquete ofrece fragmentos de Bootstrap, HTML y React.
¿Cómo instalar el paquete de Bootstrap DSP?
Para instalar Adobe Bootstrap DSP en tu proyecto, ejecuta:
npm install @foxbox/adobe-bootstrap-dsp
.
¿Cómo descargar el paquete de Bootstrap DSP?
https://github.com/foxbox-digital/bootstrap-dsp
Drácula UI DSP
Hermosos DSP del popular tema de primer color en modo oscuro.
La colección de plantillas de modo oscuro Dracula, una de las extensiones más usadas del mundo para Visual Studio Code. También ha indicado ya, que está creando un paquete DSP.
Además, Drácula ofrece modos oscuros, para decenas de software diferentes.
¿Cómo descargar Dracula UI?
Desde la web oficial de la extensión, puedes encontrar las instrucciones de instalación, hasta para 100 diferentes software. Y muy pronto, también para DSP.
Knapback
Plataforma SaaS para unificar y administrar su sistema con exportación de código abierto a DSP.
Compartir tu sistema de diseño impulsado por Knapsack nunca ha sido tan fácil. El formato Design System Package (DSP) hace que sea más fácil que nunca para los equipos compartir información del sistema de diseño entre plataformas, y la nueva y poderosa extensión XD de Adobe para VS Code permite a los ingenieros acceder al código del sistema actualizado, los activos y la documentación directamente desde dentro de su editor de código. Ahora, Knapsack permite a los equipos generar y mantener automáticamente un DSP actualizado de su sistema para que puedan hacer uso de estas asombrosas innovaciones.
Con el complemento Knapsack DSP, los ingenieros de VS Code pueden:
- Ver incrustaciones de componentes en vivo.
- Haga referencia a capturas de pantalla siempre actualizadas.
- Obtenga fragmentos de código para todos los marcos compatibles con su sistema de diseño.
- Consulte documentos pequeños sin salir de VS Code, o vea la versión completa en la experiencia web de Knapsack.
- Comparta colores, espaciado, tipografía y más con una profunda integración de tokens de diseño.
- Tenga la seguridad de que están trabajando con lo último porque Knapsack genera automáticamente un paquete de sistema de diseño siempre actualizado.
Una fuente central de verdad para tu sistema, disponible en contexto y siempre actualizada para que puedas construir sin reconstruir.
¿Cómo instalar el paquete de Knapback?
A día de hoy, deberás pedir acceso anticipado y solicitar una demostración del producto. Además, de mostrar tu interés por el mismo, para poder comprobar su funcionamiento.
Specify
Genere y distribuya DSP de forma automática.
Actualmente, parece estar caído. Por lo que no he podido tener acceso a realizar su revisión; más. Se supone que esu na aplicaciíon, que sirve para difundir y compartir los paquetes DSP a través de diferentes plataformas online: Como por ejemplo, Github, Visual Studio Code, Google Drive y Adobe XD.
⚡ Actualmente caído https://specifyapp.com/dsp
Material Design DSP
Próximamente un DSP para Material Design, que incluye tokens y componentes.
El equipo de ya está trabajando en la creación de un paquete DSP centrado especifícamente en Material Design, y han decidido crear una newsletter de Material Design para estar informado de las nuevas actualizaciones al respecto.
Relacionado
Recién llega la primavera y vamos con una publicación más, que incluye los cursos del Lunes; hoy tenemos, 9 cursos en español (Typescript, Javascript, React, Vue, Firebase, Swift, Azure, HTML y CSS, Power Bi). Más 31 cursos en inglés: Javascript, Typescript, React, Python, R, Java, Drupal, Android y Kotlin, Básicos de Visual Studio Code, Bootstrap, Gitlab, Maya 3D, Photoshop, Marketing en Facebook e Instagram, SEO. Iniciación ¡SEGUIR LEYENDO!
Como desarrollador de software, es importante poder aumentar la productividad para terminar las tareas más difíciles a su debido tiempo. Para optimizar los procesos, se requieren las mejores herramientas y tecnologías, entre ellas algunas de las mejores extensiones de Chrome. Aprender a programar es una de las tareas más difíciles y que consume más tiempo en los nuevos programadores. Una vez que hayas aprendido a programar ¡SEGUIR LEYENDO!
Grandes servicios con muchas características y listas simples con una interfaz minimalista. https://ciberninjas.com/extensiones-ganar-tiempo/ 1. ClickUp Notepad
ClickUp es un servicio con muchas oportunidades tanto para la productividad personal como para el trabajo en equipo. Puede administrar el sistema a través del sitio web, aplicaciones para Windows, macOS, Linux, iOS y Android, así como a través de la extensión para Chrome. Este último contiene ¡SEGUIR LEYENDO!
En esta actualización, le mostraremos las nuevas formas de administrar sus dependencias y configurar el JDK múltiple. Aprender las herramientas adicionales que se pueden aprovechar para utilizar frameworks y mejorar los tiempos de ejecución. Además, existen algunos cambios más dentro de esta actualización. Gestión de dependencias Ya sea que use o no una herramienta de compilación, Java Dependency Viewer ahora proporciona una manera mejor de manejar ¡SEGUIR LEYENDO!
¡Editores de código interesantes que podrían reemplazar a Visual Studio Code en 2024! Aquí te traigo algunos nuevos editores de código destacables que se lanzaron para Linux, como por ejemplo Lite XL hasta otras opciones como Pulsar. 5 Alternativas al editor de código Visual Studio Code Comencemos, he compilado esta lista de los próximos editores de código para Linux que tienen una gran capacidad y aspiraciones ¡SEGUIR LEYENDO!
Aumenta el potencial de tu navegador Google Chrome con estas espectaculares extensiones y haz crecer tu productividad, eficiencia y seguridad. Google Chrome es el navegador web más popular del mundo, y por una buena razón. A pesar de las molestias relacionadas con acaparar los recursos del sistema, es una plataforma muy capaz. Y uno de sus puntos fuertes es el abundante ecosistema de extensiones. Hay miles ¡SEGUIR LEYENDO!
Una extensión de Chrome es un pequeño módulo de software o complemento diseñado para mejorar la funcionalidad y la experiencia del usuario del navegador web Google Chrome. Hemos visto muchas extensiones antes en Ciberninjas, enfocadas a diferentes ámbitos de la tecnología; pero hoy, vamos a ver las mejores extensiones. Relacionados: 11 Extensiones ChatGPT de Chrome Impresionantes que Debes Conocer Extensiones IA para el navegador Chrome Las ¡SEGUIR LEYENDO!