A plataforma de design lançou recursos que visam melhor experiência de navegação e interações de qualidade entre designers e desenvolvedores. Entenda as novidades e seus benefícios práticos.
O evento anual da Figma, o Config, aconteceu no fim de junho e a principal novidade anunciada foi o Dev Mode. A última conferência presencial tinha acontecido em fevereiro de 2020 e, desde então, a companhia passou por diversas mudanças - de acordo com o próprio posicionamento da empresa.
O Dev Mode chega para reforçar o espírito colaborativo que a plataforma de design oferece aos usuários, para que todos os envolvidos em cada projeto possam contribuir na execução.
Além disso, também foram anunciadas novidades que facilitam a vida dos designers e os conectam mais ao mundo do desenvolvimento: as variáveis e a prototipagem.
Vamos entender mais a fundo cada uma das três novas funcionalidades e como elas impactam o trabalho de designers e desenvolvedores. Para você não perder nada, também separamos as principais palestras que rolaram no evento e que você pode conferir online e de graça. Confira!
O que há de novo no Figma
Apesar de ser uma ferramenta voltada para designers, mais de um terço dos acessos semanais de usuários ativos na plataforma é feito por desenvolvedores. Quem traz essa informação é a líder de produtos da Figma, Avantika Gomes.
Dessa forma, fica evidente a necessidade de se ter todo o time de desenvolvimento de produtos ainda mais integrado na construção dos processos de design: quanto menos ruídos existirem, maior será a eficiência.
Três novidades da Figma prometem melhorar a interação dos profissionais de produto, principalmente desenvolvedores e designers.
1. Dev Mode
O destaque do Config foi o lançamento do Dev Mode. Trata-se de uma área de trabalho dentro da plataforma que é dedicada aos devs. Nesta área, há toda a estrutura e todas as informações que os profissionais precisam.
O Dev Mode fornece outra visão para os desenvolvedores, diferente da que os designers têm enquanto constroem seus projetos na ferramenta. Isso significa que os dois profissionais vão trabalhar no mesmo design, mas em arquivos diferentes e que atendem às necessidades distintas de cada um.
As principais entregas do Dev Mode são:
- Tradução do design em códigos de forma mais rápida;
- Conexão com ferramentas como Jira, GitHub e Storybook para automatizar fluxos de trabalho;
- Vinculação dos sistemas de design do Figma ao código e à documentação do componente;
- Inspeção de arquivos lado a lado com o VS Code;
- Acesso às notificações do Figma sem sair do editor de código.
Durante 2023, o Dev Mode está disponível gratuitamente na versão beta para qualquer usuário que queira testar. Depois, é preciso consultar a tabela de preços de acordo com os planos oferecidos.
2. Variáveis
Da mesma forma que variáveis podem surgir durante o trabalho de codificação do desenvolvedor, a Figma levou o conceito para o design com o objetivo de agilizar os processos de criação.
A ideia é que as variáveis tragam mais flexibilidade aos designers para que seja mais simples lidar com diferentes temas, plataformas, produtos e marcas. Isso será facilitado porque o projeto se conecta à codificação e oferece suporte a design tokens.
Além da possibilidade de layouts mais interativos e flexíveis, os próprios devs poderão acessar rapidamente os códigos CSS e SVG gerados automaticamente a partir do design, facilitando sua implementação direto no código.
As variáveis também estão disponíveis na versão beta. Diferentemente do Dev Mode, os recursos oferecidos durante os testes mudam de acordo com o plano do usuário.
3. Prototipagem
As variáveis vão ajudar os designers a criar prototipagens mais dinâmicas, permitindo que os testes sejam mais efetivos. Baseada em fórmulas, a prototipagem avançada se aproxima mais da realidade do usuário e centraliza o trabalho dos designers em uma só tela da plataforma Figma.
Dessa forma, as equipes de produto podem ter acesso a análises cada vez mais fiéis e resultados mais próximos do que o usuário final vai acessar.
O recurso está disponível para testes para usuários a partir do plano Professional.
Config: o que mais rolou na conferência anual do Figma
Além dos lançamentos, rolaram palestras muito interessantes e que conectam o mundo do design com outras frentes que estão em alta no mercado, como inteligência artificial, experiências responsivas e boas práticas dentro de um time de produtos.
Confira os highlights que separamos para você.
AI e o futuro do design
Nesse painel, participaram nomes importantes do design e da tecnologia:
- Noah Levin , VP de Design, da Figma;
- Jordan Singer, fundador e CEO, da Diagram;
- Andrew Pouliot, engenheiro de machine learning, da Diagram;
- Vincent van der Meulen, engenheiro de design, da Diagram.
Alguns dos pontos abordados foram:
- Como designers podem ganhar efetividade com IA?
- Como IA vai modelar o futuro do trabalho?
- Quais os desafios e as oportunidades para a área com o uso de IA?
Você pode conferir a palestra completa aqui.
O futuro do design responsivo
Una Kravets, engenheira de relações com desenvolvedores, do Google, e Adam Argyle, engenheiro de relações com desenvolvedores CSS, também do Google, falam sobre as mudanças que o design responsivo vem passando.
Usuário no centro da experiência, novos pontos de entrada, sistemas cada vez mais funcionais: a responsividade está chegando em lugares novos.
Para entender tudo sobre as novidades do tema, assista aqui a conferência dos especialistas.
Rituais dos times modernos de produto
Shishir Mehrotra, cofundador e CEO da Coda, e Yuhki Yamashita, diretor de produtos da Figma, falam sobre a importância de implementar os rituais certos para que a equipe de produtos tenha eficácia no trabalho.
Nesta palestra, os executivos compartilham os rituais que eles desenvolveram ao longo de suas carreiras. Assim, você pode se inspirar e colocar algumas práticas para rodar na sua realidade.
Além dos materiais que selecionamos, você pode conferir todas as outras palestras que aconteceram no Config gratuitamente. Informações de qualidade nunca são demais, né? Acesse a programação completa e entenda o que faz sentido para você se aprofundar.
Conhecimento bom é conhecimento colocado em prática: lembre-se disso!
