Figma < Conversão para Html, Css e Js.

Contexto Geral do Projeto

Objetivo Desenvolver um layout moderno, responsivo e pronto para desenvolvimento, com foco em facilidade de conversão para html, css e js. 1. Ferramenta O projeto deve ser feito no Figma. O arquivo deve ser compartilhado com link público (View + Inspect habilitado). Todas as camadas devem estar nomeadas e agrupadas corretamente. 2. Responsividade Criar telas para 3 breakpoints principais: Desktop: ≥ 1440px Tablet: ~768px Mobile: ~375px O layout deve utilizar auto-layout e estrutura flexível, garantindo fácil adaptação e reprodução no front-end. 3. Organização do Design Utilizar componentes reutilizáveis para botões, cards, formulários, menus, modais e ícones. Estruturar páginas de forma lógica: Header, Hero, Features, CTA, Footer, etc. Nomear camadas de forma clara e consistente (ex.: Btn_primary, card_feature, icon_facebook). Aplicar hierarquia visual com cores, tipografia e espaçamentos bem definidos. 4. Guia de Estilo / Design System Criar um guia de estilo completo, incluindo: Cores primárias, secundárias e de fundo (hex/rgb). Fontes com pesos e tamanhos, indicando alternativas web-safe ou Google Fonts. Botões e inputs com estados normal, hover e clicado. ÍCones e elementos gráficos com estilo consistente. Padrões de espaçamento, margens e paddings. 5. Assets e Exportação Ícones: entregar em formato SVG. Imagens: otimizadas para web (Webp, jpg ou png) e em alta resolução. Logos: em formato vetorial (svg ou pdf/ai). Todos os elementos exportáveis devem ter nomes claros e correspondentes ao design. 6. Interações e Animações Indicar interações principais: hover, sliders, modais, drop-downs, scroll effects. Criar um protótipo clicável no Figma, se possível, para demonstrar a navegação. 7. Entrega Final Link público do Figma com inspeção habilitada. pdf ou png das telas para apresentação. Guia de estilo/documentação resumida (cores, tipografia, botões, espaçamentos). Checklist interno do que está pronto para desenvolvimento (html/css/js). 💡 Resumo Final (para enviar ao profissional) “Preciso de um layout moderno e responsivo no Figma, pronto para desenvolvimento. Deve incluir versões para desktop, tablet e mobile, com auto-layout e componentes reutilizáveis. Crie um guia de estilo completo com cores, fontes, botões e espaçamentos. Entregue ícones em SVG, imagens otimizadas e logo em vetor. Indique interações e crie um protótipo clicável. Todas as camadas devem estar nomeadas e organizadas para facilitar a conversão em html, css e js.”

Categoria Design e Multimedia
Subcategoria Web Design
Do que você precisa? Alteração média
Isso é um projeto ou uma posição de trabalho? Um projeto
Disponibilidade requerida Conforme necessário

Prazo de Entrega: Não estabelecido

Habilidades necessárias