Você já esteve em uma reunião remota para discutir mudanças em um design quando - no meio - percebeu que vários membros de sua equipe estão trabalhando com versões antigas e desatualizadas de seu guia de estilo? A fonte do título é diferente, os botões estão com a cor errada e o design mais recente mudou o ícone da cesta de um carrinho de compras. A conversa sai dos trilhos e, em vez de discutir o novo fluxo de login, você está gastando minutos preciosos tentando direcionar as pessoas para o arquivo correto: app_screens_final-Final-FINAL-noreally-v4.sketch .

Não podemos continuar vivendo assim.

Colaborar em uma equipe - especialmente uma equipe remota - apresenta desafios únicos. Colocar vários designers, desenvolvedores, administradores e interessados ​​na mesma página e procurar a mesma versão de um arquivo de esboço é uma luta. E se você quiser fazer alterações em um dos estilos de tipografia em seus designs, é um desastre garantir que todos eles sejam atualizados simultaneamente.

InVision LABS Craft é um poderoso conjunto de plug-ins para Sketch e Photoshop que agiliza o fluxo de trabalho e a colaboração com equipes de design e desenvolvimento. O Craft torna mais fácil criar e manter uma biblioteca comum de ativos e estilos, anotar e marcar designs em tempo real, fazer upload instantaneamente para o InVision e sincronizar atualizações para a nuvem.

I. Instale o Craft para Sketch e sincronize com a nuvem

Vamos começar instalando o Craft. Embora Craft seja um poderoso conjunto de plug-ins disponíveis para Adobe Photoshop e Sketch, vamos nos concentrar em usá-lo com o Sketch nesta peça. Primeiro, verifique se sua versão do Sketch está atualizada e instalada na pasta Aplicativos do Finder. Então vá para https://www.invisionapp.com/craft para baixar o Craft Plugin Manager.

Craft é um conjunto de plug-ins poderosos para otimizar o fluxo de trabalho de sua equipe.

Abra o arquivo e siga as instruções para instalar o Craft Plugin Manager. Uma vez feito isso, o ícone Craft aparecerá entre os ícones Quick Launch no cabeçalho do sistema operacional. Clique nele e escolha instalar cada plugin para a plataforma Sketch. Craft verificará se sua versão do Sketch está atualizada e oferecerá a opção de reiniciar rapidamente o programa depois de ativar os plug-ins desejados.

O Craft Manager aparecerá no cabeçalho do sistema operacional.

Uma das principais atrações do Craft é que as equipes podem sincronizar estilos e ativos compartilhado em plataformas de nuvem populares como Dropbox, Google Drive e Box, garantindo que todos trabalhem com a mesma biblioteca.

Você e sua equipe precisarão ter contas no InVisionApp. Configure a sincronização fazendo login no site InVision, navegando até seu perfil de usuário e abrindo a guia de sincronização. Lá você pode selecionar a plataforma de nuvem preferida usada por sua equipe para compartilhar arquivos. Siga as instruções e conceda permissão para o InVision sincronizar com a nuvem do seu dispositivo.

Agora que você instalou e configurou o Craft com sua nuvem compartilhada, pode começar a definir estilos compartilhados para sua equipe.

Abra um documento no Sketch e verifique o novo painel Craft que apareceu ao lado do painel inspetor. Aqui você encontrará os plug-ins instalados que ativou no Craft Manager: Sync, Library, Data, Duplicate, Freehand e Stock. Para o propósito deste artigo sobre colaboração em equipe, estamos principalmente preocupados com Sync, Library e Freehand.

Os plug-ins do Craft aparecerão ao lado do painel de inspeção.

II. Construa uma biblioteca de estilos e recursos compartilhados para sua equipe

Uma das minhas coisas favoritas sobre Craft é sua biblioteca de plugins, que permite gerar um guia de estilo de seu design e compartilhar estilos e recursos com sua equipe. Quando há muitos membros da equipe trabalhando em seus próprios arquivos, garantir que as alterações sejam atualizadas simultaneamente no ambiente de trabalho de todos pode ser uma grande dor de cabeça. A biblioteca torna esse processo perfeito.

Guia de estilo com um clique

A criação de um guia de estilo é uma daquelas etapas necessárias no processo de design e desenvolvimento que muitos designers adiam o máximo possível. Dependendo da complexidade do seu design, do número de objetos e estilos de texto e da velocidade das alterações do design, a tarefa pode ser assustadora. O recurso do guia de estilo de um clique do Craft é que ele gera estilos de texto e cores de seu documento com o pressionar de um botão e até mesmo salva em sua própria página de símbolos, eliminando suas desculpas.

