github-actions[bot]
8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
66 lines
4.4 KiB
Plaintext
66 lines
4.4 KiB
Plaintext
---
|
|
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ê.
|