Design de UI/UX: 6 táticas de organização no Figma

1. Apresentação: Eu definitivamente me consideraria um criativo, mas também sempre me interessei organização, processos e sistemas. Eficiência, consistência e comunicação clara são grandes benefícios que você encontrará entrar em sintonia com sua equipe na Figma. [MÚSICA] Eu sou Maddie Beard. Sou designer de UI/UX e a aula de hoje é sobre táticas para desenvolver um processo organizado com sua equipe na Figma. Normalmente, sou uma das pessoas da equipe que está reunindo todos para tentar melhorar nossos fluxos de trabalho, processos e comunicação. Como a maioria dos designers, eu amo a Figma. Então, se você também ama Figma ou se ela é nova para você, então esta é a aula para você. Trabalho profissionalmente como designer desde 2017, tanto para empresas de tecnologia, grandes quanto pequenas, incluindo a Adobe. Também trabalhei para mim mesmo como freelancer e empreendedor. Sistemas e processos são muito poderosos no ambiente de trabalho moderno. Aplicá-los na Figma não só deixará os designers na mesma página, mas também gerentes de produto, engenheiros e outros parceiros multifuncionais. Examinaremos seis táticas para que você avance em direção a um processo que funcione para você. Quando você terminar esta aula, minha esperança é que você saia entendendo como trabalhar mais inteligente e não mais difícil com sua equipe na Figma. Essa aula é para qualquer designer de uma equipe, seja você um colaborador individual ou gerencie outros designers. Especialmente se você é iniciante em trabalhar em equipe ou se percebeu que sua equipe precisa de algumas melhorias quando se trata de processos fluxos de trabalho e colaboração. Sei que você sentirá uma onda de confiança em como trabalha e se comunica depois dessas seis aulas. 2. Como esboçar sua equipe: Ao criar um processo para sua equipe, é muito bom ter em mente com quem você trabalha para garantir que o processo seja benéfico para todos os envolvidos. Nesta lição, faremos um rápido exercício de ginástica de figo para descrever suas partes interessadas e descobrir quais são suas metas quando se trata desse processo que estamos prestes a desenvolver. Você pode fazer isso sozinho ou com algumas outras pessoas da sua equipe. Se você preferir um método mais tradicional, você também pode fazer isso com notas adesivas na parede ou no quadro branco. Comece criando seções usando a ferramenta de seção para cada equipe pequena dentro de sua equipe maior. Quem vai acessar seus arquivos do Figma todos os dias ou apenas de vez em quando? Para minha equipe, são designers, gerentes de projeto, gerentes de design e engenheiros. Em seguida, pegue algumas notas adesivas e anote as metas de cada uma dessas disciplinas. Eu vou te mostrar o que eu inventei, embora o seu possa ser um pouco diferente. Os colegas designers precisam ser capazes de continuar de onde você parou sem muita explicação. Os desenvolvedores precisam saber onde encontrar designs, entender como a tela deve se comportar e como fazer perguntas ou levantar dúvidas. Os PMs precisam saber onde encontrar projetos, como fornecer feedback e como redigir requisitos com base nos projetos finais. Por fim, os gerentes de design devem ser capazes de conhecer o status de um projeto em todos os momentos, ter uma ideia de como os designers estão progredindo e se há alguma área em que eles possam precisar melhorar. Todas essas coisas também podem se aplicar à sua equipe, mas as equipes também são muito diferentes. Certifique-se de examiná-los e pensar em seu caso de uso específico. Agora é a sua vez. Vá em frente e conclua este exercício sozinho ou com alguém da sua equipe. Se você concluí-lo individualmente, você pode pensar em compartilhá-lo com alguém da sua equipe para ter ideias e trocar ideias uns com os outros. A coisa mais importante sobre esse exercício é realmente abandonar a perspectiva de que Figma é apenas para designers. Pelo menos na minha experiência, a relação entre design, engenharia e gerenciamento de produtos começa com a comunicação. Agora, ao passar por todas essas aulas, você poderá manter essas pessoas e seus objetivos em mente, assim como os seus. 3. Como configurar um arquivo de modelo Figma: Quando você está iniciando um novo projeto, você já parou de olhar para um arquivo Figma em branco ou talvez se sinta totalmente confortável começando do zero, mas cada designer da sua equipe faz isso de forma um pouco diferente última análise, resultando em desorganização a longo prazo? Bem, de qualquer forma, posso dizer experiência própria que criar um arquivo modelo Figma é uma das melhores coisas que você pode fazer pela sua equipe, e é por isso que eu tornei o projeto para esta aula. Se você é fã de consistência e velocidade, esse é o lugar perfeito para começar. Se você é fã de atalhos , tenho boas notícias para você. Na verdade, eu já criei um modelo que vou compartilhar com vocês para usar em sua equipe. Isso é algo que funcionou muito bem para mim e minha equipe, mas você pode baixá-lo na seção de recursos e fazer as alterações que quiser para seu próprio uso. Nesta lição, mostrarei cada parte dela, uma por uma. Vamos começar com a capa. Esta é a página de rosto, e o que temos aqui é, na verdade, apenas a capa que aparecerá na sua página inicial da a capa que aparecerá na Figma, como sua imagem em miniatura. Eu realmente gosto que isso seja muito simples para que alguém saiba exatamente no que está se metendo em termos de qual projeto é e qual é o status. Você pode colocar o título do seu projeto aqui. Você pode colocar o nome da sua equipe aqui. Na verdade, isso só é relevante se sua equipe de design for dividida em equipes separadas. Este é um componente, então você pode mudar o status com muita facilidade aqui. Depois de lançado, você pode alterá-lo para esse. Ou, se alguma vez se tornar irrelevante , gosto de alterá-lo para arquivamento apenas para que alguém saiba que não deveria ser como construir com base nesses projetos ou algo parecido. Isso é muito fácil de mudar aqui. Agora, vamos para o resto dessas páginas. Entrega. Eu sempre tenho essa página primeiro e não me separei por um título chamado Handoff , então o desenvolvedor sabe que isso é para eles. Há uma marca de seleção verde, que diz Ready For Dev e, em seguida, a data em que foi atualizado mais recentemente. É exatamente aqui que você lançará qualquer um dos seus designs que estejam prontos para desenvolvimento e sejam realmente completos. Essa é a primeira coisa que alguém deve notar ao descer no painel esquerdo e não colocar nada aqui se ele não estiver pronto para ser construído, esse é basicamente o resultado final. Você também pode dividir isso em várias seções, se quiser, com base em talvez fases, MVP e, em seguida, na próxima iteração. No entanto, você quer que funcione, mas eu gosto muito de ter isso no topo. Em seguida, passamos para o Design. Wireframes, é aqui que você guardará todos os seus wireframes. A próxima seção é para um crítico de design, e você pode fazer quantos quiser se tiver críticos o tempo todo. Mas eu gosto de ter isso como uma página separada , só para poder copiar e colar as telas nas quais estou trabalhando e um feedback nesta página, mantenha-a mais organizada para que, durante a criação, eu não parece uma bagunça quente. Em seguida, o Sandbox. É aí que você realmente quer manter sua bagunça quente, onde você quer guardar qualquer coisa com a qual esteja apenas brincando, talvez alguma inspiração, apenas coisas que você ainda está experimentando, É aqui que isso pode ir. Então talvez mais tarde. Isso se eu estiver criando designs e ele for forçado a talvez ser lançado após o MVP. Quero manter essas telas, gosto muito delas. Talvez sejam telas acabadas, talvez sejam apenas ideias. Vou colocá-los em Maybe Later para que possamos voltar a eles em uma iteração futura. Em seguida, pesquise. Discovery, eu poderia colocar aqui algumas análises competitivas ou qualquer pesquisa que nosso pesquisador de UX fez, mas isso poderia ser notas com marcadores, isso poderia ser capturas de tela, seja o que for. Em seguida, protótipos. Se também estamos testando protótipos para uma pesquisa , quero mantê-los nessas páginas separadas para que eles não confundam os desenvolvedores porque às vezes, pelo menos para mim, como designer, farei pequenos truques rápidos para que meu protótipo funcione bem e testá-lo. Esses tipos de coisas adicionam formas ou confundem projetos que você não quer necessariamente que os engenheiros vejam, então é por isso que eu descrevi isso especialmente como parte de nossa pesquisa. Publiquei esse modelo para a comunidade Figma, então é totalmente gratuito duplicar e alterar o que quiser, seja apenas alterando algumas páginas, seções inteiras. Você pode alterar emojis ou opções de status e até mesmo marcar a página de rosto para ficar mais alinhada com a marca da sua empresa. Na próxima lição, falaremos mais detalhadamente sobre como rotular e fazer anotações em seus designs para garantir a consistência. 4. Rotulagem e anotação de seus projetos: Todos sabemos que uma boa comunicação assíncrona é essencial para que as equipes produzam trabalhos de alta qualidade com eficiência. Em minha experiência, duas maneiras pelas quais os designers podem se comunicar de forma assíncrona são por meio de loop, sobre o qual falaremos em uma lição futura, e por meio da rotulagem e anotação de nossos designs na Figma. Rotular tem tudo a ver com dar seus colegas de equipe e ao seu futuro eu a configuração do terreno ao entrar em uma página na Figma, às vezes pela primeira vez, enquanto as anotações são mais sobre comunicação um comportamento pretendido que pode não ser óbvio apenas observando os designs. Vamos nos aprofundar nisso e analisá-lo em ação, começando com rótulos. Há três níveis de rótulos que eu uso no meu processo. Começando pelo título, depois pela legenda e, finalmente, pelo nome da tela individual. Como você viu brevemente na lição anterior, esse modelo que criei tem um componente que você pode usar para nomear e legendar seus fluxos. O objetivo do título é que ele se destaque caso alguém diminua o zoom em uma página para que possa aprimorar o fluxo que está procurando. O subtítulo ou a descrição servem mais para contextualizar o que é esse fluxo, quem deve vê-lo, o que o aciona e coisas do tipo. Há infinitas maneiras pelas quais uma equipe de design pode escolher usar convenções de nomenclatura para nomear telas individuais. Cada equipe em que trabalhei fez isso de forma um pouco diferente, mas direi que , na maioria das vezes, quanto mais específico e granular você conseguir com isso, menos confusão haverá entre designers , engenheiros e PMs. Deixe-me mostrar um exemplo de convenção de nomenclatura que usei na minha empresa mais recente para mostrar o que quero dizer, e então você pode usar esse exemplo e ajustá-lo um pouco para que funcione para você. Aqui está uma série de telas que mostram o fluxo de um novo usuário solicitando a coleta o mais rápido possível em um restaurante. Para este projeto, usamos uma convenção de nomenclatura com essa estrutura: Tipo de tela, Usuário, Tipo de pedido, Tela, Estado. Você pode ver essa estrutura em ação com todas essas telas dentro do fluxo. Dessa forma, cada tela tem um nome exclusivo baseado em uma convenção de nomenclatura consistente. Honestamente, suas convenções provavelmente nunca serão perfeitas, e tudo bem. Lembre-se dos objetivos de cada um de seus parceiros multifuncionais definir como nomear suas molduras daqui para frente. Convenções de nomenclatura consistentes também ajudarão imensamente quando as pessoas estiverem trabalhando com links para seus designs Figma em espaços externos. Mais sobre isso na próxima lição. 5. Como obter granular com o Figma Links: Nesta pequena lição, mostrarei como obter o nível certo de granularidade quando se trata de gerar e compartilhar links para seus designs Figma. Por mais que nós designers desejássemos que isso não fosse verdade, nem tudo em nossa equipe acontece na Figma. Muitas vezes, talvez seja necessário criar links para Slack, Jira, Confluence, Asana, Trello, Google Docs, Drive e muito mais. Dependendo do cenário, talvez você queira vincular o arquivo inteiro, apenas uma página ou até mesmo uma tela individual. Então, vamos ver como fazer cada um. Aqui, tenho um exemplo de algumas telas que estão prontas para desenvolvimento. Digamos que eu queira compartilhar todo esse arquivo inteiro. Isso é muito fácil. Tudo o que vou fazer é acessar o grande botão azul de compartilhamento. Depois de clicar nele, poderei compartilhar com base no e-mail de alguém ou obter um link para copiar. Normalmente, eu só recebo um link, mas também posso editar o que essa pessoa pode fazer: editar, visualizar, visualizar somente protótipos. Isso é simples. Você provavelmente já sabe como fazer isso se estiver familiarizado com o Figma. Mas e se eu quiser apenas criar um link para uma página específica? E se eu quiser enviar alguém para um lugar mais direto para que essa pessoa não precise descobrir qual página precisa ver? Digamos que nesta página aqui, eu vou apenas controlar o clique nesta página e depois clicar em “Copiar link para a página”. Agora, sempre que alguém clicar nesse link, ele vai direto para esta página e não automaticamente para a capa ou qualquer outra página. Agora, e se você quiser enviar um link para um quadro específico ou para uma tela muito específica? Vou me concentrar nesse modal aqui e vou passar o mouse sobre o título. Novamente, controle o clique e você copiará e colará como link de cópia. Outra diversão à parte aqui é que você também pode copiar como PNG e colá-lo em, talvez, como o Google Slides ou algo parecido , para que você não precise realmente exportar. Isso torna a vida muito mais fácil, curiosidade. Se alguma delas for nova para você, pratique copiar e verificar se o link está direcionando você para o lugar certo. Tudo o que falamos até agora foi sobre como melhorar a comunicação e colocar você na mesma página que sua equipe. Mas o que as anotações escritas não são suficientes? Às vezes, é muito necessário que um designer analise seus designs e fale com eles em tempo real. É aí que uma das minhas ferramentas favoritas entra em ação. Falaremos sobre Loom na próxima lição. 6. Como aumentar a comunicação Async: Uma ferramenta que realmente me ajudou a melhorar minha comunicação é o Loom. Se você ainda não ouviu falar, é basicamente um vídeo assíncrono para ajudar as equipes a reduzir reuniões desnecessárias. Neste vídeo, vou mostrar como usar o Loom para se comunicar com sua equipe como designer, mas antes de começar, eu só quero dizer que se você é alguém que fica um pouco nervoso ver a si mesmo na câmera ou ouvir o som da sua própria voz e a ideia de usar o Loom para se comunicar com sua equipe o deixa um pouco ansioso, só queria dizer que sinto você totalmente. Eu costumava ficar muito, muito nervosa diante das câmeras e mesmo quando se trata de apresentar meu trabalho, achei muito mais assustador fazer isso na câmera do que pessoalmente. Há algo sobre a câmera e a audição do som da sua própria voz que não é natural no começo, mas estou aqui apenas para encorajá-lo de que quanto mais você faz isso, mais você estará confortável e confiante. Com cada vídeo do Loom que você fizer, você ficará cada vez mais confortável e parecerá cada vez mais fácil. Nesse momento, quando eu faço um vídeo do Loom para um cliente com quem estou trabalhando ou para alguém da minha equipe, parece literalmente uma segunda natureza, eu nem penso mais nisso. Confie em mim e depois desta aula, você pode até mesmo me enviar um vídeo prático do Loom para alguém sem nenhum julgamento, apenas para superar o medo de enviar o primeiro. Descobri que isso me deu mais confiança para apresentar meu trabalho em outros cenários também, como pessoalmente ou por meio de um Zoom em tempo real, e por isso eu encorajaria você a realmente se apoiar nele se você lata. Você realmente não tem nada a perder porque Loom é totalmente gratuito para começar, você pode ter até 25 vídeos com 5 minutos duração antes de começar a pagar por uma assinatura. Se sua equipe quiser usar o Loom como um todo, isso provavelmente é algo para o qual você poderia obter um orçamento da sua empresa. Depois de ter sua conta, vá em frente e baixe a extensão para um computador Mac ou Windows. Isso permitirá que você comece a gravar com apenas alguns cliques. Quando você clica no ícone do Loom na barra de status, o aplicativo é aberto e permite que você configure a gravação que você está prestes a fazer. Primeiro, decida se você deseja gravar apenas sua tela ou sua tela e sua câmera. Escolha a parte da tela que você deseja capturar e verifique se está usando a webcam e o microfone corretos. Em seguida, comece a gravar. Você pode mover sua câmera facial a qualquer momento durante a gravação, que é muito útil, você também pode usar a pequena barra de ferramentas à esquerda para pausar ou parar a gravação ou este lápis aqui para desenhar na tela, chamar a atenção para coisas ou mostrar suas ideias ainda mais em tempo real. Incluí um link na seção de recursos desta aula para você assistir a um vídeo real do Loom que criei para uma das equipes em que trabalhei nos últimos dois anos , para que você possa realmente Vejo um problema real de design em vez de eu apenas inventar algo para o bem dessa aula. Achei que isso poderia ser útil para alguns contextos reais, um exemplo do mundo real, então fique à vontade para conferir isso se achar que pode ser útil. Tem apenas quatro minutos de duração. Agora, vamos começar a compartilhar o vídeo do Loom com sua equipe, o que é super simples. Depois de clicar no ícone de parada, seu vídeo será automaticamente interrompido e começará a ser enviado para sua biblioteca do Loom, e uma janela do navegador será aberta para mostrar isso. Tudo o que você precisa fazer é clicar, copiar o link e pronto! Você pode colar isso em qualquer lugar que quiser para mostrar à sua equipe e receber comentários. Qualquer pessoa com esse link poderá comentar diretamente no Loom simplesmente digitando um comentário ou gravando um comentário para você, mas é claro que eles também podem simplesmente deixar comentários em um tópico do Slack ou em qualquer outra coisa que funcione para sua equipe. Loom tem muitos outros recursos interessantes, mas para o propósito desta aula, ficar confortável compartilhando seu trabalho dessa maneira é a coisa mais importante. É realmente uma economia de tempo. Se você quiser praticar um pouco, grave um vídeo do Loom para mim e envie-o para o meu e-mail, maddy@maddybeard.com, e eu me certificarei de responder. 7. Como documentar seu trabalho: Você finalmente concluiu o projeto no qual você e sua equipe estão trabalhando há meses. Esse é o fim do seu processo? Não. Há mais uma etapa, mas eu recomendo fazer. Mas não se preocupe, super simples e fácil. Eu criei outro modelo para você torná-lo ainda mais rápido. Documentar todos os projetos que você fez é mais uma tática para você do que para qualquer outra pessoa da sua equipe, mas ainda é igualmente importante. É uma ótima maneira de acompanhar seu impacto para que, ao se candidatar a uma promoção ou atualizar seu portfólio, você tenha por onde começar. Vamos direto para o modelo que você pode encontrar na seção de recursos desta classe. Como você pode ver, esse modelo é basicamente para que você possa catalogar todos os projetos que trabalhou na sua empresa. Incluí espaços para um título, descrição, sua função e com quem você trabalhou, datas, horários do projeto, quando ele foi lançado, links para documentação. Como designs, docas de confluência, o projeto ao vivo, um protótipo, qualquer coisa que possa ser relevante. Bem como um lugar para colocar imagens ou apenas uma captura rápida de tela para que você saiba qual projeto é qual. Acho importante incluir todas as coisas em que você trabalhou, não apenas grandes projetos. Se um desses itens de linha não fizer sentido para um de seus projetos, você poderá se livrar totalmente dele ou alterá-lo. Eu até recomendaria incluir currículos extras nisso. Basicamente, sempre que você causou impacto na sua empresa. Talvez você tenha fundado um clube do livro para sua equipe de design, participado de um hackathon, escrito alguns artigos para site da sua empresa ou até mesmo organizado um site externo para ajudar sua equipe a se unir inclua toda e qualquer coisa assim também. Vá em frente, pegue esse modelo e comece a preenchê-lo com todos os projetos que você fez até agora. É fácil esquecer todas as pequenas coisas nas quais você gasta tempo e energia. Acompanhar isso será impactante para você, tanto profissional quanto pessoalmente. 8. Considerações finais: Parabéns por passar por essa aula. Eu realmente espero que vocês saiam com as ferramentas de que precisam para trabalhar de forma mais inteligente e não mais difícil com sua equipe na Figma. Não se esqueça de baixar os modelos dessa classe na seção de recursos. Se surgir alguma dúvida durante as aulas, fique à vontade para deixá-la na seção de discussão abaixo e eu me certificarei de responder. Muito obrigado por passar um tempo comigo hoje e espero ver você em uma aula futura ou no meu canal do YouTube. Tchau. [MÚSICA]