Figma 기본 화면 확인 2부

오늘은 피그마의 우측에 위치하고 있는 '속성 패널'에 대해 확인해보도록 하겠습니다.:)

우측 속성 패널

'속성 패널'에서는 Move툴로 선택한 도형 등의 크기나 색상을 수정하고, 그림자 효과를 추가하거나 텍스트의 폰트를 변경할 수 있습니다. 즉, 어떤 요소에 대한 속성 꾸밈을 할 수 있습니다. 현재 화면에서는 아무 요소도 선택하지 않았기 때문에 Canvas의 Backgroud Color(배경색)를 설정할 수 있습니다.

① Design, Prototype, Inspect 탭이 표출되고 각 탭을 선택해 설정할 수 있습니다.

② Design탭의 첫번째 설정 메뉴로 캔버스의 배경색 설정이 가능합니다.

③ Export 버튼을 터치하면 파일 내 표출되어 있는 전체 이미지들의 추출이 가능합니다.

속성 패널에서 각 탭 선택 시 해당 탭의 기능을 자세히 알아보겠습니다.

속성 패널 (디자인탭 선택 상태)

Design 탭

디자인 탭에서는 선택된 도형 등에 대한 요소 편집이 항목들이 나열돼 있습니다. 캔버스에 아무 요소가 없을 때는 캔버스 자체의 배경 컬러 변경을, 캔버스에 도형이 하나라도 있을 땐 선택한 도형에 대한 편집 요소 항목이 표출되게 됩니다.

① Alignment: 요소들의 정렬을 좌측, 중앙, 우측 등으로 조정할 수 있습니다. 복수의 도형 선택 후 클릭하면 깔끔하게 정렬이 됩니다. 편집 시간을 단축할 수 있는 기능 중 하나입니다.

② 위치(X, Y), Size(W, H), 테두리 라운딩 각도 수치 등을 설정할 수 있습니다.

③ Auto Layout: 복수 요소들의 간격과 배치를 일률적으로 자동 수정할 수 있는 기능입니다.

속성 패널 (캔버스 내 텍스트 등 요소 선택 시)

캔버스 내 텍스트 등 요소를 선택했을 때 해당 요소의 속성을 변경할 수 있는 항목으로 변경됩니다.

텍스트를 편집할 때는 다음 항목들이 표출되게 됩니다.

① Layer: 선택한 레이어의 투명도, 블렌드 모드를 설정할 수 있습니다. 직접 클릭해서 어떻게 바뀌는지 확인해보세요.

② Text: 폰트 종류, 굵기, 크기, 정렬 등을 설정할 수 있습니다. UI 기획을 위해 가장 많이 사용하는 Noto Sans KR나 NanumSquare 폰트를 선택하시면 UI 기획 시 깔끔하게 그려나가실 수 있습니다.

③ Fill: 텍스트의 컬러/투명도를 선택할 수 있습니다.

④ Stroke: 텍스트 선의 색상, 굵기 등을 설정할 수 있습니다.

⑤ Selection colors: 선택한 복수 요소들에 사용된 컬러를 일괄 수정할 수 있습니다.

⑥ Effects: 그림자 효과 등을 적용할 수 있습니다.

⑦ Export: 선택 요소를 이미지로 추출(2x)할 수 있고 파일 타입을 설정할 수 있습니다. 포토샵에서 UI를 작업할 경우 360px 사이즈 스마트폰의 이미지 해상도를 높이기 위해 애초에 720px 2배수로 디자인을 작업을 하는데요. 벡터 프로그램인 피그마에선 애초에 360px 사이즈로 작업을 하고 추출할 때 2x수로 추출하면 됩니다. 이게 벡터 프로그램인 피그마의 장점입니다.

지금까지 피그마의 기본 화면의 요소들인 상단(툴바), 좌측(레이어 패널), 우측(속성 패널)에 대해 알아보았습니다.

다음 시간에 실제로 UI를 그려보는 실습을 할텐데 회원가입을 하는 앱이나 웹사이트라면 어디에나 존재하는 '로그인(Log In)' 페이지를 샘플로 피그마의 기본 기능에 대해 알아보도록 하겠습니다.:)

유익했다면! 이어서 읽어보기:)

실패 없는 개발을 위한 서비스 기획!

Figma 프로토타이핑 기획!🚀
상담문의