Figma e Kodular: Ferramentas Essenciais

Prévia do material em texto

<p>FUNDAMENTOS DE DESIGN DE</p><p>SISTEMAS</p><p>AULA 2</p><p>Prof. Eduardo Alexandre Franciscon</p><p>2</p><p>CONVERSA INICIAL</p><p>Nesta etapa, vamos abordar o surgimento e a importância do Figma e do</p><p>Kodular, duas ferramentas essenciais em seus respectivos campos.</p><p>Vamos começar explorando o surgimento do Figma e do Kodular,</p><p>compreendendo como essas plataformas inovadoras se estabeleceram como</p><p>líderes em design e desenvolvimento de aplicativos. Em seguida, aprenderemos</p><p>passo a passo como instalar o Figma em nossos dispositivos. Então, partiremos</p><p>para a exploração da interface do Figma, compreendendo suas ferramentas e</p><p>recursos que possibilitam a criação de designs visualmente impactantes.</p><p>No Kodular, vamos conhecer o processo de cadastro, ingressar na</p><p>comunidade de desenvolvedores e entender a dinâmica que transforma ideias</p><p>em aplicativos funcionais sem a necessidade de codificação intensiva.</p><p>Concluímos nossa jornada explorando a interface do Kodular, em que blocos de</p><p>lógica se entrelaçam para transformar suas ideias em aplicativos prontos para o</p><p>mundo.</p><p>TEMA 1 – SURGIMENTO DO FIGMA E KODULAR</p><p>O Figma (S.d.) constitui-se como uma ferramenta de design</p><p>fundamentada em vetor. Inaugurada em 2015, destacou-se como a pioneira ao</p><p>integrar a acessibilidade web com as capacidades inerentes a um aplicativo</p><p>nativo. O diferencial notável da empresa Figma reside em sua visão de produto,</p><p>que visa democratizar o design, tornando-o acessível a todos os usuários. No</p><p>cenário competitivo, o Figma confronta diretamente outras ferramentas de</p><p>prototipação, a exemplo do Adobe XD, Invision e Sketch. Contudo, sua</p><p>proeminência decorre não apenas da competição, mas sobretudo das</p><p>funcionalidades e atualizações criteriosamente alinhadas às exigências dos</p><p>usuários. Conforme atestado por uma pesquisa conduzida pela UX Tools em</p><p>2021, o Figma emergiu como a ferramenta de prototipação mais amplamente</p><p>adotada em âmbito global.</p><p>Na qualidade de uma ferramenta de design, o Figma se revela útil para</p><p>diversas aplicações cotidianas, sendo especialmente benéfico para profissionais</p><p>que desempenham funções relacionadas à interface, design gráfico ou</p><p>marketing. De maneira abrangente, por meio do Figma, é viável elaborar</p><p>variados produtos tangíveis de design, incluindo, mas não se limitando a:</p><p>3</p><p>1. Interfaces para plataformas web e móveis;</p><p>2. Apresentações visuais;</p><p>3. Elementos gráficos destinados a redes sociais;</p><p>4. Publicações digitais, como ebooks;</p><p>5. Dentre outras aplicações pertinentes.</p><p>Por meio da incorporação de determinados plugins (discutidos</p><p>posteriormente neste tutorial), o Figma também proporciona a capacidade de</p><p>criar animações (Figma, S.d.). Contudo, a exploração detalhada deste recurso</p><p>será abordada em uma futura exposição.</p><p>O Kodular (S.d.) é uma plataforma inovadora de desenvolvimento de</p><p>aplicativos móveis que surgiu como resultado da crescente demanda por</p><p>soluções acessíveis e amigáveis para a criação de aplicativos sem a</p><p>necessidade de habilidades avançadas de programação. Sua história remonta</p><p>ao ano de 2017, quando a equipe por trás do Kodular decidiu criar uma</p><p>ferramenta poderosa, porém fácil de usar, que permitisse que qualquer pessoa,</p><p>independentemente de sua experiência em programação, pudesse desenvolver</p><p>aplicativos personalizados. O Kodular baseia-se na ideia de arrastar e soltar</p><p>(drag-and-drop), proporcionando aos usuários uma interface intuitiva para criar</p><p>aplicativos sem a necessidade de codificação manual extensiva. Essa</p><p>abordagem revolucionária tornou a criação de aplicativos mais acessível a uma</p><p>ampla gama de pessoas, incluindo iniciantes e entusiastas que desejavam</p><p>transformar suas ideias em aplicativos funcionais.</p><p>O projeto Kodular foi inspirado na plataforma App Inventor, que teve sua</p><p>origem no MIT (Massachusetts Institute of Technology) em 2009. O App Inventor</p><p>permitia que os usuários criassem aplicativos Android por meio de uma interface</p><p>gráfica simplificada. O Kodular, por sua vez, evoluiu com base nessa ideia,</p><p>adicionando recursos avançados, melhorias de desempenho e uma comunidade</p><p>ativa que contribui para o desenvolvimento contínuo da plataforma. Desde o seu</p><p>surgimento, o Kodular conquistou uma base de usuários significativa e se</p><p>destacou como uma ferramenta confiável para o desenvolvimento de aplicativos</p><p>Android. Sua abordagem inovadora e acessível democratizou o processo de</p><p>criação de aplicativos, permitindo que mais pessoas realizassem suas ideias e</p><p>participassem do universo da programação de aplicativos móveis (Kodular (S.d.).</p><p>O Kodular continua a crescer e a evoluir, desempenhando um papel vital no</p><p>4</p><p>empoderamento de indivíduos e na promoção da criatividade no</p><p>desenvolvimento de aplicativos.</p><p>TEMA 2 – INSTALAÇÃO DO FIGMA</p><p>Instalar o Figma no desktop é um processo relativamente simples. Aqui</p><p>está um tutorial passo a passo para instalar o Figma.</p><p>2.1 Para Windows</p><p>2.1.1 Acesse o site do figma</p><p>Abra o seu navegador da web e vá para o site oficial do Figma em</p><p>www.figma.com.</p><p>2.1.2 Crie uma conta ou faça login</p><p>Se você já possui uma conta, faça login. Se não, crie uma nova conta.</p><p>2.1.3 Faça o download do aplicativo desktop</p><p>1. Após fazer login, clique na sua foto de perfil no canto inferior esquerdo.</p><p>2. Selecione "Figma App" no menu suspenso.</p><p>3. Clique em "Download para Windows".</p><p>2.1.4 Instale o aplicativo</p><p>1. Abra o arquivo baixado (geralmente no formato .exe);</p><p>2. Siga as instruções na tela para instalar o Figma no seu computador.</p><p>2.1.5 Inicie o figma</p><p>Após a conclusão da instalação, inicie o Figma. O aplicativo deve ser</p><p>aberto no seu desktop.</p><p>5</p><p>2.2 Para MacOS</p><p>2.2.1 Acesse o site do Figma</p><p>Abra o seu navegador da web e vá para o site oficial do Figma em</p><p>www.figma.com.</p><p>2.2.2 Crie uma conta ou faça login</p><p>Se você já possui uma conta, faça login. Se não, crie uma nova conta.</p><p>3. faça o download do aplicativo desktop</p><p>1. Após fazer login, clique na sua foto de perfil no canto inferior esquerdo;</p><p>2. Selecione "Figma App" no menu suspenso;</p><p>3. Clique em "Download para Mac".</p><p>4. instale o aplicativo</p><p>1. Abra o arquivo baixado (geralmente no formato .dmg);</p><p>2. Arraste o ícone do Figma para a pasta Aplicativos.</p><p>5. inicie o figma</p><p>Vá até a pasta Aplicativos e abra o Figma. O aplicativo deve ser iniciado</p><p>no seu Mac.</p><p>2.3 Notas adicionais</p><p>• Certifique-se de que o seu sistema atende aos requisitos mínimos para</p><p>executar o Figma;</p><p>• O Figma também pode ser acessado diretamente através do navegador</p><p>sem a necessidade de baixar o aplicativo desktop.</p><p>Lembre-se de que as instruções podem variar um pouco dependendo das</p><p>atualizações do aplicativo ou do sistema operacional. Se você encontrar algum</p><p>problema durante o processo, consulte a documentação oficial do Figma ou entre</p><p>em contato com o suporte técnico.</p><p>6</p><p>TEMA 3 – APRESENTANDO O FIGMA</p><p>Para começar, é necessária a familiarização com interface do Figma</p><p>(S.d.). Ao ter uma compreensão da estrutura fundamental da interface, não se</p><p>torna obrigatório conhecer todas as ferramentas, mas sim saber localizá-las</p><p>quando necessário. No caso do Figma, a organização de sua interface pode ser</p><p>categorizada em quatro partes distintas:</p><p>1. Topo;</p><p>2. Parte esquerda;</p><p>3. Parte direita;</p><p>4. Área central.</p><p>Com isso, na Figura 1 se observa o ambiente de trabalho como um todo</p><p>do Figma. A partir desse ambiente, vamos entender melhor as 4 partes da</p><p>interface do software e entender melhor como eles funcionam.</p><p>Figura 1 – Ambiente de trabalho do Figma</p><p>Agora vamos entender os funcionamentos das interfaces principais do</p><p>Figma.</p><p>7</p><p>3.1 Topo</p><p>Para iniciarmos, o primeiro conjunto de ferramentas que vamos aprender</p><p>é a do topo (1), onde encontramos o Menu Principal e a Barra de Ferramentas,</p><p>Figura 2.</p><p>Figura 2 – Menu do topo (1)</p><p>O objetivo desse menu é a criação e movimentação</p><p>de formas criadas</p><p>para o desenvolvimento de templates. Assim como, textos e anotações</p><p>necessárias durante o desenvolvimento.</p><p>No menu do topo se dá atenção especial ao menu principal (Figura 3),</p><p>que traz as opções de abertura, exportação, salvamento e algumas</p><p>configurações de interface. Nele é possível encontrar os caminhos para</p><p>configurações do ambiente de desenvolvimento, assim como, para os projetos</p><p>já em realização ou prontos.</p><p>8</p><p>Figura 3 – Menu principal</p><p>3.2 Parte esquerda</p><p>O Figma tem algumas opções disponíveis no lado esquerdo dessa</p><p>interface, Figura 4. Vamos analisar cada uma delas:</p><p>Figura 4 – Menu da esquerda</p><p>• Páginas (Page): refere-se à navegação entre diferentes páginas dentro</p><p>do arquivo que está sendo trabalhado no Figma. Em ferramentas de</p><p>9</p><p>design, como o Figma, as páginas podem representar diferentes telas ou</p><p>seções de um projeto. Isso é útil para organizar e gerenciar projetos</p><p>complexos que envolvem várias telas ou etapas;</p><p>• Layers: refere-se aos layers ou camadas do arquivo. As camadas são</p><p>componentes fundamentais em muitos programas de design gráfico.</p><p>Cada camada pode conter elementos diferentes, como texto, imagens,</p><p>formas, etc. Organizar elementos em camadas facilita a edição e a</p><p>manipulação, pois você pode trabalhar com cada camada</p><p>separadamente.</p><p>• Assets: os assets são recursos gráficos, como imagens, ícones, ou</p><p>qualquer outro elemento visual utilizado no projeto. A seção de assets</p><p>pode ser um local onde você pode armazenar e gerenciar esses recursos</p><p>para uso em diferentes partes do projeto. Isso pode incluir elementos de</p><p>design que são usados repetidamente para manter uma consistência</p><p>visual em todo o projeto.</p><p>Essas opções no lado esquerdo da interface são comuns em ferramentas</p><p>de design, e a disposição pode variar de acordo com o software específico. O</p><p>Sigma parece ter uma abordagem organizada, fornecendo acesso rápido a</p><p>elementos-chave do projeto. Ao utilizar essas funcionalidades, os designers</p><p>podem otimizar o fluxo de trabalho, tornando a criação e edição de projetos mais</p><p>eficientes.</p><p>3.3 Parte direita</p><p>Destacando três painéis principais: design, prototipação e inspeção.</p><p>Vamos explorar cada um deles. Esses três painéis destacados sugerem que a</p><p>interface do Figma é projetada para oferecer uma experiência abrangente de</p><p>design, desde a criação visual até a prototipação e a inspeção detalhada dos</p><p>elementos. Essa abordagem integrada é valiosa para designers, pois permite</p><p>que eles trabalhem em todas as fases do processo de design em um único</p><p>ambiente colaborativo. Inicialmente, vamos aprender sobre os painéis de design</p><p>e prototipação, conforme a Figura 5.</p><p>10</p><p>Figura 5 – Menu da direita</p><p>• Painel de design: esta é uma área crucial para o processo de criação</p><p>visual. No Figma, o Painel de Design provavelmente contém ferramentas</p><p>e opções relacionadas à manipulação e criação de elementos gráficos.</p><p>Isso inclui ferramentas de desenho, seleção, edição de cores, estilos,</p><p>entre outros. Aqui, os designers podem criar e refinar os elementos visuais</p><p>de suas criações, ajustando propriedades e garantindo a estética</p><p>desejada;</p><p>• Painel de prototipação: a prototipação é uma etapa essencial no design</p><p>de interação. Nesse painel, os designers podem criar links interativos</p><p>entre diferentes telas ou elementos do projeto. Isso é crucial para simular</p><p>a experiência do usuário e testar a navegação dentro do design. O Figma</p><p>é conhecido por suas capacidades avançadas de prototipação, permitindo</p><p>que os designers criem transições suaves e interações complexas para</p><p>apresentar o fluxo do usuário.</p><p>O painel de Inspeção tem uma configuração especial. Para acesso a ele,</p><p>é necessário a habilitação da opção “Dev Mode”. Como mostrado na Figura 6.</p><p>Após sua habilitação, os painéis de “Design” e “Prototipação” dão lugar ao painel</p><p>11</p><p>de “Inspeção”. E, para ter acesso aos painéis anteriores, basta desabilitar a</p><p>função de “Dev Mode”.</p><p>Figura 6 – Painel de inspeção</p><p>• Painel de inspeção: a inspeção geralmente fornece informações</p><p>detalhadas sobre os elementos selecionados no design. Isso pode incluir</p><p>detalhes como dimensões, espaçamento, cores específicas e outras</p><p>propriedades. A Inspeção é especialmente útil para garantir consistência</p><p>e precisão no design. Os designers podem usar essas informações para</p><p>garantir que os elementos estejam alinhados corretamente e que as</p><p>especificações de design sejam atendidas.</p><p>Esses três painéis destacados mostram que a interface do Figma é</p><p>projetada para oferecer uma experiência abrangente de design, desde a criação</p><p>12</p><p>visual até a prototipação e a inspeção detalhada dos elementos. Essa</p><p>abordagem integrada é valiosa para designers, pois permite que eles trabalhem</p><p>em todas as fases do processo de design em um único ambiente colaborativo.</p><p>3.4 Área central</p><p>O espaço central da interface do Figma é conhecido como canvas e</p><p>desempenha um papel fundamental no processo de desenvolvimento e design.</p><p>Na Figura 7 podemos observar como podemos trabalhar com um projeto.</p><p>Figura 7 – Área Central de desenvolvimento (Canvas)</p><p>Aqui estão alguns pontos adicionais sobre essa área central:</p><p>3.4.1 Canvas como espaço de trabalho</p><p>O canvas é o espaço principal onde os designers criam e editam seus</p><p>projetos. É um ambiente de trabalho expansivo onde você pode dar vida às suas</p><p>ideias, independentemente do tipo de design que está sendo desenvolvido. Seja</p><p>para criar interfaces de usuário, ilustrações, protótipos ou outros tipos de</p><p>projetos, o canvas oferece uma área aberta e flexível para trabalhar.</p><p>13</p><p>3.4.2 Elementos de design</p><p>No canvas, os elementos de design, como vetores, imagens e frames, são</p><p>criados e manipulados. Os designers podem desenhar formas, adicionar texto,</p><p>importar imagens, e organizar esses elementos para construir o layout desejado.</p><p>A interação intuitiva com o canvas facilita a expressão criativa e a</p><p>experimentação durante o processo de design.</p><p>3.4.3 Vetores e edição de formas</p><p>O Figma é particularmente robusto no que diz respeito à criação e edição</p><p>de elementos vetoriais. No canvas, os designers podem desenhar formas, criar</p><p>caminhos, ajustar curvas e realizar outras operações de edição vetorial. Isso é</p><p>essencial para criar ícones, ilustrações e outros elementos gráficos</p><p>personalizados.</p><p>3.4.4 Imagens e importação de recursos</p><p>Além de elementos vetoriais, o canvas também suporta a importação e</p><p>manipulação de imagens. Os designers podem inserir imagens diretamente no</p><p>canvas, redimensioná-las, ajustar a opacidade e aplicar outras transformações</p><p>conforme necessário.</p><p>3.4.5 Frames para organização</p><p>Frames são elementos importantes no Figma que ajudam na organização</p><p>e estruturação do design. Eles podem conter outros elementos, como vetores,</p><p>imagens ou até mesmo grupos de elementos, proporcionando uma maneira</p><p>eficiente de organizar e gerenciar o conteúdo do projeto.</p><p>3.4.6 Interatividade e prototipagem</p><p>Além de ser um espaço para criação visual, o canvas também</p><p>desempenha um papel crucial na prototipagem interativa. Os designers podem</p><p>definir links entre diferentes telas e elementos diretamente no canvas, permitindo</p><p>a criação de protótipos de alta fidelidade para testar a experiência do usuário.</p><p>Em resumo, o canvas do Figma é o coração da experiência de design,</p><p>oferecendo um ambiente dinâmico e interativo para a criação de uma ampla</p><p>14</p><p>variedade de projetos. Sua natureza flexível e poderosa torna o Figma uma</p><p>escolha popular entre designers e equipes de design para colaboração eficiente</p><p>e desenvolvimento visual de alta qualidade.</p><p>TEMA 4 – CADASTRO E DINÂMICA DO KODULAR</p><p>Para começar a usar o Kodular e criar seus próprios aplicativos Android</p><p>sem a necessidade de programação intensiva é muito simples (Kodular, S.d.).</p><p>Basicamente, estes passos básicos resumem</p><p>toda a dinâmica do uso da</p><p>ferramenta:</p><p>4.1 Acesse o site do Kodular</p><p>Visite o site oficial do Kodular em https://www.kodular.io/.</p><p>4.2 Crie uma conta</p><p>Se você ainda não tiver uma conta, clique em Sign Up (Registrar-se) e</p><p>preencha as informações necessárias para criar uma conta no Kodular. Para</p><p>facilitar o processo, você pode usar sua conta do Google.</p><p>4.3 Faça login</p><p>Após criar uma conta, faça login no site usando suas credenciais.</p><p>4.4 Inicie um novo projeto</p><p>Ao fazer login, você será direcionado ao seu painel principal. Clique em</p><p>"Create a new project" para iniciar um novo projeto de aplicativo.</p><p>4.5 Explore o ambiente de desenvolvimento</p><p>O Kodular usa um ambiente de desenvolvimento visual baseado em</p><p>blocos. Explore a interface e familiarize-se com os diferentes elementos</p><p>disponíveis.</p><p>15</p><p>4.6 Arraste e solte blocos</p><p>Comece a construir seu aplicativo arrastando e soltando blocos de</p><p>funcionalidades. Os blocos representam diferentes ações e componentes do</p><p>aplicativo.</p><p>4.7 Configurações e propriedades</p><p>Personalize os componentes do seu aplicativo ajustando suas</p><p>configurações e propriedades. Isso pode incluir a aparência, comportamento e</p><p>interações do aplicativo.</p><p>4.8 Teste seu aplicativo</p><p>Utilize o emulador integrado ou baixe o aplicativo Kodular Companion na</p><p>loja de aplicativos do seu dispositivo Android para testar seu aplicativo em tempo</p><p>real.</p><p>4.9 Adicione funcionalidades</p><p>Explore os diferentes blocos e componentes para adicionar</p><p>funcionalidades específicas ao seu aplicativo, como interações com banco de</p><p>dados, sensores, notificações, entre outras.</p><p>4.10 Participe da comunidade</p><p>Junte-se à comunidade Kodular para obter suporte, compartilhar</p><p>experiências e aprender com outros usuários. A comunidade é uma excelente</p><p>fonte de recursos e conhecimento.</p><p>Lembre-se de que o Kodular oferece tutoriais e documentação detalhada</p><p>para ajudar os usuários em cada etapa do processo de desenvolvimento. Explore</p><p>esses recursos para aprimorar suas habilidades e criar aplicativos mais</p><p>avançados.</p><p>16</p><p>TEMA 5 – APRESENTANDO O KODULAR</p><p>O Kodular tem uma interface intuitiva e simples de usar. Seu mecanismo</p><p>para programação no-code também é simples e facilita o uso com todo o</p><p>conjunto de componentes necessários para a construção dos projetos [2].</p><p>Basicamente, a interface, Figura 8, é formada por cinco partes que se</p><p>complementam na construção dos projetos, sendo:</p><p>1. Paleta;</p><p>2. Visualizador;</p><p>3. Componentes;</p><p>4. Propriedades; e</p><p>5. Blocos.</p><p>Figura 8 – Interface do Kodular</p><p>Com isso, vamos aprender melhor do que cada parte se trata.</p><p>5.1 Paleta</p><p>A paleta de componentes no Kodular refere-se à seção onde os usuários</p><p>podem encontrar e selecionar os diferentes componentes ou elementos que</p><p>compõem a interface e a lógica de seus aplicativos, Figura 9. Os componentes</p><p>são organizados em categorias para facilitar a busca e seleção.</p><p>17</p><p>Figura 9 – Interface Paleta no Kodular</p><p>Essas são as categorias comuns que você pode encontrar na paleta de</p><p>componentes do Kodular:</p><p>1. Interface do usuário;</p><p>2. Layout;</p><p>3. Mídia;</p><p>4. Desenho e animação;</p><p>5. Maps;</p><p>6. Sensores;</p><p>7. Social;</p><p>8. Armazenamento;</p><p>9. Utilitários;</p><p>10. Componentes dinâmicos;</p><p>11. Conectividade;</p><p>12. Google;</p><p>13. Monetização;</p><p>14. LEGO;</p><p>15. Extensões.</p><p>Basicamente, essa paleta é a primeira área que o desenvolvedor volta sua</p><p>atenção, pois é nela que o mesmo encontra o componente para mais tarde</p><p>18</p><p>programar sua configuração. Um exemplo fácil de entender, é a seleção de um</p><p>botão na parte de “Interface de Usuário”.</p><p>5.2 Visualizador</p><p>O visualizador do Kodular é uma ferramenta útil para testar e depurar</p><p>aplicativos. Ele permite aos usuários ver como o aplicativo ficará e funcionará</p><p>antes de publicá-lo, conforme a Figura 10.</p><p>Aqui estão alguns recursos do visualizador do Kodular:</p><p>• Visualização em tempo real: os usuários podem ver as alterações feitas</p><p>no editor de layout ou no editor de blocos em tempo real;</p><p>• Suporte a vários dispositivos: os usuários podem visualizar seus</p><p>aplicativos em diferentes dispositivos, incluindo smartphones, tablets e</p><p>computadores;</p><p>• Suporte a vários idiomas: o visualizador do Kodular está disponível em</p><p>vários idiomas, incluindo inglês, francês, espanhol e português.</p><p>Figura 10 – Visualizador do Kodular</p><p>.</p><p>19</p><p>O visualizador do Kodular é uma ferramenta essencial para qualquer</p><p>desenvolvedor que use o Kodular para criar aplicativos.</p><p>5.3 Componentes</p><p>Na parte direita, você encontrará a organização de componentes e o</p><p>painel de propriedades do designer, que se torna visível ao selecionar um</p><p>componente, como visível na Figura 11.</p><p>Figura 11 – Hierarquia dos componentes do projeto</p><p>A Organização de Componentes exibe os componentes visíveis incluídos</p><p>no arquivo do projeto. Ao clicar em um componente, o Painel de Propriedades</p><p>do Designer será exibido, mostrando as propriedades associadas a esse</p><p>componente.</p><p>5.4 Propriedades</p><p>O menu de propriedades no Kodular é uma parte essencial da plataforma,</p><p>proporcionando aos usuários um meio intuitivo de personalizar e configurar</p><p>diferentes elementos dentro de seus projetos de aplicativos sem a necessidade</p><p>de codificação extensiva. Este menu oferece uma visão detalhada e interativa</p><p>das propriedades associadas a cada componente presente no design do</p><p>aplicativo, como possível observar na Figura 12.</p><p>20</p><p>Figura 12 – Menu de propriedades</p><p>Ao utilizar o menu de propriedades no Kodular, os usuários podem ajustar</p><p>uma variedade de configurações, como cor, tamanho, texto e outros atributos</p><p>específicos de cada componente. A interface gráfica e amigável facilita a</p><p>modificação rápida e eficiente dessas propriedades, permitindo que os</p><p>desenvolvedores personalizem a aparência e o comportamento de seus</p><p>aplicativos sem a necessidade de habilidades avançadas de programação.</p><p>Além disso, o menu de propriedades do Kodular é dinâmico, respondendo</p><p>às seleções e interações dos usuários em tempo real. Por exemplo, ao</p><p>selecionar um componente específico na tela de design, o menu de propriedades</p><p>exibirá automaticamente as opções e ajustes relevantes para esse componente</p><p>em particular.</p><p>5.5 Blocos</p><p>A Área de Blocos no Kodular é um ambiente de desenvolvimento visual</p><p>onde os usuários podem criar a lógica e a funcionalidade de seus aplicativos por</p><p>meio de uma abordagem de programação baseada em blocos, Figura 13. Essa</p><p>área é fundamental para transformar as ideias dos desenvolvedores em ações</p><p>21</p><p>específicas e comportamentos dentro de seus aplicativos, sem a necessidade</p><p>de escrever código tradicional.</p><p>Figura 13 – Ambiente de blocos</p><p>A Área de Blocos do Kodular utiliza uma abordagem intuitiva e visual, o</p><p>que a torna acessível até mesmo para aqueles sem experiência em</p><p>programação. Ela é composta por diferentes categorias de blocos, como lógica,</p><p>controle de fluxo, matemática, texto e muitas outras, permitindo uma ampla gama</p><p>de funcionalidades.</p><p>Além disso, a Área de Blocos é integrada ao design do aplicativo,</p><p>proporcionando uma transição suave entre a configuração visual dos</p><p>componentes na interface gráfica e a definição da lógica por trás desses</p><p>componentes na Área de Blocos.</p><p>FINALIZANDO</p><p>Nesta etapa, exploramos as ferramentas do Figma e do Kodular, desde</p><p>seu surgimento até a apresentação de suas interfaces para o entendimento dos</p><p>seus respectivos mecanismos de funcionamento. No Figma aprendemos como</p><p>instalá-lo e como identificar as suas áreas de uso. E, no Kodular, como se</p><p>inscrever e posteriormente a apresentação das interfaces necessárias para a</p><p>construção de um projeto.</p><p>22</p><p>REFERÊNCIAS</p><p>FIGMA. Figma: the collaborative interface design tool. Disponível em:</p><p><https://www.figma.com>. Acesso em: 3 fev. 2024.</p><p>KODULAR LTD. Kodular: The Visual Programming Environment for Android.</p><p>Disponível em: <https://www.kodular.io/>. Acesso em: 3 fev. 2024.</p>