Desde que anunciamos o Dev Mode na Config 2023, trabalhamos com nossos clientes para criar uma ferramenta que melhore o handoff. O Dev Mode está entrando em seu próximo capítulo e agora requer uma licença paga para ser acessado. Com essa mudança, introduzimos novos recursos e melhorias para ajudar você a trabalhar mais rápido, melhorar a colaboração e personalizar fluxos de trabalho.
Apresentando novos recursos no Dev Mode
O Dev Mode no Figma oferece aos desenvolvedores tudo o que eles precisam para navegar nos arquivos de design e transformar os designs em código. Com o Dev Mode, designers e desenvolvedores se mantêm alinhados, garantindo que nenhuma informação importante se perca no processo de handoff.
Também lançamos alguns novos recursos e melhorias no Dev Mode:
- Acelere a preparação do handoff com anotações no Dev Mode que se mantêm atualizadas com os designs
- Navegação aprimorada e a capacidade de executar plugins no Figma para VS Code
- Um novo modal para comparar alterações, permitindo ver as diferenças no código e entre duas estruturas
- Execute plugins automaticamente para você mesmo. Ou para toda a sua organização (somente no plano Enterprise)
Saiba mais sobre o que está incluído no Dev Mode →
Aprenda como obter o Dev Mode
A versão beta gratuita do Dev Mode terminou em 31 de janeiro e agora requer uma licença paga dentro de uma equipe ou organização. Seu acesso ao Dev Mode depende do plano da sua equipe ou organização, se sua equipe ou organização é proprietária do arquivo e de qual licença você tem. O acesso ao Dev Mode, como nossos outros tipos de licença, é concedido a uma equipe ou organização, e não a uma conta.
- Plano Starter: não disponível
- Plano Professional: disponível somente com uma licença de acesso total ao Design
- Plano Organization: disponível com uma licença de acesso total ao Design ou como uma licença independente por US$ 25/mês
- Plano Enterprise: disponível com uma licença de acesso total ao Design ou como licença independente por US$ 35/mês
Os usuários do plano Starter e os visualizadores de arquivos podem continuar visualizando propriedades e medidas, copiando código e exportando assets do modo de design.
Observação: se você for freelancer ou uma agência e estiver trabalhando em um arquivo na equipe ou organização do seu cliente, precisará solicitar uma licença de acesso total ao Design ou uma licença do Dev Mode na equipe ou organização do cliente. Saiba mais sobre nossas recomendações para trabalhar com clientes no Figma →
Fazer upgrade para uma licença paga
Para fazer upgrade para uma licença paga e continuar usando o Dev Mode, clique em Get Dev Mode no banner na parte superior do seu arquivo no Dev Mode e siga as instruções para fazer upgrade do seu plano ou solicitar uma licença.
Observação: todos os upgrades para o Dev Mode em planos pagos exigem aprovação do administrador. Para minimizar qualquer interrupção imediata do seu fluxo de trabalho, você pode continuar usando o Dev Mode enquanto aguarda a aprovação.
Saiba mais sobre o gerenciamento de licenças do Dev Mode como administrador →
Escolha a licença certa para você
Se não quiser atualizar para o Dev Mode, você ainda pode inspecionar e colaborar em designs. Como visualizador no modo de design, você pode inspecionar valores de propriedades e detalhes da estrutura, exportar assets, copiar trechos de código de CSS, iOS e Android, bem como definir linhas vermelhas e medir designs usando uma tecla modificadora.
Dev Mode
-
A
Capacidades avançadas de inspeção e plugins personalizados
-
B
Compare as alterações entre as versões e vincule os recursos do desenvolvedor para melhorar o handoff
-
C
Linguagens adicionais de geração de código
Visualizar acesso no modo de design
-
A
Inspecione os valores das propriedades e os detalhes da estrutura
-
B
Exportar ativos
-
C
Copie o código CSS, iOS e Android como código no menu copiar/colar quando você clicar com o botão direito do mouse em uma camada
Aqui estão algumas das outras principais diferenças entre o que você pode obter no Dev Mode versus como visualizador em um arquivo de design:
|
O que você pode fazer |
Disponível no Dev Mode | Disponível para visualizadores no modo de design |
|---|---|---|
|
Exibir espaçamento e medidas |
Ao passar o mouse |
Com a tecla modificadora |
|
Exibir valores de propriedade e detalhes da estrutura |
✓ |
✓ |
|
Exportar ativos |
✓ |
✓ |
|
Exibir geração de código CSS, iOS e Android |
✓ |
✓ |
|
Acessar inspeção avançada como comparar alterações e um playground de componentes |
✓ |
|
|
Usar anotações para adicionar informações e medidas aos arquivos |
✓ |
|
|
✓ |
|
|
|
✓ |
|
|
|
Usar integrações focadas em desenvolvedores, como Jira, Storybook e GitHub |
✓ |
|
|
Explorar componentes do design system em um playground |
✓ |
|
|
Conectar designs a tíquetes, documentação e componentes de código |
✓ |
|
|
✓ |
|