Template Plugin para Figma

🇺🇸 English 🌟 Help us by starring the project! 🌟

🇧🇷 Português 🌟 Ajude-nos dando uma estrela ao projeto! 🌟

Guia em Português

Projeto Template Figma com Tailwind CSS

Pré-requisitos

• Node.js – versão 20 ou superior
• Figma desktop app

Desenvolvendo o Plugin

Para iniciar o desenvolvimento do plugin, instale as dependências do projeto e, em seguida, execute o comando watch:

$ npm install
$ npm run watch

ou

$ yarn
$ yarn watch

Instalar o Plugin

1. No aplicativo desktop do Figma, abra um documento do Figma.
2. Procure e execute Importar plugin a partir do manifesto… via barra de pesquisa ou pelo menu.
3. Selecione o arquivo manifest.json gerado pelo script build na raiz do projeto.
4. No aplicativo Figma, ative a opção Mostrar/Ocultar Console via a barra de pesquisa ou Ações Rápidas. Utilize console.log() para debug do plugin.

Estrutura do Projeto

. │./package.json │./tsconfig.json │./tailwind.config.js │./manifest.json │./src/ ├── main.ts ├── ui.tsx ├── components/ │       ├── flex-container.tsx │       └── label.tsx ├── css/ │       └── input.css ├── pages/ │       └── deafault.tsx └── types/           └── size.ts

Todas as alterações no projeto devem ser realizadas na pasta src, exceto o nome e id que são alterados dentro de package.json na raiz do projeto.

package.json

_{voltar para estrutura do projeto}

Na raiz do projeto, temos o arquivo package.json responsável por gerenciar o plugin e seus arquivos. Na seção figma-plugin pode ser configurado:

• id: Código de referência do seu plugin dentro do Figma. Código gerado durante a publicação do plugin.

• name: Nome que será exibido na janela de plugins.

tsconfig.json

_{voltar para estrutura do projeto}

Arquivo de configuração do TypeScript.

tailwind.config.js

_{voltar para estrutura do projeto}

Arquivo de configuração do Tailwind CSS.

manifest.json

_{voltar para estrutura do projeto}

Arquivo gerado pelo build do plugin. Este é o arquivo que deve ser importado pelo Figma.

main.ts

_{voltar para estrutura do projeto}

Arquivo responsável por executar o comando showUI() e configurar em pixels a width e height da janela do plugin.

import { showUI } from "@create-figma-plugin/utilities";
export default function () {
  showUI({
    height: 240,
    width: 240,
  });
}

ui.tsx

_{voltar para estrutura do projeto}

Principal arquivo para renderização das telas do plugin. A função GetPage é responsável por realizar a troca de páginas do plugin e a injeção da função de troca de tela.

export default render(() => {
  const [pageTitle, setPageTitle] = useState<PagesName>("Home Page");

  function GetPage({ title }: { title: PagesName }): JSX.Element {
    switch (title) {
      case "Home Page":
        return <DefaultPage setPageTitle={setPageTitle} />;

      case "Page 2":
        return <OtherPage setPageTitle={setPageTitle} />;

      default:
        return <DefaultPage setPageTitle={setPageTitle} />;
    }
  }

  return <GetPage title={pageTitle} />;
});

Deploy

Para finalização do plugin, execute o comando build para a construção (automática) do arquivo manifest.json e o diretório build/ contendo o JavaScript do plugin.

$ yarn build

English Guide

Figma Plugin Template with Tailwind CSS

Prerequisites

• Node.js – version 20 or higher
• Figma desktop app

Developing the Plugin

To start developing the plugin, install project dependencies and then run the watch command:

$ npm install
$ npm run watch

or

$ yarn
$ yarn watch

Installing the Plugin

1. In the Figma desktop app, open a Figma document.
2. Search for and run Import plugin from manifest... via the search bar or the menu.
3. Select the manifest.json file generated by the build script at the project's root.
4. In the Figma app, activate the Show/Hide Console option via the search bar or Quick Actions. Use console.log() for plugin debugging.

Project Structure

. │./package.json │./tsconfig.json │./tailwind.config.js │./manifest.json │./src/ ├── main.ts ├── ui.tsx ├── components/ │       ├── flex-container.tsx │       └── label.tsx ├── css/ │       └── input.css ├── pages/ │       └── deafault.tsx └── types/           └── size.ts

All project changes should be made in the src folder, except for the name and id which are changed within package.json at the project's root.

package.json

_{back to project structure}

At the project's root, we have the package.json file responsible for managing the plugin and its files. In the figma-plugin section, you can configure:

• id: Reference code for your plugin within Figma. Code generated during the plugin's publication.

• name: Name that will be displayed in the plugins window.

tsconfig.json

_{back to project structure}

TypeScript configuration file.

tailwind.config.js

_{back to project structure}

Tailwind CSS configuration file.

manifest.json

_{back to project structure}

File generated by the plugin's build. This is the file to be imported by Figma.

main.ts

_{back to project structure}

File responsible for executing the showUI() command and configuring the width and height of the plugin window in pixels.

import { showUI } from "@create-figma-plugin/utilities";
export default function () {
  showUI({
    height: 240,
    width: 240,
  });
}

ui.tsx

_{back to project structure}

Main file for rendering the plugin's screens. The GetPage function is responsible for switching plugin pages and injecting the screen-switching function.

export default render(() => {
  const [pageTitle, setPageTitle] = useState<PagesName>("Home Page");

  function GetPage({ title }: { title: PagesName }): JSX.Element {
    switch (title) {
      case "Home Page":
        return <DefaultPage setPageTitle={setPageTitle} />;

      case "Page 2":
        return <OtherPage setPageTitle={setPageTitle} />;

      default:
        return <DefaultPage setPageTitle={setPageTitle} />;
    }
  }

  return <GetPage title={pageTitle} />;
});

Deploy

To finalize the plugin, run the build command to automatically build the manifest.json file and the build/ directory containing the plugin's JavaScript.

$ yarn build