Figma Study 02

Button 생성하기:

1. 스타일 정의
   
2. 오토 레이아웃 기능
   
3. Button Component생성 & Variants 기능
   
4. 단축키 & 기타
   

연정’s Figma 채널의 강의자료를 바탕으로 공부한 내용을 정리하는 포스팅 입니다
연정’s Figma 바로가기

스타일 정의

• Text 스타일 지정 :
  

• Text 스타일 정의(Component생성) :
  

• Component사용 :
  

• Figma Plugin을 활용한 스타일 생성 :
  

Figma Plugin Styler Download

• Figma Plugin 생성 예제 (Text & Color) :
  

오토 레이아웃 기능

• Auto Layout 생성 및 여백설정:
  
  

• Button background & Text Color에 생성했던 스타일 적용:
  

• Frame Radius 적용 & Frame 내 텍스트 위치설정 :
  

• Icon 적용 :
  

Button Component생성 & Variants 기능

• Button Component 생성
  
  1. 상단 툴바 아이콘을 통해 생성
     
  2. Main Component와 Instance는 Layer 아이콘을 통해 확인가능
     
  3. Main Component 변경 시, Instance는 함께 변경됨
     
  4. Instance 변경 시, Main Component는 변경되지 않음(Override)
     
• Instance Option
  
  1. Reset all overrides : Main Component와 동일한 스타일로 Instance 초기화
     

1. Push overrides to main component : Instance의 스타일을 Main Component에 적용
   

• Detach Instance (Main Component와의 연결해제)
  

• Variants 기능
  

  1. Variants 기능이란 : Component의 모든 상태를 Variation하여 하나의 Component로 만드는 것(약간의 수정사항이 있을 때 마다 Single Component를 만들경우, Component의 개수가 많아진다는 문제를 해결한 기능)
     

1. Button을 다양한 버전으로 만든 뒤, Create multiple Component클릭
   

2. 모든 Button을 드래그한 뒤, Create as variants클릭
   

3. Property설정 후, 각 Button의 Name을 Property에 맞게 설정
   

4. Property적용
   

단축키 & 기타

• 텍스트 작성 : T
  
• Rename : Command(Ctrl) + R
  
• Image Crop : Alr + Double Click
  
• Auto Layout frame 생성 : Shift + A
  
• ZoomIn : +
  
• ZoomOut : -
  
• 사이즈 초기화 : Command(Ctrl) + Alt + Shift + R
  

• Component 생성 : Command(Ctrl) + Alt + K
  

• Resize Option : 텍스트 변경 시, 박스 사이즈 자동변경 혹은 유지하는 기능
  
• Component란? : 두 번 이상 재사용 될 UI Asset
  
• 스타일 정의 : 색상이나 서체 등 반복적으로 사용되는 스타일 속성을 저장하고, 이를 다른 작업에 적용할 수 있도록 하는 기능 (스타일 변경 시, 해당 스타일이 적용된 모든 Component가 함께 변경됨)
  
• Figma Styler : 선택한 레이어들을 바탕으로 스타일을 생성해주는 플러그인
• Auto Layout : Shift + A (단어 간격 등 맞출 시 사용)
  
• 뒤집기 : Shift + V
  
• 눈금자 : Shift + R
  

Youtube 연정’s Figma 채널의 강의자료를 바탕으로 공부한 내용을 정리하는 포스팅 입니다
연정’s Figma 바로가기