Uso do Figma e Edição da Apeperia

Olá pattymiljkovic, tudo bem com você?

Eu não entendi muito bem a sua dúvida, você estava tentando editar o layout utilizando o figma e teve dificuldades para copiar o site que você está trabalhando, e queria tentar o wordpress?

Se for esse problema, existe um plugin do Figma que pode te ajudar que é o HTML-To-Figma que pega um site e transforma em um modelo do figma, eu tentei com o que você mandou e ficou assim:

https://www.figma.com/file/I01EXNtdYKz8hdgoBvEJvt/SaoVicente?node-id=0%3A1

Veja que existe ainda alguns errinhos com os botões principais e com as estatísticas, e é acrescentado algumas formas que são desnecessárias, mas acredito que já é 95% igual e agora seja mais fácil para editar :)

Você pode estar fazendo uma cópia para terminar as modificações =)

Abraços e Bons Estudos!

Olá Geovani,

Estou estudando o curso de Acessibilidade Web e preciso praticar para aprender. Então a dica foi pegar o link disponibilizado pelo professor que é o Figma da Apeperia, duplicar, fazer modificações conforme as aulas, deixando- os no padrão acessível.

Porém comecei a mexer e senti dificuldades, e como eu serei responsável por um site que informei acima, eu queria usar as aulas para criar um modelo que eu pudesse melhorar o site usando as dicas dessas aulas.

Falei sobre o Wordpress pois acredito que seria mais fácil criar um novo site ou copiar o modelo do site que citei e modificar (um novo projeto) do que fazer pelo Figma. Mas já estou me entendendo aos poucos com essa ferramenta.

Que legal você conseguiu pegar o HTML do site, e como fez isso? Então ficará mais fácil de eu mexer e aprender (será que vai servir como projeto das aulas?). Durante o andamento das aulas, fui olhando o site e percebendo alguns erros, assim como você percebeu, por isso eu queria aproveitar esse para fazer os ajustes. E depois de ajustado, poderias me informar como esse site voltará ao ar com a modificação, please?

Obrigada :)

Olá Patty,

Acredito que então a questão é que o objetivo do Figma, que é explicado nas aulas, é para apenas criar o "rascunho" do site (a interface), teoricamente o fluxo seria o seguinte:

• O site é projetado em ferramentas como o Figma / AdobeXD
• É passado para a equipe de desenvolvedores transformarem aquele projeto em um site real (seja com Wordpress ou qualquer outra forma)

Pois ferramentas como o figma auxiliam os desenvolvedores terem informações como tamanho, cores, e posição na tela :)

Em relação a suas dúvidas:

Falei sobre o Wordpress pois acredito que seria mais fácil criar um novo site ou copiar o modelo do site que citei e modificar (um novo projeto) do que fazer pelo Figma.

É que o objetivo das ferramentas são diferentes, a vantagem de utilizar o wordpress é que ao final você terá realmente o site funcionando, enquanto pelo figma teremos apenas o layout que ainda deverá ser desenvolvido, entretanto, a desvantagem é que pequenas alterações são triviais no figma e podem dar um certo trabalho utilizando o wordpress

HTML do site, e como fez isso? Então ficará mais fácil de eu mexer e aprender (será que vai servir como projeto das aulas?).

• No figma temos uma lista de plugin que podemos fazer download: Plugins
• Podemos pesquisar o Html to Figma
• E a primeira opção é o plugin que queremos
• Ai basta criarmos um projeto em branco e clicar no menu
• Selecionar a opção dessa forma
• Ai podemos copiar o link do site para que ele crie uma cópia no formato do figma

Você pode ir acompanhando as aulas do curso com o da Apperia para seguir o mesmo modelo que o professor, e a parte, também incorporar no seu projeto as mudanças que acredita ser pertinente :)

E depois de ajustado, poderias me informar como esse site voltará ao ar com a modificação, please?

Bem, foi como eu disse anteriormente, o figma é apenas para criarmos o nosso layout, as mudanças para gerar o site ai seria necessário utilizar outras ferramentas de desenvolvimento :)

Acredito que se você procura ter um resultado instantâneo das mudanças, ai eu recomendaria utilizar o projeto da Apperia para ir aprendendo um pouco mais sobre acessibilidade, entretanto, recriar o seu projeto diretamente com o wordpress ou algo do tipo :)

Respondido suas dúvidas? Qualquer coisa estou a disposição :)

Abraços e Bons Estudos!

Olá Geovani,

Entendi sobre as diferenças do Figma e Wordpress.

Só para confirmar: Eu posso usar o Figma para montar o corpo do site utilizando as ferramentas cores, desenhos, etc e depois passar para um programa que transforma no site? Isso sendo para sites novos e não existentes como àquele que mencionei (o qual vc ja explicou ter que usar outras ferramentas).

Agradeço pelo grande esclarecimento acima :)

Olá Patty,

Eu posso usar o Figma para montar o corpo do site utilizando as ferramentas cores, desenhos, etc e depois passar para um programa que transforma no site?

Infelizmente não existe nada que faça essa conversão de figma para um site, o Figma vai servir apenas como um embasamento de como você quer o projeto, como se fosse a planta de uma casa, por mais que você tenha tudo definido, serve apenas para conceituar como você quer que seja feito o projeto!

Então você vai elabordar todo o conceito de como vai ser o corpo do site e depois procurar outra tecnologia para desenvolver, seja utilizando um gerador de sites como o Wordpress, ou iniciar o desenvolvimento com outras tecnologias (Javascript, PHP, etc) :)

Abraços e Bons Estudos :)

Olá Geovani,

Ok compreendido!

Muito obrigada pelos esclarecimentos. :))