Xamarin.Forms e Zeplin: acelere seu projeto no processo de desenvolvimento

Por Arnstein Johansen 23 de outubro de 2018Xamarin.Forms

Traduzido por Adriano D’lucca ⠀

Zeplin e Xamarin.Forms

Trabalhando em uma pequena equipe com mudanças frequentes de design, a extensão para a Zeplin nos ajuda a implementar rapidamente o projeto. Também é conveniente devido à sua capacidade de gerar um ResourceDictionary para Xamarin.Forms com todas as suas cores e estilo.

Se você está desenvolvendo para a web ou criando aplicativos móveis, o Zeplin é uma ótima ferramenta que pode aumentar sua produtividade, tampando a lacuna entre design e código. Zeplin é um serviço disponível gratuitamente, mas com uma limitação de projeto ativa.

Extensões

As várias extensões fornecidas facilitam a tradução do design (exportado do Sketch ou do Photoshop) para o código. Extensões são oferecidas para Swift, HTML e outros, e como o Zeplin foi aberto para todos os desenvolvedores, uma extensão para o Xamarin.Forms foi possível.

A extensão Xamarin.Forms Zeplin foi criada para facilitar o desenvolvimento de desenvolvedores Xamarin. Ele gera elementos com base no design do Zeplin e, em seguida, imprime elementos XAML e classes CSS prontos para serem colados em páginas XAML ou arquivo CSS.

Com o Xamarin.Forms 3.0, o CSS tornou-se outra ferramenta na caixa de ferramentas para os desenvolvedores do Xamarin. Embora o suporte a Xamarin.Forms para CSS ainda não esteja completo, a maior parte do que você esperaria está lá. Você ainda pode criar aplicativos da maneira antiga , no entanto, se o CSS é preferível aos estilos XAML, vale a pena explorar.

Como usar o Zeplin com a extensão Xamarin.Forms
  • Primeiro, você precisa adicionar a extensão ao projeto.
  • Supondo que você tenha um ou mais projetos no Zeplin, acesse a página inicialda extensão .
  • Clique no Add to Zeplin botão à direita.
  • Selecione um dos seus projetos e a extensão é adicionada ao projeto.
  • Abra o projeto, selecione uma página e clique em um elemento. Ambos os estilos XAML e CSS estão disponíveis para cada elemento.

A extensão oferece elementos XAML prontos para StackLayout / Frame, Image e Label. Observe que, para que a imagem seja identificada corretamente, elas precisam ser exportadas como ativos.

Além do XAML, você verá o CSS e poderá optar por adicioná-lo a um arquivo CSS ou adicioná-lo em linha usando a classe StyleSheet. Leia mais sobre como usar CSS em seu aplicativo Xamarin.Forms no documento da Microsoft .

No canto inferior direito, você verá a saída da extensão.

Se você for para a guia Styleguide, também poderá encontrar um ResourceDictionary para download com cores e estilos.

Elementos de cor e estilo autogerados para XAML.

A extensão Xamarin.Forms e outras podem ser encontradas nas Extenções Zeplin .

Este guest post foi contribuído por Arnstein Johansen, um engenheiro de software norueguês interessado em desenvolvimento móvel e web. Ele trabalha para a Itema AS , uma agência de consultoria em Trondheim, Noruega e duas vezes vencedora do melhor local de trabalho na Noruega. Arnstein fez vários aplicativos Xamarin, três deles junto com seus colegas de equipe em seu último cliente, Evry . Xamarin tornou possível usar seu IDE (Visual Studio) e idioma (C #) favoritos ao criar o cliente  e o back-end. Arnstein gosta de compartilhar seu conhecimento através de seu blog ( codejunkii.com ) e de palestras em conferências ou workshops.

⠀⠀

Fonte: blog.xamarin.com/xamarin-forms-and-zeplin

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *