Figma 디자인을 크게 세 가지 토픽으로 나눠서 기술해 보겠습니다. 먼저 효율적으로 디자인 하는 방법을 알아보겠습니다. Figma의 여러 고급 기능을 사용하면서 반복 작업을 벗어나 효율적인 디자인을 할 수 있는 방법을 알아보겠습니다. 두 번째는 UI의 완성도를 높일 수 있는 기능을 살펴보겠습니다. 그라디언트, 블러, 그림자 등의 이펙트를 배우고 직접 적용하면서 서비스의 완성도를 높이는 방법을 배우겠습니다. 세 번째는 인터랙티브한 디자인을 만드는 것입니다. 내가 만든 디자인에 프로토타이핑을 적용해 봅니다. 실제 작동하는 서비스처럼 만든다는 의미입니다.
결국 가장 좋은 디자인을 찾기 위해서는 디자인을 나열하는 단계를 넘어 실제로 그걸 사용하면서 검증해봐야 합니다. Figma의 프로토타이핑 기능을 사용하여 살아 숨 쉬는 디자인을 만들고 그 디자인을 빠르게 테스트하는 방법을 알아보겠습니다.
1. 스타일 알아보기
UI 디자인의 효율성을 높이기 위해서는 반복적으로 사용하는 것들을 재사용하는 방법을 찾는 것입니다. 디자인의 퀄리티와 속도 모두를 높일 수 있는 방법입니다. Figma의 스타일 기능을 활용한다면 내가 지정한 특정 컬러나 폰트 등의 설정에 이름을 짓고, 디자인을 할 때 이를 바로 사용할 수 있습니다. 컬러 스타일을 만들고 싶다면 Fill 영역의 + 버튼의 왼쪽에 보면 점이 4개 모여있는 아이콘을 클릭해 줍니다. 그럼 Color styles라는 창이 뜹니다. 여기서 + 버튼을 클릭하면 스타일을 만들 수 있습니다. 아이콘을 클릭하면 이름과 설명을 입력하라는 창이 뜹니다. 여기서는 간단하게 컬러 이름을 작성하고 설명은 생략해도 됩니다.
마지막으로 create style을 클릭하면 아까 골랐던 컬러가 Purple이라는 이름을 가진 color style로 만들어지며 사각형의 fill이 purple로 채워진 걸 확인할 수 있습니다. 화면 밖의 아무 곳이나 클릭해서 프로퍼티 패널을 확인하면 Color style이 만들어진 걸 확인할 수 있습니다. + 버튼을 클릭하면 바로 스타일을 더 만들 수 있으니 참고하시기 바랍니다.
이번에는 eyedropper tool을 사용해 보라색으로 바꿨던 이 버튼에 방금 만든 Purple color style을 적용해 봅시다. 먼저 화면에 보이는 버튼을 클릭하고, Fill 영역에 점 4개 모양의 아이콘을 클릭합니다. 그럼 아까 내가 만든 스타일을 확인할 수 있는데, 이것을 클릭합니다. 그럼 버튼에 Purple이라는 스타일을 입히게 됩니다. 나머지 요소들도 Shift 키를 활용해서 다중 선택한 다음에 똑같이 스타일을 적용해 주면 됩니다.
스타일을 적용하면 해당 스타일이 적용된 모든 요소들이 선택되며, 색상을 바꾸게 되더라도 한 번에 바꿀 수 있습니다. 스타일은 색상뿐만 아니라 폰트나 그림자 등 이펙트에도 다양하게 적용할 수 있습니다. 스타일은 편집하거나 지울 수도 있고, 폴더 안에 넣어서 관리할 수도 있습니다. Figma는 주기적으로 업데이트를 진행하고 있습니다. 새롭게 추가된 기능은 하단 튜토리얼 사이트를 참고해주세요.
2. 셀렉션 컬러(Selection colors) 알아보기
요소가 많아질수록 색상을 바꾸는게 점점 어려워집니다. 모든 요소를 개별 클릭해서 색상을 변경해야 하기 때문입니다. 이럴 때 selection colors 기능을 사용하면 편리합니다. Selection colors은 선택된 영역에서 같은 색을 가진 모든 요소들의 색을 동시에 변경해 주는 기능입니다. 우선 캔버스에 있는 모든 요소를 선택하면 프로퍼티 영역에 Selection colors가 표시됩니다. 여기에는 현재 사용하고 있는 모든 색상을 보여주는데요. 만일 파란색을 변경하고 싶으면 파란색을 클릭해서 색상을 변경하면 됩니다. 그럼 선택된 모든 영역에서 파란색을 띠는 요소들의 색상을 전부 변경할 수 있습니다. 그리고 Selection colors에서 아까 배운 스타일을 지정해줄 수 있습니다. 그리고 선택한 색상을 가진 요소들만 별개로 이동시킬 수도 있습니다.
※ 해당 글은 코드잇(codeit)의 [Figma 핵심 기능] 강의 내용에서 참고하여 작성하였습니다.