El inspector
Cada sección y control del inspector, explicados uno por uno.
El inspector es donde das forma a un elemento seleccionado: su tamaño, color, esquinas, efectos, texto, animación y más. Cada sección es contextual: un panel solo aparece cuando se aplica al elemento que has seleccionado, así que una línea muestra opciones de LINE mientras que una casilla de verificación muestra opciones de CHECKBOX. Esta página recorre cada sección y control que encontrarás allí.
Las secciones aparecen solo cuando son relevantes para el elemento seleccionado, así que rara vez las verás todas a la vez: el inspector se adapta a lo que has elegido.
Nombre
El campo Nombre cambia el nombre del elemento seleccionado. Esta es la etiqueta que verás en la lista de capas, así que dales a los elementos nombres claros para mantener manejables los diseños grandes. También puedes cambiar el nombre directamente en el panel de capas haciendo doble clic en la capa.
Posición
La sección Posición controla dónde se sitúa el elemento y cuán grande es. Los valores se expresan como porcentajes / fracciones de la pantalla, de modo que tu diseño se mantiene adaptable en todas las resoluciones.
| Control | Qué establece |
|---|---|
| X | Posición horizontal como % / fracción de la pantalla. |
| Y | Posición vertical como % / fracción de la pantalla. |
| Ancho | Ancho del elemento como % / fracción de la pantalla. |
| Alto | Alto del elemento como % / fracción de la pantalla. |
| Rotación | Rota el elemento; se muestra solo para elementos rotables. |
Relleno
La sección Relleno establece el color interior del elemento usando el selector de color avanzado (descrito en su totalidad al final de esta página). También contiene una subsección de Degradado para rellenos multicolor.
Degradado
- Activar — activa el relleno de degradado para el elemento.
- 2 colores o 3 colores — elige un degradado de dos paradas o de tres paradas.
- Dirección — configura el degradado para que corra en vertical u horizontal.
- Opción radial — cambia de un degradado lineal a uno radial.
- Contorno con degradado — aplica el degradado también al contorno del elemento.
Contorno
La sección Contorno añade un borde alrededor del elemento. Establece su grosor y su color, y como los contornos admiten degradados, el color puede ser un contorno con degradado en lugar de un color plano.
Esquinas
La sección Esquinas controla cómo se dibujan las esquinas del elemento. Establece un radio de esquina y elige un estilo de esquina.
Sombra
La sección Sombra proyecta una sombra suave detrás del elemento. Ajusta el desplazamiento de la sombra (cuánto se ha desplazado) y su desenfoque (cuán suave es el borde) para añadir profundidad frente al fondo.
Profundidad 3D
La sección Profundidad 3D le da a un elemento una sensación de dimensión física. Elige un estilo, establece una dirección de luz y ajusta la intensidad del efecto, o aplica un preajuste de un clic.
| Estilo | Efecto |
|---|---|
| Biselado | Bordes achaflanados y elevados. |
| Relieve | Aspecto presionado / estampado hacia dentro. |
| Suave (neumórfico) | Profundidad suave, neumórfica. |
| 3D (extrusión) | Cuerpo 3D sólido y extruido. |
| Larga | Efecto de profundidad de sombra larga. |
- Dirección de luz — elige de dónde viene la luz: tl (arriba a la izquierda), tr (arriba a la derecha), bl (abajo a la izquierda) o br (abajo a la derecha).
- Cantidad de profundidad — controla cuán pronunciado es el efecto 3D.
- Preajustes — aplica un aspecto de profundidad prediseñado con un clic.
Texto
La sección Texto aplica estilo a cualquier elemento que muestre texto. Elige una fuente de la lista integrada, establece la alineación y la escala, elige un color e incorpora tus propias tipografías.
| Control | Opciones |
|---|---|
| Fuente | Elige de la lista de fuentes integrada. |
| Alineación horizontal | izquierda / centro / derecha |
| Alineación vertical | arriba / centro / abajo |
| Escala del texto | Escala el tamaño del texto. |
| Color | Establece el color del texto mediante el selector de color. |
| Importar fuente | Importa una fuente .ttf / .otf desde tu PC. |
Usa Importar fuente .ttf / .otf para cargar una tipografía personalizada directamente desde tu PC cuando la lista integrada no tenga el aspecto que deseas.
Casilla de verificación
Para los elementos de casilla de verificación, la sección Casilla de verificación establece el Lado de la casilla: si la casilla se sitúa a la izquierda o a la derecha de su etiqueta.
Línea
Para los elementos de línea, la sección Línea establece el estilo — continua, discontinua o punteada — y el espaciado de guiones / puntos que controla cuán separados están los guiones o puntos.
Volumen / progreso
Para los elementos de volumen y progreso, esta sección elige entre el modo de relleno y el modo centro para determinar cómo crece la barra, y establece la ubicación de la etiqueta.
Animación
La sección Animación da vida a un elemento. Las animaciones se reproducen en la vista previa y se exportan con tu diseño, así que lo que ves es lo que se entrega.
| Ajuste | Opciones |
|---|---|
| Tipo | move, rotate, spin, scale, pulse, bounce, shake, orbit |
| Modo | pingpong / loop |
| Suavizado | linear / sine / inout |
Imagen
Para los elementos de imagen, la sección Imagen ofrece dos formas de establecer la fuente:
- Importar imagen desde el PC — el archivo importado se incluye en el recurso junto con tu diseño.
- Apuntar a una ruta — hace referencia a una imagen que ya existe en el recurso.
Panel de Blueprint
El panel de Blueprint controla cómo se comporta un elemento como contenedor:
- Actuar como ventana / panel — hace que el elemento se comporte como un contenedor de ventana o panel.
- Empieza abierto — el elemento se muestra en su estado abierto desde el inicio.
Opacidad
La Opacidad está disponible por elemento, lo que te permite hacer cualquier elemento individual más o menos transparente de forma independiente del resto de tu diseño.
El selector de color
Cada control de color del inspector — relleno, contorno, texto y paradas de degradado — abre el mismo selector de color avanzado. Te da un control preciso a través de varios modos y métodos de entrada.
| Función | Qué hace |
|---|---|
| Rueda HSV | Elige el tono y la saturación visualmente en una rueda de color. |
| Deslizadores de valor y alfa | Ajusta el brillo (valor) y la transparencia (alfa). |
| Modos RGB / HSL / HEX | Cambia el modelo de entrada entre RGB, HSL y HEX. |
| Campo hex | Escribe un valor de color hexadecimal exacto. |
| Color nombrado más cercano | Muestra el color nombrado más próximo a tu selección. |
| Cuentagotas | Muestrea cualquier color de la pantalla mediante el selector de color del sistema. |
| Colores recientes | Reutiliza colores que has elegido recientemente. |
Usa el cuentagotas para extraer un color exacto de cualquier lugar de la pantalla, luego comprueba la lectura del color nombrado más cercano para confirmar el tono, y vuelve a tomarlo más tarde desde colores recientes.