114. Seção: Para Quem

Descrição

Comentários

Nesta aula eu mostro como criar a sessão "Set Fin" no Framer, copiando a estrutura e ajustando margens, tamanhos e alinhamentos para ficar consistente. Demonstro comandos práticos: trocar fixed para fit, dividir valores direto no campo numérico usando "/", fazer contas (soma, subtração, multiplicação), e usar frações para distribuir espaço (ex.: 1 = 100% ou 0.46/0.43 para ajustar colunas). Explico também como desplugar um componente (detect) para editar uma instância sem afetar o componente base, quando convém não transformar tudo em componente. Faço ajustes finos com padding, bordas e radius, recrio um ícone com frames para animação e organizei assets e layers, garantindo centralização e proporção. Dou atenção a SEO: ensino a usar apenas um H1 por página, H2 em níveis superiores e H3 para todos os headers de sessão repetíveis, evitando erro de hierarquia. Falo sobre economia de stacks e porque reduzir elementos melhora performance e leitura do site. No fim duplico e alinhei os cards necessários e deixei a estrutura pronta para as ilustrações e animações finais. Termos técnicos (explicação rápida): - Stack: contêiner que organiza elementos em coluna ou linha. - Frame: caixa/contêiner com tamanho fixo ou ajustável. - Fixed / Fit / Fill (fio): modos de dimensionamento — fixed = tamanho fixo, fit = ajusta ao conteúdo, fill = ocupa todo o espaço. - Padding / Margin: espaçamento interno (padding) e externo (margin). - Component / Detect (desplugar): componente é elemento reutilizável; detect/desplugar transforma a instância em item editável sem linkar ao padrão. - H1/H2/H3: níveis de títulos usados para hierarquia e SEO (apenas 1 H1 por página). - Frações: unidade relativa para dividir espaço (1 = 100%, 0.5 = metade). - Radius: curvatura das bordas. - Assets / Layers: arquivos e camadas do projeto. - Align (center/start): posicionamento dos elementos.

Comentários

Descrição

Comentários

Nesta aula eu mostro como criar a sessão "Set Fin" no Framer, copiando a estrutura e ajustando margens, tamanhos e alinhamentos para ficar consistente. Demonstro comandos práticos: trocar fixed para fit, dividir valores direto no campo numérico usando "/", fazer contas (soma, subtração, multiplicação), e usar frações para distribuir espaço (ex.: 1 = 100% ou 0.46/0.43 para ajustar colunas). Explico também como desplugar um componente (detect) para editar uma instância sem afetar o componente base, quando convém não transformar tudo em componente. Faço ajustes finos com padding, bordas e radius, recrio um ícone com frames para animação e organizei assets e layers, garantindo centralização e proporção. Dou atenção a SEO: ensino a usar apenas um H1 por página, H2 em níveis superiores e H3 para todos os headers de sessão repetíveis, evitando erro de hierarquia. Falo sobre economia de stacks e porque reduzir elementos melhora performance e leitura do site. No fim duplico e alinhei os cards necessários e deixei a estrutura pronta para as ilustrações e animações finais. Termos técnicos (explicação rápida): - Stack: contêiner que organiza elementos em coluna ou linha. - Frame: caixa/contêiner com tamanho fixo ou ajustável. - Fixed / Fit / Fill (fio): modos de dimensionamento — fixed = tamanho fixo, fit = ajusta ao conteúdo, fill = ocupa todo o espaço. - Padding / Margin: espaçamento interno (padding) e externo (margin). - Component / Detect (desplugar): componente é elemento reutilizável; detect/desplugar transforma a instância em item editável sem linkar ao padrão. - H1/H2/H3: níveis de títulos usados para hierarquia e SEO (apenas 1 H1 por página). - Frações: unidade relativa para dividir espaço (1 = 100%, 0.5 = metade). - Radius: curvatura das bordas. - Assets / Layers: arquivos e camadas do projeto. - Align (center/start): posicionamento dos elementos.

Comentários

Descrição

Comentários

Nesta aula eu mostro como criar a sessão "Set Fin" no Framer, copiando a estrutura e ajustando margens, tamanhos e alinhamentos para ficar consistente. Demonstro comandos práticos: trocar fixed para fit, dividir valores direto no campo numérico usando "/", fazer contas (soma, subtração, multiplicação), e usar frações para distribuir espaço (ex.: 1 = 100% ou 0.46/0.43 para ajustar colunas). Explico também como desplugar um componente (detect) para editar uma instância sem afetar o componente base, quando convém não transformar tudo em componente. Faço ajustes finos com padding, bordas e radius, recrio um ícone com frames para animação e organizei assets e layers, garantindo centralização e proporção. Dou atenção a SEO: ensino a usar apenas um H1 por página, H2 em níveis superiores e H3 para todos os headers de sessão repetíveis, evitando erro de hierarquia. Falo sobre economia de stacks e porque reduzir elementos melhora performance e leitura do site. No fim duplico e alinhei os cards necessários e deixei a estrutura pronta para as ilustrações e animações finais. Termos técnicos (explicação rápida): - Stack: contêiner que organiza elementos em coluna ou linha. - Frame: caixa/contêiner com tamanho fixo ou ajustável. - Fixed / Fit / Fill (fio): modos de dimensionamento — fixed = tamanho fixo, fit = ajusta ao conteúdo, fill = ocupa todo o espaço. - Padding / Margin: espaçamento interno (padding) e externo (margin). - Component / Detect (desplugar): componente é elemento reutilizável; detect/desplugar transforma a instância em item editável sem linkar ao padrão. - H1/H2/H3: níveis de títulos usados para hierarquia e SEO (apenas 1 H1 por página). - Frações: unidade relativa para dividir espaço (1 = 100%, 0.5 = metade). - Radius: curvatura das bordas. - Assets / Layers: arquivos e camadas do projeto. - Align (center/start): posicionamento dos elementos.

Comentários
Seção: Para Quem
Framer
0:00-0:00
Especialista

Henrique Sabino

Wama e Elogiou

Olá 👋,

aluno(a)

Aqui é o Will, em que posso ajudar?

Sugestões & Feedbacks