Babysteps

👼 Comece por aqui ✨

Àrea de Trabalho

Sem pressão • Sem medo • Tenha foco

Te desejo muito sucesso nessa jornada!

Tabela de Conteúdo:

🌓 Modo escuro

Utilize a extensão Dark Reader para ver qualquer página em modo ecsuro e poupe alguns anos de vida útil das suas vistas

Chrome – Edge

💬 Termos usados

LTS Versão 'Long Time Support' é um software que oferece estabilidade e suporte por longos períodos, geralmente para sistemas operacionais ou ferramentas de criação.
Tríade Web

A Web é composta por três pilares:

Essa combinação é muito poderosa para a criação de sites, nos possibilitando inúmeras possibilidades, como a criação de layouts complexos, a personalização visual detalhada e a implementação de funcionalidades dinâmicas que melhoram a experiência do usuário.


O HTML seria como a estrutura da casa, incluindo as paredes, janelas e portas. Ele define a estrutura e a disposição dos elementos, mas não define como eles serão visualmente.

O CSS seria comparável à pintura e acabamento da casa. Ele define como a estrutura deve ser visualmente apresentada, como cores, fontes e layout. Assim como a pintura e o acabamento tornam a casa mais atraente, o CSS estiliza e ajusta a aparência dos elementos HTML.

O JavaScript é como a fiação elétrica e encanamentos da casa. Ele adiciona funcionalidade e interação, permitindo que os elementos da casa (ou página) "funcionem". Por exemplo, assim como a fiação permite que você acenda as luzes e o encanamento fornece água, o JavaScript permite que você adicione interatividade e lógica à sua página web, como responder a cliques, validar formulários, e assim por diante.

Emmet Abbreviation Anteriormente conhecido como Zen Coding, foi iniciado em 2008 com o objetivo de ajudar os desenvolvedores a escrever código de forma mais rápida e eficiente. Emmet é uma ferramenta poderosa para expandir abreviações curtas em blocos de código completos, facilitando a criação de HTML, CSS e outros tipos de código.

Trilha É o termo usado para definir um caminho completo de desenvolvimento, do básico ao avançado, por exemplo:

+ Ver mais trilhas


Hotkey São atalhos do teclado para acessar rapidamente algum comando, por exemplo:

CTRL + C - Copiar texto
CTRL + V - Colar texto

⚙ Configurando seu Ambiente de Programação

Vamos aprender o necessário para começar

🔹 VS CODE

VS Code

Editor de códigos popular e leve, nele você pode escrever códigos e aplicar extensões para melhorar sua produtividade conforme a sua necessidade.

🔹 Instalação

🔹 Primeiro projeto no VS Code

Pronto! A partir de agora, todo seu projeto ficará dentro dessa pasta, para mudar o projeto que deseja desenvolver, basta abrir outra pasta!

🔹 Mudar idioma do editor para português:

Nota

Recomendo fortemente que mantenha o idioma padrão e comece a treinar seu inglês, para programar não precisamos saber outro idioma, mas na hora de ler alguma documentação, sites ou fóruns em sites estrangeiros, vai ser muito útil! Além disso, existem situações em que saber outro idioma pode ser um divisor de águas.

Dica

Desbloqueie seu pontencial no VS Code: https://github.com/bylearn/VS-Code-Produtividade-Infinita

🔹 Extensão: Code Runner

Simplifica a execução de códigos no VS Code.

🔹 Extensão: Live Server

Cria um servidor local que atualiza o conteúdo conforme você altera o arquivo no editor, em tempo real

Dica

Se desejar usar outra página como principal no servidor, clique no arquivo com o botão direito e selecione `Open with Live Server`

🔹 Atalhos e Dicas

Comandos que ajudam muito:

CTRL + , - Abre as configurações do editor

CTRL + SHIFT + P - Permite você escrever e acessar comandos. Eu costumo acessar o settings.json, lá ficam as configurações do usuário

