Neste artigo, contaremos como desenvolvemos não um esférico no vácuo, mas uma biblioteca real de componentes e como conseguimos ignorar o perfeccionismo excessivo (não em detrimento do projeto) para
economizar 25% do orçamento .
Esta é a primeira parte do artigo, na qual haverá muitas informações práticas chatas, mas concretas, sobre a criação de componentes em Figma, bem como as nuances, armadilhas e realidades da criação de projetos com um orçamento limitado em um cenário provincial =)
O início do trabalho foi precedido por um longo período de negociações e trabalho analítico, com base no qual um ToR detalhado foi escrito com uma divisão em blocos funcionais (dinâmicos) e estáticos. Detalhes sobre isso podem ser encontrados
neste artigo . Se você ainda não está trabalhando nesse TK, é altamente recomendável. Experiência extremamente positiva para toda a equipe de desenvolvimento e o projeto como um todo.
Mas voltando ao design
Vale ressaltar que o Figma lançou uma atualização muito agradável no auge do trabalho, portanto não haverá uma palavra sobre estilos de cores e textos. Esperamos que um leitor atento aprenda algo útil para si mesmo sem essas nuances. Além disso, se você não tiver um entendimento básico dos princípios de organização de componentes na figma, recomendamos uma pesquisa no habr.com (existem muitos materiais excelentes sobre o assunto).
Antes de iniciar o design com pixel perfeito, na maioria dos casos, criamos um conceito de design. Geralmente, é um tipo de layout bruto (do lado visual), que deve ser cuidadosamente pensado em termos de comportamento em diferentes telas e levar em conta a funcionalidade principal. Isso é necessário para evitar surpresas desagradáveis no futuro quando um bloco esquecido não estiver incorporado nos layouts aprovados. Portanto, um conceito é mais um layout de rascunho de páginas reais do que uma placa de estilo, que, no entanto, fornece um conjunto básico de estilos e
layouts básicos
para páginas futuras.
Nesse caso, o conceito foi o seguinte:
Em geral, nada complicado. A única coisa que exigirá atenção especial (nesta página) é uma prévia dos lotes (esses cartões), que consistem em um conjunto ilimitado de posições (essas linhas estão nos cartões) e em um conjunto diferente de botões para várias funções.
Ainda existem algumas nuances inexplicáveis, mas concordamos em ser honestos e sem posturas desnecessárias; portanto, contaremos como elas surgiram no processo.
Então - tudo está preparado. Temos o TK com funcionalidade prescrita para entender a operação dos componentes; styleboard como um conceito para entender o estilo dos elementos; o padrão para nomear componentes para transferência indolor do design para o layout e um número infinito de tranqüilizantes de todos os tipos e cores ...
Você pode começar a bisbilhotar na figura
O algoritmo de desenvolvimento do sistema de design será um movimento de componentes simples e indivisíveis (átomos) para componentes mais complexos e, para uma exibição visual da hierarquia, desenharemos cada próximo nível de complexidade em uma nova coluna.
Text
Para começar, definiremos elementos indivisíveis: um conjunto padrão de títulos, um parágrafo e estilos individuais para o texto do botão, um estilo para espaços reservados e nomes de filtros e outra coisa. Não se esqueça de transformar tudo em componentes!
Montserrat médio como fonte principal e Montserrat em negrito para títulos e destaques.
Vá para os ícones. Nós os tiramos da biblioteca gratuita "Feather"
Ícones
Cada ícone é colocado em um contêiner de 24x24 pixels e alinhado no centro ao longo de dois eixos (apenas no caso). Todos os ícones são chamados para provar, mas com a adição do prefixo “i”, para que não haja duplicatas nos nomes, e agrupe-os para não entupir o painel com camadas.
Também teremos ícones de redes sociais e e-mails adicionais para notificações de entradas incompletas, redefinição de filtro, um asterisco para as posições necessárias no lote, um chevron para dropdowns e uma marca de seleção para caixas de seleção e batttans de rádio. Todos esses ícones serão menores e mais leves que os principais, mas por uma questão de padronização, também os colocamos em um contêiner 24x24.
Em seguida, passamos para componentes mais complexos. Vamos posicioná-los à direita e montá-los a partir de elementos da primeira coluna e paus.
Caixas de seleção
Vamos começar com algo mais simples.
Caixas de seleção e botões de opção em contêineres de 16x16 pixels. Para cada estado, crie um componente separado. Isso é necessário para que, no design das páginas (montadas a partir desses componentes), possamos substituir um estado por outro através do painel INSTANCE.
Fazemos o mesmo com todos os elementos dinâmicos que possuem estados de orientação, ativos, passivos, etc.
Contador e controle deslizante
Também precisamos de um contador para exibir a quantidade de algo. Serão dados diferentes dependendo da sua localização. Fazemos uma moldura 20x20 e uma figura no centro.
Os botões para os objetos deslizantes também são úteis para nós. Nós os criamos 30x30 e colocamos os ícones da viga condicionalmente no centro. Criamos componentes para diferentes estados.
Árvore de catálogo
Recentemente, começamos a aderir ao princípio de reutilizar os mesmos componentes em diferentes dispositivos para não produzir entidades desnecessárias e manter a pureza do código (o máximo possível). Portanto, fazemos a árvore do catálogo, começando na exibição móvel. TK nos diz que o nível máximo de aninhamento de uma árvore é 3.
Começamos a partir do primeiro nível: um quadro com uma altura de 60 pixels e uma largura sem dimensão (ele se adaptará ao contêiner), o ícone é alinhado verticalmente e a 20 pixels da borda esquerda, o nome do ramo será do componente h4. Tudo isso é colado no lado esquerdo no painel CONSTRAINS. Cole o número de lotes (também h4) e a viga no lado direito.
Redesenhe o componente para a ramificação aberta. Organizamos o segundo nível do catálogo da mesma maneira, mas porque não reutilizaremos esses estilos em nenhum lugar - basta clonar as linhas do parágrafo em incrementos de 20 pixels. Como no Photoshop - sem problemas. Da mesma forma para o terceiro nível + vara + mudança de cor da linha.
A seguir, uma série de compromissos contínuos
Menu
O painel de guias para todos os tipos de menus e guias que colocamos em um contêiner de 60px de altura e os próprios itens foram colocados no centro. Olhando para o futuro, dizemos que essa abordagem não é verdadeira, porque se você deseja obter um layout totalmente de borracha, cada guia deve ser colocada em um quadro separado. Caso contrário, não funcionará para definir o comportamento das guias em relação uma à outra. Mas nós, conversando com os desenvolvedores, com um coração calmo, conseguimos.
Listas
Com o tempo, lembrei-me de um tanto quanto listas numeradas e não numeradas. Para adicionar um número, retornamos à primeira coluna e criamos um componente numérico de dois dígitos.
Entradas e filtros
Chegou o momento em que violamos nossas próprias regras de hierarquia e colocamos os componentes e componentes constituídos por esses componentes (* _______ *) em uma coluna (lembre-se: a regra era colocá-los à direita, retirando-os em um separado). Era possível ficar sem isso, mas decidimos que o bloco (filtro ou entrada) e seu menu suspenso compreenderão um componente em diferentes estados. Como Salvor Hardin disse: "Nunca permita que a moralidade o impeça de fazer a coisa certa".
Fizemos esse compromisso pelo seguinte motivo: a composição da entrada e, por exemplo, caixas de seleção devem pertencer ao mesmo nível de dificuldade (uma coluna), mas a lista suspensa na entrada pode conter caixas de seleção. Nós realmente queríamos que as listas suspensas formassem uma única unidade com entrada - por uma bela sombra.
Você pode dizer que teve que colocar a entrada com as listas suspensas em uma coluna separada (próxima coluna) e estará certo. Mas para nós, no processo, ficou óbvio não imediatamente. E desde que o transportador foi lançado, nós, impulsionados pelo orçamento e prazos, fomos forçados a violar essa lei não escrita de construção de sistemas de design atômico. Deixe-me contar por experiência própria - nem um único designer ou desenvolvedor sofreu com isso.
Voltaremos ao plano prático.
Entradas
Dentro do quadro de 60px, colocamos o componente de parágrafo como um espaço reservado. Quando a entrada está em foco, o espaço reservado se move para cima. Damos a ele um recuo de 20 pixels e colamos na borda esquerda. Na borda inferior do bloco, adicione uma linha de 2 pixels (use retângulos!), Cole verticalmente na parte inferior. Horizontal, você pode selecionar Escala. Mais à direita, em diferentes situações, podemos ter uma unidade de medida ou uma divisa suspensa. Adicione isso e outro e cole na borda direita. Agora tudo está bem esticado e todas as cópias desse componente herdam o comportamento do pai.
Adicionamos componentes para diferentes estados: cursor sobre entrada do cursor, foco, menu suspenso aberto, válido e inválido. Uma das maneiras de criar estados rapidamente é: clonar um componente, pressionar opção + comando + b ou "instância filho" - através do menu de contexto. Editamos o que precisamos e o transformamos em um novo componente. Não esqueça de renomear.
Com os filtros, a situação é semelhante e, com exceção do estado padrão e a adição de uma cruz para redefinir valores, eles não diferem das entradas. Esqueceu - as entradas vão uma após a outra horizontalmente, portanto, na borda direita, adicionamos uma linha cinza de 2px. Não se esqueça de colocá-lo na borda direita.
Botões
Os botões do nosso projeto serão de dois tipos.
Primeiro: os botões habituais que serão usados em qualquer lugar, exceto nos cartões de pré-visualização do lote. A anatomia deles é a seguinte: um quadro de 30 pixels de altura com fundo transparente, um retângulo de tamanho semelhante com um arredondamento de 15 pixels (no painel CONSTRAINTS, definimos o valor de Escala nos dois eixos) e o componente btn-txt que alinhamos em todos os eixos no centro (para cada bombeiro, decidimos repentinamente aumentar a altura do botão?) Em um componente separado, selecione o estilo do botão ao passar o mouse e outro para pressionar.
O segundo tipo de botão deve se encaixar no estilo dos cartões de visualização e ter ícones. Além da função push, os botões também reportam através de um contador retirado da mesma coluna (perdão), por exemplo, quantas vezes o botão foi pressionado.
Nós os fabricamos a partir de retângulos com 60px de altura, a largura dependerá do conteúdo. Incorporamos e centralizamos os componentes do ícone e btn-txt em todos os eixos. Nós impomos o componente do contador no ícone para que seu canto inferior esquerdo coincida com o centro do ícone. Os botões serão organizados um após o outro, portanto, adicionamos de cada lado uma faixa cinza de 2 pixels para separação visual. Desnecessário, em seguida, desligue-o. Nesse caso, no componente de visualização do lote.
Voltaremos a esse nível de componentes, mas por enquanto vamos em frente.
Chapéu
Vá para a nova coluna e comece a coletar o cabeçalho.
Tomamos como base o quadro dos mesmos sessenta pixels de altura. Na parte inferior, adicione uma linha cinza de 2 pixels. Pegue a largura de 1440 px, porque coletaremos todos os modelos de área de trabalho com essa permissão. Já estamos seguindo o esquema padrão: alinhamento com o centro do recuo vertical e horizontal de 20 pixels, logotipo, abas de menu, pesquisa (foi montado por analogia com a entrada na segunda coluna).
O lado direito do cabeçalho deve conter um painel de informações com as informações da conta atual e até mesmo uma lista suspensa. Retornamos à coluna anterior e coletamos esse bem dos ícones e do texto (você já sabe como).
Para examinar uma lista suspensa em qualquer modelo, anexamos dois componentes ao mesmo tempo (lista suspensa aberta e fechada). Um é desligado cutucando o olho no painel da camada. Não se esqueça de desmarcar o conteúdo do clipe no painel BACKGROUND.
Em seguida, simplificamos o cabeçalho para telas menores cortando o desnecessário. Agimos de maneira comprovada. Clonamos, desanexamos, excluímos o desnecessário, adicionamos o ícone do hambúrguer, renomeámos e transformamos em um componente.
Para 320 pixels, podemos mover ligeiramente o recuo entre os ícones.
Agora é a hora de definir a borracha. Para fazer isso, selecione nosso componente “Header-desktop” e vá para LAYOUT GRID. Mude para os alto-falantes. O número de colunas nesse caso não importa, o principal é que a grade deve ser (para tarefas diferentes, tente grades diferentes) Margens de 20 pixels. Em seguida, configuramos o comportamento dos componentes aninhados do cabeçalho.
Em mais detalhes sobre as configurações da borracha dos modelos, falaremos na segunda parte deste artigo.
Hamburguer
Cada vez que projetamos a navegação para um hambúrguer, começamos a inventar muletas, mas não neste caso. Acabou que temos tudo o que precisamos para um hambúrguer, com exceção do botão Fechar. Reunimos os componentes necessários em um monte e os transformamos em um novo componente.
Visualização do lote
Vá para os cartões de visualização do catálogo. Em primeiro lugar, ficou óbvio que você precisa criar componentes separados para os botões na tela do celular (os meios da figura não permitem centralizar os ícones se você simplesmente ocultar o texto do botão). Vamos para a coluna com botões quadrados e terminamos os estados para telas estreitas. Adicione uma grade de três colunas.
Para os próprios cartões, primeiro criamos o componente do item de linha e os blocos com informações básicas. Nós os agrupamos para que uma simples reconstrução possa alcançar uma exibição móvel.
Neste ponto, para não inflar um artigo já imenso, fazemos uma breve pausa. Na segunda parte, falaremos sobre como os componentes acima são agrupados e formam modelos de página responsivos.
Estamos confiantes de que essa abordagem ainda não é o ideal; portanto, ficaremos felizes em fazer comentários sobre o tópico (especialmente se você souber usar a figura de maneira mais produtiva) - qualquer parte de sua experiência nos ajudará a melhorar nossos processos de negócios. Rodada.