Manual de organização de arquivos
Flows e Snippets
Para fins de organização, os nossos produtos (Letras e Letras Academy) são quebrados em pedaços menores, com categoria e subcategoria, que chamamos respectivamente de flow e snippet.
Flow
Flow é o caminho completo que o usuário precisa percorrer pra cumprir um objetivo.
Por exemplo, no Academy, temos o flow "Aulas particulares" , onde o usuário chega procurando um professor particular, passa pelo processo de contratação, agenda as aulas e pode acompanhar e gerenciar as aulas agendadas.
No figma, cada flow deve ter um nome único e tem sua própria pasta.
Snippet
Snippet é um trecho do caminho determinado por uma das tarefas que o usuário precisa completar pra seguir em frente.
Por exemplo, no "Aulas particulares", temos o snippet "Listagem de professores", que é onde o usuário pode ver os professores disponíveis, suas informações básicas, filtrar pelo idioma desejado e selecionar um pra seguir para o próximo passo: o snippet "Perfil do professor".
Cada snippet deve ter um nome único, mesmo entre produtos diferentes. Geralmente cada snippet é dividido em dois arquivos, um para a versão web e outro para a versão app, e ambos os arquivos ficam dentro da pasta do flow que o snippet pertence.
Projects (Pastas)
Dentro do nosso time, podemos organizar nossos arquivos por figma projects, que são basicamente pastas. No nosso time temos projects para flows, para nossas bibliotecas, para arquivos do time de visual. Também temos um projeto para arquivos de trabalhos em andamento (o draft) e outra para ideias que salvamos para depois (a gaveta).
Flow projects
Cada flow tem seu próprio project, eles devem ter nomes únicos, claros, sendo próximos dos termos que todos os times usam pra se referir à essa sessão do produto e, quando possível, parecido com os termos que temos na interface, sempre com o nome do produto na frente.
Nomenclatura do flow project: <Nome do produto> - <Emoji><Nome do flow>
Todos eles também precisam ter uma descrição rápida a respeito das principais funcionalidades do flow.
Cada project de flow tem dois arquivos de userflow (app e web), um arquivo de discovery, e os arquivos separados para os snippets que existem nesse flow.
🟡 Draft
O project de draft contém os arquivos que ainda estão no processo de design e não devem ser usados pra consulta. O ideal é que não designers não abram esses arquivos, e por isso eles seus nomes começam com "🟡 Draft:", para que ninguém abra eles por engano quando estiver usando o campo de busca do figma pra encontrar um arquivo de handoff.
🔴 Gaveta
O project gaveta são para arquivos que precisaram ser deixados pra depois, ideias boas que estão fora dos nossos planos e outras coisas que podem surgir no processo de design que são consideradas valiosas e resolvemos guardar pra usar de referência no futuro. Assim como os arquivos de draft, o ideal é que não designers não abram esses arquivos e, neste caso, seus nomes começam com "🔴 Gaveta:".
Esses arquivos não devem ser usados para referência para o desenvolvimento.
Kósmos & Letras Style Guide
Aqui estão nossos guias de estilo, componentes, templates, ícones, ilustrações, grids e outros elementos que compõe a construção de protótipos, tudo separado por produto e depois por plataforma.
Projects do time de Visual
O time de visual também usa o figma e tem uma estrutura de organização de projects similar, mas diferente no sentido de que esses projects agrupam arquivos por categorias mais focadas no tipo de arquivo e não por flows.
Nomenclatura do project de visual: VS - <Academy/Letras> - <nome>
Templates
Esses são templates para criação de arquivos do time de produto, sejam relacionados à arquivos de draft ou à ferramentas que fazem parte do processo de design.
Arquivos
Arquivo de Snippet
Dentro do project de cada flow temos os arquivos para cada snippet que existe dentro dele. Com as versões web e app de cada um separadas em arquivos diferentes.
Cada snippet também deve ter um nome único, claro, sendo próximo dos termos que os times usam pra se referir à essa seção do produto e, quando possível, parecido com os termos que temos na interface.
Nomenclatura do arquivo: <Nome do snippet> - <Web/App>
Páginas
Os únicos tipos de páginas permitidos num arquivo de snippet são: Produção, Handoff, Thumbnail e páginas vazias sem nome para separar os tipos de página. Devem ser listadas nessa ordem e todas devem estar com o background #000000.
Thumbnail
A página de thumbnail contém só o componente de thumbnail pra definir a imagem que aparece para esse arquivo nas listagens de arquivo. A thumbnail deve ter no campo de título o mesmo nome que o nome do arquivo, mas sem a descrição da plataforma (" - App"/" - Web").
Produção
A página de produção contém a última versão do snippet que foi desenvolvida e que está em produção. Assim que uma nova versão for ao ar, o responsável pela criação daquela versão precisa atualizar a página de produção com prioridade máxima.
Handoff
As páginas de handoff contém os prótótipos criados a partir das issues do time de produto. Elas devem estar listadas da mais antiga pra mais nova e devem ser exluídas quando essa versão for pra produção.
Elas devem conter apenas as páginas com alterações, com outras páginas para contextualização só quando necessário.
Cada página deve começar com um componente de nota no nome do responsável, com um link pra issue mãe e uma breve descrição das alterações.
Nomenclatura da página de handoff: Handoff #Nº da issue mãe
Wireflow
Todas as novas entregas devem vir em formato de wireflow, um pra iOS e outro pra Android nos arquivos app, e, um para mobile e outro para desktop nos arquivos web. Sempre com as versões light e dark mode, todos na mesma página.
O Wireflow precisa descrever um ponto de íncio do fluxo e ter uma resposta para todos os inputs possíveis do usuário.
Eles devem ter notas com descrições de comportamento de tudo o que o e o wireflow não conseguirem demonstrar.
Protótipo interativo
Todas as novas entregas devem ter protótipos navegáveis com o máximo de comportamentos possíveis.
Também devem ter notas com descrições de comportamento que o protótipo não conseguir demosntrar e links referência.
Pequenos updates
Para atualizações pequenas que acontecerem depois da entrega, o designer deve adicionar uma nota com a descrição da alteração e data. Marcando o responsável quando tiver com um comentário do figma. Lembrando que alterações grandes devem virar novas issues.
Assets
O componente de assets deve ser usado para linkar todas as imagens usadas nos wireflows. Se forem diferentes em cada tema, link pras duas.
Layers
Auto layout deve ser usado sempre que possível, inclusive nas frames externas de páginas.
Não vamos mais nomear as frames de páginas com números. Elas devem ter nomes descritivos e se possível, seguindo os títulos das páginas na UI. Não temos regra de nomeclatura pra outras layers, elas devem estar organizadas.
Conectores, blocos de userflow e outras layers não páginas devem ficar em um grupo bloqueado para não atrapalhar o inspect.
Userflow
link
Dentro de cada pasta de flow, temos dois userflows, que um diagrama representando todo o caminho, decisões do usuário e respostas do sistema que podem acontecer dentro desse flow. É um mapa do caminho que o usuário percorre pra cumprir o objetivo do flow. Temos um para web e outro pros aplicativos e eles estão sempre pinnados dentro da pasta, aparecendo antes de qualquer outro arquivo.
Nomenclatura do arquivo: <Nome do flow> - <Web/App> Userflow
Arquivo de discovery
A etapa de discovery é onde vamos entender e definir o problema a ser resolvido.
Temos também um arquivo para os entregáveis de discovery, dentro dele teremos os entregáveis produzidos na etapa de descoberta de tarefas relacionadas à esse flow em específico. Como benchmarks, personas e resultados de pesquisas.
Nomenclatura do arquivo: <Nome do flow> - Discovery
Arquivos de draft
Esses arquivos sempre devem estar dentro do project "Draft" e usar a thumbnail específica para arquivos de draft.
Não existem outras regras pros arquivos de draft. Divirta-se 👍
Nomenclatura do arquivo: 🟡 Draft: <Nome do Snippet> - <app/web>
Arquivos de gaveta
Esses arquivos sempre devem estar dentro do project "Gaveta" e usar a thumbnail específica para arquivos de gaveta.
Nomenclatura do arquivo: 🟠 Gaveta: <Nome do Snippet> - <app/web>
Histórico de Atualizações
N/A
11/11/1111
N/A
N/A
N/A
Atualizado