5 Razões para criar um design system com o Sketch

Quando se fala dos design systems em abstrato, sem um contexto prático, não é difícil corrermos o risco da conversa se transformar num conjunto de conceitos e premissas sem qualquer ligação aos desafios reais daquilo que é desenhar e desenvolver um produto digital.

Quando falamos de design system num contexto de produtos digitais é difícil não achar o conceito interessante. Esta lógica, para além de grandes poupanças de tempo e dinheiro, permite acima de tudo que as equipas sejam bastante mais eficientes.

Contudo, o desafio não está em considerar os design systems uma boa-prática, o que não é uma assunção difícil, o verdadeiro desafio das equipas de user experience (UX), user interface (UI) e desenvolvimento está sim na aplicação na prática do seu quotidiano em conjugação com os seus processos e ferramentas de trabalho.

Existem neste momento no mercado muitas ferramentas que facilitam a aplicação dos design systems no dia-a-dia. Algumas ferramentas ligadas ao desenvolvimento e produção de código, outras à dimensão de desenho do interface.

No que toca ao desenho, as dimensões de user experience (UX),user interface (UI) e a oferta de ferramentas nunca foi tão grande. Existe neste momento uma autêntica batalha neste campo da indústria e quase todas as soluções podem ser bastante interessantes dependendo de cada equipa ou projeto. Uma dessas ferramentas – e que tem vindo nos últimos anos a ganhar um grande espaço no mercado – é o Sketch.

Ferramentas em constante evolução

O Sketch é o projeto de uma startup fundada em 2008, na cidade Holandesa de Haia, e desde o seu início que tem o objetivo de revolucionar a forma como os designers produzem interfaces para todo o universo de dispositivos digitais. Assente numa lógica de desenho vetorial, a ferramenta reúne em si o melhor de muitos outros softwares que desde sempre dominaram a indústria criativa e a forma como os designers produziam as suas criações.

Mais barato, mais fácil de usar e extremamente versátil, o Sketch veio revolucionar em muito a forma de desenhar produtos digitais ao mesmo tempo que incorporou muitos dos conceitos que estão na base dos design systems.

5 Razões para utilizar o Sketch

Mas afinal de contas no que é que o Sketch pode ajudar a criar um design system, logo na fase de desenho do interface? Esta é das perguntas mais recorrentes e a resposta é, tal e qual como a ferramenta, bastante simples.

O Sketch traz de consigo uma série de funcionalidades fáceis de utilizar que tornam a criação e gestão de um design system, bastante simples.

Text styles

Quantas vezes no processo de desenho é que é necessário alterar a formatação de um determinado estilo de texto? Quantas vezes é que é preciso corrigir estilos de textos nos vários ecrãs? Este é um daqueles temas que qualquer designer conhece e pelo qual já passou certamente. Os text styles do Sketch ajudam em muito a resolver este desafio. Eles permitem criar uma listagem de estilos, utilizar esses estilos em vários ecrãs diferentes e ainda, ao alterar a formatação desse estilo num ecrã, conseguir atualizar de forma automática o seu aspeto em todos os outros ecrãs do website ou da app.

Layer styles

Seguindo a mesma lógica dos text styles, as layer styles possibilitam também criar estilos de formas com cores de preenchimento, linhas de contorno, sombras, transparências entre muitas outras definições gráficas que podem ser aplicadas em vários ecrãs e atualizadas de forma bastante fácil, sem que para isso seja necessário verificar a sua aplicação em todos os ecrãs já desenhados.

Symbols

Se existe algo de revolucionário nas funcionalidades que o Sketch disponibiliza aos seus utilizadores, os symbols são sem sombra de dúvidas uma delas. Esta funcionalidade icónica do Sketch possibilita a criação de pequenos componentes, copiar esses componentes e em seguida editar todo o seu conteúdo, por exemplo textos ou imagens, mas tendo por base a mesma peça. Se em algum momento for necessário alterar a formatação desses componentes basta alterar o symbol original e o desenho será atualizado de forma automática em todos os ecrãs, assumindo também o conteúdo inserido no symbol em cada um desses ecrãs.

Nested symbols

Os nested symbols permitem expandir ainda mais o conceito dos symbols no Sketch. Na prática os nested symbols são como se existissem símbolos dentro de símbolos. A lógica é criar vários símbolos de Sketch que podem depois substituir conteúdos dentro de outros símbolos mais complexos. Esta funcionalidade permite criar symbols em que é possível posteriormente atualizar todo o tipo de conteúdos, sem nunca alterar o symbol que está na base.

Plugins

Imaginemos um software que pode ser melhorado pela sua comunidade de utilizadores através da criação de novas funcionalidades. Esta é a premissa dos plugins do Sketch. No fundo, o que o Sketch possibilita é que qualquer utilizador possa desenvolver um plugin com uma função e relevante integrando isso com o software. Atualmente existem centenas de plugins gratuitos disponíveis que expandem ainda mais as possibilidades do Sketch, tornando-a não só uma excelente ferramenta de desenho digital, mas também uma ferramenta em constante desenvolvimento também pela comunidade de utilizadores.

A listagem de funcionalidades do Sketch que podem ajudar todos os profissionais a desenhar um design system é quase interminável. Para além destas cinco existem muitas outras que, de uma forma muito prática, rápida e económica podem ser uma grande ajuda na construção do design system de qualquer produto digital, deixando espaço às equipas para se focarem no essencial, ou seja, a experiência dos seus utilizadores.

Ilustração © Ana Rute Costa