Trabalhando com Componentes e Instâncias

Os componentes podem ajudar a reduzir erros, garantir consistência e economizar tempo – liberando sua equipe do trabalho tedioso de sincronização e atualização.

Depois de transformar um objeto ou grupo em um Componente, ele atua como mestre para todas e quaisquer cópias – ou Instâncias – feitas a partir desse componente.

Isso significa que qualquer formatação que você aplique ao Componente é imediatamente refletida em cada Instância do projeto.

No entanto, as instâncias permanecem independentes do componente em suas Coordenadas (incluindo Inverter e Girar) e Visibilidade. Isso significa que você pode realocar ou ocultar componentes sem afetar a posição ou visibilidade de suas instâncias.

Neste artigo, mostraremos como transformar qualquer objeto ou grupo em um componente, criar instâncias desse componente e demonstrar como editar seus componentes adicionando ou removendo elementos.

Criar componentes e instâncias

Criar um Componente

Para criar um Componente:

1. Selecione qualquer objeto ou grupo na página.
2. No botão Componente na Barra de Ferramentas Superior, ou na seção de Componente do Menu de Contexto ao clicar com o botão direito, escolha Criar Componente.
3. Uma vez criados e selecionados, os Componentes são identificáveis pelo rótulo, emblema e moldura roxos 'Componente'; no painel Camadas, são identificados por um destaque roxo.

Criar uma Instância

Para criar uma Instância:

1. Faça uma cópia do Componente usando Ctrl/Cmd + D, a opção Duplicar no menu de Contexto, ou simplesmente segure Alt/Option e arraste.
2. Você pode colar a Instância em qualquer página do projeto
3. Agora, altere o tamanho, texto, cor ou outros atributos de formatação do Componente
4. Depois que as alterações estiverem concluídas, clique fora da moldura de objeto do Componente – e observe as alterações se propagarem para todas as Instâncias do projeto.

Editar e adicionar objetos a um componente

Componentes e Instâncias – mesmo os feitos de objetos únicos – se comportam como grupos.

Para editar qualquer componente ou instância:

1. Selecione-o para ver a Moldura de Objeto roxa.
2. Em seguida, clique duas vezes para que a Borda de Edição do Componente mais espessa apareça em roxo.
3. Agora, você pode...

• Clicar para editar
• Adicionar um novo elemento a partir da barra lateral esquerda
• Copiar e colar um objeto da própria página

Substituir instâncias

Às vezes, você pode querer personalizar um aspecto de uma instância individual – mas ainda deixá-la conectada e responsiva ao seu componente para outras alterações e atualizações. Por exemplo, você pode querer alterar a cor de um CTA em uma página específica, mas ainda querer que esse botão sincronize com seu mestre para quaisquer alterações futuras de tamanho e texto.

É por isso que uma alteração feita localmente, em qualquer instância individual, substitui a capacidade do componente de alterar esse atributo de formatação específico (texto, cor, desfoque, cantos arredondados) no futuro.

As substituições aplicadas localmente não têm efeito em outras instâncias ou no Componente original em si. Isso permite que sua equipe seja consistente no design, mas ainda responsiva ao contexto de design específico de cada instância.

Redefinir e desanexar instâncias

Redefinindo uma Instância

Se você fez modificações e substituições locais em uma instância individual, mas decidiu remover essas substituições e reaplicar o estilo e as propriedades completas do componente, selecione Redefinir Instância.

Desanexando uma Instância

Se quiser transformar uma instância de volta em um objeto ou grupo normal, basta selecionar Desanexar Instância.

Localizar e restaurar componentes

Para organizar seus Componentes, você pode deixá-los no contexto de um design – ou criar uma página separada onde todos os seus componentes possam ficar, e fixar essa página no topo do Painel de Páginas.

Mas, de tempos em tempos, você ainda pode querer ir ao seu componente de outro lugar no seu projeto – por exemplo, enquanto trabalha em uma de suas instâncias.

E, caso você exclua acidentalmente um componente, pode precisar restaurá-lo a partir de uma de suas instâncias.

Localizando um Componente

Se estiver trabalhando com uma instância e precisar verificar – ou ajustar – o próprio componente, basta clicar na instância e selecionar Ir para o Componente no menu. Independentemente de onde a instância esteja, você irá diretamente para a localização do Componente dentro do projeto.

Restaurando um Componente

Se, por algum motivo, você excluir um Componente e deixar instâncias órfãs para trás, basta selecionar qualquer uma de suas instâncias e escolher a opção Restaurar Componente. O componente reaparecerá magicamente! Note que isso funciona mesmo para instâncias com substituições – você ainda recuperará o componente original.