Introdução

Editado 2 meses atrás por ExtremeHow Equipe Editorial

SketchExportarRecursosFatiasDesenvolvimentoDesign de webCelularRecursosFerramentas

Sketch é uma ferramenta de design popular usada por designers de UI/UX para criar designs bonitos e funcionais. Uma característica essencial do Sketch é sua capacidade de exportar ativos e fatias, o que é crucial para desenvolvedores front-end implementarem designs em aplicativos web ou móveis funcionais. Este guia detalhado visa fornecer informações aprofundadas sobre como exportar ativos e fatias no Sketch para desenvolvimento. Cobriremos o básico e, em seguida, discutiremos tópicos mais avançados, garantindo que você tenha todas as informações necessárias para exportações de ativos bem-sucedidas.

Importância da exportação de ativos

Antes de mergulhar no como, é importante entender por que a exportação de ativos e fatias é crucial no fluxo de trabalho de design para desenvolvimento. Os ativos podem incluir ícones, imagens, botões e outros elementos gráficos que compõem a parte visual de um produto digital. Exportar esses elementos no formato e resolução corretos garante que os desenvolvedores possam implementá-los perfeitamente no projeto, mantendo a consistência e a qualidade.

Configurando seu arquivo Sketch

Antes de poder exportar ativos, é necessário garantir que seu arquivo de design esteja bem organizado. Isso inclui nomear suas camadas com precisão e agrupá-las logicamente. Esta etapa não é apenas útil para você, mas também para sua equipe de desenvolvimento, pois proporciona clareza e reduz a confusão.

Aqui estão algumas diretrizes básicas para configurar seu arquivo Sketch:

• Nomeie suas camadas: Cada camada em seu arquivo Sketch deve ter um nome descritivo. Isso torna mais fácil para os desenvolvedores identificarem qual propriedade corresponde a qual parte do código.
• Use grupos: Agrupe camadas relacionadas. Por exemplo, se você tiver um botão com texto, agrupe-os para que possam ser exportados como uma única unidade, se necessário.
• Organize páginas: Se o seu arquivo Sketch tiver várias telas, divida-o em várias páginas. Isso mantém seu arquivo limpo e reduz a rolagem.

Fazendo fatias

O que são fatias?

Fatias no Sketch permitem definir áreas específicas de seu design que você deseja exportar. Elas podem ser adaptadas às suas necessidades, garantindo que apenas as partes necessárias de seu design sejam exportadas, minimizando o tamanho dos arquivos e reduzindo a complexidade das transferências de design.

Como fazer fatias:

Criar fatias no Sketch é muito fácil. Aqui está um guia passo a passo simples:

1. Selecione o menu Inserir localizado no canto superior esquerdo da interface do Sketch.
2. Selecione a opção Fatia no menu suspenso.
3. Clique e arraste sobre a tela para criar um retângulo. Este retângulo define os limites da fatia. Você pode ajustar o tamanho arrastando suas bordas ou inserindo dimensões específicas no painel do Inspetor à direita.
4. Renomeie a fatia clicando duas vezes no nome dela no painel Camadas. Um nome significativo ajudará a distinguir a fatia durante a exportação.

Exportação de ativos

Depois de configurar as fatias ou se estiver exportando camadas individuais, você pode prosseguir para exportar seu ativo. Exportar envolve escolher o formato e a resolução corretos para suas necessidades.

Escolhendo o formato correto:

O formato que você escolhe depende de como deseja usar o ativo. Aqui está uma visão geral rápida dos formatos mais comuns:

• PNG: Ideal para imagens que requerem transparência. É um formato sem perdas, o que significa que não comprometerá a qualidade da imagem.
• JPG: Bom para imagens sem transparência e quando o tamanho do arquivo é uma consideração. No entanto, é com perdas, o que significa que alguma qualidade pode ser perdida durante a compressão.
• SVG: Melhor para imagens vetoriais, como logotipos e ícones. Arquivos SVG são independentes de resolução, o que significa que é claro em qualquer tamanho.
• PDF: Útil para documentos e gráficos vetoriais. Como o SVG, o PDF também pode ser independente de resolução.

