O inspetor

Cada seção e controle do inspetor, explicado um a um.

O inspetor é onde você molda um elemento selecionado — seu tamanho, cor, cantos, efeitos, texto, animação e muito mais. Cada seção é contextual: um painel só aparece quando se aplica ao elemento que você selecionou, então uma linha mostra as opções de LINE enquanto uma caixa de seleção mostra as opções de CHECKBOX. Esta página percorre todas as seções e controles que você encontrará ali.

Nome

O campo Nome renomeia o elemento selecionado. Este é o rótulo que você verá na lista de camadas, então dê nomes claros aos elementos para manter designs grandes gerenciáveis. Você também pode renomear diretamente no painel de camadas clicando duas vezes na camada.

Posição

A seção Posição controla onde o elemento fica e qual o seu tamanho. Os valores são expressos como porcentagens / frações da tela, para que seu layout permaneça responsivo em diferentes resoluções.

Preenchimento

A seção Preenchimento define a cor interna do elemento usando o seletor de cores avançado (descrito por completo no final desta página). Ela também contém uma subseção de Gradiente para preenchimentos com várias cores.

Gradiente

• Ativar — liga o preenchimento em gradiente para o elemento.
• 2 cores ou 3 cores — escolha um gradiente de duas ou três paradas.
• Direção — define se o gradiente segue na vertical ou na horizontal.
• Opção radial — alterna de um gradiente linear para um radial.
• Contorno em gradiente — aplica o gradiente também ao contorno do elemento.

Contorno

A seção Contorno adiciona uma borda ao redor do elemento. Defina sua espessura e sua cor — e, como os contornos suportam gradientes, a cor pode ser um contorno em gradiente em vez de uma cor sólida.

Cantos

A seção Cantos controla como os cantos do elemento são desenhados. Defina um raio de canto e escolha um estilo de canto.

Sombra

A seção Sombra projeta uma sombra suave atrás do elemento. Ajuste o deslocamento da sombra (o quanto ela é deslocada) e seu desfoque (o quão suave é a borda) para adicionar profundidade em relação ao fundo.

Profundidade 3D

A seção Profundidade 3D dá ao elemento uma sensação de dimensão física. Escolha um estilo, defina uma direção de luz e ajuste a intensidade do efeito — ou aplique uma predefinição com um clique.

• Direção da luz — escolha de onde vem a luz: tl (superior esquerdo), tr (superior direito), bl (inferior esquerdo) ou br (inferior direito).
• Quantidade de profundidade — controla o quão pronunciado é o efeito 3D.
• Predefinições — aplique uma aparência de profundidade pronta com um clique.

Texto

A seção Texto estiliza qualquer elemento que exiba texto. Escolha uma fonte da lista integrada, defina alinhamento e escala, escolha uma cor e traga suas próprias tipografias.

Caixa de seleção

Para elementos de caixa de seleção, a seção Caixa de seleção define o Lado da caixa — se a caixa fica à esquerda ou à direita de seu rótulo.

Linha

Para elementos de linha, a seção Linha define o estilo — sólido, tracejado ou pontilhado — e o espaçamento de traços / pontos que controla a distância entre os traços ou pontos.

Volume / progresso

Para elementos de volume e progresso, esta seção escolhe entre o modo preenchimento e centro para a forma como a barra cresce, e define o posicionamento do rótulo.

Animação

A seção Animação dá vida a um elemento. As animações são reproduzidas na pré-visualização e são exportadas com o seu design, então o que você vê é o que é entregue.

Imagem

Para elementos de imagem, a seção Imagem oferece duas formas de definir a origem:

• Importar imagem do PC — o arquivo importado é incluído no resource junto com o seu design.
• Apontar para um caminho — referencie uma imagem que já existe no resource.

Painel Blueprint

O painel Blueprint controla como um elemento se comporta como um contêiner:

• Agir como janela / painel — faz o elemento se comportar como um contêiner de janela ou painel.
• Começa aberto — o elemento é exibido em seu estado aberto desde o início.

Opacidade

A Opacidade está disponível por elemento, permitindo que você torne qualquer elemento individual mais ou menos transparente, de forma independente do resto do seu design.

O seletor de cores

Todo controle de cor no inspetor — preenchimento, contorno, texto e paradas de gradiente — abre o mesmo seletor de cores avançado. Ele oferece controle preciso em vários modos e métodos de entrada.