- 12
- 13 536
Crafting UX: Construindo a Experiência do Usuário
Brazil
Приєднався 7 лют 2024
Bem-vindo ao Crafting UX: Construindo a Experiência do Usuário!
Neste canal, compartilharei dicas de design de UI/UX e web design com você e te ajudarei a construir a melhor experiência para o seu usuário.
Não se esqueça de se inscrever para não perder nenhum dos nossos vídeos e ativar as notificações para ficar por dentro de todas as novidades.
Neste canal, compartilharei dicas de design de UI/UX e web design com você e te ajudarei a construir a melhor experiência para o seu usuário.
Não se esqueça de se inscrever para não perder nenhum dos nossos vídeos e ativar as notificações para ficar por dentro de todas as novidades.
Como Criar uma BARRA DE PROGRESSO ANIMADA no Figma + Dica BONUS
Neste vídeo, você vai aprender a criar uma progress bar no Figma, um elemento essencial para melhorar a experiência do usuário nos seus projetos de design! As barras de progresso ajudam a informar o andamento de uma tarefa, deixando claro que o sistema está funcionando e o que o usuário pode esperar. Vamos explorar como criar tanto uma barra de progresso linear quanto uma circular, usando animações para deixá-las mais dinâmicas e interativas.
#figma #uxdesign #tutorial
#figma #uxdesign #tutorial
Переглядів: 194
Відео
Como criar TABELAS no FIGMA 2024 [RESPONSIVA]
Переглядів 2712 місяці тому
No vídeo de hoje, você vai aprender a criar uma tabela responsiva no Figma utilizando o poderoso recurso de Auto Layout! Esse é um dos truques mais importantes para designers de interfaces, já que permite que suas tabelas se adaptem automaticamente a diferentes tamanhos de tela - essencial para projetos web e mobile. Se você quer criar tabelas mais dinâmicas e eficientes, sem perder tempo ajust...
Criando tabela no Figma [MUITO FÁCIL]
Переглядів 5632 місяці тому
Mais um vídeo de Figma aqui no canal, e nesse video eu vou te dar uma dica bem simples e bem rápida que vai te ajudar muito nos seus protótipos. Hoje eu vou mostrar como criar tabelas no Figma de um jeito bem simples. Não existe só esse jeito de fazer tabela aqui no figma, existe plug-in e existem vários outros modos, alguns mais fáceis e outros mais complexos. Se inscreva no canal, ative o sin...
Como Criar Uma Tela de Planos e Preços no Figma [Passo a Passo]
Переглядів 3053 місяці тому
Neste vídeo, vou te mostrar como criar uma tela de Planos e Preços incrível usando o Figma! Essa tela é fundamental para quem oferece serviços online e quer apresentar suas opções de planos de forma clara e atraente aos clientes. 🔔 Se inscreva para mais tutoriais de design e UI/UX! 00:00 - Introdução 00:43 - Criando a página com colunas 02:47 - Titulo da página 05:00 - Criando o card do plano 0...
Como criar uma TELA DE LOGIN no Figma
Переглядів 4,3 тис.8 місяців тому
No tutorial de hoje, vamos aprender como criar uma tela de login no Figma, passo a passo! Se você é iniciante no mundo do design ou quer aprimorar suas habilidades, esse vídeo é para você. Vamos explorar juntos o processo de criação de uma interface de usuário amigável e funcional, utilizando a ferramenta poderosa e colaborativa que é o Figma. Desde a concepção dos elementos básicos até os deta...
Recriando o TINDER [FIGMA TUTORIAL 2024]
Переглядів 2348 місяців тому
No vídeo de hoje, eu vou te ensinar como evoluir no Figma replicando um dos maiores aplicativos do momento, o Tinder. Além de aprender macetes interessantes do Figma você vai conhecer plugins e dicas de design para deixar seus protótipos ainda melhores. 0:00 introdução 0:14 info celular 6:00 parte superior 12:21 imagem 18:07 detalhe das imagens 19:08 parte inferior 25:50 prototipo finalizado Nã...
Novidade no Figma: MULTI-SELECT & MULTI-EDIT | Figma Update (2024)
Переглядів 2119 місяців тому
Nesse vídeo eu vou passar pelas novas funcionalidades que o Figma lançou recentemente. Se você curtiu o vídeo, não esqueça de deixar o seu like, compartilhar com os amigos e se inscrever no canal para mais conteúdos como esse. E não se esqueça de ativar o sininho para receber notificações!
Efeito de Vidro no Figma: Cartão Transparente em 6 Minutos!💎✨
Переглядів 3189 місяців тому
E ai pessoal? No video de hoje vamos fazer o efeito de vidro no Figma. Esse efeito que ficou popular com a apple tanto no Iphone quanto no Mac vai te ajudar a deixar seus designs ainda mais modernos e atrativos. E hoje vamos criar um cartão transparente no estilo do nubank para aprender essa técnica no Figma! Bora pro vídeo!
Botão ANIMADO no Figma + Material Design 3!
Переглядів 8039 місяців тому
Olá pessoal! No video de hoje, nós vamos aprender como criar um botão animado para deixar seus protótipos no Figma cada vez mais reais. Esse botão terá os efeitos de hover quando passamos o mouse por cima dele e pressed quando a gente pressionar ele. Conheça o Material design 3: m3.material.io/ Aprenda a criar um campo para formulário animado no Figma: ua-cam.com/video/PTFNXstplfk/v-deo.html
Como criar um INPUT FIELD para seu FORMULÁRIO no Figma
Переглядів 5 тис.9 місяців тому
Aprenda como criar um input field de texto ANIMADO no Figma usando componentes iterativos. Nós vamos nos basear nos exemplos do que há de mais moderno em UI e UX design para gerar esse campo animado para os seus protótipos. No final você poderá criar input text fields lindos e repressivos, deixando seus protótipos ainda mais elegantes. Qualquer dúvida deixe um comentário que ajudarei com o maio...
Aprenda a animar texto no Figma | Figma Tutorial
Переглядів 1,3 тис.9 місяців тому
Você já quis criar um texto animado igual ao desses sites bonitos? Se sua resposta foi sim, você está no vídeo certo. Por que nesse vídeo eu vou te mostrar como fazer essa animação avançada no Figma em apenas cinco minutos. #figma #uxdesign #uidesign #userexperience #animatedtext #likeapro #comofazer
Oii, e quando eu preciso criar uma ação ao pressionar, exemplo, quando seleciono um email no gmail, eu seguro e o estado muda para selecionado, cmo prototipar algo parecido? Pode me dar uma luz?
Oi, você pode usar a propriedade "while pressed" (quando pressionado) e cria um estado para isso.
Eu não tenho o Constraints 😢😢 como faço pra arrumar isso??
faz com as variantes, é só criar uma variante para cada estado e fazer a iteração entre elas
Outra pergunta, agora mais complexa: suponha que uma das colunas se refere a área em m2. Digamos que eu queira exibir também a largura e a altura desta área num combo box na célula correspondente. Quando o ComboBox está aberto ele exibe cada dimensão e ao mesmo tempo expande a largura da linha inteira. Tem jeito de reproduzir isso no Figma?
Cara, é um pouco mais difícil mas eu acho que é possível sim. Cria um componente do combobox a parte com as iterações que ele terá (acredito que as opções de largura e altura quando clicar no combobox) e depois insere esse combo box (a variante dele antes de mostrar altura a largura) dentro da coluna na tabela. Estou preparando um vídeo ensinando a criar combobox no figma e já posso dar esse exemplo de utilização dentro de uma tabela. Fica de olho nos novos videos.
Tem como deixar cada coluna com largura apropriada ao seu conteúdo? por exemplo: as colunas (Código, descrição, valor, cliente).
Opa, tem sim, é só pegar o grupo da coluna e diminuir a largura toda dele.
por alguma razão nao funciona mais... Segui tudo certo e fica fixo no primeiro texto
@joaosousa2059 funciona sim, até refiz com as ultimas atualizações do Figma para verificar se mudou algo. Vê se Na você está criando os frames certinho e na hora de fazer o fluxo pelo prototipo está ligando texto no texto e se está usando change to e after delay.
Que aula meu amigo, parabéns e obrigado pelo conteúdo, me ajudou muito!
Fico feliz em ter ajudado!!!
Obrigado ❤
Fala, meu amigo! tô entrando agora nessa área de UI/UX e achei seu canal. Parabéns pelos conteúdos! Me tira uma dúvida? quando eu modifico a distância vertical e horizontal, nada ocorre. o que eu tô fazendo de errado? kkkk grande abraço!
Fala grande! Obrigado pelo apoio! Vê se você está alterando a distancia do item certo kkkkk, acontece comigo o tempo todo.
Vlw
vlw
Qual curso vc recomenda pra quem quer ser Ui design? Design Gráfico? Ou outro? Edit: sei que é uma profissão muito ampla e que tem muita coisa envolvida exige muito conhecimento, e por isso que não e só um curso e sim varios outros a mais pra assim vc expandir seu conhecimento na área, oque vc ne recomenda estudar e qual curso específico?
Começa aprendendo um pouco das ferramentas, exemplo o próprio figma. Depois procura cursos de design de interface. Depois UX design e assim vai
@@construindoux vlw
Vlw
vlw
Mano vc e muito bom
Valeu!
Tem alguma forma de fazer isso pelo Android?
O figma tem o aplicativo para android, não é muito legal de mexer mas da pra fazer. Se você quiser mudar esse layout para android, na hora de criar, temos o padrão de frames para dispositivos móveis.
@@construindoux blz vou ver dps
Muito man, acho que finalmente achei qual profissão seguir tenho 20 anos é não sabia qual profissão seguir então dps de pesquisar muito sobre ui design desde 2023 vim pesquisando é agora tô 60% ciente que essa profissão é pra min eu gosto eu curto bastante, porém oque ne deixa desanimado é a IA sim tem algumas IA que fazem UI design é isso me deixa pensante dms oque vc acha ? Sera que a profissão Ui design pode ser "extinta" se a IA de Ui design se torna algo 30x ou 50x mais melhor e eficiente? Disso que eu tenho medo...
Fala garoto! Fico feliz que tenha interesse em vir para essa área! Cara, com essa vinda com tudo da IA acho que todo mundo teve medo, mas já estamos entrando numa fase de entender o que a IA faz bem e o que ela não faz. Nós devemos ver a IA mais como uma ferramenta que vai melhorar nosso trabalho do que como algo que vai roubar ele. É importante a gente dominar o uso dessas IAs para ajudar a gente no nosso trabalho. Fica tranquilo e pode vir que essa área não vai parar :D
@@construindoux blz vlw pelo conselho
Como eu faço pra aparecer um texto quando Clico invez do cursor piscando?
Em vez de usar a variante do cursor na ação de clique, crie uma de texto
@@construindoux obrigada 😁
@@construindoux E caso eu queira usar ambas (barra e texto) crio uma variável booleana? Enquanto não digitar a barra é true, após digitar a barra é false? Conteúdo top, man! 🤔👏
@@JJSilva89 Eu nunca precisei fazer algo desse tipo, mas na teoria, seria assim mesmo!
Irmão, como posso fazer pra conseguir digitar no input do figma? Queria que fosse possivel pois estou realizando um projeto e seria ótimo se vc puder me ajudar. Vlw paizão ótimo vídeo!
Fala irmão, grato pelo comentário! Cara, o Figma não tem uma função específica pra isso, quando precisamos fazer, a gente usa as iterações do prototipo colocando letra por letra.
ótimo vídeo
Obrigado
Topppp
Obrigado!
Gostei! Muito obrigada! sabe dizer como salvar em formato .rar no pc depois de pronto?
O figma permite você exportar o prototipo em png, jpg, svg e pdf. Depois disso você pode compactar para formato .rar
Valeu, campeão! Tens o meu like e subscrição.
Obrigado querido!
Tem alguma forma de exportar o protótipo em formato de vídeo ?
Se você for em exportar talvez tenha alguns formatos de video, se não tiver, talvez exista algum plugin.
Começando agora no figma. Muito didático. Ganhou um seguidor
Obrigado por incentivar meu trabalho! Espero ter ajudado
Você e melhor
Obrigado!
excelente vídeo! existe alguma forma de melhorar o protótipo, inserindo, por exmeplo, formas do usuário digitar os dados e aparecer?
Tem algumas formas de fazer, mas talvez dê muito trabalho que não valha a pena.
Continue criando esses tutoriais, por favor hahaha!!! Me ajudou muito!!!
Vou continuar sim, obrigado pelo apoio!
Nossa amei o vídeo o único que me ensinou de verdade, tinha visto vários vídeos de famosos e nenhum teve essa eficiência para ensinar.me ajudou muito
Fico feliz em conseguir ter ajudado!
Parabéns , ficou muito intuititvo e prático.
Muito obrigado!
como anexar a uma landing page tmb feita no figma? (com um botão de direcionamento)
Você pode copiar ela do fluxo que vc criou e colocar ela dentro do documento do figma da tela de login. Ai no botão vc faz o direcionamento pro fluxo que vc precisa.
MUITO BOM MANO, vlw
Muito obrigado!
esse vídeo me ajudou muitoo. você poderia gravar um ensinando criar um teclado e codificar?
Fico feliz em ter ajudado. Em breve vai sair um vídeo com esse conteúdo.
Bom dia to com um problema no figma quando eu importo pro great pages ele.fica ok no desktop.mais nao versao mobile ele fica pequeno mesmo fazendo as alterações alguem pode.me ajudar ?sabe como resolver.?
Você está gerando o código html e importando no great pages?
@@construindoux nao , eu estou expostando em jpeg
Tenta criar um novo protótipo com um novo frame, e na hora de criar o frame escolhe alguma das opções de phone, isso pode resolver.
Eu ainda não tinha visto um conteúdo desse em português. Me ajudou bastante
Obrigado!