O Principle é uma ferramenta de design de interação que permite dar vida aos seus designs e protótipos digitais.

Há um grande número de interações disponíveis, desde rolagem ou deslizamento, gerenciamento de vários estados, criação de animações personalizadas e transições superelaboradas. Saiba mais sobre o Principle aqui.

Depois de conectar o Figma à sua conta Principle, você pode importar facilmente seus designs do Figma e começar a criar animações avançadas.

Com o Figma e o Principle, seus designs vão se tornar realidade.

Neste artigo, abordaremos como:

1. Conectar o Figma e o Principle
2. Importar um design do Figma
3. Desconectar sua conta Figma do Principle

Conectar o Figma e o Principle

Você precisará ter uma conta criada no Figma e no Principle para conectar os dois. O Principle está disponível no momento apenas para macOS.

Quando for importar um design do Figma pela primeira vez, será solicitado que você insira os detalhes da sua conta do Figma para autorizar a conexão. Isso só ocorrerá na primeira vez em que você usar a opção Importar do Figma.

1. Abra o Principle.
2. Acesse Arquivo no menu principal e selecione Importar do Figma:
3. Ou clique no botão Importar:
4. Selecione Figma nas opções:
5. Clique no botão Conectar ao Figma:
6. Isso abrirá uma janela do navegador. Se não estiver conectado, será solicitado que você faça login na sua conta Figma:
7. Clique em Permitir acesso para confirmar:
8. Uma caixa de diálogo solicitará que você retorne ao Principle:

   Observação: se você não for redirecionado diretamente para o Principle, poderá fechar a janela de autorização e retornar ao Principle. Embora possa não parecer, a conexão foi estabelecida com sucesso.

Importar um design do Figma

Agora que os dois aplicativos estão conectados, você poderá importar seus designs diretamente para o Principle. Observação: não é possível exportar um arquivo para o Principle a partir do Figma.

Você pode importar todos os Quadros de uma página em um Arquivo ou uma seleção de Quadros.

1. Abra o Principle.
2. Acesse Arquivo no menu principal e selecione Importar do Figma:
3. Ou clique no botão Importar:
4. Selecione Figma nas opções:
5. Você poderá selecionar um Documento no campo fornecido. Isso mostrará a você quaisquer Arquivos editados recentemente.
   
   

   Observação: todos os arquivos que estiverem usando o Multiplayer (por exemplo, arquivos em que vários editores estejam colaborando) terão prioridade nas sugestões de Arquivos editados recentemente.

   

6. Clique em Importar página para importar todos os Quadros da página.
7. Ou clique em Importar quadros selecionados para importar qualquer quadro que esteja selecionado no momento no Figma.
   
   

   Observação: nesse momento, você também pode acessar o Figma e selecionar quaisquer Quadros específicos que deseja importar. Isso atualizará a seleção no Principle.

8. Uma mensagem de status indicará que as camadas estão sendo renderizadas pelo Figma no momento:
9. Os Quadros serão adicionados à sua Prancheta no Principle:
10. Cada objeto será renderizado como uma camada individual, exatamente como no Figma. Você pode selecionar objetos individuais no painel Camadas, à esquerda, ou diretamente na tela:

Desconectar sua conta Figma

Se quiser alterar a conta Figma associada à sua conta Principle ou desconectar as duas completamente, você pode fazer isso no Principle.

1. Clique no menu Principle na barra de menus da Apple.
2. Selecione Desconectar do Figma nas opções:
3. Em seguida, você pode iniciar o processo de importação novamente para se reconectar ou se conectar a uma conta diferente.

Como trabalhar com sombras no Figma e no Principle

A Sombra projetada e a Sombra interna se comportarão de forma diferente no Figma e no Principle. O Figma renderiza as sombras com base na posição do objeto na tela, enquanto o Principle mostra a sombra com base no próprio objeto.

Isso significa que rotacionar um objeto no Principle também rotaciona o local da sombra do objeto (em vez de permanecer consistente, como aconteceria no Figma).