O Flowstep e o Figma são ferramentas complementares, não concorrentes. O Flowstep ajuda você a gerar e explorar ideias de interface rapidamente; o Figma é onde você refina, colabora e desenvolve o trabalho pronto para produção. Usar as duas juntas oferece o melhor dos dois mundos.
Como copiar um design do Flowstep para o Figma
1
Selecione uma ou mais telas no Flowstep
Clique em uma tela para selecioná-la, ou selecione várias telas para copiá-las de uma só vez. Verifique se a seleção está destacada no canvas.
2
Copie a seleção
Pressione **Cmd+**⇧+C no Mac ou **Ctrl+**⇧+C no Windows. O Flowstep mostra “Preparing your design. Stay on the current tab.” (preparando seu design; permaneça na aba atual) enquanto trabalha; a cópia termina em instantes.
3
Cole no seu arquivo do Figma
Vá para o Figma e abra o arquivo onde você quer colocar o design. Pressione Cmd+V no Mac ou Ctrl+V no Windows para colar. As telas do Flowstep aparecem no canvas do Figma, prontas para edição.
A cópia para o Figma usa a área de transferência do seu navegador, então o navegador precisa permitir o acesso da Flowstep à área de transferência. Se aparecer um erro de permissão, permita o acesso à área de transferência nas configurações do navegador e tente novamente. Trocar de aba durante a cópia interrompe a transferência; mantenha a aba do Flowstep em foco até a cópia terminar.
Importar um design do Figma
Você também pode fazer o caminho inverso e trazer um quadro do Figma para o Flowstep como telas editáveis. A importação está disponível para todos: conecte sua conta do Figma uma vez e importe a partir de um link de quadro.1
Conecte o Figma
Conecte sua conta do Figma ao Flowstep nas suas configurações. O Flowstep usa a autorização do Figma para ler os arquivos aos quais você tem acesso.
2
Copie o link de um quadro no Figma
No Figma, clique com o botão direito no quadro desejado e escolha Copy link to selection (Copiar link da seleção). Você também pode copiar o link de uma página inteira para importar todos os seus quadros de nível superior de uma vez.
3
Importe para o Flowstep
Use a opção de importação do Figma na barra de ferramentas do Flowstep e cole o link. O Flowstep converte o quadro em elementos editáveis no seu canvas. Cada importação adiciona uma nova tela: importar o mesmo quadro novamente não substitui a importação anterior, então exclua a tela antiga se não precisar mais dela.
O que é importado
O Flowstep recria um quadro do Figma como elementos nativos e editáveis, não como uma imagem achatada. Uma importação traz:- Quadros e suas camadas aninhadas
- Texto, incluindo estilos por caractere, como peso, cor e negrito
- Cores das suas variáveis do Figma
- Preenchimentos de imagem, além de ícones SVG e formas
- Sombras externas e internas, além de desfoques de camada e de fundo
- Traços tracejados e pontilhados
A organização do arquivo precisa ter o Figma conectado. Se um quadro não for importado, o Flowstep mostra uma mensagem com instruções sobre o que fazer em seguida. Por exemplo: reconecte o Figma se a sua autorização tiver expirado; aguarde e tente de novo se o Figma estiver limitando as requisições ou respondendo devagar; ou, no caso de um modelo da Comunidade, duplique-o para o seu time primeiro e cole o novo link.