O Flowstep e o Figma são ferramentas complementares, não concorrentes. O Flowstep ajuda-o a gerar e explorar ideias de interface rapidamente; o Figma é onde refina, colabora e desenvolve o trabalho pronto para produção. Usar as duas em conjunto dá-lhe o melhor de ambas.
Como copiar um design do Flowstep para o Figma
1
Selecione um ou mais ecrãs no Flowstep
Clique num ecrã para o selecionar, ou selecione vários ecrãs para os copiar todos de uma vez. Certifique-se de que a seleção fica destacada na tela.
2
Copie a seleção
Prima **Cmd+**⇧+C no Mac ou **Ctrl+**⇧+C no Windows. O Flowstep mostra “Preparing your design. Stay on the current tab.” (a preparar o design; mantenha o separador atual) enquanto trabalha. A cópia fica concluída em instantes.
3
Cole no seu ficheiro do Figma
Mude para o Figma e abra o ficheiro onde quer colocar o design. Prima Cmd+V no Mac ou Ctrl+V no Windows para colar. Os ecrãs do Flowstep aparecem na tela do Figma, prontos a editar.
Copiar para o Figma usa a área de transferência do navegador, por isso o navegador tem de permitir o acesso do Flowstep à área de transferência. Se vir um erro de permissões, permita o acesso à área de transferência nas definições do navegador e tente de novo. Mudar de separador durante a cópia interrompe a transferência; mantenha o separador do Flowstep em foco até a cópia terminar.
Importar um design do Figma
Também pode fazer o caminho inverso e levar um frame do Figma para o Flowstep como ecrãs editáveis. A importação está disponível para todos: ligue a sua conta do Figma uma vez e, depois, importe a partir de uma ligação ao frame.1
Ligue o Figma
Ligue a sua conta do Figma ao Flowstep a partir das definições. O Flowstep usa a autorização do Figma para ler os ficheiros a que tem acesso.
2
Copie a ligação de um frame no Figma
No Figma, clique com o botão direito no frame que pretende e escolha Copy link to selection. Também pode copiar a ligação de uma página inteira para importar de uma só vez todos os frames de nível superior.
3
Importe para o Flowstep
Use a opção de importação do Figma na barra de ferramentas do Flowstep e cole a ligação. O Flowstep converte o frame em elementos editáveis na sua tela. Cada importação adiciona um novo ecrã. Importar o mesmo frame de novo não substitui a importação anterior, por isso elimine o ecrã antigo se já não precisar dele.
O que é importado
O Flowstep recria um frame do Figma como elementos nativos e editáveis, e não como uma imagem plana. Uma importação traz:- Frames e as respetivas camadas aninhadas
- Texto, incluindo estilos por carácter, como peso, cor e negrito
- Cores das suas variáveis do Figma
- Preenchimentos de imagem, bem como ícones e formas SVG
- Sombras projetadas e interiores, e desfoques de camada e de fundo
- Traços a tracejado e a pontos
A organização do ficheiro tem de ter o Figma ligado. Se um frame não for importado, o Flowstep mostra uma mensagem com indicações sobre o que fazer a seguir. Por exemplo, pode ter de voltar a ligar o Figma se a autorização tiver expirado, ou de aguardar e tentar de novo se o Figma estiver a limitar pedidos ou a responder devagar. Se for um modelo da Comunidade, duplique-o primeiro para a sua equipa e cole a nova ligação.