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 no Figma aqui.
- Entrar: Se você ainda não estiver conectado, o Figma solicitará que o faça.
Recursos principais estão disponíveis apenas para usuários conectados, como o modo desenvolvedor e a capacidade de selecionar uma moldura dedicada.
Você não será capaz de colaborar efetivamente sem uma conta.
Estrutura do Figma
Na barra lateral esquerda, você pode acessar as diferentes páginas do Figma da Twenty. É assim que 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 utilizados em todo o arquivo de design. Por exemplo, botões, ícones, símbolos, ou qualquer outro componente reutilizável. 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 usuário 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 do aplicativo ou website. Elas geralmente ainda estão em progresso.
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 ao oferecer navegação fácil no design, gerenciamento eficaz de ativos, ferramentas de comunicação eficientes, integrações de caixa de ferramentas, trechos de código rápidos, e informações importantes de camadas, unindo design e desenvolvimento. Você pode aprender 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” na borda superior direita da interface para acessar a visualização do protótipo. O modo Protótipo permite que você interaja com o design como se fosse o produto final. Demonstra o fluxo entre telas e como elementos da interface como botões, links, ou menus se comportam quando interagidos.
- Entendendo transições e animações: No modo Protótipo, é possível visualizar quaisquer transições ou animações adicionadas por um designer entre telas ou elementos da UI, proporcionando 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 uma melhor compreensão da funcionalidade ou aparência de elementos específicos.
Para obter informações mais abrangentes e orientações sobre como aprender a plataforma Figma, você pode visitar a Documentação Oficial do Figma.
Medir distâncias
Selecione um elemento, mantenha a tecla Option (Mac) ou Alt (Windows) pressionada e passe o mouse sobre outro elemento para ver a distância entre eles.
Extensão Figma para VSCode (Recomendado)
Figma para VS Code
permite que você navegue e inspecione arquivos de design, colabore com designers, acompanhe alterações e acelere a implementação - tudo sem sair do seu editor de texto.
Faz parte das extensões recomendadas por nós.
Colaboração
- Usando Comentários: Você é bem-vindo para usar a ferramenta de comentários clicando no ícone de bolha na parte esquerda da barra de ferramentas.
- Chat do Cursor: Uma característica interessante do Figma é o Chat do Cursor. Apenas pressione
; no Mac e / no Windows para enviar uma mensagem se você vir outra pessoa usando Figma ao mesmo tempo que você.
