5 Razões para criar um Design System com o Sketch

Artigo

Ruben Ferreira Duarte, Senior UX/UI Designer na Innovagency e tutor da EDIT. Lisboa, fala neste artigo sobre a utilização dos Design Systems, indicando 5 razões relevantes para estes serem criados com o Sketch.

A simbiose da teoria e da prática numa ferramenta

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.

É difícil, quando falamos de design system, num contexto de produtos digitais, não achar o conceito interessante. A 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 prática no 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) e user interface (UI), 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, que tem vindo nos últimos anos a ganhar um grande espaço no mercado, é o Sketch.

Uma nova ferramenta, o Sketch

O Sketch é o projeto de uma startup, fundada em 2008 na cidade Holandesa de Haia, que desde o seu início 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, como pode o Sketch 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 padrão, fáceis de aprender e utilizar, que tornam a criação e gestão de um design system na dimensão de desenho, bastante simples.

Text styles

Quantas vezes no processo de desenho é necessário alterar a formatação de um determinado estilo de texto? Quantas vezes é preciso corrigir estilos de textos nos vários ecrãs? Este é um daqueles temas que qualquer designer conhece e, de certeza, pelo qual já passou. 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 ao se 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.

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, ou seja, 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 determinada função para que a possa incorporar no funcionamento do 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, podem ser uma grande ajuda na construção do design system de qualquer produto digital de forma fácil, rápida e económica, deixando espaço às equipas para se focarem no essencial, ou seja, a experiência dos seus utilizadores.

No WorkshopDesign systems with Sketch” da EDIT Lisboa, vamos poder abordar com maior profundidade não só o tema dos Design systems, mas acima de tudo a sua aplicação prática com um dos softwares de referência na indústria do digital design, atualmente, o Sketch.


Partilhar:

    Fale connosco

    Interesses

      Subscrever Newsletter

      Interesses