Figma é uma ferramenta de design de interface colaborativa que ajuda a superar a barreira de comunicação entre designers e desenvolvedores.
Este guia explica como você pode colaborar com o Figma.
Acesso
- Acesse o link compartilhado: Você pode acessar o arquivo do projeto Figma aqui.
- Entrar: Se você ainda não está conectado, o Figma solicitará que você faça isso.
Recursos chave estão disponíveis apenas para usuários conectados, como o modo desenvolvedor e a capacidade de selecionar um quadro dedicado.
Você não poderá colaborar efetivamente sem uma conta.
Estrutura do Figma
On the left sidebar, you can access the different pages of Twenty’s Figma. Assim elas estão organizadas:
- Página de componentes: Esta é a primeira página. O designer a utiliza para criar e organizar os elementos de design reutilizáveis usados em todo o arquivo de design. Por exemplo, botões, ícones, símbolos ou quaisquer outros componentes reutilizáveis. Serve para manter a consistência em todo o design.
- Página principal: A segunda página é a página principal, que mostra a interface completa do projeto. Você pode pressionar Play para usar o protótipo completo do aplicativo.
- Páginas de recursos: As outras páginas são tipicamente dedicadas a recursos em andamento. Elas contêm o design de recursos ou módulos específicos da aplicação ou site. Elas estão tipicamente ainda em andamento.
Dicas úteis
Com acesso somente leitura, você não pode editar o design, mas pode acessar todos os recursos que serão úteis para converter os designs em código.
Use o modo Dev
O modo Dev do Figma aumenta a produtividade dos desenvolvedores, proporcionando fácil navegação no design, gestão eficaz de ativos, ferramentas de comunicação eficientes, integrações de caixa de ferramentas, trechos de código rápidos e informações chave de camadas, superando a lacuna entre design e desenvolvimento. Você pode saber mais sobre o modo Dev aqui.
Mude para o modo “Desenvolvedor” na parte direita da barra de ferramentas para ver especificações de design, copiar CSS e acessar ativos.
Use o protótipo
Clique em qualquer elemento na tela e pressione o botão “Play” no canto superior direito da interface para acessar a visualização do protótipo. O modo de protótipo permite que você interaja com o design como se fosse o produto final. Ele demonstra o fluxo entre telas e como elementos de interface como botões, links ou menus se comportam quando interagidos.
- Entendendo transições e animações: No modo de protótipo, você pode visualizar quaisquer transições ou animações adicionadas por um designer entre telas ou elementos da UI, fornecendo instruções visuais claras aos desenvolvedores sobre o comportamento e estilo pretendidos.
- Esclarecimento de implementação: Um protótipo também pode ajudar a reduzir ambiguidades. Os desenvolvedores podem interagir com ele para obter um melhor entendimento da funcionalidade ou aparência de elementos particulares.
Para mais detalhes e orientações sobre como aprender a plataforma Figma, você pode visitar a Documentação Oficial do Figma.
Medir distâncias
Selecione um elemento, segure a tecla Option (Mac) ou Alt (Windows), depois passe o mouse sobre outro elemento para ver a distância entre eles.
Extensão do Figma para VSCode (Recomendado)
Figma para VS Code permite navegar e inspecionar arquivos de design, colaborar com designers, rastrear mudanças e acelerar a implementação - tudo sem sair do seu editor de texto.
É parte das nossas extensões recomendadas.
Colaboração
- Usando Comentários: Você é bem-vindo a usar o recurso de comentários clicando no ícone de balão na parte esquerda da barra de ferramentas.
- Chat de Cursor: Um recurso legal do Figma é o chat de cursor. Basta pressionar
; no Mac e / no Windows para enviar uma mensagem se você vir outra pessoa usando o Figma ao mesmo tempo que você.
