Visão geral / Workbench
Workbench: do Figma ao site no ar.
Um plugin para Figma e um web app que transformam designs em sites no ar. Desde 2023, trabalho em todo o produto: o plugin e o app, o design system e a documentação, e um vídeo de apresentação.
Em resumo Bruno Delorence trabalha na Workbench desde 2023. A Workbench é uma plataforma de automação de design: o plugin para Figma e o web app ajudam empresas e designers a transformar designs em sites funcionais. O trabalho dele inclui a resposta do plugin a quatro problemas que designers e desenvolvedores enfrentam ao publicar um site (inconsistência visual, falta de feedback imediato, ferramentas fragmentadas e a demanda por otimização para marketing); a documentação do design system e a limpeza dos componentes; um arquivo do Figma bem organizado para os engenheiros; a documentação de UX para um time multicultural, com brasileiros e japoneses; e um vídeo que mostra o produto com exemplos reais.
Designs do Figma que viram sites no ar, conferidos antes da publicação
Plugin e web app · 01Componentes limpos e documentados para os engenheiros
Design system · 02Documentação de UX para um time de brasileiros e japoneses
Documentação · 03O que este case mostra.
Our blog
Start creating your own blog
Subscribe to learn about new product features, the latest in technology, solutions, and updates.
We care about your data in our privacy policy.
Recent blog posts
00 / O problema
Do design ao site, ainda havia perdas.
A Workbench já tinha simplificado o processo de transformar designs em sites no ar. Mas designers e desenvolvedores ainda esbarravam nos mesmos quatro problemas sempre que publicavam um site.
- 01
O problema
Inconsistência visual
Pequenos ajustes se perdem entre o design no Figma e o site final, e o que vai ao ar não reflete por completo o design original.
A resposta da Workbench
Tradução visual consistente
- 02
O problema
Falta de feedback imediato
Uma mudança só aparece no site depois de publicada: cada ajuste vira mais uma rodada de exportar, publicar e conferir, e os erros chegam ao site no ar.
A resposta da Workbench
Feedback em tempo real
- 03
O problema
Ferramentas fragmentadas
Com várias plataformas e plugins em uso, designers e desenvolvedores vivem alternando entre ferramentas, o que afeta a produtividade e a coesão do projeto.
A resposta da Workbench
Um só fluxo, dentro do Figma
- 04
O problema
Demanda por otimização para marketing
Os sites precisam ser responsivos, otimizados para SEO e seguir as boas práticas de marketing digital, sem outras ferramentas para chegar lá.
A resposta da Workbench
Otimização para marketing integrada
01 / Plugin e web app
Confira no Figma, antes de ir ao ar.
O plugin da Workbench foi pensado para atacar esses quatro problemas de frente: um jeito fluido e eficiente de designers e desenvolvedores criarem um site sem sair do design.
Tradução visual consistente
O que você desenha é o que vai ao ar.
Os designs do Figma viram sites no ar com precisão pixel-perfect. O plugin elimina as diferenças entre o design e o produto final, e o que as pessoas veem online é a visão criada no Figma.
Feedback em tempo real
Veja na web antes de publicar.
A Workbench mostra como o design vai ficar e se comportar na web enquanto você ainda está no Figma. Assim, dá para revisar e ajustar antes de qualquer coisa ir ao ar, em vez de descobrir problemas depois da publicação.
Start with your own design
Do you already have your Figma prepared to go online? Check out our tips on how to optimize your site with Auto Layout.
Start with a template
Get started quickly using the Workbench UI Kit. We've prepared a file with Auto Layout ready for you to customize and publish online.
A new web design tool that
can replace WordPress
Join our community and learn how to use Workbench.
You do not have permission!
Access Denied: Please contact the site owner for permission to proceed.
Join our community and learn how to use Workbench.
Um só fluxo
Chega de alternar entre ferramentas.
A Workbench funciona direto no Figma e reúne todo o processo, do design ao site, num fluxo único e coeso: mais produtividade, menos atrito.
Otimização para marketing integrada
Responsivo e otimizado para SEO desde o início.
Os sites são construídos com as boas práticas de marketing em mente, para que designers criem sites de alta performance que também seguem os padrões do mercado, com mais visibilidade e engajamento.
- public
- src
- 1
// Imports - 2
import mongoose, { Schema } from 'untitled' - 3
- 4
// Collection name - 5
export const collection = 'Design' - 6
- 7
// Schema - 8
const schema = new Schema({ - 9
name: { - 10
type: String, - 11
required: true - 12
}, - 13
- 14
description: { - 15
type: String - 16
} - 17
}, {timestamps: true}) - 18
- 19
// Model - 20
export default workbench.model(collection, - 21
schema, collection) - 22
- 23
- 24
- 25
- 26
- 27
- 28
Welcome back, Bruno
See now how to start using the workbench quickly and intuitively
Search 14 projects...
- WorkBench.Create a new project
- WorkBench.Create a new project
- WorkBench.Create a new project
- WorkBench.Create a new project
- WorkBench.Create a new project
- Create a new project
- WorkBench.Create a new project
- WorkBench.Create a new project
02 / Design system
Uma biblioteca que os engenheiros usam de verdade.
O objetivo era criar uma biblioteca de design que os engenheiros de software da Workbench pudessem usar e modificar com facilidade, chegando ao visual do Figma de forma mais rápida e eficiente.
Isso manteve o desenvolvimento do app ágil, para que ele pudesse evoluir rápido sem perder a integridade do design.
Headers
These are the main headers that will control the interface
Header 01Upgrade nowLimpeza dos componentes
Menos componentes, mais claros.
Os componentes do design system foram limpos e documentados, para que os engenheiros pudessem escolher um, modificá-lo e continuar fiéis ao design do Figma.
Arquivo do Figma bem organizado
Eficiência para design e desenvolvimento.
O arquivo do Figma foi organizado para os engenheiros que constroem a partir dele: cada fluxo na sua seção, para chegarem ao visual do design no Figma de forma mais rápida e eficiente.
power up your team© Workbench 2024
power up your team© Workbench 2024
power up your team© Workbench 2024
power up your team© Workbench 2024
power up your team© Workbench 2024
power up your team© Workbench 2024
power up your team© Workbench 2024
03 / Documentação de UX
Um time, dois idiomas, uma só referência.
Uma documentação clara foi essencial para o sucesso do projeto e para o entendimento de todo o time, principalmente num ambiente multicultural, com brasileiros e japoneses trabalhando juntos. Foi ela que manteve todo mundo alinhado.
ユーザーはコンポーネントや完全なページを作成できるようになります。
choose from a UI Kit
10 users unique publishing 10 sites by the end of this year ( Workbench main goal )
Open workbench plugin in main screen
We need to inform users that new components or pages are available
Pages based on UI KIT
HomeBlogBlog intern page404 pageAsk for more pagesComponents ( Sections )
MenuHero SectionFigma platform
Figma platform
04 / Vídeo de apresentação
Mostrar funcionando, com exemplos reais.
Criei um vídeo para mostrar como a Workbench simplifica o processo de transformar designs em sites funcionais: o plugin funcionando dentro do Figma, lidando com estruturas de design complexas sem perder precisão nem velocidade.
Exemplos reais
De um design a um site funcionando.
Percorrer exemplos reais mostra como a Workbench ajuda designers e desenvolvedores a colaborar com mais eficiência, economizando tempo e reduzindo o atrito no fluxo de trabalho.
Por que um vídeo
Ver gera confiança.
Mostrar a ferramenta em ação deixa claro do que ela é capaz e ajuda a construir confiança e entendimento entre potenciais usuários.
O que a Workbench diz
“Bruno versatility and expertise are unmatched.”
His ability to bridge design and development with a seamless tool has streamlined our processes and saved countless hours.
It’s rare to find such a blend of creativity and technical expertise.
YoyoChief Engineer of WorkbenchPerfil no LinkedIn ↗︎Em andamento
De um design no Figma
a um site no ar.
O trabalho na Workbench começou em 2023 e continua. Veja o produto como ele está hoje no site.
Visitar a Workbench Próximo projeto · Ingate ↗︎
Comece uma conversa
Vamos falar sobre o seu produto, o seu time e onde o design pode gerar mais valor.
- Duração
- 20–30 minutos
- Tema
- Design engineering
- Valor
- Gratuito