새소식

프론트엔드 공부/UI . UX

Figma란?, Figma component 만들기

  • -

피그마란?

피그마는 프로핑타이핑 도구이면서 그래픽 편집을 동시에 할 수 있는 프로그램이에요!  피그마의 특,장점은 아래와 같이 많아요~

1.실시간 협업기능

피그마는 하나의 draft(피그마에서는 '파일'과 같은 개념으로 사용됩니다!)를 함께하는 동료들과 공유하여 동시에 작업할 수 있으며, 다양한 플러그인을 사용할 수 있어서 웹, 앱 디자인 분야에서 사용하기 적절해요. 
만약 edit가능한 권한을 받았다면 각 요소의 css코드도 추출할 수 있어요. 물론 간격이나 여백 수치 등 디자인 파일을 자세히 뜯어볼 수 도 있죠!

2.다양한 환경지원

피그마는 웹브라우저에서 동작되는 프로그램이기 때문에 Mac이나 Window 같은 PC의 OS 관계없이 어떤 환경에서도 디자인 작업이 가능해요! 심지어 리눅스나 크롬OS에서 작동한다고(!) 인터넷 사용만 된다면 언제 어디서나 접속해서 디자인 작업을 할 수 있죠!
만약 인터넷이 불가능한 환경이라면 직접 설치해서 사용할 수 있지만 변경한 data가 반영되지 않기에 fig 확장자 파일을 다운로드 받아서 사용해야합니다!

3.자동 저장 및 버전관리

자동저장을 기본으로 제공하고 있어서 매번 날라가는 스트레스에서 조금은 벗어날 수 있어요! 게다가 웹 기반 툴이기 때문에 자동저장 기능을 위한 디스크 공간에 부담도 없습니다! 히스토리를 통해서 버전관리도 할 수 있으며 Team 결제 시, 무제한 버전 관리를 제공하고 수정하다 삭제되거나 옮겨진 과정의 파일을 언제든 확인할 수 있어요!

그리고 코멘트 기능이 있어서 멤버들이 각자 디자인에 의견을 줄 수 있어서 별도의 협업 툴이 없어도 피그마에서 한번에 의견을 줄 수 있다는 점. 단순히 UI 디자인 툴이 아니라 브레인스톰이과 아이디에이션을 위한 툴로 인기 있는 이유죠! 팀원이 마우스 움직이는것도 확인 가능하고 보고 있는 화면 위치까지 알 수 있어요.

4.다양한 무료 폰트 지원

Figma는 구글 폰트를 활용할 수 있어 폰트를 별도로 설치할 필요가 없고, 폰트가 없어서 화면이 깨지는 현상도 발생하지 않습니다. 또한, 구글 폰트 이외에도 사용자 PC에 저장된 로컬 폰트를 불러와서 사용할 수도 있습니다. 웹 기반으로 무료 폰트가 제공되니 협업시 매번 폰트가 있는지 확인하거나 공유할 필요없다는 점!

5. 오토 레이아웃 기능

오토레이아웃을 사용하면 개체와 개체 간의 간격과 정렬 등 규칙을 부여해 해당 개체가 크기가 변해도 간격이나 정렬이 유지되는 기능이에요! 

하나의 화면만 작업하는게 아닌 디자인에서 디바이스 화면 크기와 비율에 따라 같은 화면을 여러개 작업하게 되는데, 이 과정에서 작업 시간을 효율적으로 사용할 수 있게되요! 만약 반복적으로 작업해야 하는 것이라면 사람이 하는 일이라 발생하는 사소한 오차를 발생하지 않도록 도와주겠죠!?

6. 프로토타이핑

안드로이드와 iOS 모두 지원하는 피크마 미러 앱을 사용하면 브라우저에서 편집중인 화면을 실행한 핸드폰 디바이스에서 띄울 수 있습니다!
만약 실제 구현될 때의 모습을 제공해야 하는 회의나 미팅에서는 설득력이 더 올라가겠죠??

또한 기획자, 디자이너 그리고 개발자가 소통하는데 많은 도움이 됩니다! 기본적으로 화면전환, 팝업, 슬라이드 등 간단한 상호작용을 구현 할 수 있어서 어떻게 동작되는지 글이나 말로 하는것 보다 이해하기 쉬워집니다!


피그마 컴포넌트

보통 UI 구성요소들은 일회성으로 사용되기 보다 반복적으로 화면에서 사용되죠? 가장 쉬운 예로 버튼을 생각해봐요.
같은 색, 모양의 버튼이지만 텍스트만 바뀌는 경우는 해당 컴포넌트로 만들고 그 컴포넌트를 복사해서 인스턴스로 만들어 주면 나중에 버튼 디자인을 바꾸게 되었을 때 컴포넌트에서 복사된 인스턴스에 대해서는 한꺼번에 수정할 수 있어서 엄청 편리해요!

