Logo Ludopedia
Novidades
  • Informações
  • Ludonews
  • Lançamentos
  • O que vem por ai
  • Em Breve
  • Anúncios
  • Financiamento Coletivo
Jogos
  • Pesquisa
  • Todos os Jogos
  • Editoras
  • Domínios
  • Categorias
  • Temas
  • Mecânicas
  • Ranking
  • Board Games
  • RPG
  • +Rankings
  • Por Dentro
  • Ludozine
  • Análises
  • Dúvida de Regras
  • Aprenda a Jogar
  • Jogatinas
  • Ludopedia
  • Prêmio Ludopedia
  • Censo Ludopedia
  • Colaborar
  • Cadastro de Jogo
Comunidade
  • Fórum
  • Todos os fóruns
  • Tópicos Recentes
  • Últimas 24 horas
  • Listas
  • Todas as listas
  • Listas Mais Vistas
  • Mídias
  • Canais
  • Podcasts
  • Conteúdo
  • Grupos
  • Arquivos
  • Imagens
  • Videos
Mercado
  • Ludostore
  • Marketplace
  • Leilões
  • Todos os Anúncios
  • Quero Vender
  • Smart Trails
  • Todas as Categorias
  • Lançamentos
Jogos ({{totalJogos}}) Mercado ({{totalAnuncios}}) Tópicos ({{totalTopicos}}) Usuários ({{totalUsuarios}}) Canais ({{totalCanais}}) Listas ({{totalListas}})
Nenhum Jogo Encontrado
  • {{jogo.nm_jogo}} ({{jogo.ano_publicacao}}) {{jogo.nm_distribuidora}} {{jogo.qt_jogadores_str}} {{jogo.tempo_jogo}}
Nenhum Anúncio Encontrado
  • {{anuncio.nm_item}} {{anuncio.qtde}} anúncios A partir de {{anuncio.vl_venda|formataValor}}
Nenhum Tópico Encontrado
  • {{topico.titulo}} Por {{topico.usuario}} {{topico.nm_jogo}}
Nenhuma Lista Encontrada
  • {{lista.nm_lista}} Por {{lista.usuario}} {{lista.qt_itens|plural('item', 'itens')}}
Nenhum Usuário Encontrado
  • {{usuario.usuario}} Membro desde {{usuario.dt_cadastro|mesAnoExtenso}}
Nenhum Canal Encontrado
  • {{canal.nm_canal}} {{canal.qt_postagens|plural('postagem','postagens')}} Última {{canal.dt_ultima_postagem|dataHoraHuman}}
Ver todos os resultados ({{totalJogos}}) Ver todos os resultados ({{totalAnuncios}}) Ver todos os resultados ({{totalTopicos}}) Ver todos os resultados ({{totalUsuarios}}) Ver todos os resultados ({{totalCanais}}) Ver todos os resultados ({{totalListas}})
Entrar Cadastre-se

Acesse sua conta

Crie sua Conta
Ou acesse com as redes sociais

Crie sua conta

Ou utilize suas redes sociais

Menu de Navegação

  • Novidades
    • Informações
    • Ludonews
    • Lançamentos
    • O que vêm por aí
    • Em Breve
    • Anúncios
    • Financiamento Coletivo
  • Jogos
    • Pesquisa
    • Todos os Jogos
    • Editoras
    • Domínios
    • Categorias
    • Temas
    • Mecânicas
    • Ranking
    • Board Games
    • RPG
    • +Rankings
    • Por Dentro
    • Ludozine
    • Análises
    • Dúvida de Regras
    • Aprenda a Jogar
    • Jogatinas
    • Ludopedia
    • Prêmio Ludopedia
    • Censo Ludopedia
    • Colaborar
    • Cadastro de Jogo
  • Comunidade
    • Fórum
    • Todos os fóruns
    • Tópicos Recentes
    • Últimas 24 horas
    • Listas
    • Todas as listas
    • Listas Mais Vistas
    • Mídias
    • Canais
    • Podcasts
    • Conteúdo
    • Grupos
    • Arquivos
    • Imagens
    • Videos
  • Mercado
    • Ludostore
    • Marketplace
    • Leilões
    • Todos os Anúncios
    • Quero Vender
    • Smart Trails
    • Todas as Categorias
    • Últimos Lançamentos

Minha Conta

Avatar

0
  • Usuário
  • Perfil
  • Coleção
  • Partidas
  • Partidas Pendentes
  • Badges
  • Chamados
  • Grupos
  • Canais
  • Edições
  • Seguindo
  • Meeps
  • Saldo Meeps
  • Atividades Meeps
Ver tudo
  • {{notificacao.dt_notificacao|dataHoraHuman}}
Ver tudo
  • {{mensagem.assunto}} ({{mensagem.resumo}})
    {{mensagem.usuario}} - {{mensagem.dt_mensagem|dataHoraHuman}}
