A Figma nasceu na web, um começo incomum para uma ferramenta de design, mas algo que sentimos que o design de produto desesperadamente precisava. Com um único link, os designers podiam colaborar no trabalho em andamento, compartilhando explorações iniciais, em vez de proteger os designs até que se sentissem "polidos". Conforme mais e mais designers adotaram a Figma e essa maneira de trabalho multiplayer, começamos a ver uma ampliação natural de uso em equipes e disciplinas, especialmente com desenvolvedores.

Hoje, sabemos que em nossos planos pagos, mais desenvolvedores visitam a Figma do que designers. Também sabemos que entender as necessidades e desafios dos desenvolvedores é fundamental para tornar a Figma um lugar onde o desenvolvimento de produtos possa ser mais eficiente, colaborativo e expressivo.

Os desenvolvedores têm fluxos de trabalho e preferências exclusivas. Desde desenvolvedores front-end trabalhando com sistemas de design maduros, até engenheiros de sistemas de design construindo componentes, até aqueles que constroem layouts de conteúdo e exportam ativos em seu trabalho com designers de marca, toda equipe deseja trabalhar com o menor atrito possível.

Com o Dev Mode, vemos uma grande oportunidade de fornecer aos desenvolvedores o que eles precisam de forma rápida e eficiente - assim como fizemos com os designers quando começamos a construir a Figma. Quanto mais fácil for para as equipes projetar, documentar, encontrar e implementar designs de alta fidelidade sem perder de vista o trabalho e uns aos outros ao longo do caminho, melhores serão os resultados do produto. Estamos animados para dar esse primeiro passo na interligação de design e desenvolvimento na Figma, e mal podemos esperar para ver o que as equipes farão em seguida.

Embora a tela Figma seja ótima para exploração de design livre, pode ser confusa se você entrar em um arquivo de design que está faltando informações necessárias para a implementação. O Dev Mode é como um inspetor de navegador para seu arquivo de design e aproxima conceitos de design - formas, camadas e grupos - de conceitos de desenvolvedor como código, ícones e tokens. Ao pairar e clicar ao redor da tela Figma, você pode encontrar e exportar todas as informações necessárias, como medidas, especificações e ativos, e descobrir contexto adicional de seu sistema de design. Assim como o Chrome Dev Tools, o Dev Mode se inspira em outras ferramentas de desenvolvimento para criar um ambiente imediatamente familiar para você.

O código no Dev Mode é totalmente redesenhado e personalizável para qualquer idioma em que você esteja trabalhando. Sabemos que o código não é útil fora da caixa. É um ponto de partida para que você não precise começar do zero toda vez. Agora você verá um modelo de caixa CSS, uma sintaxe moderna com uma visualização em árvore e poderá alternar entre unidades de dimensão para corresponder à sua base de código.

Com o plugin do GitHub, você pode vincular arquivos, problemas e solicitações pull a componentes e designs da Figma, para que sempre tenha o contexto necessário em um só lugar.

A construção de produtos requer uma cadeia de ferramentas robusta, mas pular entre bibliotecas de design, base de código e outras ferramentas de gerenciamento de projeto pode criar ineficiências, especialmente quando componentes e nomes de estilo não correspondem ao que está no código, ou a equipe não rastreia e documenta tarefas. O Dev Mode visa torná-lo mais produtivo conectando as ferramentas que você usa e seus componentes de código ao arquivo de design.

Os plugins permitem que você estenda a funcionalidade da Figma para flexionar como sua equipe trabalha. Você pode lidar com o gerenciamento de projetos com Jira, Linear e GitHub, para que você e seu designer saibam o que está acontecendo em seus respectivos processos. O Storybook ajuda você a se referir ao que está acontecendo em sua base de código, no contexto do próprio design. E plugins de geração de código da AWS Amplify Studio, Google Relay e Anima ajudam você a personalizar a saída de código - você pode até criar o seu próprio com base em seu fluxo de trabalho exclusivo.

"Há um nível muito maior de confiança quando as pessoas estão na mesma ferramenta - a informação é muito mais atualizada, você não está baixando alguns arquivos para o seu computador ou perseguindo coisas por e-mail. É um processo muito mais colaborativo." disse Jori Lallo, co-fundador da Linear.

Os sistemas de design estão se tornando mais poderosos com a introdução de tokens de design por meio de variáveis. Os tokens são como pequenos pedaços de dados de IU que podem ser usados em todo o design e código. Agora eles aparecem no Dev Mode, então é imediatamente claro o que é necessário para começar a construir. Você também pode adicionar links relacionados a objetos na tela para fazer referência à documentação ou ao que há em seus plugins.

Mesmo com a fusão das fases de design e desenvolvimento do processo de desenvolvimento de produtos, os artefatos de cada um - arquivos de design e código - permanecem distintos. Até agora, não tem sido fácil navegar pelos arquivos de design, selecionar componentes específicos e suas propriedades ou mesmo saber o que mudou desde a última vez que você olhou para um arquivo. Agora, os designers podem simplesmente rotular uma seção como "pronta para desenvolvimento" e enviá-la diretamente para você, sem criar uma página ou arquivo separado. O suporte Diff permite comparar as mudanças entre diferentes versões de um quadro e ficar atualizado.

Com a extensão VS Code, você pode trazer o poder do Dev Mode para o editor de código para revisar designs, ver notificações e comentários e ficar por dentro das mudanças sem nunca ter que sair do seu ambiente de codificação. A extensão VS Code também completa automaticamente o código com base no design que você está inspecionando, ajudando você a trabalhar muito mais rápido.

O Dev Mode e o Figma para VS Code agora estão em beta e gratuitos para todos os usuários até o final de 2023. A partir de 2024, você precisará de um plano pago para acessar o Dev Mode. Se você é um editor em um plano pago hoje, o Dev Mode estará incluído. Sabemos que existem desenvolvedores que podem não precisar da pilha completa de recursos da Figma, então estamos lançando duas novas opções de plano para eles. A partir de 2024, você terá a opção de comprar apenas o acesso ao Dev Mode por US $ 25 por assento por mês na Organização e US $ 35 por assento por mês no Enterprise.

Este é apenas o primeiro passo para tornar a Figma melhor para os desenvolvedores. Com suas sugestões do beta do Dev Mode e do VS Code, estamos animados para expandir a funcionalidade, incluindo mais maneiras de melhorar a colaboração entre designer e desenvolvedor, extrair especificações e impulsionar mais alinhamento entre design e código.