CTRL + SHIFT + F - Pesquisa avançada, permite que você encontre uma determinada ocorrência e altere todas de uma vez com o Replace

CTRL + K CTRL + S - Abre a lista de atalhos do teclado

Atalhos que uso com mais frequência:

CTRL + ESPAÇO - Sugestões e Intellisense

CTRL + D - Seleciona palavras semelhantes

CTRL + G - Vai para alguma linha

CTRL + ; - Comenta a linha na linguagem dela

CTRL + P - Pesquisa um arquivo

CTRL + S - Salvar arquivo

SHIFT + ENTER - Saltar uma linha (para não ficar usando setas)

ALT + SETAS - Mover linha

ALT + SHIFT + SETAS - Copiar linha

ALT + CLIQUE - Selecionar mais de uma linha com o cursor

DUPLO CLIQUE (em alguma palavra) - Seleciona toda a palavra rapidamente, útil para variáveis

Snippets HTML

! - Cria uma estrutura HTML

lorem - Cria um texto aleatório, ideal para quando você está com pressa ou não quer pensar em um texto

Snippets Javascript

log - Console.log();

forEach - Estrutura forEach

👨‍💻 Programação

Dev

Tecnologias Dev

Quer se tornar um bom programador? Aqui vão algumas dicas:

Informação nova é igual água turva, você precisa filtrar várias vezes antes de ficar cristalina.

-void Beto( ); ✍

Pesquisa do canal Código Fonte

Trilhas de Conhecimento

🔹 Sites para Programadores

Uma porrada de conteúdo para você mergulhar!

Contendo cursos gratuitos

Curso em Vídeo – Dio – W3 Schools – MDN - Mozilla Developer – Code Academy – Escola do Trabalhador 4.0 (Governo) – Capgemini – Coursera – Bettha – Santander Open Academy – Fundação Bradesco

Contendo cursos pagos

Udemy – Origamid – Filipe Deschamps – Alura – EBAC – One Bit Code

Contendo excelentes Artigos e Recursos

Código Fonte – Luiz Tools – DevMedia – FreeCodeCamp – Stack Overflow – Dev.to

0. Lógica de Programação

Lógica

“É isso mesmo? um ZERO no primeiro tópico, por quê?”

Começamos então a nossa jornada como programadores, já vamos aprender logo que a partir de agora, nossa contagem numérica se inicia do zero 😎

Seremos seres humanos com super-poderes, então contamos: “0, 1, 2, 3, 4…”

A lógica de programação é fundamental porque ajuda você a pensar de maneira estruturada e eficiente sobre como resolver problemas, seja escrevendo código, criando algoritmos ou mesmo apenas planejando uma solução, isso vai te acompanhar por toda a sua vida pois até mesmo quem não programa precisa se organizar e para isso, utilizam a lógica.

Eu indico sempre que se aprenda lógica de programação, seja com visualg ou diretamente em alguma linguagem de programação pois sabendo bem definir as estruturas, é possível aplicar em qualquer linguagem, o que muda é apenas sintaxe.

Feito isso, você estará pronto para aprender uma nova linguagem de programação!

Por onde começar?

Dica de sequencia de assuntos para estudar e ter uma boa base:

