Organizando a marca e este site no Figma

para empresasmaio 24, 2020

Organizando a marca e este site no Figma

Há pouco fiz uma thread no Twitter mostrando o processo no qual estou colocando a marca vtnorton e, mais especificamente, o site no Figma e como ele ajudou a evoluir. Estou repassando a thread para aqui, veja!

Eu tenho um projeto para tudo o que é relacionado a marca da minha empresa. Aqui entra o site, logo, cores, componentes e outras coisas. A ideia é ter mais dois projetos (um só para clientes e outro só para meus produtos).

Para repassar o site para o Figma eu criei uma página dentro de um arquivo com a v1 do site. Fiz idêntico ao site (tem live lá na twitch.tv/vt_norton com o processo)

Depois eu fiz a v2. Copiei os componentes que havia criado na v1 para uma nova página, dei uma atualizada e organizei eles melhor. Também deletei os componentes da v1 pois não iria utilizar eles novamente, foi muito embrionário.

A v2 usei para componentizar tudo, e todas as formas e comportamento, como nos exemplos da imagem.

E então fiz a v2 do site. Corrigindo alguns problemas de UX, como nessa página. Quais?

Essa é a página dos apps, e não tinha ícone do app, os links de auxílio tinha mais destaque que o link para baixar o app, por exemplo.

Uma outra alteração foi os componentes da twitch e do youtube, que agora ficaram mais interessantes.

Foram vários ajustes que já estava precisando ser feito no site e com os conceitos de UX que venho aprendendo nos últimos meses. Mas essas correções foram só o começo.

Até que eu precisei criar um arquivo diferente para a v3. Pois eu queria ainda utilizar os componentes que tinha na v2, porém precisei modificar alguns. Foi aí que coloquei o número da versão no thumb. Também adicionei uma página for-fun para brincar com algumas coisas lá.

A v3 é uma versão mais atual do site que eu já estava querendo fazer há alguns meses. Em todas as páginas/frames está o tamanho da tela de acordo com o grid do bootstrap.

Então vai ter:

home @ lg-screen
home @ md-screen
home @ sm-screen
home @ xs-screen

Ainda vou fazê-las.

A ideia com as paginações agora é usar v3.1, 3.2 com outras páginas e novas informações que eu for colocar no site. Teste AB e afins.

Quando eu precisar modificar os componentes, então xablau, v4!

Tech detail: o site agora tem o mesmo versionamento que no Figma.

O outro arquivo que eu tenho é o branding. Nele eu tenho algumas páginas para colocar tudo que é relacionado a marca. Como por exemplo as capas dos stories highlights no instagram, os paineis da twitch e os icones de projetos.


Tá, mais como fica a exportação de tudo isso? Eu tenho uma pasta chamada design, nela eu tenho outras… Cada ano os arquivos que utilizei lá. Inclusive capas de redes sociais e logos. Mas isso é passado.

Na pasta de “Corporate images” são imagens livres para serem usadas.

Ainda vou refazer a pasta identidade visual e colocar no figma.

A mágica acontece na Brandings, que cada página no Figma virou uma pasta. E cada frame, um arquivo exportado.

Então, é assim que estou fazendo as coisas por aqui… Satisfeitíssimo com essa evolução. Talvez faço um post no meu blog. Ficou faltando falar algo? Se sim, só perguntar.

Ah, quer dar uma brincada lá no Figma, decidi deixar o arquivo aberto, só abrir nesse link: https://www.figma.com/file/1Z7egcOuJYsgxHUKxqfaGa/vtnorton.com-v3