Ver tudo
  • {{config.descricao}}
  • Como Comprador
  • Meu Mercado
  • Minhas Compras
  • Avaliações Pendentes
  • Reembolsos
  • Endereços
  • Como Vendedor
  • Minhas Vendas
  • Meus Anúncios
  • Meus Leilões
  • Pergunta não Respondidas
  • Aguardando Envio
  • Meu Saldo
Fale conosco Ajuda Sair da conta
  • Menu
  • Jogos
    • Lançamentos Nacionais
    • Ranking
    • Prêmio Ludopedia
    • Cadastrar um jogo
    • Pesquisa
    • Pesquisa Avançada
    • Editoras
    • Domínios
    • Categorias
    • Temas
    • Mecânicas
  • Canais
    • Últimas Postagens
    • Últimas Postagens - Inscritos
    • Canais
    • Canais - Inscritos
    • Meus Canais
  • Fórum
    • Fóruns
    • Tópicos Recentes
    • Tópicos que sigo
    • Últimas 24 Horas
    • Tópicos Não Lidos
    • Tópicos Favoritos
    • Criar um Tópico
  • Listas
    • Listas Recentes
    • Listas Não Lidas
    • Minhas Listas
    • Listas Favoritas
    • Criar uma Lista
  • Mercado
    • Ludostore
    • Meu Mercado
    • Anúncios
    • Leilões
    • Trocas
    • Criar um anúncio
    • Criar um Leilão
  • Vídeos
    • Todos os Vídeos
    • Análise
    • Customização
    • Entrevista
    • Evento
    • Jogatina
    • Regras
    • Unboxing
    • Subir um vídeo
  • Multimídia
    • Arquivos
    • Imagens
    • Subir Arquivo
    • Subir Imagens
  • Podcasts
    • Todos Podcasts
    • Últimos episódios
  • Grupos
    • Pesquisar um Grupo
    • Meus Grupos
    • Criar um Grupo
  • Partidas
    • Minhas Partidas
    • Cadastrar uma Partida
  • Sobre
    • Fale Conosco
  1. Fórum
  2. Oficina de Jogos
  3. Figma+Google Sync = um casamento perfeito pra fazer cartas!

