Figma: Projete, protótipo e colabore em toda a empresa

Figma

Nos últimos meses, tenho ajudado a desenvolver e integrar uma instância WordPress altamente personalizada para um cliente. É o equilíbrio perfeito entre estilo, estendendo o WordPress por meio de campos personalizados, tipos de postagem personalizados, uma estrutura de design, um tema filho e plug-ins personalizados.

A parte difícil é que estou fazendo isso a partir de modelos simples de uma plataforma de prototipagem proprietária. Embora seja uma plataforma sólida para visualização e design, não se traduz facilmente em HTML5 e CSS3. Adicione todas as outras iterações e meus dias se tornarão bastante frustrantes com o progresso extremamente lento.

Uma peça do quebra-cabeça é que a agência de design simplesmente entregou os protótipos, sem fornecer nenhum tipo de folha de estilo mestre ... então estamos trabalhando para conseguir isso exportando os protótipos para dirigível, e depois traduzir o CSS para WordPress. O número de etapas necessárias e as lacunas entre as plataformas tornam o processo difícil. Sem mencionar a tentativa de simplificar as complexidades de velocidade e escalabilidade

Figma

Figma centraliza grande parte desse trabalho com uma plataforma que permite design, feedback e colaboração em cada membro de sua equipe, incluindo:

  • desenhadores - Colabore em contexto e em tempo real. Nunca se preocupe com os seus arquivos desatualizados ou substituindo o trabalho uns dos outros.
  • Stakeholders - Envie um link para coletar feedback, obter solicitações de mudança e permitir que as partes interessadas façam atualizações de cópias em seus projetos.
  • Desenvolvedores - Os engenheiros sempre têm acesso à fonte da verdade atual e podem inspecionar elementos, exportar ativos e copiar código.

Figma tem alguns recursos exclusivos:

  • Operações Booleanas - Com quatro fórmulas: união, subtração, interseção e exclusão, você pode combinar qualquer conjunto de camadas de forma com precisão.
  • Componentes - Construa de forma mais rápida e consistente com elementos reutilizáveis ​​e escalonáveis ​​em seus arquivos. Acesse camadas em cada instância para que você possa editar e substituir intuitivamente texto e imagens em linha.
  • restrições - Dimensione seu design para caber em qualquer tamanho de tela fixando objetos em um quadro pai, encaixando objetos em uma grade ou até mesmo criando componentes que se dimensionam.
  • Armações de dispositivo - Apresente seus projetos nos ambientes certos. Você pode até escolher entre o modo retrato e paisagem.
  • Interações - Dê vida aos seus protótipos, definindo interações no clique, ao pairar, ao pressionar e muito mais.
  • Sobreposições - Com o posicionamento relativo e manual, você tem controle total sobre onde e como as sobreposições aparecem.
  • Perfeição de pixel - A edição interativa a 60fps oferece visualizações e exportações ultranítidas e perfeitas em pixels.
  • Prototipagem - Crie fluxos rapidamente conectando telas e adicionando elementos como interações, transições, sobreposições e muito mais. Em vez de sincronizar com outras ferramentas, basta compartilhar um URL para receber feedback.
  • Design Responsivo - Estique seus layouts e veja como eles responderão às mudanças no tamanho da tela.

Prototipagem Responsiva

  • scrolling - Ative a rolagem horizontal, vertical ou em qualquer direção em formas individuais ou em todo o quadro pai.
  • Estilos - Sincronize cores, texto, grades e efeitos em todos os seus projetos. Mantenha menos estilos de texto e alinhe seus designs em diferentes dispositivos com os estilos de grade exclusivos do Figma.
  • Bibliotecas da equipe - Compartilhe componentes e estilos no Figma - sem necessidade de drives compartilhados ou ferramentas adicionais. Você e sua equipe controlam como e quando as alterações são implementadas com fluxos de trabalho de publicação simples.
  • Redes vetoriais - Figma criou a ferramenta caneta para ser mais intuitiva, permitindo a manipulação direta enquanto preserva a compatibilidade retroativa com caminhos.

Para se qualificar para o empresa clientes, Figma pode gerar consistência, eficiência e segurança em escala. A plataforma permite que clientes corporativos gerenciem facilmente sistemas de design com bibliotecas de equipe e a capacidade de carregar e compartilhar fontes personalizadas em sua organização. Single Sign-On, controles de acesso e registros de atividades estão incluídos.

Comece com o Figma

Figma tem uma grande seleção de tutoriais que eles mantêm em seus Canal no Youtube, aqui está um vídeo de introdução:

Figma oferece aos desenvolvedores a capacidade de inspecionar, copiar, exportar ativos e copiar CSS diretamente do arquivo de design. Você também pode ativar seus fluxos de trabalho existentes com integrações, incluindo dirigível, Avocode, Jira, Dropbox, ProtoPiee Princípio para Mac. Eles também têm uma API robusta.

Experimente o Figma gratuitamente

O que você acha?

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.