Veja essa lista mais detalhada
  1. Tipos de Dados: Entenda os diferentes tipos de dados e como eles são usados.

  2. Variáveis e Constantes: Aprenda a declarar e usar variáveis e constantes para armazenar dados.

  3. Operadores (lógicos, relacionais, aritméticos): Estude como realizar operações e comparações com os dados.

  4. Estruturas Condicionais: Descubra como tomar decisões no código usando `if`, `else`, e `switch`.

  5. Laços de Repetição: Aprenda a usar loops (`for`, `while`, `do-while`) para repetir ações.

  6. Vetores: Entenda como trabalhar com arrays para armazenar listas de valores.

  7. Funções: Descubra como criar e utilizar funções para organizar e reutilizar código.

  8. Closures: Explore closures para entender como funções podem acessar variáveis fora de seu escopo.

  9. Escopo: Compreenda o conceito de escopo, que define onde variáveis e funções são acessíveis dentro do código. Isso ajuda a evitar conflitos e garantir que o código funcione conforme o esperado.

  10. Matrizes: Aprenda a manipular matrizes para trabalhar com dados multidimensionais.

  11. Funções de Vetores: Estude funções que operam sobre vetores, como métodos de ordenação e busca.

  12. Callbacks: Entenda como usar callbacks para manejar funções passadas como argumentos.

  13. Assíncronismo: Explore conceitos de programação assíncrona, como promessas e `async/await`, para lidar com operações que demoram.

  14. Consumo de API: Por fim, aprenda a consumir APIs para interagir com serviços externos e manipular dados da web.


O que é sintaxe?

Sintaxe é o conjunto de regras que define como escrever código em uma linguagem de programação para que seja compreendido pelo computador e pelo programador. Ela especifica a estrutura correta dos comandos e declarações, incluindo a forma como os elementos da linguagem (como palavras-chave, operadores, e delimitadores) devem ser organizados.

Devo aprender lógica de programação primeiro? Sim, é extremamente recomendado começar por aqui.
A Programação é um campo que exige bastante pensamento crítico e criatividade ao colocar as mãos na massa. Precisamos de ideias e um planejamento cuidadoso para criar soluções eficazes. Para isso, é fundamental ter uma base sólida em lógica de programação, que nos permite construir uma ponte entre o que queremos desenvolver (ideia) e o resultado final.

Além disso, aprender lógica de programação nos ajuda a desenvolver o Pensamento Computacional. Isso envolve entender quais informações a máquina precisa receber, como ela processará essas informações e o que retornará. Afinal, somos nós que adicionamos nossa inteligência natural ao código, sem isso o programa não consegue agir de forma autonoma.

Uma boa lógica de programação facilita a aprendizagem das sintaxes das diversas linguagens de programação. Com uma base sólida, você será capaz de desenvolver estruturas na linguagem escolhida de maneira mais rápida e eficiente, transformando suas ideias em soluções práticas.
Curso gratuito Link: Lógica de Programação - Curso em vídeo


1. Algoritmos

Algoritmos

Algoritmos

O algoritmo é a sequência de instruções que permite você criar uma solução para atingir seu objetivo. Basicamente é o conjunto de instruções que permite a máquina compreender o que deve ser feito.

É possível pegar qualquer coisa que a gente faz cotidianamente e transformar em um algoritmo. Podemos pegar qualquer atividade cotidiana e transformá-la em um algoritmo. Basta entender os processos envolvidos para criá-lo. Por exemplo: levantar da cama e preparar um pão com manteiga para o café da manhã.

Pensando de forma computacional:

Essas etapas formam uma rotina matinal!

E toda rotina pode ser automatizada 💡

1.1 Pseudocódigo

Pseudocódigo

O pseudocódigo é uma representação textual de um algoritmo que utiliza uma linguagem semelhante à programação, mas sem seguir regras sintáticas estritas de nenhuma linguagem em particular. Ele serve como uma ponte entre o algoritmo e a codificação real, facilitando a tradução do algoritmo para um programa executável.

Vamos então CRIAR as instruções do algoritmo Rotina Matinal:

Algoritmo: Rotina Matinal

1. Inicio

2. Acordar:
  - Verifico se acordei.
  - Se acordei, continuo para o próximo passo.

3. Levantar da Cama:
  - Me levanto da cama.

4. Higiene Pessoal:
  - Vou ao banheiro.
  - Escovo meus dentes.
  - Lavo meu rosto.

5. Tomar Café da Manhã:
  - Vou à cozinha.
  - Preparo o café da manhã.
  - Tomo o café da manhã.

