Adición de medidas y anotaciones de diseños en Dev Mode
Este artículo es aplicable tanto a la anterior IU de Figma como a la nueva. Utiliza el botón en la parte izquierda de la página para seleccionar tu IU actual. Conoce UI3: el rediseño de Figma →
Antes de empezar
Quién puede utilizar esta función
Disponible en todos los planes de pago
Cualquiera que tenga una licencia de Design completa y acceso de edición a un archivo puede agregar medidas y anotaciones
Cualquiera que tenga una licencia de Design completa o un puesto de Dev Mode y al menos acceso puede visualizar a un archivo puede ver las medidas y anotaciones
Crea entregas más rápidas y transparentes con anotaciones y medidas que se mantienen actualizadas, incluso cuando cambian los diseños.
Con las anotaciones, los diseñadores pueden comunicar y conectar detalles importantes directamente con los diseños:
- Resaltar propiedades importantes para garantizar que el equipo de desarrollo las tenga en cuenta
- Ayudar a los desarrolladores a visualizar rápidamente especificaciones como el espaciado y el tamaño
- Compartir contexto adicional con notas de texto
Los desarrolladores pueden ver las anotaciones actualizarse en tiempo real mientras trabajan en Dev Mode, lo que garantiza que no se pierdan ninguna información crucial durante la entrega.
Consejo: mientras estés en el Modo de diseño, recibirás una notificación cuando se añadan nuevas anotaciones a un archivo. Haz clic en el punto junto al diseño y selecciona Ver anotaciones en Dev Mode para ver las anotaciones actualizadas en Dev Mode.
Añadir medidas a un diseño
Agregar medidas ayuda a los desarrolladores a visualizar rápidamente el espaciado y el tamaño.
Para añadir una medida a un diseño:
- Haz clic en el interruptor de Dev Mode en la esquina superior derecha de la barra de herramientas o utiliza el atajo de teclado Shift D.
- Haz clic en Medir en la barra de herramientas o utiliza el atajo de teclado Shift M.
- Sitúa el cursor sobre una capa para ver opciones sobre dónde empezar la medición.
- Haz clic y arrastra desde el punto de inicio hasta la capa en la que quieres que termine la medición.
- Haz clic y arrastra la medición para que no cubra el diseño.
Consejo: Para eliminar una medición, haz clic en ella y pulsa la tecla Eliminar o Retroceso.
Añadir anotaciones a un diseño
Los diseñadores pueden añadir anotaciones para proporcionar contexto, definir propiedades de diseño o comunicar otra información relevante para que los desarrolladores conviertan el diseño en código. Se puede anotar una combinación de texto libre y propiedades definidas, como la dirección de alineación o el tamaño. Incluso si los diseños se actualizan más adelante, las propiedades de anotación se mantienen actualizadas y precisas, lo que garantiza que no se pierda nada por el camino.
Para añadir anotaciones a un diseño:
- Haz clic en el interruptor de Dev Mode en la esquina superior derecha de la barra de herramientas o utiliza el atajo de tecladoShift D.
- Haz clic Anotar en la barra de herramientas o utiliza el atajo de teclado Shift T.
- Selecciona la capa en la que quieres anotar.
- Escribe una nota en el campo de texto o haz clic en + propiedad para seleccionar una propiedad de la lista. Puedes incluir texto sin formato y propiedades en una anotación.
¡Consejo! Con la API de plugins, los equipos pueden crear plugins personalizados para Dev Mode con el fin de crear y gestionar anotaciones de forma masiva.
Ocultar anotaciones
Todas las anotaciones en un archivo de diseño de Figma están visibles en Dev Mode de forma predeterminada. Para ocultar las anotaciones:
- Haz clic en Menú principal en la barra de herramientas.
- Pasa el cursor encima de Ver en el menú desplegable.
- Deselecciona Anotaciones.
¡Consejo! Para eliminar una anotación, haz clic en ella y pulsa la tecla Eliminar o Retroceso.
Antes de empezar
Quién puede utilizar esta función
Disponible en todos los planes de pago
Cualquiera que tenga un licencia de Design completa puede editar anotaciones en Dev Mode
Cualquier persona con un puesto de Dev Mode puede visualizar las anotaciones en Dev Mode
Crea entregas más rápidas y transparentes con anotaciones y medidas que se mantienen actualizadas, incluso cuando cambian los diseños.
Con las anotaciones, los diseñadores pueden comunicar y conectar detalles importantes directamente con los diseños:
- Resaltar propiedades importantes para garantizar que el equipo de desarrollo las tenga en cuenta
- Ayudar a los desarrolladores a visualizar rápidamente especificaciones como el espaciado y el tamaño
- Compartir contexto adicional con notas de texto
Los desarrolladores pueden ver las anotaciones de los diseñadores en tiempo real mientras trabajan en Dev Mode, lo que garantiza que no se pierdan ninguna información crucial durante la entrega.
¡Consejo! Mientras estés en el Modo de diseño, recibirás una notificación cuando se añadan nuevas anotaciones a un archivo. Haz clic en el punto junto al diseño y selecciona Ver anotaciones en Dev Mode para ver las anotaciones actualizadas en Dev Mode.
Añadir medidas a un diseño
Agregar medidas ayuda a los desarrolladores a visualizar rápidamente el espaciado y el tamaño.
Para añadir una medida a un diseño:
- Haz clic en el interruptor de Dev Mode en la esquina superior derecha de la barra de herramientas o utiliza el atajo de teclado Shift D.
- Haz clic en Medir en la barra de herramientas o utiliza el atajo de teclado Shift M.
- Sitúa el cursor sobre una capa para ver opciones sobre dónde empezar la medición.
- Haz clic y arrastra desde el punto de inicio hasta la capa en la que quieres que termine la medición.
- Haz clic y arrastra la medición para que no cubra el diseño.
¡Consejo! Para eliminar una medición, haz clic en ella y pulsa la tecla Eliminar o Retroceso.
Añadir anotaciones a un diseño
Los diseñadores pueden añadir anotaciones para proporcionar contexto, definir propiedades de diseño o comunicar otra información relevante para que los desarrolladores conviertan el diseño en código. Se puede anotar una combinación de texto libre y propiedades definidas, como la dirección de alineación o el tamaño. Incluso si los diseños se actualizan más adelante, las propiedades de anotación se mantienen actualizadas y precisas, lo que garantiza que no se pierda nada por el camino.
Para añadir anotaciones a un diseño:
- Haz clic en el interruptor de Dev Mode en la esquina superior derecha de la barra de herramientas o utiliza el atajo de tecladoShift D.
- Haz clic Anotar en la barra de herramientas o utiliza el atajo de teclado Shift T.
- Selecciona la capa en la que quieres anotar.
- Escribe una nota en el campo de texto o haz clic en + propiedad para seleccionar una propiedad de la lista. Puedes incluir texto sin formato y propiedades en una anotación.
¡Consejo!Con la API de plugins, los equipos pueden crear plugins personalizados para Dev Mode con el fin de crear y gestionar anotaciones de forma masiva.
Ocultar anotaciones
Todas las anotaciones en un archivo de diseño de Figma están visibles en Dev Mode de forma predeterminada. Para ocultar las anotaciones:
- Haz clic en Menú principal en la barra de herramientas.
- Pasa el cursor encima de Ver en el menú desplegable.
- Deselecciona Anotaciones.
¡Sugerencia! Para eliminar una anotación, haz clic en ella y pulsa la tecla Eliminar o Retroceso.