Comece clicando no complemento Biblioteca e vá para a guia 'Documento'. Lá, você verá a opção de gerar uma página de guia de estilo daquelas que já existem em seu documento.

Gere um guia de estilo com um clique.

Voilà —Craft gerou um guia de estilo para você em uma ação simples, adicionou-os aos estilos e cores de texto do seu documento e até mesmo criou uma página onde eles estão perfeitamente organizados para distribuir aos seus desenvolvedores! Que hora de estar vivo!

Dê uma olhada rápida para ver se há algo que você gostaria de renomear e dê um tapinha nas costas por economizar horas de trabalho criando um guia de estilo da maneira mais difícil. Todas as alterações que você ou sua equipe precisam fazer podem ser enviadas e instantaneamente sincronizadas com sua nuvem compartilhada.

Como mágica, você tem um guia de estilo legível e estilos de documentos que são compartilhados em sua nuvem.

Biblioteca de ativos

Como designer, sou um grande defensor da manutenção de uma biblioteca de padrões para componentes reutilizáveis, além de um guia de estilo para acelerar o processo de design e minimizar inconsistências. O plugin Craft Library facilita a adição de cabeçalhos, rodapés, menus de navegação, ícones, botões e outros símbolos a uma biblioteca de ativos global. Faça uma alteração em um, envie-o para sua equipe e todos trabalharão com o mesmo conjunto de símbolos. Para quem se preocupa com padrões, Craft é uma revelação!

No painel Plug-ins da biblioteca, mude para a opção 'Compartilhada', onde você encontrará a opção de importar uma biblioteca ou criar uma nova. Depois de criar pelo menos uma biblioteca, você verá uma lista suspensa de categorias disponíveis, bem como a capacidade de adicionar suas próprias. Sugiro a criação de categorias separadas para os ícones e botões, bem como uma para os cabeçalhos / rodapés e outra para os ativos reaproveitados, como um avatar do usuário.

Depois de estabelecer sua organização, selecione qualquer símbolo no documento, como um ícone, e clique no espaço [+] no painel para adicioná-lo à sua biblioteca.

Organize ativos globais, como cabeçalhos, ícones e botões e, em seguida, coloque as atualizações na biblioteca compartilhada.

À medida que você e sua equipe interagem no design, você provavelmente fará alterações nesses compartilhamentos. Basta clicar em 'enviar alterações' quando tiver atualizado os ativos e todos os vinculados à equipe receberão uma notificação de atualização instantânea com uma mensagem de 'puxar alterações'.

O Craft avisa quando os recursos da biblioteca são atualizados, para que cada membro possa obter as alterações e ficar em sincronia.

III. Use Sync and Freehand para compartilhar designs e obter feedback

Sincronizar telas instantaneamente com o InVision

Já se foram os dias de ciclos intermináveis ​​de documentos PDF por e-mail - o InVision torna mais fácil criar protótipos clicáveis ​​e compartilhá-los com toda a equipe. O fluxo de trabalho padrão do InVision é exportar arquivos de imagem de seu projeto e carregá-los em um protótipo no site. O plugin Sync no pacote Craft elimina a maioria dessas etapas.

Com o Sync, você pode adicionar e atualizar pranchetas diretamente para um protótipo em sua conta de equipe. Basta navegar até a função Sync no painel Craft e selecionar o destino na tela. A partir daqui, você pode até iniciar um novo protótipo e compartilhá-lo com sua equipe para feedback.

A sincronização torna tudo incrivelmente fácil quando se trata de manter seus protótipos InVision atualizados.

Compartilhe seus protótipos por meio de um convite ou link, e é muito fácil para seus colegas de equipe clicarem em seu protótipo e adicionar comentários. Os desenvolvedores podem explorar os detalhes do projeto com o modo de inspeção, economizando horas de trabalho de especificação e a necessidade de atualizar os arquivos à medida que o projeto muda.

O modo de inspeção torna mais fácil para seus colegas de equipe ver os estilos em seus designs e até mesmo obter o código CSS.

Convide sua equipe para comentar, anotar e desenhar em seus projetos

Craft aborda outro ponto problemático para equipes colaborativas remotas que não têm o luxo de se reunir na mesma sala com um quadro branco. Com o Freehand, os designers podem capturar partes ou todo o seu documento de design e sincronizar instantaneamente com um projeto compartilhado no InVision, onde todos na equipe podem fazer anotações, comentar e até mesmo desenhar.