Figma+Google Sync = um casamento perfeito pra fazer cartas!

  • avatar
    ricardocouto21/11/22 17:59
    avatar
    ricardocouto
    21/11/22 17:59
    15 mensagens MD

    Há alguns dias atrás, participando de um playtest com outros game designers, comentei sobre como eu montava cartas usando o Figma e um plugin chamado Google Sheet Sync pra ter o conteúdo das cartas separado da estrutura visual da carta em si, deixando o conteúdo em uma planilha no Google Docs.

    Por quê usar essas ferramentas?
    Além de ter as coisas mais organizadas, fazer o balanceamento de cartas (mesmo que seja um balanceamento ainda grosseiro, apenas pra ajustar as cartas muito fortes ou muito fracas) diretamente na carta, pode atrapalhar e confundir bastante. Então fazer numa planilha, onde você pode ver e comparar rapidamente o peso, custo ou o sentido que quiser para suas cartas é muito mais prático e menos propenso a erros.

    O que não vou falar aqui...
    Sabe usar o Figma? Então, essa é uma premissa aqui. Tem centenas de tutoriais sobre o Figma. É uma ferramenta bem mais simples de usar do que Photoshop ou GIMP, dá pra aprender simplesmente usando, principalmente se você já usou alguma ferramentas de manipulação de imagem como essas duas que citei.

    Vamos ao que interessa?
    Primeira coisa: monte uma planilha dessa forma:

    https://ludopedia-posts.nyc3.cdn.digitaloceanspaces.com/6aa03_xppj2n.png

    A primeira linha deve ser o título do conteúdo (pode colocar o que quiser, mas recomendo não usar espaços, acentos, nem caracteres especiais). Dá pra ser de outro jeito? Dá sim, mas pra começar, vamos no básico. No final do post vou colocar o link da documentação do plugin pra quem quiser se aprofundar (conteúdo em inglês). Ah, e o plugin vai usar a primeira aba disponível na sua planilha. Pra esse exemplo, não estou considerando uma planilha com várias abas, mas caso você pretenda usar outras abas, na documentação do plugin é explicado como fazer isso.

    Outra coisa importante: deixe a planilha com acesso aberto a qualquer pessoa com o link. Copie o link e guarde em algum lugar, você vai precisar desse link depois.


    Planilha feita, vamos pro Figma
    No Figma, você pode montar sua carta do jeito que quiser. Se você já tiver alguma familiaridade como Figma, sugiro fazer como fiz: ao invés de cada carta ter as camadas todas soltas, faça um Componente. Componente é uma estrutura base que você, ao alterar, altera todos os lugares que usam esse componente. Ou seja, se eu fizer um componente com a estrutura da carta e depois resolver que quero mudar o layout da carta, você muda uma vez e todos os lugares que usam esse componente serão alterados automagicamente. Mas, se você for marinheiro de primeira viagem, só faz sua carta como se sentir mais à vontade.

    https://ludopedia-posts.nyc3.cdn.digitaloceanspaces.com/b293e_xppj2n.png

    Da forma que fiz a carta, ela é composta por 2 componentes: carta-modelo e Imagem (que é uma imagem que vai no fundo da carta). Note que o nome das camadas (layers) está com um prefixo (#), daí vem o mesmo nome dos títulos que usei na planilha (tem que ser o mesmo!) e depois do nome tem um ".n". Isso acontece porque podemos aqui colocar um número ou n. N significa pegar o próximo valor da lista na planilha. Se colocar um número, significa colocar o item específico da planilha (ex. se colocar "#titulo.3" essa carta vai sempre ter o título do 3º item na planilha). Se não colocar nesse padrão, o plugin não funciona, ok?! De início, recomendo user o ".n "como usei.

    Eu também coloquei um outro componente chamado Imagem, que tem a propriedade tipo que varia (é um componente com múltiplas instâncias). Isso você pode ignorar se não está bem acostumado com o uso de componentes do Figma. Mas recomendo aprender porque não é complicado e por que ajuda bastante a otimizar seu tempo. Com ele eu pude alterar a imagem da carta através da planilha também. Basta subir todas as imagens no Figma dentro do mesmo componente e dar o nome igual está na planilha.


    Como ficou minha carta modelo
    https://ludopedia-posts.nyc3.cdn.digitaloceanspaces.com/41c16_xppj2n.png
    Veja que nessa carta, todo o conteúdo é temporário, só de marcação. Mas a estrutura já está certa. Aí, no contexto de exemplo, só fiz um copia & cola de 5 cartas. Mas o conceito é o mesmo pra 5, 50 ou 500 cartas.

    https://ludopedia-posts.nyc3.cdn.digitaloceanspaces.com/4dd34_xppj2n.png


    Já tenho a planilha e as cartas. E agora?
    Agora é onde a mágica acontece. Instale o plugin Google Sheets Sync no Figma. Aí vá em Plugins/Google Sheets Sync. Vai abrir algo assim:
    https://ludopedia-posts.nyc3.cdn.digitaloceanspaces.com/ac438_xppj2n.png

    Coloque aquele link da planilha compartilhada e recomendo só mudar pra "Update entire document" por via das dúvidas – os componentes podem não funcionar se não estiverem na mesma página no Figma.
    https://ludopedia-posts.nyc3.cdn.digitaloceanspaces.com/428c3_xppj2n.png

    Aí só clicar em "Fetch & Sync" que tudo será atualizado.

    No meu caso, as cartas ficaram assim:
    https://ludopedia-posts.nyc3.cdn.digitaloceanspaces.com/1e1b8_xppj2n.png

    Obviamente que estão com uma estrutura bem simples, mas pensa que aqui não tem limites de como a carta pode ser, basta botar sua criatividade pra fluir :)



    Links:

    • Figma
    • Plugin Google Sheets Sync
    • Documentação técnica do plugin
    • Tutoriais oficiais do Figma sobre componentes

    10
    0
    31
  • Raio
    2000 mensagens MD
    avatar
    Raio21/11/22 19:30
    Raio » 21/11/22 19:30

    Obrigado por compartilhar!!!

    1
  • rodolphoal
    787 mensagens MD
    avatar
    rodolphoal21/11/22 22:04
    rodolphoal » 21/11/22 22:04

    Poxa bem legal isso! Dá pra fazer pelo InDesign tb.

    2
  • ricardocouto
    15 mensagens MD
    avatar
    ricardocouto21/11/22 22:23
    ricardocouto » 21/11/22 22:23

    rodolphoal::Poxa bem legal isso! Dá pra fazer pelo InDesign tb.

    Dá sim, mas o InDesign eu acho que a curva de aprendizado é bem maior. É um app bem mais burocrático, recomendaria apenas pra quem já tenha bastante familiaridade com ele. :)

    2
  • educroiss
    413 mensagens MD
    avatar
    educroiss23/11/22 10:05
    educroiss » 23/11/22 10:05

    Show de bola, obrigado por compartilhar conhecimento ;)

    2
Responder
Figma+Google Sync = um casamento perfeito pra fazer cartas!
  • Logo Ludopedia
  • LUDOPEDIA
  • Ludopedia
  • Quem Somos
  • Fale Conosco
  • Apoiador
  • Mídia Kit
  • API
  • LudoStore
  • Acesso a Loja
  • Leilões
  • Meeps - Cashback
  • Quero Vender
  • Ajuda
  • Políticas
  • Termos de Uso
  • Política de Privacidade
  • Devolução e Reembolso
  • Redes Sociais
  • Mee - Mascote da Ludopedia
LUDOPEDIA COMERCIO LTDA - ME | CNPJ: 29.334.854/0001-96 | R Dr Rubens Gomes Bueno, 395 - São Paulo/SP | contato@ludopedia.com.br

Este site utiliza cookies, conforme explicado em nossa Política de Privacidade. Ao continuar navegando, você concorda com as condições.