6. Preparar Material de Estudo:
  - Organizo os materiais necessários para o estudo (livros, cadernos, computador, etc.).

7. Começar a Estudar:
  - Me sento no local de estudo.
  - Inicio a sessão de estudo.

8. Fim do Algoritmo

Neste exemplo, descrevemos de forma detalhada os passos (lógica) necessários para a execução da nossa tarefa (algoritmo). Isso é semelhante ao que fazemos ao desenvolver programas, criando soluções para problemas.

1.2. Visualg

Um ambiente de programação educativo que pode ser considerado uma excelente introdução ao mundo da programação, tendo como base o estudo aplicado da lógica de programaçao através do português estruturado.

Documentação do Visualg

Apostila USP Visualg

Saiba mais Embora muitas vezes subestimado pela comunidade mais avançada, seu verdadeiro propósito é justamente seu maior ponto positivo para iniciantes: não é uma linguagem de programação, mas permite aprender a programar sem a necessidade de saber inglês.

Além disso, possui uma documentação enxuta e muito simples de entender. Acostumar-se a ler documentações é um ponto extremamente positivo, e a estrutura desse ambiente permitirá que você compreenda qualquer outra linguagem de programação avançada.

Curso gratuito Link: Lógica de Programação - Curso em vídeo


1.3 Portugol

Linguagem Portugol

Uma linguagem de programação é um método padronizado para comunicar instruções para um computador. É um conjunto de regras sintáticas e semânticas usadas para definir um programa de computador. Permite que um programador especifique precisamente sobre quais dados um computador vai atuar, como estes dados serão armazenados ou transmitidos e quais ações devem ser tomadas sob várias circunstâncias.

O Portugol é uma representação que se assemelha bastante com a linguagem C, porém é escrito em português. A ideia é facilitar a construção e a leitura dos algoritmos usando uma linguagem mais fácil aos alunos.

Portugol Studio

Inteligência Artificial

IA

Na hora de aprender, a IA é uma grande aliada para você aprofundar nos estudos!

Quando não temos um professor ou especialista disponível, uma conversa generativa pode ser extremamente útil. Ela pode ajudar a esclarecer detalhes de um código, explicar conceitos que não entendemos bem e até sugerir novos tópicos de estudo.

1.4 ChatGPT

Site do ChatGPT

O ChatGPT é um modelo de linguagem desenvolvido pela OpenAI que pode compreender e gerar texto em linguagem natural. Ele é utilizado para uma variedade de tarefas, incluindo responder perguntas, gerar textos criativos e auxiliar na programação.

Google Gemini

Site do Google Gemini

O Google Gemini é uma plataforma de IA para geração de texto e análise de linguagem, desenvolvida pelo Google.

Microsoft Copilot

Site do Microsoft Copilot

O Microsoft Copilot é uma ferramenta integrada ao Microsoft 365 que auxilia na criação e edição de documentos e e-mails, usando IA para melhorar a produtividade.

Como criar prompts?

É possível direcionar a inteligência artificial para obter respostas mais precisas por meio de prompts. Eles devem ser claros e específicos, incluindo detalhes e contexto quando necessário. Ajuste os prompts conforme a resposta recebida para obter informações mais relevantes.

Exemplos de prompts

Para obter uma explicação simples sobre um conceito:

Para pedir ajuda com um problema específico:

Para solicitar conselhos ou sugestões, incluindo um role específico:

Para obter informações sobre tendências ou novidades, incluindo um role específico:

2. JS - Javascript

JavaScript

Linguagem de programação avançada bastante popular e bem completa.

Tríade Web : Interatividade

Saiba mais Javascript ou ECMAScript, foi criado por Brendan Eich em 1995. É uma linguagem de programação interpretada estruturada, de script em alto nível com tipagem dinâmica fraca e multiparadigma. Juntamente com HTML e CSS, o JavaScript é uma das três principais tecnologias da World Wide Web e permite a criação de páginas da Web interativas e, portanto, é uma parte essencial dos aplicativos da web.

