Gerenciar perfis de cores em arquivos de design

Antes de você começar

Quem pode usar este recurso

Disponível em todos os planos

Disponível no Figma Design no navegador e no aplicativo para desktop

O acesso ao arquivo deve ser do tipo "para edição"

Monitores diferentes usam tecnologias diferentes para renderizar cores, o que pode levar a inconsistências visuais entre os diferentes dispositivos, monitores, navegadores e aplicativos. À medida que a equipe cresce, as inconsistências também podem aumentar. 

Com o gerenciamento de cores no Figma, você pode:

• Manter a consistência das cores mesmo que os colegas de equipe tenham telas diferentes
• Escolher seu perfil de cor preferido para todos os arquivos de design criados recentemente
• Alterar as cores em um arquivo de um perfil de cor para outro
• Exportar ativos para um perfil de cor específico

Perfis de cores compatíveis

No Figma Design, você pode escolher entre dois perfis de cores: sRGB e Display P3.

sRGB é o perfil de cores mais amplamente usado. Ele tem sido o padrão para a Web há muito tempo e é compatível com quase todos os navegadores e monitores.

Display P3 — também chamado de P3 — tem cores mais vibrantes e representa 49% mais cores visualmente distintas do que o sRGB. Embora ainda não seja o padrão para Web e monitores, sua popularidade está crescendo. Se estiver criando para dispositivos iOS ou telas retina, o Display P3 é adequado para essas experiências.

Para obter melhores resultados, certifique-se de que o monitor seja compatível com o perfil de cores selecionado e esteja configurado para ele. Por exemplo, as cores do Display P3 não serão exibidas corretamente em monitores que não suportam esse perfil.

Os quadros do FigJam são renderizados em sRGB.

Escolher seu perfil de cores preferido

Por padrão, os novos arquivos de design são definidos como sRGB. Para escolher um perfil de cor diferente para os arquivos de design que você criar:

1. Abra qualquer arquivo ao qual você tenha acesso.
2. Abra o menu Figma.
3. Acesse Preferências > Perfil de cor.
4. No modal Configurações de perfil de cor, escolha sRGB ou Display P3.
5. Clique no para fechar o modal e salvar suas configurações.

Alterar o perfil de cores de um arquivo

Os perfis de cores podem ser alterados no nível do arquivo. Ao alterar o perfil de cores de um arquivo, você tem duas opções:

• Manter os valores das cores (Atribuir) para alterar a aparência das cores, mas não seus valores
• Manter a aparência (Converter) para alterar os valores das cores, mas não sua aparência

Manter os valores das cores (Atribuir)

Quando você atribui um perfil de cores a um arquivo, as cores mudam visualmente, mas seus dados subjacentes — como códigos hexadecimais ou valores HSB — permanecem os mesmos.

Você pode optar por preservar os valores das cores ao trabalhar com cores específicas, como as cores da sua marca. Nesse caso, é mais importante que os códigos hexadecimais da marca permaneçam consistentes em todos os dispositivos e arquivos, mesmo que a cor pareça um pouco diferente.

Para atribuir um perfil de cores a um arquivo:

1. Com o arquivo aberto, clique em ao lado do nome do arquivo.
2. Acesse Perfil de cores do arquivo > Alterar para Display P3 ou Alterar para sRGB.
3. No modal, selecione Manter os valores das cores (Atribuir).
4. Para salvar suas alterações, clique em Atribuir Display P3 ou Atribuir sRGB.

Manter a aparência (Converter)

Quando você converte um arquivo em um perfil de cores diferente, os dados subjacentes das cores são alterados, mas terão a mesma aparência ou a mais semelhante possível.

Você pode optar por preservar a aparência das cores se estiver concentrado em fazer brainstorming, wireframing ou testar como as cores aparecem em diferentes dispositivos. Nesses casos, uma aparência consistente é mais importante do que manter um sistema.

Para converter um arquivo em um perfil de cores diferente:

1. Com o arquivo aberto, clique em ao lado do nome do arquivo.
2. Acesse Perfil de cores do arquivo > Alterar para Display P3 ou Alterar para sRGB.
3. No modal, escolha Manter a aparência (Converter).
4. Para salvar suas alterações, clique em Converter para Display P3 ou Converter para sRGB.

Os estilos de cor e as variáveis de cor não são afetados pela conversão, portanto, seus valores de cor não serão alterados.

Desfazer uma alteração no perfil de cores

Para desfazer uma alteração no perfil de cores em um arquivo, escolha uma das seguintes opções:

• Use os atalhos de teclado ⌘ Command / Control Z
• Selecione uma versão anterior no histórico de versões

Atribuir um perfil de cores a um arquivo legado

A configuração Não gerenciado deixou de estar disponível em agosto de 2023. Os arquivos de design anteriores definidos como não gerenciados não terão um perfil de cores especificado e serão definidos como Igual ao perfil preferencial (perfil de cores preferencial). Se você não tiver um perfil de cores preferencial definido, esse arquivo legado será renderizado em sRGB.

Para atribuir um perfil de cores a um arquivo legado:

1. Com o arquivo aberto, clique em ao lado do nome do arquivo.
2. Acesse Perfil de cores do arquivo > Atribuir para sRGB ou Atribuir para Display P3.

Após atribuir um perfil de cores, você terá acesso para converter o arquivo em um perfil de cores diferente, mas não poderá reverter para a configuração Igual ao perfil preferencial.

Exportar ativos

Por padrão, o Figma exporta ativos usando o perfil de cores do arquivo. No entanto, você pode escolher um perfil de cores diferente ao exportar. Saiba como exportar ativos em um perfil de cores →