그렇다면 컴포넌트를 먼저 만들어야겠죠?

피그마에서 글자나 도형 등을 만들어 선택하면 화면 상단에 위 이미지처럼 네게의 다이아몬드가 뭉쳐있는 아이콘이 있을거에요. 
컴포넌트로 만들고 싶은 객체를 선택한 상태로 해당 아이콘을 누르면 레이어창에서 '마스터 컴포넌트'라는 표시로 바뀝니다.

이제 이 컴포넌트를 복사하면 인스턴스가 생기는 거에요!(부모 - 자식 개념으로 생각하면 될거같아요) 컴포넌트를 바꾸면 인스턴스는 똑같이 바뀝니다.

컴포넌트와 인스턴스 객체간 관계에서 알아야 할것은 복사된 인스턴스 객체가 컴포넌트의 속성과 달라진 부분이 있다면 해당 부분은 마스터 컴포넌트에서 변경해도 효과를 받지 못 한다는 점이에요!

아래 동영상 예시에서 (왼쪽) 컴포넌트의 배경색을 바꿔주면 (오른쪽) 인스턴스들의 배경색도 일괄적으로 변경되는 모습을 볼 수 있을거에요! 하지만 인스턴스에서 개별적으로 속성을 건드렸다? 그러면 얄짤없이 컴포넌트는 해당 속성을 제공해주지 않아요..ㅠ

동영상에서 배경색만 건드렸던 첫번째 인스턴스에서는 배경색이 변경되지 않는걸 볼 수 있을거에요.

단, 해당 속성에 대한것만 받지않는것이지 만약 컴포넌트의 글자 크기가 달라졌다하면 첫번째 객체는 배경색만 바꿨을 뿐, 글자는 건드리지 않았으니 컴포넌트의 글자 크기 변경사항을 그대로 적용합니다! 

동영상에는 없지만 만약 인스턴스를 잘못 수정해서 컴포넌트의 효과를 그대로 받고 싶다면 화면 상단의 리셋 버튼을 누르면 됩니다. (텍스트 내용 변경한 것 까지 모두 최초의 컴포넌트 상태로 돌아가요!)

위의 컴포넌트와 인스턴스를 활용하면 버튼의 효과 (호버, 클릭시)와 반복적인 작업을 할때 사용할 수 있어요. 이때 생성했던 인스턴트들을 다시한번 컴포넌트로 만들어서 쓸 수 있답니다! 이때는 여러 옵션을 선택할 수 있도로록 컴포넌트 생성시 'Creat component set' 으로 해주세요!


기본 단축키

  • 복사하기 : Command + C
  • 붙여넣기 : Command + V
  • 잘라내기 : Command + X
  • 복제하기 : Command + D 혹은 Option 누른 상태로 드래그
  • 여러 요소 동시에 선택하기 : Shift 누른 상태로 클릭
  • 그룹으로 묶기 : Command + G
  • 프레임으로 묶기 : Command + Option + G
  • 그룹, 프레임 해제하기 : Command + Shift + G
  • 간격 측정하기 : 요소를 선택한 상태에서 Option 누르고 다른 요소에 마우스 올려놓기

오토 레이아웃

  • 오토 레이아웃 추가하기
    • 오토 레이아웃 적용할 요소 선택 → Shift + A
    • 오토 레이아웃 적용할 요소 선택 → Design 탭 Auto layout 에서 + 버튼 선택
  • 오토 레이아웃 제거하기 : Shift + Option + A

컴포넌트

  • 단일 컴포넌트 생성 : 컴포넌트로 만들 요소 선택 → Command + Option + K 혹은 상단 Create component 버튼 클릭
  • 컴포넌트 여러 개 생성 : 컴포넌트로 만들 요소 모두 선택 → Create component 버튼 옆 드롭다운 클릭 → Create multiple component 선택
  • 상태를 가진 컴포넌트 생성 : 컴포넌트의 상태로 만들 요소 모두 선택 → Create component 버튼 옆 드롭다운 클릭 → Create component set 선택
  • 컴포넌트에 상태 추가하기 : 상태를 추가할 컴포넌트 선택 → 화면 우측 Design 탭 Properties 에서 + 버튼 클릭 → Variant 선택 → 컴포넌트 하단에 생긴 보라색 + 버튼 눌러 상태 추가
  • 컴포넌트의 인스턴스 생성
    • 컴포넌트 복제하기 (Command + D 혹은 Option 누른 상태로 드래그)
    • 화면 좌측 Assets 탭에서 인스턴스를 생성할 컴포넌트를 드래그하여 화면에 끌어다놓기

 

Figma는 이 외에도 다양한 단축키를 제공합니다. Figma 화면에서 Control + Shift + ? 를 누르면 사용 가능한 모든 단축키를 확인하실 수 있습니다.

  • Command 키가 아니라 Control 키입니다. 헷갈릴 수 있으니 주의하세요!
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.