107. Vectors
Eu mostro como preparar e organizar os elementos iniciais de um projeto no Framer usando o Figma: importo o logo como SVG, crio um novo set em Assets > Vectors, limpo itens desnecessários, uno paths e ajusto para que o logo fique dentro do quadro. Duplico versões quando preciso (mini, full), aplico a cor principal do cliente criando e/ou configurando uma variável de cor (Primary Blue) para facilitar trocas futuras e mantenho tudo padronizado para reutilização rápida. Também ensino a trazer ícones pelo Insert > Icons (ex.: Phosphor) e como o Framer registra esses recursos no projeto, mesmo que sejam apagados da tela. Explano por que componentizar e organizar vetores facilita mudanças de formato e cor sem retrabalho. Recomendo pausar o vídeo e reproduzir cada passo para aprender na prática, pois o fluxo tem detalhes que exigem atenção e prática. Termos/definições: - Figma: ferramenta de design de interface usada para criar e editar vetores e layouts. - SVG: formato vetorial que preserva qualidade ao redimensionar. - Vetorizado/vector: imagem descrita por formas e caminhos, não por pixels. - Assets/Vectors: pasta onde guardamos ícones e vetores do projeto. - Componentizar/componente: transformar um elemento em peça reutilizável. - Variável de cor: parâmetro que permite mudar cores em vários itens ao mesmo tempo. - Path: traçado ou conjunto de pontos que formam uma forma vetorial. - Phosphor: biblioteca de ícones. - Framer: plataforma de prototipagem e desenvolvimento usada aqui para montar o projeto.
Comentários
Eu mostro como preparar e organizar os elementos iniciais de um projeto no Framer usando o Figma: importo o logo como SVG, crio um novo set em Assets > Vectors, limpo itens desnecessários, uno paths e ajusto para que o logo fique dentro do quadro. Duplico versões quando preciso (mini, full), aplico a cor principal do cliente criando e/ou configurando uma variável de cor (Primary Blue) para facilitar trocas futuras e mantenho tudo padronizado para reutilização rápida. Também ensino a trazer ícones pelo Insert > Icons (ex.: Phosphor) e como o Framer registra esses recursos no projeto, mesmo que sejam apagados da tela. Explano por que componentizar e organizar vetores facilita mudanças de formato e cor sem retrabalho. Recomendo pausar o vídeo e reproduzir cada passo para aprender na prática, pois o fluxo tem detalhes que exigem atenção e prática. Termos/definições: - Figma: ferramenta de design de interface usada para criar e editar vetores e layouts. - SVG: formato vetorial que preserva qualidade ao redimensionar. - Vetorizado/vector: imagem descrita por formas e caminhos, não por pixels. - Assets/Vectors: pasta onde guardamos ícones e vetores do projeto. - Componentizar/componente: transformar um elemento em peça reutilizável. - Variável de cor: parâmetro que permite mudar cores em vários itens ao mesmo tempo. - Path: traçado ou conjunto de pontos que formam uma forma vetorial. - Phosphor: biblioteca de ícones. - Framer: plataforma de prototipagem e desenvolvimento usada aqui para montar o projeto.
Comentários
Eu mostro como preparar e organizar os elementos iniciais de um projeto no Framer usando o Figma: importo o logo como SVG, crio um novo set em Assets > Vectors, limpo itens desnecessários, uno paths e ajusto para que o logo fique dentro do quadro. Duplico versões quando preciso (mini, full), aplico a cor principal do cliente criando e/ou configurando uma variável de cor (Primary Blue) para facilitar trocas futuras e mantenho tudo padronizado para reutilização rápida. Também ensino a trazer ícones pelo Insert > Icons (ex.: Phosphor) e como o Framer registra esses recursos no projeto, mesmo que sejam apagados da tela. Explano por que componentizar e organizar vetores facilita mudanças de formato e cor sem retrabalho. Recomendo pausar o vídeo e reproduzir cada passo para aprender na prática, pois o fluxo tem detalhes que exigem atenção e prática. Termos/definições: - Figma: ferramenta de design de interface usada para criar e editar vetores e layouts. - SVG: formato vetorial que preserva qualidade ao redimensionar. - Vetorizado/vector: imagem descrita por formas e caminhos, não por pixels. - Assets/Vectors: pasta onde guardamos ícones e vetores do projeto. - Componentizar/componente: transformar um elemento em peça reutilizável. - Variável de cor: parâmetro que permite mudar cores em vários itens ao mesmo tempo. - Path: traçado ou conjunto de pontos que formam uma forma vetorial. - Phosphor: biblioteca de ícones. - Framer: plataforma de prototipagem e desenvolvimento usada aqui para montar o projeto.
Comentários
Chiron
Cliente Real: Website
Chiron
Cliente Real: Website
Chiron
Cliente Real: Website

Especialista

Olá 👋,
aluno(a)
Aqui é o Will, em que posso ajudar?
Sugestões & Feedbacks