Etapas da exportação de ativos:

1. Selecione a camada ou o grupo de camadas que deseja exportar.
2. Encontre a opção Exportar na parte inferior do painel do Inspetor à direita.
3. Clique no botão + para adicionar diferentes escalas e formatos. Por exemplo, @2x ou @3x para tela retina.
4. Especifique o formato (por exemplo, PNG, JPG, SVG) com base na sua necessidade.
5. Depois de adicionar todas as opções de exportação necessárias, clique no botão Exportar.
6. Escolha sua pasta de destino desejada, e o Sketch exportará os ativos de acordo.

Opções avançadas de exportação

O Sketch oferece algumas opções avançadas que podem ser usadas para personalizar e automatizar seu processo de exportação.

Usando predefinições de exportação:

O Sketch permite criar predefinições de exportação. Se você frequentemente exporta ativos na mesma configuração, essas predefinições podem economizar tempo. Para criar uma predefinição:

1. Defina a escala e o formato de exportação necessários para quaisquer camadas.
2. Clique no ícone de engrenagem ao lado de Configurações de Exportação e selecione Criar Predefinição.
3. Nomeie sua predefinição e ela será salva para uso futuro.

Exportação em massa:

Se precisar exportar várias fatias ou camadas de uma vez, o Sketch fornece um recurso de exportação em massa:

1. Pressione e segure a tecla Shift e selecione todas as camadas ou fatias que deseja exportar.
2. Uma vez selecionados, o painel de exportação exibirá opções para todos os itens selecionados.
3. Configure suas opções de exportação e clique em Exportar Selecionados.

Otimização de ativos para desenvolvedores

Ao exportar ativos para desenvolvimento, otimizá-los é importante para garantir o melhor desempenho em seu aplicativo:

Minimização do tamanho do arquivo:

• Use PNG para ativos que exigem transparência; caso contrário, opte por JPG para reduzir o tamanho do arquivo.
• Considere usar SVG para gráficos escaláveis, reduzindo a necessidade de exportações de várias resoluções.

Usando transferência para desenvolvedores:

Ferramentas como Zeplin e Abstract podem ainda mais preencher a lacuna entre designers e desenvolvedores. Essas plataformas permitem uma transferência mais fácil ao integrar diretamente com o Sketch, fornecendo os atributos e medições necessários diretamente dos arquivos de design.

Trabalhando com camadas exportáveis

O Sketch oferece um recurso chamado Camadas Exportáveis, que automatiza o processo de exportação para ativos usados com frequência. Veja como você pode tornar uma camada exportável:

1. Selecione uma camada ou grupo.
2. Clique no botão Tornar Exportável abaixo das Propriedades da Camada.
3. Adicione o formato e a escala necessários.
4. Sempre que você atualizar o design, as camadas exportáveis serão atualizadas de acordo, e estarão prontas para exportação a qualquer momento.

Conclusão

Exportar ativos e fatias do Sketch é um componente crítico do processo de design e desenvolvimento. Ao entender e usar as funcionalidades de exportação do Sketch de forma eficaz, você pode garantir que seus elementos de design sejam claros, limpos e totalmente preparados para o desenvolvimento. Planejamento cuidadoso e organização no início do seu processo de design economizará tempo e aprimorará a colaboração com sua equipe de desenvolvimento. Aproveitando as opções avançadas de exportação do Sketch, os desenvolvedores recebem ativos no formato e resolução exatos de que precisam, eliminando suposições e garantindo uma transição consistente do design para a implementação.

Com estas diretrizes e dicas, você estará bem equipado para lidar com a exportação de ativos e fatias no Sketch e melhorar a eficiência e qualidade das transferências de design.

  Compartilhe Este Artigo

Se você encontrar algo errado com o conteúdo do artigo, você pode solicitar uma atualização