Em seu documento, navegue até o painel à mão livre e escolha criar um projeto à mão livre a partir de seu documento ou pranchetas selecionadas.

Crie um espaço à mão livre para colaboração de forma livre.

Depois que o plugin gera um espaço à mão livre, você pode compartilhar o link com qualquer pessoa e começar a colaborar. As ferramentas são bastante diretas e o Freehand mantém registro de quem diz o quê, facilitando o trabalho em conjunto com perfeição. Conforme você atualiza seus designs, você pode usar o painel para atualizar o espaço à mão livre instantaneamente. Agora, ninguém está confuso sobre qual dos quinze ícones exatamente sobre os quais o chefe está falando.

É quase como estar lá.

IV. Recursos extras para seu próprio fluxo de trabalho

Enquanto eu estava muito animado com o potencial do Craft para colaboração em equipe, vi que o pacote vem com outros add-ons que são muito atraentes para simplificar o fluxo de trabalho de design individual.

Adicione conteúdo fictício da web rapidamente

Apenas alguns exemplos de 'espere, o que esse texto lorem ipsum significa?' Durante as reuniões, antes de você admitir que precisa usar conteúdo real em seus modelos finais. Mas quem quer ter que recorrer à internet em busca de fotos, manchetes, postagens e outros conteúdos de ficção para colocar em seus designs e maquetes? Após o terceiro ou quarto nome, pode ser difícil criar usuários falsos com sua própria imaginação.

Data é um plug-in adorável no pacote Craft que torna a substituição de conteúdo uma brisa de ar fresco. Selecione uma forma em seu layout e navegue até o plugin de dados, onde você pode soltar fotos de suas próprias pastas ou adicionar instantaneamente imagens Unsplash aleatórias de qualquer categoria. Você pode até criar suas próprias consultas personalizadas para usar continuamente.

Pegue conteúdo fictício instantaneamente e coloque-o em seus designs sem sair do Sketch.

Adicionar texto como títulos e conteúdo do corpo é tão fácil - basta selecionar a caixa de texto desejada e escolher entre as várias categorias na guia 'Tipo'. Minha equipe gosta especialmente de usar manchetes da categoria “Motivação” como conteúdo de teste.

Sua vida terá muito mais significado com Craft.

Os dados também permitem adicionar conteúdo de qualquer site, caso precise de algo menos aleatório. O processo é essencialmente o mesmo, e você pode ter seus projetos embalados com dados reais e relevantes em nenhum momento.

Gere colunas e linhas de conteúdo com espaçamento uniforme

Outra razão pela qual você precisa do Craft em sua vida é que ele torna a duplicação de objetos e grupos de objetos em linhas e colunas perfeitamente ordenadas e uniformemente espaçadas de forma incrivelmente rápida. Esqueça o tedioso copiar e colar. Basta selecionar um objeto ou grupo e, em seguida, especificar o número de colunas e linhas, bem como o espaçamento.

Especifica o número de colunas e linhas, bem como o espaçamento.

Estou especialmente satisfeito com a forma como ele se integra ao plug-in de dados - duplicar o conteúdo fictício gerado pelos dados fornecerá a você bits novos e gerados de conteúdo em nenhum momento. Precisa de uma grande grade cheia de fotos do usuário? Considere isso feito. Você deve configurar uma lista de conteúdo para a página de um artigo com fotos, títulos e visualização? Não há problema.

Depois de inserir algum conteúdo fictício de Data, faça uma lista completa instantaneamente.

Adicionar arquivos diretamente da iStock e Getty Images

Você já passou do estágio de conteúdo de preenchimento e precisa de uma imagem para o herói alta qualidade para a maquete? A última adição ao Craft Suite é o plugin Stock, que permite vincular seu desenho Sketch diretamente à sua conta com iStock ou Getty Images. Encontre imagens relevantes dentro do painel e adicione-as ao seu design com um único clique. Menos uma interrupção no seu fluxo de trabalho de design!

Coloque imagens de alta resolução de sua conta em seu design sem ter que abrir um navegador.

conclusão

As equipes de design estão sempre procurando maneiras de melhorar seu fluxo de trabalho colaborativo e manter todos em sincronia. Sketch e InVision mudaram o cenário para designers de interação. O Craft aumenta o potencial dessas ferramentas para sua equipe, agilizando e conectando os processos de todos, independentemente da distância. Com o conjunto de plugins Craft for Sketch, você pode economizar horas de trabalho de design.