Se você for um desenvolvedor iOS ou Android e o design do seu projeto for desenvolvido em Figma, provavelmente você encontrará problemas ao exportar recursos: as cores não podem ser descarregadas e os ícones e imagens são inconvenientes para exportar. Neste artigo, direi como você pode tornar sua vida mais fácil e automatizar a exportação do UI-Kit do Figma diretamente para o Xcode e Android Studio.
Mais e mais equipes de desenvolvimento móvel estão mudando para o Figma. Antes, muitos (e nós também) usávamos um pacote de Sketch + Zeplin ou Figma + Zeplin. E era conveniente. Mas quando em um dos projetos adicionamos suporte para o tema escuro, a situação piorou. O Zeplin não é compatível com o tema escuro, portanto, você deve procurar soluções alternativas que o façam pensar: o Zeplin é necessário agora? Nesse caso, o Zeplin é uma perda de tempo do designer mantendo e sincronizando projetos em duas ferramentas, além de custos adicionais para a empresa.
Depois de abandonar o Zeplin e mudar para o Figma, nós (os desenvolvedores) começamos a sentir dor ao exportar o UI-Kit do Figma.
Figma, ao contrário do Zeplin, não interage com o Xcode ou Android Studio de forma alguma. Os plug-ins impedem que o Figma se integre perfeitamente a eles. Encontramos um utilitário de linha de comando que exportava cores e estilos de texto, mas não funcionou para nós - não era compatível com a exportação de imagens e um tema escuro. É por isso que escrevi meu utilitário.
Mas um pouco mais de detalhes sobre os problemas.
Por que é inconveniente para desenvolvedores móveis exportar ativos do Figma
Problema nº 1: não conseguir exportar cores
O que nós, desenvolvedores, vemos quando abrimos o UI-Kit no Figma? No caso mais simples, vários círculos de cores diferentes.
Mas se o projeto for grande e suportar um tema escuro, a paleta conterá muito mais cores:
Planejando adicionar suporte para tema escuro? Veja o quanto a paleta pode ficar maior
Figma não tem a capacidade de exportar cores. O máximo que você pode fazer é selecionar a cor e copiar o valor HEX. E se o designer mudar alguma coisa, então no caso de uma paleta grande, o desenvolvedor terá que gastar muito tempo para comparar a paleta no código e na Figma.
O nome da cor nem sempre funciona bem para copiar. Alguns designers usam o caractere "/" no nome do estilo, mas não é compatível com iOS e Android. Este símbolo é necessário para agrupar cores em grupos.
Exemplo. A cor na Figma é chamada de fundo / primária . Para desenvolvedores Android, você precisa especificar uma cor chamada background_primary e, para desenvolvedores iOS, backgroundPrimary .
Outro problema com as cores é o tema escuro. Nenhuma ferramenta de designer (Figma, Zeplin, Sketch) permite que você tenha uma paleta escura e clara ao mesmo tempo. Existem duas abordagens: criar um arquivo separado com uma paleta escura ou armazenar todas as cores em um arquivo, mas nomeá-las com um postfix, por exemplo, background_primary_day, background_primary_night.
O que queremos como desenvolvedores é ser capaz de exportar a paleta de cores do Figma diretamente para projetos Xcode ou Android Studio.
Problema nº 2: exportação inconveniente de ícones usando ferramentas padrão
Existem também várias dificuldades aqui.
Novamente, acontece que os designers usam o caractere "/" no nome dos ícones para agrupá-los. Por exemplo, se o ícone com o nome ic / 24 / tab / profile for exportado usando as ferramentas Figma padrão, obteremos esse aninhamento.
É impossível trabalhar com isso. Tenho que renomear o arquivo. O arquivo deve ser nomeado ic24TabProfile.pdf . Isso é para desenvolvedores iOS.
Para desenvolvedores Android, é comum nomear recursos no estilo snake_case . Nesse caso, o arquivo será denominado ic_24_tab_profile.xml. Mas Figma não faz isso.
Os ícones exportados do Figma deverão ser transferidos manualmente para o projeto. E não é suficiente para os desenvolvedores iOS apenas migrá-los. Cada ícone deve ser marcado com: Preserve Vector Data, Single Scale, Render as Template Image.
O que queremos como desenvolvedores é ser capaz de exportar todos os ícones Figma diretamente para projetos Xcode ou Android Studio.
Problema nº 3: exportação inconveniente de ilustrações usando ferramentas padrão
Os ícones são pequenas imagens vetoriais, geralmente em preto e branco, e podem ser recoloridos (pelo sistema ou desenvolvedor) e redimensionados. Se você ativar a acessibilidade, alguns ícones crescerão com o texto. Seu principal problema são os nomes: o caractere "/", que mencionei acima, e o fato de os desenvolvedores iOS usarem nomes camelCase e os desenvolvedores Android usarem snake_case.
As ilustrações são imagens grandes em cores que diferem em temas escuros e claros. Em um tema escuro, as cores devem ser silenciadas. Se a ilustração for muito clara, destacando-se no escuro, ela "atingirá" com uma luz brilhante nos olhos.
As ilustrações têm os mesmos problemas que os ícones, mas também existem alguns novos.
Os desenvolvedores do Android exportam ícones e ilustrações Figma como arquivos SVG e, em seguida, usando as ferramentas integradas do Android Studio, convertem os arquivos SVG em arquivos XML vetoriais. Se você precisar exportar 50 ícones ou ilustrações, levará muito tempo para convertê-los todos. Isso pode ser automatizado.
Os desenvolvedores iOS exportam ilustrações como bitmaps em três escalas. Se o aplicativo suportar um tema escuro, haverá 6 imagens no total. É assim que parece em um projeto iOS:
Agora vamos imaginar que descarregamos 50 ilustrações do Figma. Acontece que temos 50 * 6 = 300 imagens PNG, que devem ser transferidas manualmente para o projeto por meio de arrastar e soltar e, em seguida, todas elas, novamente, devem ser renomeadas manualmente. Você quer fazer isso? - não. Existem coisas mais importantes a fazer ...
O que queremos como desenvolvedores é ser capaz de exportar todas as ilustrações Figma diretamente para projetos Xcode ou Android Studio.
Por que o Zeplin não ajudou:
- não é compatível com o tema escuro;
- não permite ter várias cores com o mesmo valor HEX, mas nomes diferentes: se nomear as cores de acordo com o local de sua aplicação, pode acontecer que duas cores tenham nomes diferentes, mas os mesmos valores HEX. Por exemplo, backgroundPrimaryPressed (cor de fundo principal quando pressionado) e backgroundSecondary (cor de fundo) devem ter o mesmo valor HEX. Zeplin não vai deixar você fazer isso. Existe uma solução alternativa - altere o valor HEX para o valor mais baixo possível. Exemplo # F4F5F8 e # F4F5F7;
- requer recursos de designer adicionais para sincronizar layouts e kit de IU com Figma;
- custa dinheiro extra. Figma custa US $ 12 por designer por mês para uma organização. Se você comprar o Zeplin, serão mais $ 10,75 por designer por mês;
Como automatizamos a exportação de ativos do Figma
Percebendo que não é mais possível viver assim, procurei ver se o Figma tem alguma API ou a capacidade de estender com plug-ins para automatizar a exportação e descobri que sim. Eu tinha dois caminhos: escrever um plugin Figma ou usar a API Figma .
O plugin Figma funciona diretamente no aplicativo Figma. Usando a API Figma, você pode escrever um utilitário de console. O plugin pode não apenas ler informações de arquivos Figma, mas também fazer alterações neles. Por causa disso, os plug-ins Figma requerem que o desenvolvedor tenha permissão para editar o arquivo. Figma API só pode ler informações de arquivos Figma.
O plugin é escrito em JavaScript. Usando a API Figma, você pode escrever um wrapper em torno de qualquer coisa. Mas o plugin Figma não pode funcionar com o sistema de arquivos do computador do desenvolvedor (usuário). É por isso que não fiz isso.
Eu sou um desenvolvedor iOS, então decidi fazer um utilitário de console em Swift. Comecei com um protótipo que deveria exportar uma paleta de cores do Figma diretamente para um projeto Xcode. Em algumas semanas, ele estava pronto. Foi algo. Executei meu utilitário e após alguns segundos obtive toda a paleta no Xcode. É assim que uma exportação Figma perfeita deve funcionar :)
Depois de alguns meses, meu utilitário para exportar ativos do Figma estava pronto. Você pode encontrar um link para ele no final do artigo.
Como funciona o processo de exportação
Cores
O desenvolvedor chama o comando
figma-export colors. Se for um projeto iOS, as cores são exportadas para a pasta Assets.xcassets .
Além disso, um arquivo Color.swift é criado para que você possa usar as cores diretamente do código.
import UIKit
extension UIColor {
static var backgroundSecondaryError: UIColor { return UIColor(named: #function)! }
static var backgroundSecondarySuccess: UIColor { return UIColor(named: #function)! }
static var backgroundVideo: UIColor { return UIColor(named: #function)! }
...
}
Se for um projeto Android, as cores serão exportadas para values / colors.xml e values-night / colors.xml se o tema escuro for compatível.
valores / cores.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="button">#7701FF</color>
<color name="button_ripple">#8A80FF</color>
<color name="button_disabled">#D9DCE1</color>
<color name="text_primary">#FFFFFC</color>
<color name="text_primary_pressed">#A680FE</color>
<color name="text_primary_disabled">#FFFFFE</color>
<color name="text_secondary">#101828</color>
<color name="text_tertiary">#A5ACBD</color>
...
values-night / colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="button">#6F01EC</color>
<color name="button_ripple">#7D6AF0</color>
<color name="button_disabled">#3F334B</color>
<color name="text_primary">#E6D9F6</color>
<color name="text_primary_pressed">#E6D9F3</color>
<color name="text_primary_disabled">#544761</color>
<color name="text_secondary">#E6D9F5</color>
<color name="text_tertiary">#7B6F98</color>
...
Ícones
O desenvolvedor chama o comando Se este for um projeto iOS, os ícones serão exportados como arquivos PDF com o parâmetro Render as Template Image para a pasta Assets.xcassets . Se os ícones forem usados no UITabBar , você pode, opcionalmente, especificar Preservar dados vetoriais para suportar acessibilidade. Se for um projeto Android, os ícones serão exportados para a pasta drawable como arquivos xml vetoriais. Nos bastidores, o utilitário converte arquivos SVG em XML usando a ferramenta vd oficial (vector-drawable-tool), que é usada pelo Android Studio.
figma-export icons.
Ilustrações
O desenvolvedor chama o comando.Tudo é igual, apenas as imagens são exportadas como arquivos PNG. Se for um projeto Android, as ilustrações serão exportadas para a pasta drawable e drawable-night como arquivos xml vetoriais.
figma-export images.
Como a exportação pode ser configurada
FigmaExport tem várias configurações que são armazenadas no arquivo de configuração e passadas quando o utilitário é iniciado.
./figma-export colors -i figma-export.yaml
O arquivo de configuração especifica os parâmetros para iOS, para Android e parâmetros gerais. Também contém o identificador do arquivo Figma, onde estão as cores, ícones e figuras. O ID do arquivo pode ser encontrado na barra de endereço se você abri-lo em um navegador.
Por exemplo, aqui está o endereço de nosso UI-Kit: www.figma.com/file/GVHjNNE8PKKRf1KtnMPY9m/RTC-Key-UI-kit
O identificador do arquivo lightFileId em nosso caso: GVHjNNE8PKKRf1KtnMPY9m
Um exemplo de arquivo de configuração para um projeto iOS:
---
figma:
lightFileId: shPilWnVdJfo10YFo12345
darkFileId: KfF6DnJTWHGZzC9Nm12345
ios:
# Path to the Assets.xcassets directory
xcassetsPath: "./Resources/Assets.xcassets"
# Parameters for exporting colors
colors:
# Should be generate color assets instead of pure swift code
useColorAssets: True
# Name of the folder inside Assets.xcassets where to place colors (.colorset directories)
assetsFolder: Colors
# Path to Color.swift file where to export colors for accessing colors from the code (e.g. UIColor.backgroundPrimary)
colorSwift: "./Sources/Presentation/Common/Color.swift"
# Color name style: camelCase or snake_case
nameStyle: camelCase
# Parameters for exporting icons
icons:
# Name of the folder inside Assets.xcassets where to place icons (.imageset directories)
assetsFolder: Icons
# Icon name style: camelCase or snake_case
nameStyle: camelCase
# [optional] Enable Preserve Vector Data for specified icons
preservesVectorRepresentation:
- ic24TabMain
- ic24TabHistory
- ic24TabProfile
# Parameters for exporting images
images:
# Name of the folder inside Assets.xcassets where to place images (.imageset directories)
assetsFolder: Illustrations
# Image name style: camelCase or snake_case
nameStyle: camelCase
Um exemplo de arquivo de configuração para um projeto Android:
---
figma:
lightFileId: shPilWnVdJfo10YFo12345
darkFileId: KfF6DnJTWHGZzC9Nm12345
android:
mainRes: "./main/res"Como organizar um arquivo Figma para exportação automatizada de recursos
Para que o UI-Kit seja descarregado automaticamente, as seguintes regras devem ser observadas.
Geral
- Se uma cor, ícone ou ilustração for exclusivo para iOS ou Android em suas propriedades, o campo de descrição deve conter “ios” ou “android” . Se a cor, o ícone ou a ilustração não estiverem disponíveis para exportação, então sua propriedade de descrição terá “nenhum” . Assim, FigmaExport determinará o que deve ser exportado para um projeto iOS, o que é um projeto Android e o que não deve ser exportado.
Exemplo. O ícone de compartilhamento é diferente no iOS e no Android. As capturas de tela abaixo indicam que o ícone ic24ShareIos será exportado apenas para um projeto iOS. ios é especificado na propriedade de descrição do componente, e o ícone ic24ShareAndroid será exportado apenas para um projeto Android;
- Ícones e ilustrações devem ser componentes.
- Os estilos e componentes de cores devem ser publicados na Biblioteca da equipe.
- Somente ícones e ilustrações adicionados aos quadros Ícones e Ilustrações são exportados.
Exemplos
Arquivo Figma com UI-Kit (tema claro)
Arquivo Figma com UI-Kit (tema escuro)
Nomes de recursos
Cores, ícones e ilustrações podem ser chamados de quaisquer nomes contendo letras az, AZ e símbolos "_" e "/".
Como os nomes das variáveis no código não podem ter o símbolo “/”, o FigmaExport o substitui automaticamente pelo símbolo “_”. Em seguida, a string resultante é convertida em camelCase para iOS ou snake_case para Android.
| Nome da cor | iOS | Android |
|---|---|---|
| botão / pressionado | buttonPressed | button_pressed |
| background / primaryPressed | backgroundPrimaryPressed | background_primary_pressed |
| Nome do ícone | iOS | Android |
|---|---|---|
| ic / 24 / sound_off
|
ic24SoundOff
|
ic_24_sound_off |
| Título da ilustração | iOS | Android |
|---|---|---|
| img / demo / camera_archive
|
imgDemoCameraArchive
|
img_demo_camera_archive
|
Para consistência e conveniência, você pode, por exemplo, nomear todos os ícones em seu próprio formato - ic / tamanho / nome . Um exemplo é ic / 24 / open . E as ilustrações são img / group / title . Um exemplo é img / zero / nointernet. Você pode ler sobre cores no artigo "Designer de aplicativos: como criar e transferir um tema escuro" .
No arquivo de configuração figma-export.yaml, você pode usar expressões regulares para habilitar a validação de nome antes da exportação. Se algum recurso tiver o nome errado, o FigmaExport irá reportá-lo.
common:
colors:
# RegExp pattern for color name validation before exporting
nameValidateRegexp: '^[a-zA-Z_]+$' # RegExp pattern for: background, background_primary, widget_primary_background
icons:
# RegExp pattern for icon name validation before exporting
nameValidateRegexp: '^(ic)_(\d\d)_([a-z0-9_]+)$' # RegExp pattern for: ic_24_icon_name, ic_24_icon
images:
# RegExp pattern for image name validation before exporting
nameValidateRegexp: '^(img)_([a-z0-9_]+)$' # RegExp pattern for: img_image_name
Tema escuro
Se o seu projeto oferece suporte a um tema escuro, você precisa criar um arquivo separado com componentes de IU, que conterá uma paleta de cores escuras e ilustrações escuras.
Cores
No arquivo Figma, as cores devem ser estilizadas como estilos de cores e publicadas na Biblioteca da equipe.
Para comodidade dos desenvolvedores, é aconselhável fazer uma tabela de todas as cores, que indicará qual cor e onde será utilizada.
Ícones
O arquivo Figma deve ter um Quadro denominado Ícones. Este quadro deve conter componentes para cada ícone. Exemplo:
Ilustrações
O arquivo Figma deve ter um Quadro denominado Ilustrações, que contém os componentes de cada ilustração. Exemplo:
Resultado
Graças ao FigmaExport, nos livramos de muitos problemas ao trabalhar com o Figma. Exportar recursos agora leva segundos. Alguns exemplos de como usar o utilitário facilitou nossa vida.
1. Um dos projetos tinha 52 ícones. O designer decidiu que todos eles precisam ser trazidos ao mesmo estilo. Depois que ele os atualizou, tivemos que atualizá-los em casa.
Como os atualizaríamos manualmente: exportando todos os ícones do Figma como um arquivo zip, renomeando 52 arquivos, transferindo os ícones para o projeto, configurando todas as propriedades necessárias, certificando-se de que não se esquecem de nada. Isso levaria pelo menos uma hora.
Como os atualizamos do FigmaExport: executamos o comando figma-export icons.Após 10 segundos, todas as alterações foram apertadas, lançamos o aplicativo no simulador e vimos que todos os ícones foram substituídos.
2. Em um dos sprints, decidimos lançar um novo recurso. No UI-Kit, o designer adicionou quatro novos ícones, removeu dois ícones antigos e adicionou duas novas cores.
Em vez de passar uma hora discutindo com o designer o que ele mudou no UI-Kit, exportando ícones e cores manualmente, apenas executamos o comando figma-export colors e figma-export icons e, por meio do Git, vimos o que foi removido, o que foi adicionado e o que mudou. E eles imediatamente começaram a criar layouts usando novos ícones e cores.
3. Fizemos um recurso em que era necessário fazer onboarding avançado com 4 seções, cada uma das quais com até 7 páginas com fotos.
A exportação manual demoraria muito. Executando o comando figma-export images , em menos de um minuto, colocamos todas essas imagens no projeto, prontas para uso.
Alguns contras
- É necessário concordar com o designer sobre como armazenar cores, ícones, imagens no UI-Kit para que possam ser descarregados automaticamente.
- A exportação funciona apenas para os componentes que são adicionados à Biblioteca de equipe, portanto, os designers devem ter uma assinatura paga Figma.
Planos:
- adicione a capacidade de exportar estilos de texto,
- adicionar a capacidade de exportar imagens de bitmap para Android,
- adicionar suporte SwiftUI.
Agradecimentos especiais a Artur Abrarov e Katya Rokityan por ajudarem a finalizar o UI-Kit.
Link utilitário
Baixe FigmaExport no GitHub .
Ficarei feliz se você tentar meu utilitário. Perguntas, desejos, feedback - escreva para mim em d.subbotin@redmadrobot.com