Figma

Figma는 협업 기능이 뛰어난 UI 디자인 툴입니다. 이 문서에 figma를 공부하면서 알게된 내용을 간단히 기록합니다.

일지

• 25일: 프로토타이핑에 관련된 문서의 영상을 봤습니다. 내일은 프레임에 대해 알아봐야겠습니다.
• 24일: 컴포넌트 나머지 문서를 읽다가 어제 본 유튜브 영상의 내용이 반복되는 것을 알았습니다.
• 23일: Component를 이해했습니다.
• 22일: Crop을 해봤습니다.
• 21일: Figma 관련 강좌를 찾아봤습니다. 앞으로 Figma 문서를 읽겠습니다.

Component

• 특정 디자인 객체를 컴포넌트로 만들어서 쉽게 재사용 할 수 있습니다. 예를 들어, 버튼 컴포넌트를 만들고 이 마스터 컴포넌트의 인스턴스를 여러개 만들 수 있습니다.
• 마스터 컴포넌트의 스타일이 변경되면 인스턴스의 스타일도 따라서 바뀝니다.
• Figma에서 마스터 컴포넌트는 4개의 다이아몬드 아이콘으로 표현되고, 인스턴스는 1개의 다이아몬드 아이콘으로 표현됩니다.
• 객체를 그리고 마우스 오른쪽 버튼으로 클릭하여 'Create Component' 메뉴를 선택하여 만들 수 있습니다.
  • 상단 툴바에서 컴포넌트 툴바 아이템을 선택해도 가능합니다.
• 오버라이드
  • 컴포넌트 인스턴스의 스타일은 오버라이드 가능합니다. 특정 인스턴스의 배경색을 바꾸면 마스터 컴포넌트의 배경색을 바꾸더라도 해당 인스턴스의 배경색은 바뀌지 않습니다.
  • 오버라이드한 컴포넌트 인스턴스의 스타일을 다시 마스터 컴포넌트의 스타일을 따라가게 만들고 싶으면, "Reset Instance" 메뉴를 선택하면 됩니다.
• 특정 인스턴스를 컴포넌트가 아닌 일반 객체로 작동하게 바꾸고 싶으면 "Detach Instance" 메뉴를 선택하면 됩니다.
• 실수로 마스터 컴포넌트를 지운 경우 인스턴스에서 "Restore Master Component"를 선택하여 마스터 컴포넌트를 복구할 수 있습니다.