Trabalhar com Figma

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

1. Acesse o link compartilhado: Você pode acessar o arquivo do projeto no Figma aqui.
2. 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.

​

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.

1. 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.
2. 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

1. 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.
2. 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ê.