Curso gratuito Link: Javascript - Curso em vídeo

2.1. NODE

NODE

Ou Node.js, é um ambiente de execução que utiliza o mecanismo JavaScript V8, o mesmo núcleo do Google Chrome, mas operando fora do navegador, no lado do servidor. Isso significa que tudo o que você pode fazer no Node.js, também pode ser feito no console do DevTools para ser executado pelo navegador Web, no lado do cliente.

2.2. NPM

NPM

Node Package Manager - É uma ferramenta essencial para gerenciar pacotes no ambiente Node.js. Com o NPM, você pode instalar, compartilhar e gerenciar bibliotecas e ferramentas reutilizáveis, facilitando a integração de funcionalidades em seus projetos.

Por que aprender NPM?
À medida que você avança no desenvolvimento, perceberá a crescente necessidade de produzir, importar e executar projetos de maneira eficiente. É aqui que entra o NPM, uma ferramenta essencial para gerenciar dependências e módulos adicionais que enriquecem seu projeto com novas funcionalidades.

Imagine ter que adicionar cada módulo manualmente? Seria uma tarefa demorada e complicada! Com o NPM, você pode definir todas as dependências necessárias no arquivo 'package.json', e ele cuidará de instalar e gerenciar esses módulos para você.

Portanto, aprender NPM é fundamental para agilizar e simplificar seu fluxo de trabalho no desenvolvimento de projetos.

3. HTML

HTML

HyperText Markup Language - Linguagem de Marcação de Hipertexto, responsável por distribuir os elementos que aparecem em uma página Web.

Tríade Web : Marcação.

Saiba mais
HTML foi desenvolvido por Tim Berners-Lee no CERN (Organização Europeia para a Pesquisa Nuclear), com auxílio do ambiente de desenvolvimento NeXTSTEP, e inicialmente era uma coleção de ferramentas para lidar com as pesquisas e a comunicação entre seu criador e outras pessoas.

Com a evolução da internet, a solução foi ganhando atenção mundial. As primeiras versões eram flexíveis, e isso ajudava iniciantes na área. Com o tempo, a estrutura foi ficando mais rígida, mas até hoje os navegadores conseguem interpretar páginas web feitas da maneira antiga através da retrocompatibilidade.

Formalmente, as especificações foram definidas somente na década de 1990. Em seguida, começou a evolução do HTML, sendo criado um grupo de trabalho para o HTML que, em 1995, publicou a versão HTML 2.0. No final de 1997 foi lançada a versão HTML 3.5 e, com ela, o grupo de trabalho da W3C começou a focar no desenvolvimento do XHTML. Continuaram com o lançamento das versões HTML 4.01 em 1999, do XHTML em 2000, e finalmente chegamos em 2014, momento em que é lançado o HTML5, que é utilizado até hoje, assim como suas atualizações.

