Criando um plugin para o Figma em 15 min
Esse tutorial não prevê conhecimento anterior em desenvolvimento
O objetivo desse tutorial é te deixar com a base para começar a desenvolver um plugin.
Criar plugins para o figma é extremamente fácil, os requerimentos são os sequintes
- Node https://nodejs.org/en/download/
- Typescript (informações em como instalar a seguir)
- Figma desktop
- VS Code(recomendado) ou qualquer outro editor de texto https://code.visualstudio.com/download
Depois de instalar o node, abra um terminal
Windows:
Pressione Win+X para abrir o menu contextual e clique na opção Prompt de Comando ou Prompt de Comando (Admin).
Mac:
Clique no ícone do Launchpad na Dock, digite Terminal no campo de pesquisa e, em seguida, clique em Terminal.
No terminal digite o seguinte comando e aperte enter.
npm install -g typescript O comando acima ira instalar typescript necessario para o desenvolvimento do plugin
Abra o figma desktop, abra um arquivo qualquer e vá para
Menu > Plugins > Development > New Plugin
Essa tela ira aparecer, escolhe o nome do plugin clique em continuar, na proxima tela ira aparecer o tipo de plugin que deseja criar, escolha o ultimo, com UI e browser API que é o template mais completo, depois disso é só salvar o plugin aonde quiser, mas lembre-se aonde você salvou.
O plugin é uma pasta do seu sistema como outra qualquer, abra essa pasta no VS Code, depois que a pasta do plugin abrir vá até View > Terminal
para abrir o terminal do VS Code e no terminal digite
npm install --save-dev @figma/plugin-typingsO ultimo passo é configurar o VS Code para transformar os arquivos do projeto toda vez que uma mudança for feita, isso é necessario porque o arquivo que o figma ira ler do plugin é diferente do arquivo que você edita ao desenvolver
A configuração é bem simples, com o VS code aberto aperte ⌘⇧B (Ctrl-Shift-B para Windows), e selecione tsc: watch — tsconfig.json
Agora é só rodar seu plugin, abra o figma vá até Menu > Plugins > Development > <Nome do seu plugn>, para rodar o plugin que acabou de criar, você deve ver uma tela como a sequinte
Isso é o template default que você escolheu, esse plugin serve como exemplo, ele cria a quantidade de rectangulos que você insere, Caso queira entender melhor como o desenvolvimento de um plugin funciona você pode dar uma olhada no codigo no VS Code, o ui.html é essa janelinha que você vê quando abre o plugin é o code.ts é o codigo que roda quando você interage com o plugin, com tudo setado já dá pra começar a aprender e brincar um pouco.
Links uteis:
documentação oficial https://www.figma.com/plugin-docs
