Agrega mediciones y anota diseños en Dev Mode
Este artículo está disponible tanto para la UI anterior de Figma como para la nueva. Utiliza el conmutador de la parte inferior izquierda de la página para seleccionar tu UI actual. Conoce UI3: el rediseño de Figma →
Antes de empezar
Quién puede utilizar esta función
Disponible en todos los planes pagados
Cualquier persona con un puesto de Design full y acceso de puede editar a un archivo puede agregar medidas y anotaciones.
Cualquier persona con un puesto de Design full o un puesto Dev Mode y al menos acceso de puede ver a un archivo puede ver las medidas y anotaciones.
Crea entregas más rápidas y transparentes con anotaciones y mediciones que se mantienen actualizadas, incluso cuando cambian los diseños.
Con las anotaciones, los diseñadores pueden comunicar y conectar detalles clave directamente con los diseños:
- Destaca las propiedades importantes para que los desarrolladores no las pasen por alto.
- Ayuda a los desarrolladores a visualizar las especificaciones rápidamente, como el espaciado y el tamaño.
- Comparte más contexto con las notas de texto.
Los desarrolladores pueden ver las actualizaciones de las anotaciones en tiempo real mientras trabajan en Dev Mode, lo que garantiza que no se pierdan ninguna llamada crucial durante la entrega.
Consejo: Mientras estés en el modo de diseño, recibirás una notificación cuando se agreguen 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.
Agregar mediciones a un diseño
Agregar mediciones ayuda a los desarrolladores a ver el espaciado y el tamaño rápidamente.
Para agregar una medición a un diseño:
- Haz clic en el botón Dev Mode en la parte superior derecha de la barra de herramientas o usa el atajo de teclado Shift D.
- Haz clic en Medir en la barra de herramientas o usa el atajo de teclado Shift M.
- Pasa el cursor sobre una capa para ver las opciones de dónde comenzar la medición.
- Haz clic y arrastra desde tu punto de inicio hasta la capa en que deseas 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 presiona la tecla Eliminar o Retroceso.
Agregar anotaciones a un diseño
Los diseñadores pueden agregar anotaciones para brindar contexto, definir propiedades de diseño o transmitir 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 posteriormente, las propiedades de anotación se mantienen actualizadas y precisas, lo que garantiza que no se pierda nada en la traducción.
Para agregar anotaciones a un diseño:
- Haz clic en el botón Dev Mode en la parte superior derecha de la barra de herramientas o usa el atajo de teclado Shift D.
- Haz clic en Anotar en la barra de herramientas o usa el atajo de teclado Shift M.
- Selecciona la capa que deseas 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 del plugin, los equipos pueden crear plugins personalizados de Dev Mode para crear y administrar anotaciones de forma masiva.
Ocultar anotaciones
Todas las anotaciones en un archivo de Figma Design 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 por encima de Ver en el menú desplegable.
- Desmarca Anotaciones.
Consejo: Para eliminar una anotación, haz clic en ella y presiona la tecla Eliminar o Retroceso.
Antes de empezar
Quién puede utilizar esta función
Disponible en todos los planes pagados
Cualquiera con un usuario full de diseño puede editar las anotaciones en Dev Mode
Cualquiera con un usuario de Dev Mode puede ver las anotaciones en Dev Mode
Crea entregas más rápidas y transparentes con anotaciones y mediciones que se mantienen actualizadas, incluso cuando cambian los diseños.
Con las anotaciones, los diseñadores pueden comunicar y conectar detalles clave directamente con los diseños:
- Destaca las propiedades importantes para que los desarrolladores no las pasen por alto.
- Ayuda a los desarrolladores a visualizar las especificaciones rápidamente, como el espaciado y el tamaño.
- Comparte más contexto con las 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 llamada crucial durante la entrega.
Consejo: Mientras estés en el modo de diseño, recibirás una notificación cuando se agreguen 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.
Agregar mediciones a un diseño
Agregar mediciones ayuda a los desarrolladores a ver el espaciado y el tamaño rápidamente.
Para agregar una medición a un diseño:
- Haz clic en el botón Dev Mode en la parte superior derecha de la barra de herramientas o usa el atajo de teclado Shift D.
- Haz clic en Medir en la barra de herramientas o usa el atajo de teclado Shift M.
- Pasa el cursor sobre una capa para ver las opciones de dónde comenzar la medición.
- Haz clic y arrastra desde tu punto de inicio hasta la capa en que deseas 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 presiona la tecla Eliminar o Retroceso.
Agregar anotaciones a un diseño
Los diseñadores pueden agregar anotaciones para brindar contexto, definir propiedades de diseño o transmitir 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 posteriormente, las propiedades de anotación se mantienen actualizadas y precisas, lo que garantiza que no se pierda nada en la traducción.
Para agregar anotaciones a un diseño:
- Haz clic en el botón Dev Mode en la parte superior derecha de la barra de herramientas o usa el atajo de teclado Shift D.
- Haz clic en Anotar en la barra de herramientas o usa el atajo de teclado Shift M.
- Selecciona la capa que deseas 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 del plugin, los equipos pueden crear plugins personalizados de Dev Mode para crear y administrar anotaciones de forma masiva.
Ocultar anotaciones
Todas las anotaciones en un archivo de Figma Design 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 por encima de Ver en el menú desplegable.
- Desmarca Anotaciones.
Consejo: Para eliminar una medición, haz clic en ella y presiona la tecla Eliminar o Retroceso.