Figma para código: carta responsiva
Do Figma ao browser: a mesma carta precisa sobreviver mobile, tablet e desktop sem inventar layout no meio do encode.
Mesmo design, três breakpoints
Nesta parte do material sobre figma para codigo responsivo, o foco é «Mesmo design, três breakpoints». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Bem, veja isso, isso está no browser e é apenas uma carta que é responsável, há uma versão móvel e então há uma versão tablet e então há uma versão desktop, o que é realmente legal sobre isso é que este é o mesmo design que você acabou de ver que eu criei em Figma e eu não encodei nenhuma delas que você viu, em vez disso, usamos o server Figma MCP para fazer esta seleção, este carta que tem três diferentes variáveis para torná-lo responsável sem tocar nenhum código, então vou mostrar exatamente como configurar isso neste vídeo bem pessoal, vamos para a descrição deste vídeo pegue este arquivo aqui, isso vai te ajudar a seguir em frente para que você possa fazer isso de mão, é a única maneira de você se comprometer com isso para memória porque há muitos pequenos títulos diferentes se você quiser que isso funcione, então este aqui é apenas dois frames com nenhum layout auto em qualquer lugar, veja, eu posso tirar este texto e movê-lo onde quer que eu o faça livremente, não importa não está em layout auto ainda, mas antes de chegarmos à parte de layout auto e eu descrevo o que é um, queremos ter certeza de que temos variáveis ligadas a todas as diferentes cores que são usadas, então se eu selecionar esses dois elementos, você sabe o topo e o fundo de cartão e o header, você verá que temos essas cores de seleção aqui e você pode clicar no tipo, se você apertar esse pequeno ícone de círculo, ele diz selecione três elementos usando esse color para que você possa ver onde eles estão sendo usados, então o color branco está sendo usado neste elemento de texto, este elemento de texto e esse. Então, se eu selecionar essas coisas novamente, eu venho aqui e clico nas quatro pequenas círculos, há flutuantes em todo lugar, porque ontem eu deixei minha porta aberta muito tempo atrás no meu estúdio, e agora essas flutuantes estão me atrapalhando. De qualquer forma, então, clicamos nas quatro coisas aí, então clicamos em novo estilo, e então nós apenas damos um nome variável.
Vamos dar um nome, eu não sei, vamos dizer text color, aqui vamos nós text color estamos prontos para rock e então temos que fazer o resto desses, por exemplo, este, onde está esta cor sendo usada então eu clico nesta pequena coisa, oh ok, então isso está sendo usado em dois diferentes áreas, é o fundo de vista desta parte e o fundo de vista da carta uh este pequeno botão cta chamado ação então o que posso fazer agora é apenas selecionar isso e agora vou clicar em mais abaixo da variável, dê um nome Vamos chamar isso de Panel BG Color. Então, eu clico aqui, eu clico em Plus e eu só nomeo-o H1. Então, agora, se eu selecionar fora daqui, você pode ver os quatro estilos de tipos que eu tenho.
O que a IA/encode acerta
Nesta parte do material sobre figma para codigo responsivo, o foco é «O que a IA/encode acerta». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Primeiro, para quem não sabe o que é auto-layout, auto-layout é basicamente a forma de Figma tentar recriar habilidades de layout do CSS, como o que se chama flexbox ou grid. Então, pode ser um pouco difícil entender como traduzir esses valores aqui em Figma para o lado de frente. Então, aqui, nós podemos ver que isso é AutoLayout, e diz AutoLayout em vez de apenas Layout.
Baseado na altura deste elemento e neste elemento que são os elementos infantis do layout de auto, esta altura geral será ligada à altura deles, isso significa abraço, eles estão abraçando-se e então a altura é uma altura de cor dura, uma altura fixa de 1239, isso é bom por agora, podemos ajustar isso mais tarde e torná-lo responsável uh no LLM, então, em seguida, agora quando você cria um layout de auto, você quer se acostumar a tomar a altura ou apenas empurrando a parte certa para ver se está se comportando como você queria no browser agora o texto está sendo clicar ou clicar em rather e isso não realmente faz sentido, nós queríamos que responda naturalmente, então a maneira como fazemos isso é que agora double clicamos aqui, isso não é um layout automático, como eu sei se você clicar no header de cartas diz layout, não diz auto layout, então há dois elementos dentro dele, um elemento de tipo e outro elemento de tipo, então se clicar em layout, ele sabe automaticamente por causa de como esses dois elementos foram estruturados que eles estão sentados verticalmente, então é um layout auto vertical, não um horizontal como este, se fizéssemos horizontal, eles colocariam isso à direita, não queremos isso, ok, então a próxima coisa que veremos é que eu De novo, tente voltar. Bem, a distância é uma distância hardcoded, ou diz, é um contato de hug, mais ou menos. Temos três diferentes elementos e esta vez eles estão em colunas, eles estão sentados à esquerda e à direita de um outro.
Na prática
Do Figma ao browser: carta responsiva mobile/tablet/desktop sem 'inventar' layout.
Gaps de tipografia e spacing
Nesta parte do material sobre figma para codigo responsivo, o foco é «Gaps de tipografia e spacing». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Então, se nós tivéssemos que tirar isso e fazer um layout automático e então tivéssemos que mudar para um stack, como por exemplo, não siga esta parte, mas se eu mudar isso para um vertical, queremos ter espaço igual entre todos esses elementos ou queremos ter agrupação, como onde talvez o ícone e a parágrafo abaixo é um pouco mais próximos um pouco mais próximos do botão aprender mais. Isso é uma coisa importante, porque se eu voltar aqui, porque você tem que imaginar como você quer o design e o layout, então você pode ter que adicionar um layout, um layout automático talvez através destes dois itens primeiro e depois adicionar um layout automático com aprender mais nesse layout automático, então aqui é como eu vou abordar seguindo o cardfooter, selecionamos ele, escolhemos o layout automático, então tomamos estes dois elementos o ícone no parágrafo, escolhemos o layout automático nesses dois independentemente, então Com isso ainda selecionado, agimos Shift e selecionamos o botão de Ação de Ação para aprender mais e escolhemos o layout automático. Agora, note que eu não ajustei nenhum dos propósitos do CSS, ou seja, eu não ajustei nenhum dos propósitos do layout automático para qualquer uma dessas coisas que eu fiz.
A primeira coisa que farei é entrar aqui e notar o texto, como diz, vamos ver aqui, a distância é encodada, queremos que seja o contêiner de fio, também queremos a altura para ser o contêiner de fio e vamos mudar a alinhamento para o centro aqui abaixo, sob a topografia, alinhar o meio, aqui vamos nós e então, entrando aqui especificamente, vamos começar a olhar para o footer de cartão, os sete de layout automático, Está preparado para abraço para a altura e a altura está preparada para retenção. Aprenda mais é ao menos ficar à direita, mas o texto precisa Não precisa que o texto se equilibrasse como está. Então, se nós deslizamos para baixo, a altura está preparada para abraço e esta está preparada para retenção.
Validação no device
Nesta parte do material sobre figma para codigo responsivo, o foco é «Validação no device». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Nós temos nossos estilos de topografia, nós temos nossas variáveis de cor, mas também temos que lidar com o espacamento e as propriedades de gama. E isso pode ser um pouco mais tempo-consumido, como você está a ver, mas não se preocupe, eu vou deslizar o resto disso depois de explicar. Então, se nós selecionarmos o primeiro frame, por exemplo, antes de chegarmos nessa parte, vamos ir e renomar isso.
Vamos chamar este frame para a esquerda, então agora todos os nossos elementos são renomados de forma apropriada como assim ok, então podemos ver que temos a propriedade do espaço aqui e então temos nosso espacamento vertical e o espacamento horizontal, eles são todos zeros, então se eu clicar aqui, podemos apenas adicionar, como diz o espaço zero, uma variável que já existe, agora se você não vê isso então você pode apenas clicar em variável aplicar e depois clicar em mais e adicionar sua própria variável também ok outra coisa que você precisa fazer é a radiação de cor se não for assim, pode adicionar correntes que você não quiser Aplica variável, escolha zero Aqui está Próximo, vou descer para a próxima seção de auto-layout e faremos a mesma coisa Vou escolher Aplica variável e notem aqui que diz 48 e 58 Estão bem próximos de onde usamos o mesmo valor e se eu descer por aqui eu posso ver que 48 existe de novo, você pode não ver essa lista se não, você pode adicionar essas variáveis para o fly Oh, e note como isso diz 4, então eu vou clicar, não pequeno, vamos ajustar extra pequeno, vamos lá e vamos fazer a mesma coisa aqui e novamente vamos mudar isso Eu acho que vamos usar as mesmas variáveis do que antes, então 48 aqui em todo o lado também e então, então note como eu tenho tudo meio que instalado como queremos que seja, isso pode ser auto também e agora vou continuar a fazer o mesmo com cada um desses layouts e fazer o mesmo para essas quatro áreas-chave, então é isso, eu tenho tudo pronto para tocar e agora novamente, uma última vez, para garantir que tudo trabalhe ainda como antes, agora vamos criar o o .variações de tablet e mobile. Depois vou clicar em cima do botão e vamos fazer com que o tamanho do tamanho do container seja o mesmo do tamanho do hug. Vamos tirar da propriedade do espaço aqui para levantar um pouco e outra coisa que podemos fazer é também fazer alguns ajustes mais finos como por exemplo como digamos por exemplo uh nós não queremos muito espaço em todo o lado agora é 48 então eu vou apenas detalhar esses e então vamos adicionar outro que talvez seja metade do tamanho como 24 então eu farei isso também aqui faça a mesma coisa aqui detalhe adicione 24 em vez de agora há muito espaço entre estes elementos que eu não gosto muito, então temos um abraço aqui, talvez vamos descer aqui e vamos dizer que a altura será o conteúdo abraço, ah, isso é melhor agora temos nossos cartões prontos para em nosso processo aqui é principalmente feito em Figma.
Sinais de que está funcionando
Nesta parte do material sobre figma para codigo responsivo, o foco é «Sinais de que está funcionando». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Vamos escolher a variação móvel do design da carta e então vamos instruir o LLM para nos dar um CSS responsivo de primeira mão móvel. Agora, se você não sabe o que isso significa, não é realmente tão importante, mas basicamente o início do CSS que escreve vai ser baseado neste layout da carta aqui e então vai usar o que chamamos de Queries de Média que eu vou fazer as mudanças a isso quando o browser for maior, então uma vez que acerta uma ampliação de 789 pixels, vai mudar o design de isso, onde tudo está em cima de um outro, para onde esses dois elementos estão, esquerdo e direito. Em cursor, temos que ter cuidado com o CTRL L para ter cuidado com essa seção de contato.
Clique em ferramentas e integrações e tenha certeza que a Figma está lá ok agora não é difícil instalar este servidor Figma MCP, então tenha certeza de fazer isso primeiro Se está aparecendo como verde ou qualquer outra cor do que verde, ative isso até que aconteça. Use o server MCP para traduzir isso para HTML e CSS. E centrar a carta verticalmente e horizontalmente, há um ícone svg, agarrem o código associado com o ícone e usem isso, tudo bem, então esta frame é para uma versão móvel da carta, usem o design mobile primeiro e depois disso, eu selecionei uma variação de tablet para esta carta e então uma variação de desktop, usaremos me to query para criar uma versão responsável desta carta, vou adicionar uma mais coisa aqui e vou dizer que certifique-se que você agarre as variáveis de cor associadas e Outros variadores de espacamento e estilos antes de você proceder.
O que evitar na primeira semana
Nesta parte do material sobre figma para codigo responsivo, o foco é «O que evitar na primeira semana». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Ok, então essa parte é importante porque às vezes não pode fazer isso e então o design que produz não parece certo ou qualquer coisa que você desenhou porque ele não escolheu pegar todas essas informações tokenizadas. De novo, tenha em mente que no desktop do Figma você tem essa variação de celular selecionada. E então vamos clicar em enviar eu tenho modo de agente, por acaso, com clave 4 sonet selecionado, então você vai ver aqui um pouco das ferramentas que ele chamará, então às vezes isso não pode funcionar e se não funcionar, ele vai te dar um pouco de informação que tentei fazer algo mais, mas este é um bom sinal aqui onde diz que digite o código digite fichas variáveis e digite o código conectar mapa que e então pegar imagem é como um resumo oh não tente de novo, então isso diz que estamos com problemas em se conectar ao provedor do modelo isso aconteceu para mim já em preparação para isso, então às vezes você só tem que clicar em retry e geralmente vai funcionar é meio raro que isso aconteça um monte de vezes em um em uma série, então faremos isso novamente, chamando o código, todas as outras coisas e espero que funcione desta vez.
Você pode ver aqui que temos as variáveis css definidas baseadas na seleção de figma e agora está feito, então clique em certo, abram com o server vivo, essa é uma extensão que eu instalei e vai abrir o server vivo no port 5500 ok então aqui está, usou um ícone de svg completamente diferente e às vezes isso acontece e é muito frustrante, não vou se preocupar com isso agora porque pode acabar fixando isso no prompt de seguida quando fazemos a variação do tablet Mas se você olhar para isso e nós apagarmos o browser, você pode ver que é apenas uma ampliação fixa que fixará no apontamento de seguida de qualquer forma para isso, então aqui é o que vamos fazer para o apontamento de seguida, mas isso está parecendo muito, isso está parecendo muito parecido exatamente, você sabe, com exceção do ícone do que queríamos, então agora o que faremos é voltar para Figma, selecione isso, minimize-o e eu tenho um apontamento de seguida já esperando Eu escolhi a versão do tablet da mesma carta, todos os nomes de layer são os mesmos, exceto que o layout automático é ajustado em algumas áreas-chave. Integrar esses mudanças em uma query de mídia que é baseada na carta tendo uma amplitude mínima de 715 pixels. Código para o ícone agora se eu clicar aqui, aqui vamos nós, então se eu clicar em renome e apenas copiar isso ou apenas sim copiar aquele arquivo ou arquivo ok vamos clicar em jogar vamos ver o que faz Bem, então, note que ele usou o ícone correto do SVG aqui, está atualizado e aqui vamos nós.
Como explicar isso para o time
Nesta parte do material sobre figma para codigo responsivo, o foco é «Como explicar isso para o time». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Ok, então está feito e parece que fez um bom trabalho, então, por exemplo, se eu tirar isso, você pode ver como ele se desliza de ser estacado aqui em esta área onde eles estão agora em colunas, essas eram as duas diferenças principais entre o mobile e o tablet. Finalmente, vamos voltar ao Figma MCPCer, ou Figma, mais ou menos. Pegue a variável do desktop, volte aqui e vamos dizer que eu selecionei, deixe-me zoomar aqui, a versão do card do desktop.
E garantir que a enquadração de mídia seja de 1280 pixels para esta variável da carta. Então agora podemos ver, deixe-me reduzir esta altura um pouco, ok, então agora podemos ver a diferença começando aqui, este é o layout de cartão real que criamos para o mobile, então nós transicionamos aqui para o tablet e então finalmente quando nós transicionamos mais além, notem como ele vai para o modo de três colunas, assim como nós desenhamos, oh, ele realmente fez uma interação para nós, então ele fará isso também, então é assim que você pode usar o server Figma MCP para criar elementos e componentes responsivos de design web. Nós vamos estar pesquisando muito mais sobre esse tipo de coisa no futuro, neste canal e no designcourse.com.
Na prática
Próximo passo: escolha uma métrica (taxa de sucesso, tempo, retries ou conversão) e rode um experimento de 7 dias antes de escalar o padrão.