Tutorial-Figma
Entendendo frames
É a área destinada aos elementos que vão compor sua interface. Sempre que for criar uma interface, todos os elementos visíveis ficarão dentro do frame. Nele você pode inserir novas camadas e trabalhar com tamanhos diferentes para cada plataforma, como tela de smartphones, desktop, mídias sociais, entre outros. Algumas propriedades estão associadas ao frames:
- Corner Radius: arredonda as bordas do frame.
- Clip Content: oculta objetos dentro do frame que se estendam além de seus limites;
- Layout Grids: cria guidelines para ajudar na estrutura visual de seus projetos;
- Auto Layout: cria frames dinâmicos com conteúdo adaptável;
- Fill: aplica um preenchimento sólido, gradiente ou de imagem para o quadro;
- Stroke: adiciona traços ao frame para criar uma borda;
- Effects: adiciona efeitos visuais ao frame.
Camadas e elementos
Camadas significa que você pode organizar seus elementos de forma hierárquica, alterando a ordem dos objetos para frente ou para trás.
Tipografia
O texto é um dos componentes cruciais do design de interface. Ele pode ajudar a determinar a legibilidade e o apelo do seu design.
Suas decisões em torno do texto podem afetar o sucesso com que você transmite sua mensagem. Tudo, desde a colocação e disposição do texto, até a escolha da fonte, tem um papel a desempenhar.
Uso de cores
Por padrão, o Figma representa os valores de cores usando o modelo HEX. Você também pode visualizar a notação de cores para outros modelos no seletor de cores.
- HEX: É o modelo de cores padrão no Figma e refere-se à cor hexadecimal. Este é um representante abreviado alfanumérico dos valores RGB. Os criadores de web ou design digital referem-se à notação para este modelo de cores como hexcodes.
- RGB: RGB ou Red Green Blue é o modelo de cores mais comumente usado. Cada cor renderizada em um monitor ou tela será composta de quantidades variadas de vermelho, verde e azul. Você também pode ter visto RGBa referenciado em outros recursos. O a em RGBa significa alfa, que representa a opacidade da cor. Isso representa a opacidade como um valor entre 0 e 100%.
- HSB: Hue Saturation Brightness é uma representação alternativa do modelo RGB. Isso se baseia em como o olho humano percebe a cor, versus como uma tela (em RGB). Todos os modelos de cores terão um canal alfa adicional (ou valor), que representa a opacidade da cor. Isso representa a opacidade como um valor entre 0 e 100%.
- HSL: Hue Saturation Luminance é outro modelo de cor baseado em como o olho humano percebe a cor. Assim como o HSB, é uma representação alternativa do modelo RGB. A principal diferença entre HSB e HSL é como a saturação e a leveza são tratadas.
- CSS: O modelo de cores CSS permite visualizar ou inserir valores RGBa usando a sintaxe CSS.
