Como construímos todos os processos de desenvolvimento e implementação do design em torno de uma ferramenta.
Oi Sou Vanya Solovyov , diretora de design do DocDoc (parte do grupo Sberbank). Hoje é a coluna Tim-Tim, na qual descreverei como nos damos bem com outras equipes.
Em 2017, nossas interfaces foram criadas no Sketch , protótipos foram montados na Marvel e o desenvolvimento foi passado através do Zeplin . Tudo estava normal para o tempo até Figma aparecer.
Este artigo não trata de comparação de ferramentas, esses artigos já foram escritos em abundância. Ela conta como a Figma ajudou em nossa empresa:
- projetar para se tornar público, e não o privilégio de um designer;
- organizar todo o processo de trabalho de design sem documentação desnecessária;
- Livre-se de ferramentas e recursos desnecessários para apoiá-los.
Para o designer
O designer não armazena mais layouts localmente, como arquivos. Não troca capturas de tela de interfaces com o gerente e não envia os layouts necessários para outros designers. O layout tem um link e está disponível para todos os participantes do processo.
Criou uma maquete → montou um protótipo interativo → o entregou ao desenvolvimento - e tudo isso por um link.
O processo de criação do design deixou de ir "além dos sete selos", tornou-se público. Um caso comum em nosso trabalho: o designer cria uma interface, outro participante da tarefa entra no layout e deixa seus conselhos na forma de um comentário.
Na Figma, é conveniente não apenas manter seus layouts, usar um sistema de design comum, mas também interagir com desenvolvedores, testadores e gerentes. Quando uma equipe de produto vê um recurso, é muito importante não produzir versões e estados de layout desnecessários para não diminuir a velocidade de toda a equipe. Andrey Goranov, designer.
Para gerente
Temos sete gerentes de produto e cada um é líder em sua própria área. Para sua conveniência, organizamos os arquivos de forma que todos tenham seu próprio projeto em Figma : uma consulta com um médico, diagnóstico, telemedicina etc. Um link é suficiente para eles, para que todos os desenvolvimentos em suas tarefas estejam à mão.
Exemplo de Projeto de Telemedicina
Eles trazem melhorias na forma de comentários para a parte necessária do layout. Decidimos em conjunto que não aceitaremos grandes edições em nenhum lugar: nem nos protocolos, nem em Jira , nem nos mensageiros. No comentário, o designer necessário é mencionado e uma notificação é enviada a ele por correio.
Tudo é armazenado on-line, não agite para que você não tenha acesso ao layout, trabalhando em outro computador. Tenho certeza de que as melhorias só podem ser colocadas na forma de um comentário no layout e elas serão feitas. Isso é muito legal. Além disso, o histórico de comentários permite restaurar eventos. Grisha Garshin, gerente
Para desenvolvedor e testador
Anteriormente, quando passávamos layouts para desenvolvedores por meio do Zeplin , eles e designers tinham uma idéia diferente sobre layouts. Os designers viram uma imagem completa das transições no Sketch e os desenvolvedores apenas uma tela específica no Zeplin . Os caras nem sempre entendiam qual tela seguir e passavam um tempo questionando.
Os desenvolvedores viram apenas um layout específico no Zeplin
Na Figma, os desenvolvedores veem exatamente a mesma imagem que os designers. Por unidade, aderimos a essa organização de layouts: transições horizontalmente entre telas, verticalmente - telas internas. Isso ajudou os caras a se sentirem "em casa" nas maquetes.
Transições horizontais entre telas, verticais - telas internas
É conveniente que todos os layouts estejam em um só lugar e todos tenham acesso, é confortável fazer uma revisão - há comentários. Os layouts são sempre relevantes e da mesma forma para todos os participantes; é conveniente separar layouts para iOS e Android . Outra coisa interessante é que você pode criar um link para uma tela específica e inseri-lo na documentação. Irina Mukhina, testadora.
Usamos os mesmos nomes de variáveis em cores e estilos, o que ajuda a não produzir entidades desnecessárias no layout da interface. Os desenvolvedores podem descarregar independentemente qualquer elemento no layout, sem perder tempo solicitando ao designer que o faça. Por exemplo, você pode obter o código svg para o ícone ou exportá-lo no formato desejado.
Quando você se acostuma a serviços online como o Figma , as ferramentas anteriores parecem primitivas e muito distantes. Sem hospedagem de arquivos, problemas de licença, instalação de software - apenas um link para a descrição da tarefa no Jira . Para obter os estilos CSS de um elemento, basta dois cliques. Peter Dorozhkin, desenvolvedor.
Para um profissional de marketing
Também realizamos tarefas de marketing na web em Figma . Eles têm seu próprio projeto, onde todos os layouts são armazenados. Portanto, os designers de marketing são mais fáceis de aderir à nossa identidade corporativa - todos os elementos estão na Figma .
Encontre as ações que você fez no outono de 2018? Pf, fácil!
Funciona bem e vice-versa: o designer de marketing desenhou ilustrações e as transferiu para a Figma . O designer do produto levou-os à sua interface e, se necessário, ajustou um pouco a forma e a cor - porque tudo é vetorial.
Atualmente, estamos trabalhando em um designer de ilustração em Figma.
É fácil explicar ao designer onde e quais elementos visuais precisam ser alterados / removidos / adicionados. Em vez de mil palavras, você pode mostrar uma vez onde e o que precisa ser feito. Os designers podem voltar a esses comentários a qualquer momento conveniente para eles. Katya Fedyunina, profissional de marketing
E quando a tarefa de marketing, mas se relaciona diretamente ao produto, o trabalho em equipe de designers de dois departamentos passa para um novo nível. Um cria um conceito visual, o outro tenta uma interface - tudo em um layout e ao mesmo tempo!
Pensamento principal
Design é o resultado do trabalho da equipe, não apenas uma pessoa. Esforce-se para garantir que cada participante possa interagir com ele confortavelmente. Afaste-se das ferramentas locais e procure aquelas que conectam você e seus processos.