Extrair assets, de quem é o dever?

[phsantiago]

Existe uma conversa que já tive com designers e devs sobre o dever de exportar icones, bgs, imgs, etc. Algumas pessoas defendem que o dever é do desenvolvedor por ter mais noção de como vai utilizar, outros que o dever é do designer por ter maior conhecimento de ferramentas próprias para isso.

Atualmente onde trabalho o designer se recusou recortar por nunca ter trabalhado assim, e nós desenvolvedores ficamos com esse trabalho onde compete tempo com focar em lógica, estrutura e afins.

Como vocês trabalham e o que acham correto?

[herberthenrique]

Eu gosto muito de usar o Avocode pra esse tipo de coisa :)
https://avocode.com/

[bernardodiasc]

Eu muito raramente recebi material cortado e quando recebi nao ajudou tanto pq na hora de fazer o codigo nem sempre bate. Mas é sempre muito util que o designer mande separado qq coisa extra, como fontes, icones, fotos, etc. Não precisa entregar o layout cortado, mas mandar os arquivos bem organizados precisa.

[mtsgeneroso]

Semelhante ao Avocode que o @herberthenrique citou, é o https://zeplin.io/.
Entretanto, em muitos casos isso vai depender do acordo entre devs e designers.

[kvnol]

Eu trampo, até o momento, numa agência e no começo eu exportava os assets, corria atrás das fontes etc. Mas sabemos que isso não é o trabalho do desenvolvedor, tendo em mente que o trabalho inicial dele é preparar o ambiente de desenvolvimento, servidor etc.

Fiz uma reunião com a líder dos designers falando sobre produtividade e que o correto seria o export já vir no fechamento das artes (o que, se não for bem conversado, pode acarretar os problemas que o @bernardodiasc citou e acabar dando mais trabalho) e ela concordou e aceitou. E assim tem sido, até então.

Estou até preparando um workshop (interno, por enquanto) para os designers, mostrando as ferramentas como o Zeplin (que o @mtsgeneroso lembrou) e outras técnicas de componentização, etc, que ajudam muito no desenvolvimento.

[doug2k1]

Eu acho que o desenvolvedor frontend, normalmente, deve ser o responsável por isso. Ele que vai decidir quais partes do layout vai fazer com CSS, quais vai usar SVG ou imagens, se vai usar imagens separadas ou sprites, se vai precisar de vários tamanhos da mesma imagem, se vai usar vários arquivos de fonte ou apenas os principais, etc. Isso tudo interfere em o quê e como as coisas serão exportadas. Ele vai tomar estas decisões visando performance, reuso, manutenção, quais browsers deve atender, e tudo mais.

O designer pode até fazer as extrações, por ter mais ferramental pra isso, mas guiado pelas decisões do front.

O ideal é designers e desenvolvedores estarem bem integrados, trocando ideias e combinando o jogo. O designer entregar o material mais redondo, ouvir feedback do desenvolvedor, e ajudar nessa extração e preparação dos assets. É raro isso acontecer, mas já passei por projetos assim e é bem da hora! 😄

[Oak-V]

Acredito que isso deva ser resolvido em equipe, a solução para uma pode não ser a ideal para outras, no entanto como sou muito chato 😄 deixarei aqui meus dois centavos.

Sou estudante de design e desenvolvedor front-end, então acredito estar em um campo neutro para dizer que a exportação deve, SIM, ser responsabilidade do setor de design.

Ao meu ver colocar o desenvolvedor para fazer ajustes em assets que já poderiam vir corretos do setor de design é uma grande perda de tempo, mesmo porque se você está trabalhando em equipe, designers e desenvolvedores, solicitar que os arquivos viessem de acordo com o que será necessário para o projeto não deveria ser um grande problema.

Na minha equipe infelizmente utilizamos o pacote adobe, então a solução que demos foi essa:

• Layout completo;
• Vetores separados e no formato SVG(exceto ícones de fontes, como por exemplo o fontsAwesome);
• Bitmaps separados, no maior tamanho que aparecera no projeto, e no formato PNG;
• Nome das fontes(inclusive icons fonts);

Acredito que essa solução foi a melhor para nossa equipe, devido a estes fatores:

• A partir dos SVGs podemos fazer qualquer bitmap sem perda de qualidade, alem de poder usar ele próprio em produção quando acharmos pertinente;
• A partir dos PNGs podemos fazer JPEGs de ótima qualidade e nos tamanhos que formos usar;
• Temos otimização das imagens(SVG, PNG, JPEG) integrada em nossa rotina de automação;
• Nossa ferramenta de automação(Gulp) tem uma rotina de criação de sprites caso precisemos, então basta rodar um comando para criar um sprite;
• Podemos optar por utilizar icon font ou fazer uma personalizada no icomoon;
• Podemos utilizar as fontes a partir de CDN ou local de acordo com nossa avaliação;

Ao contrario do setor de design do meu trabalho, utilizo o sketch para fazer trabalhos de UI e nele a exportação de assets é bem trivial, basta utilizar o "spec export" do plugin "measure" e pronto, as artes vão com as medidas, nome de fontes (inclusive icon-fonts), gradientes e outros elementos. Coloquei a baixo a titulo de curiosidade como ficaria um projeto exportado pelo "Measure".

Link para o demo.

Espero ter ajudado.

[felipefialho]

Totalmente de acordo @vinyfc93. Também sou da linha que não é tarefa do desenvolvedor. Mas faço sem problemas para ajudar o time quando necessário.

[theandersonn]

Uma dúvida sobre o Avocode; quando as camadas do PSD estão desorganizadas ele consegue fazer a leitura correta dos componentes?

[phsantiago]

@herberthenrique Aqui também estamos utilizando o Avocode. Pena ser pago, mas funciona muito bem! Ele ajuda muito na compatibilidade do Sketch, já que podemos importar sketchs para ele e utilizarmos em outros sistemas além do mac.

@mtsgeneroso Tentamos utilizar o Zeplin por um tempo mas não conseguíamos exportar os assets por ele, apenas nomes de fontes, cores e medidas.
Ele funciona muito bem, pena não ter o export.

Uma outra ferramenta muito boa que eu utilizava era o assets da Adobe, com ele podemos extrair assets de psds gratuitamente, sem necessitar do Photoshop.

[felipemrodrigues]

Acho que, como alguns falaram, é uma questão de acordo mesmo.

Eu, particularmente, prefiro fazer. Na minha experiência, quando é feito pelos designers, o vai e volta é muito grande porque nem sempre o designer sabe como você vai implementar algo.

Também já usei o Avocode e atualmente uso o Zeplin. Ambos são boas soluções, mas acho o Zeplin um pouco melhor.