O que o Modo Dev da Figma significa para os desenvolvedores

Como desenvolvedor que colabora com designers no desenvolvimento de produtos, você enfrentará vários desafios que podem prejudicar o trabalho em equipe eficaz. Muitos desses problemas surgem do envolvimento limitado no processo de design ou ativos de design incompletos.

A Figma introduziu o Figma Dev Mode para resolver esses problemas, com o objetivo de oferecer suporte à colaboração perfeita de desenvolvimento de design.

Como isso afetará seu fluxo de trabalho como desenvolvedor? Mergulhe no Figma Dev Mode, explore seus recursos e descubra as melhores práticas para seu uso.

O que é o modo Figma Dev?

Figma, a popular ferramenta de design de interface, é popular entre as equipes que constroem protótipos ou criam maquetes de sites. Seu Dev Mode, que a empresa anunciou no Config 2023, visa servir como um espaço de trabalho do desenvolvedor depois que os criadores perceberam como era difícil para eles interagir com a tela do Figma.

O modo de desenvolvedor é semelhante à ferramenta de inspeção do Chrome, mas transmite a intenção do designer em uma linguagem mais familiar.

Figma's Dev Mode oferece uma variedade de recursos, incluindo inspecionar, trechos de código, plug-ins, sistemas de design, status da seção e a capacidade de comparar alterações. Esses recursos devem ajudar a aprimorar a comunicação, agilizar processos e manter um fluxo de trabalho consistente do projeto ao desenvolvimento.

Atualmente, o Dev Mode está em beta, então você precisará do aplicativo de desktop Figma beta para acessá-lo.

Comunicação perfeita com o modo de desenvolvedor

Quando você acessa os arquivos de design, o conteúdo pode parecer um multiverso de painéis, repleto de terminologias de design que podem ser difíceis de compreender e você pode nem saber por onde começar. Com apenas o toque de um botão, você se materializa em um espaço que lhe parece mais familiar.

O painel de navegação é menos apertado com menus suspensos contendo vários quadros e camadas que se expandem para mostrar diferentes seções. Esta nova versão está muito mais organizada.

Outro ótimo recurso que você pode notar é o carimbo de data/hora que indica a última edição. Você pode visualizar os detalhes da edição marcando a opção comparar alterações no painel Inspecionar. Isso significa que você pode ver e acompanhar as alterações feitas, semelhante ao histórico de versões, um conceito adequado ao seu vocabulário.

O painel Inspecionar apresenta informações relevantes para você usando uma linguagem que você entende: código. Você pode inspecionar elementos e adicione plugins mais adequados ao seu trabalho. O Dev Mode oferece vários recursos de interação, permitindo que você compartilhe suas ideias e sugestões em diferentes pontos. Esses recursos incluem bate-papo com cursor, bloco de comentários, bate-papo com áudio e um botão de compartilhamento.

Esses recursos permitem colaboração design-desenvolvimento, pois o feedback ocorre em tempo real dentro do mesmo ambiente. Como resultado, melhora a produtividade e acelera seu fluxo de trabalho.

Extração Eficiente de Ativos

Não é incomum que os designers forneçam ativos de design incompletos, o que pode ser frustrante. Os desenvolvedores valorizam os recursos e a disponibilidade de componentes para garantir a eficiência da compilação. Com o Modo de Desenvolvedor, a extração de ativos é tão fácil quanto alguns cliques.

Sempre que você seleciona um quadro, o painel de inspeção exibe uma lista dos ativos usados. Também os torna prontamente disponíveis para download em quatro formatos diferentes.

Esta ferramenta permite que você acesse ativos sem ter que ir e voltar com a equipe de design. Isso ajuda a evitar erros ou confusões, ajudando você a economizar tempo e permitindo que você se concentre em outras tarefas.

Processos de Transferência Simplificados

O Dev Mode é o melhor pacote para lidar com handoffs. Ele combina tudo o que você precisa em um único local que pode ser adaptado ao seu fluxo de trabalho. O Modo de Desenvolvedor ajuda a acelerar o processo de transferência ativando:

• Design e desenvolvimento em um ambiente
• Colaboração em tempo real
• Inspeção e trechos de código
• Integração do sistema de design
• Rótulos de status da seção (por exemplo, "Pronto para dev")

Melhores práticas e dicas para usar o modo de desenvolvedor

Você pode usar o Modo de Desenvolvimento do Figma como parte do seu fluxo de trabalho, mas como aproveitá-lo ao máximo? Experimente estas sugestões.

• Use recursos e plugins Dev para personalizar sua experiência; vincule as ferramentas que você já usa no Modo de Desenvolvedor para simplificar seu fluxo de trabalho. Do GitHub aos frameworks em sua pilha, há variedades para escolher.
• Use os recursos de inspeção e trechos de código para acessar medidas, especificações, estilos e ativos de elementos de design. Você também pode gerar código em diferentes bibliotecas usando plug-ins.
• Acompanhe as alterações de design para garantir que você não perca nada. O Comparar alterações O recurso serve como uma ferramenta de histórico de versão - certifique-se de verificá-lo regularmente.
• Aproveite todos os recursos de colaboração para comunicação e entre em contato com designers usando comentários, bate-papos com cursor e muito mais.
• Você também pode inspecionar elementos no VS Code com a nova extensão Figma VS Code. Ele também permite que você faça mais, incluindo navegação de arquivos, controle de alterações, colaboração de designer e aceleração de implementação de design, sem sair do VS Code.
• Mantenha-se atualizado sobre os recursos mais recentes, veja como eles podem atendê-lo melhor e atualize-se sempre que possível.

Adote o modo de desenvolvedor para simplificar seu fluxo de trabalho

O Figma Dev Mode deve tornar seu fluxo de trabalho mais eficiente, permitindo uma melhor colaboração entre designer e desenvolvedor com os recursos necessários.

Existem mais partes no ecossistema Figma, e a popularidade do aplicativo significa que é uma ferramenta valiosa que você pode levar de um trabalho para outro.