Figma 스타일 등록하기
오늘은 Figma에서 스타일을 등록하는 것을 배웠습니다.
어플을 만들 때도 디자인을 정하고 만들게 되는데 이 때도 자주 사용하는 색상들은 이름을 붙여 지정하고 사용하게 됩니다.
이처럼 Figma에서도 이런 기능이 있는데 그걸 배우게 되었습니다!
Color Style 지정
첫 번째로는 자주 사용하는 색상을 등록하고 그룹화하여 사용하는 방법입니다!
그 전에 이미 알고 계실수도 있지만 저는 이 강의를 통해 처음 알게 되었기 때문에
혹시나 도움이 될까 싶어 알려드립니다!
https://color.adobe.com/ko/create/color-wheel
https://color.adobe.com/ko/create/color-wheel
color.adobe.com
위의 링크는 색상값을 알려주는 사이트인데
내가 구현하고자 하는 색이 있는데 색상값을 잘 모른다 싶으면
저 사이트에서 찾아보실 수 있습니다! 저도 몰랐는데 너무 편하더라구요,,!
암튼!!!!!!!
다시 Color를 등록하는 방법에 대해 봐보겠습니다!
처음 도형을 만들어 주고 우측에 Fill부분을 잘 봐주시면
도형의 색을 지정할 수 있는 부분이 존재합니다.
이 때 Fill을 클릭해서 도형에 원하는 색을 넣어줍니다
저와 같이 그냥 설정해주셔도 되고
위의 사이트에 들어가셔서 헥스 코드를 입력해주셔도 됩니다 (#은 제외)
자 위의 사진을 잘 봐주시면
도형에 색을 지정하고 Fill 옆에 제가 1번이라고 적어둔 부분을 클릭하면
Libraries가 나타납니다
여기서도 상단에 제가 2번이라고 적어둔 부분을 클릭하면
색상에 이름을 부여하여 저장할 수 있는 창이 나타나게 됩니다
여기서 원하는 이름을 설정해주고 Create style을 눌러주시면
색상이 이름과 함께 저장됩니다!
저는 이름을 remember로 지정했고 저렇게 우측 디자인 패널에 뜹니다!
자 그러면 이번에는 내가 지정한 색상들을 그룹화해서 묶는 방법에 대해 배워보겠습니다
사실 어플을 만들 때에는 한 가지의 색이 아니라 여러가지의 색상을 사용하게 되는데
그것들을 group으로 묶어준다면 개발자가 보았을 때
이해하기가 쉬울 것이라고 생각이 됩니다.
위의 화면으로 돌아가서 우측에 보시면
제가 저장한 색상이 만들어져 있습니다
(예시를 돕기위해 remember2는 제가 빠르게 만들어 봤습니다)
이제 저 2가지의 색상을 Background라는 이름으로 묶어보겠습니다
위의 사진처럼 만들어 줄 수 있는데 그룹을 만들기 위해선
1, 색상 하나에 마우스를 대고 우클릭을 한다
2, Add new folder를 클릭한다
3, 그룹의 이름을 지정한다
이렇게 3단계를 거치면 그룹이 완성됩니다!
이후 이 Background 그룹에 넣고자 하는 색상이 있다면 드래그를 사용해서
Background 내부에 붙여주시면 됩니다!