---
title: Trabalhar com Figma
info: Learn how you can collaborate with Twenty's Figma
image: /images/user-guide/objects/objects.png
---

<Frame>
  <img src="/images/user-guide/objects/objects.png" alt="Header" />
</Frame>

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 Figma [aqui](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty).
2. **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.

<Warning>

Você não poderá colaborar efetivamente sem uma conta.

</Warning>

## 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](https://www.figma.com/dev-mode/).

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.

1. **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.
2. **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](https://help.figma.com/hc/en-us).

### 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](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension) 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

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