[FIGMA] 가장 중요한 기능! 컴포넌트(Component) 만들기

개발

베르월드 2023. 5. 10. 18:12

피그마?

UI 디자인 분야에서는 이미 몇해 전 부터 포토샵이 아닌 XD, 스케치(SKETCH), 피그마(FIGMA)와 같은 전용툴 인기를 끌고 있었습니다.

강력한 장점을 가진 스케치는 맥 전용이라는 치명적인 단점때문에 윈도우 사용자가 많은 우리 나라에서는 여러가지 어려움이 있었습니다.

오래되고 기능이 떨어지는 XD와 단점이 명확한 스케치 대신 무료(개인이 사용한다면) 프로그램이면서 XD나 스케치에 비해 모자라지 않거나 오히려 더 나은 성능을 보여주는 FIGMA가 자신의 입지를 높이며 탄탄하게 입지를 다지고 있습니다.

FIGMA는 웹 기반 툴이기 때문에 브라우저에서 바로 실행을 할 수 있어 편의성이 대폭 강화되었으며, 저장이라는 개념이 존재하지 않기 때문에 실수로 작업중인 파일을 날리거나 하는 일을 미연에 방지 할수 있습니다.

특히 FIGMA는 협업에 특화되어 있습니다. 같은 파일을 동시에 수정할수 있기에 디자이너/디자이너의 협업에도 좋고, 자체적으로 개발 툴바를 제공하기 때문에 디자이너/개발자 사이에서의 협업도 다른 툴에 비해 좋습니다.

가장 많이 사용하는 피그마는 여러가지 강력한 기능이 있는데 오늘은 첫번째로 에셋 세팅, 그 구성 요소중 피그마의 핵심 기능이라 할 수 있는 “Component”를 만드는 방법을 알아보겠습니다.

오늘은 UI디자인을 하는데 가장 많이 사용하는 에셋 중 하나인 버튼을 컴포넌트로 만들어보겠습니다.

기본버튼을 하나 컴포넌트로 만들어두면 상황에 따라 계속 가져다 쓸 수 있기 때문에 가장

일단, 새로운 프레임을 하나 생성하고 텍스트를 입력해줍니다.

기본 버튼을 만들거니 "기본버튼" 이라는 텍스트를 쓰겠습니다.

텍스트를 클릭 한 뒤 프레임으로 만들어 준 후 오른쪽 디자인패널에서 오토 레이아웃을 클릭해 버튼으로 만들어줍니다.

설정값을 10 / 10 / 10으로 설정해 주면 텍스트를 기준으로 좌우로 10px, 상하로 10px씩 간격이 있는 버튼이 만들어집니다.

만들어진 버튼을 잘 보이게 하기위해 라운드를 3px 주고 배경을 파란색으로 하고 텍스트를 흰색으로 바꿨습니다.

이 버튼은 오토레이아웃으로 좌/우/상/하 옵션을 "Hug"로 잡았기 때문에 텍스트 길이에 따라 버튼 길이가 달리집니다.

이제 버튼의 Active/Inactive 효과를 주기위해 버튼을 하나 복사합니다.

복사된 버튼을 원본 버튼 옆에 두고 컬러를 반전시켜줍니다.

Fill 컬러를 Stroke로 주고 Fill 컬러는 #FFF를 줘서 하얀색에 라인만 있게 만들어 준 후 텍스트 컬러를 Stroke컬러와 똑같이 줍니다.

만들어진 두개의 버튼의 이름을 바꿔주고, 두개를 동시에 잡아서 컴포넌트로 만들어줍니다.

두개의 버튼은 잡은 뒤 상단에 "Create Component" > "Create Component Set" 를 눌러주면 만들 수 있습니다.

이제 컴포넌트 제작이 끝났습니다!

생성된 버튼은 에셋을 통해 필드로 가져나오면 상황에 따라 Active/Inactive 를 쉽게 줄 수 있고,

버튼의 용도에 따라 텍스트/크기 등을 변경해서 사용하실 수 있습니다.

마지막으로 컴포넌트를 사용하는 이유에 대해 말해보겠습니다!

컴포넌트는 마스터 컴포넌트와 서브 컴포넌트로 나눌 수 있습니다.

둘의 차이는 쉽게 말해 마스터 컴포넌트는 원본, 서브 컴포넌트는 복사본이라고 생각하시면 됩니다.

마스터컴포넌트를 에셋으로 가져와 사용하면 서브 컴포넌트가 되는것이고 서브 컴포넌트의 텍스트나 컬러, 크기등의 옵션을 바꿔도 마스터컴포넌트에는 영향을 주지 못합니다. 하지만 반대로 마스터컴포넌트의 옵션을 수정하면 그 영향이 서브컴포넌트에까지 미칩니다.

중요한 개념인데 이게 바로 컴포넌트 사용의 핵심입니다.

만약 프로젝트를 진행하는게 중간에 모든 버튼의 컬러를 변경해야한다?

버튼을 각각 제작했을 때는 모든 버튼을 수동으로 수정해야하지만, 만약 컴포넌트를 사용했다면?

마스터컴포넌트의 컬러만 변경하면 해당하는 마스터 컴포넌트의 모든 서브 컴포넌트가 동시에 변경됩니다.

자, 우리는 피그마의 가장 중요한 컴포넌트 제작을 해봤습니다

컴포넌트만 상황에 따라 잘 만들 수 있으면 피그마 기본 기능의 70%정도는 활용할 수 있다고 생각합니다.

그럼 안녕~