(Fonte: <https://www.alura.com.br/artigos/html>)


Dica

Por padrão, é recomendado o nome `index.html` para a página principal

Documentação HTML

Curso gratuito Link: HTML + CSS - Curso em vídeo


4. CSS

CSS

Cascading Style Sheets - é uma linguagem de estilo utilizada para descrever a apresentação de um documento HTML. Em outras palavras, ele é responsável por definir como os elementos HTML devem ser exibidos na tela.

Tríade Web : Estilização

Documentação CSS

Aprenda CSS

Saiba mais
Curso gratuito Link: HTML + CSS - Curso em vídeo

4.1 Bootstrap

Bootstrap

Uma biblioteca de código CSS desenvolvida pelo Twitter, muito utilizada por programadores do mundo todo. Ela fornece uma coleção de ferramentas e estilos para criar interfaces responsivas e modernas com facilidade.

Site do Bootstrap

5. Versionamento

Controle de versões é uma ferramenta essencial para quem está começando na programação. Ele ajuda a gerenciar e acompanhar as mudanças no código de um projeto ao longo do tempo te proporcionando um maior controle das alterações realizadas.

5.1. GIT

Git

Git é uma ferramenta que ajuda a gerenciar o código de projetos de software. Usando Git, você pode manter um registro de todas as mudanças feitas no código, o que facilita ver o histórico e corrigir problemas se algo der errado.

Lista de Comandos

Saiba mais De longe, o sistema de controle de versão moderno mais usado no mundo hoje é o Git que é um projeto de código aberto maduro e com manutenção ativa desenvolvido em 2005 por [Linus Torvalds](https://pt.wikipedia.org/wiki/Linus_Torvalds), o famoso criador do kernel do sistema operacional [Linux](https://pt.wikipedia.org/wiki/Linux).

Ele também torna mais fácil para várias pessoas trabalharem no mesmo projeto ao mesmo tempo, sem sobrescrever o trabalho de outras. Com Git, você pode criar “ramificações” para testar novas ideias sem afetar o código principal e depois juntar essas alterações de forma segura.

Além disso, Git faz backup do código, garantindo que você não perca seu trabalho devido a falhas técnicas. Ele também ajuda a organizar o desenvolvimento e a manter a qualidade do código.

Em resumo, Git é essencial para controlar e colaborar no desenvolvimento de software, tornando o trabalho mais seguro e eficiente.

Curso gratuito Link: Git & Github - Curso em vídeo

6. Github

Github

Rede social para programadores

GitHub é uma plataforma de hospedagem de código-fonte e controle de versão baseada em Git. Ele permite que desenvolvedores colaborem em projetos de software, compartilhem código, e gerenciem versões e alterações. Oferece funcionalidades como repositórios, pull requests, issues, e integração contínua. GitHub também possui uma comunidade ativa e recursos para documentação e gerenciamento de projetos.

Site do Github

6.1 Repositórios

Local onde você pode armazenar seus projetos e códigos em qualquer linguagem, além de permitir que outras pessoas visualizem por meio de link (caso não seja privado), você garante também um local para armazená-los de onde estiver.

6.2 Comandos para repositórios versionados com Git

Clone: Você pode fazer uma cópia de algum repositório com o comando git clone.

Fork: Você cria um repositório-cópia de algum projeto no Github e pode trabalhar em suas próprias alterações sem afetar o repositório original. Para fazer um fork você precisa acessar o Github e clicar no botão fork.

Pull Request: Quando vocé cria uma alteração (commit) em um repositório criado por meio de fork, ele cria um Pull Request que é enviado para o repositório original para que ele seja analisado, podendo ser aceito ou rejeitado pelo dono do projeto.

Branch: Uma ramificação do fluxo de trabalho do repositório, onde você pode trabalhar versões em separado do seu projeto, a branch principal geralmente se chama main ou master.

README.md

Existe um repositório especial em que você o cria utilizando seu nome de usuário do Github, isso fará com que todos que visitem seu perfil, acessem diretamente o arquivo chamado README.md (extensão Markdown)

Veja meu exemplo: https://github.com/devrenj

Para que isso aconteça, meu repositório então se chama devrenj e contém um arquivo README.md

Markdown

Markdown

Documentação no Github

É uma linguagem de marcação que facilita a escrita com comandos simples para implementar formatação HTML em forma de texto, e.g.

# Título H1

## Título H2

### Título H3

_Texto Itálico_

**Texto Negrito**

*Texto Italico*


<google.com> - Link direto

![Imagem](https://picsum.photos/150)

Listas

  - Item 1
  - Item 2
  - Item 3

  1. Item 1
  2. Item 2
  3. Item 3

Github Pages

Criando um repositório especial usuario.github.io você consegue ter uma página na internet gratuita, sem se preocupar com provedor nem hospedagem!

Documentação do Github Pages

Projetos recomendados https://github.com/AdrianaSaty/colinha-commit-semantico https://github.com/KAYOKG/BibliotecaDev https://github.com/free-educa/books https://github.com/ikatyang/emoji-cheat-sheet https://github.com/EbookFoundation/free-programming-books https://github.com/florinpop17/app-ideas

Curso gratuito Link: Git & Github - Curso em vídeo

7. CLI

CLI

Command Line Interface

É um conhecimento importante pois você irá precisar ao usar o Git Bash, Windows Power Shell, Prompt de Comando, até mesmo para abrir e utilizar algum terminal no VS Code, é recomendável ter conhecimento sobre este assunto.

Principais comandos:

::Navegar para o caminho específico
cd C:\

::Listar o diretório atual
ls ou dir 

::Cria uma nova pasta 
mkdir "meus arquivos" 

::Remove a pasta
rmdir <dir> 

::Remove o arquivo
del <file> 

::Cria um arquivo com o conteúdo de msg
echo <msg> <file.extension> 

::Copia o conteúdo de um arquivo para a area de transferência
type <file.extension> | clip 

::Copia o conteúdo de um arquivo para a area de transferência
clip < <file.extension> 

::Abre o explorador de arquivos no caminho atual
::(Funciona também na barra de endereços de uma pasta)
explorer . 

::Abre o VS Code no caminho atual
::(Funciona também na barra de endereços de uma pasta)
code .

É possível também criar soluções mais complexas, eu mesmo estudei um pouco sobre isso e criei essa utilidade:

Lista de comandos CLI

8. Linkedin

Linkedin

Rede social para profissionais

Para um programador, o LinkedIn é uma ferramenta essencial. Ele facilita o networking profissional, permitindo conexões com colegas e especialistas da área. A plataforma é um excelente recurso para encontrar oportunidades de emprego, já que muitas empresas recrutam diretamente por lá. Além disso, um perfil bem estruturado ajuda a construir sua marca pessoal, destacando suas habilidades e conquistas. O LinkedIn Learning oferece cursos para aprimorar suas habilidades e manter-se atualizado. Participar de grupos e seguir líderes do setor também proporciona acesso a discussões e tendências relevantes. Em resumo, o LinkedIn é crucial para expandir sua rede, explorar novas oportunidades e continuar aprendendo na área de programação.

Site do Linkedin

Bettha: Como criar um perfil de sucesso no LinkedIn?

9. Figma

Figma

O Figma é um editor gráfico de vetor e prototipagem de projetos de design de interface gráfica de usuário e desenvolvimento de UI/UX baseado principalmente no navegador web, com ferramentas offline adicionais para aplicações desktop para GNU/Linux, macOS e Windows.

Fonte: Wikipedia

Wireframe: É possível criar protótipos e até mesmo com funcionalidades para criar apresentações rápidas. É um excelente meio para dar um pontapé novas ideias de forma simples, rápida e visual, os chamados wireframes.

UI/UX: Permite que designers criem layouts visuais (UI) enquanto consideram a experiência do usuário (UX), ajustando fluxos e interações. Como é baseado na nuvem, é ótimo para colaboração em tempo real, ajudando equipes a iterar rapidamente e alinhar ideias de forma eficiente.

Colaboração: Um dos seus pontos principais é permitir que múltiplos usuários trabalhem simultaneamente em um projeto, facilitando a comunicação e o feedback em tempo real. Isso torna o Figma uma ferramenta poderosa para equipes de design, promovendo uma integração fluida entre designers, desenvolvedores e outras partes interessadas. Os comentários e edições em tempo real ajudam a garantir que todos os membros da equipe estejam sempre na mesma página.

Site do Figma

LICENSE

Copyright © 2024 Roberto Nóbrega Jr. (@devrenj) under MIT License

This site is open source. Improve this page.