Entenda a estrutura do retângulo
Na publicação nº 644, há oito combinações para Figma. O princípio comum é usar vários Radial Fill, não um único gradiente com uma longa lista de pontos coloridos. Cada preenchimento cria uma área suave independente.
Neste exercício, use um retângulo com cantos arredondados e uma base clara e tranquila. Primeiro reproduza a combinação «Мятный свет» (Luz de menta), depois mude as cores. Assim será mais fácil entender o que depende da paleta e o que depende da posição dos centros.
Na instrução original, cada camada radial tem dois pontos extremos: uma cor com opacidade de 100% e a mesma cor com opacidade de 0%. A borda semitransparente permite sobrepor as camadas sem criar faixas duras.
Cores do primeiro exemplo
A ficha «Мятный свет» informa três cores e referências de posição. Mantenha esses valores no primeiro exercício para comparar o resultado com o original, em vez de escolher tudo ao mesmo tempo.
- #A4FCF5 — camada de menta, centro no canto superior esquerdo.
- #CDAFFA — camada lilás, centro no canto superior direito.
- #F7CBBF — camada pêssego, centro no canto inferior esquerdo.
Primeiro configure a camada de menta da cor plena até a transparência. Depois adicione lilás e pêssego seguindo a mesma lógica. Confira se o ponto transparente mantém a cor de sua camada, como indica a ficha original.
Mova o centro em vez de acrescentar cores
Se a mancha intensa ficar bem no meio e parecer forte demais, desloque-a para a borda da forma. A publicação permite posicionar o centro um pouco fora do retângulo. Assim a parte mais suave da área colorida fica dentro.
Mude um parâmetro por vez. Primeiro a posição do centro, depois a extensão da transição e, se necessário, a opacidade. Mover as três camadas ao mesmo tempo dificulta entender a causa do resultado.
Se a última camada cobrir totalmente as outras, confira sua borda transparente e o tamanho da área colorida. Acrescentar uma quarta cor não corrigirá um preenchimento que já ficou quase uniforme.
Teste outra combinação
Repita o procedimento no segundo exemplo com os valores da sua ficha. Compare a posição das manchas coloridas, não apenas o tom geral. Dois gradientes podem ter cores próximas e uma distribuição da luz completamente diferente.
Os oito exemplos estão na coleção gratuita de gradientes suaves. Aqui não é preciso um prompt de texto: o material mostra ações diretamente no editor gráfico.
Use o gradiente sob o texto
Coloque uma legenda curta no retângulo e confira sua leitura em cada área colorida. O contraste precisa ser avaliado onde o texto realmente está. Boa leitura na área lilás não garante o mesmo na área de menta mais clara.
Se o fundo atrapalhar, afaste o centro de cor da legenda ou suavize aquela camada. Não é preciso escurecer todo o retângulo. Para uma peça de interface, salve versões com e sem texto para visualizar como o fundo funciona na composição.
O resultado do exercício é um retângulo editável com uma estrutura clara. Pode adaptá-lo à cor do projeto sem procurar uma nova imagem: a estrutura das camadas permanece, mudam os valores e a posição das áreas coloridas.
Materiais para os seus próximos layouts
O Pack do Designer inclui fundos, texturas e outros materiais para montar composições. Pode abrir a coleção gratuita de gradientes separadamente e reproduzir primeiro uma de suas versões.