[멋쟁이 사자처럼 프론트엔드 스쿨] 8일차 TIL - Figma

🍰 Figma 특강을 들었다.

🍴 디자인에서 중요한 것

• 형태 조합
• 색상 조합 - 60 30 10 RULE(primary, secondary, accent)
• 이 두 가지의 배경 - 강조/비강조

🍴 Figma를 알아야 하는 이유

• 현업에서 링크만 주는 경우 있음
• 디자이너의 의도 파악에 유리

🍴 UI 설계

• 비즈니스 별 서비스 품질
• 일관된 서비스 브랜딩(ex. 이건 누가 봐도 카카오 제품임을 알 수 있게)

🍴 프론트 엔드 개발자는?

• 복잡성 낮추기
• 테스트 코드 구현
• 코드 문서화 작업
• 일관된 UX/UI 구현

🍴 WorkFlow

• 기획자 -> 디자이너 -> 프론트 엔드 개발자 -> 고객
• 개발자가 고객과 가장 가까운 위치

🍴 Figma?

• 2016 ~ 코로나로 급부상
• 강력한 UI 드로잉
• 자바스크립트 기반의 툴
• 웹에 자동저장, 시스템 충돌 ↓
• 프로토타이핑, 애니메이션 활용 가능
• 체계적으로 저장 가능
  • 단점: 오프라인에서 사용 X

🍴 핵심

• 왼쪽 - 레이어 패널, 오른쪽 - 디자인 패널, 위 - 상단 툴바
• 하나의 프로젝트 안에 여러 페이지 생성 가능
• 컴포넌트 - 재사용하려고 만들어두는 UI
  • 컴포넌트는 디자인으로 사용 금지 - 재료용으로 남기기
  • Components 페이지 만들고 그곳에 이동
• 인스턴스 - 컴포넌트를 활용한 복제품
  • 실제 작업물에 인스턴스만 남기기

🍴 피그마의 8할은 auto layout ✨ (단축키: shift + A 혹은 우클릭 -> Add auto layout)

auto layout이란?

• 반응형 작업 시 레이아웃을 일정하게 제어할 수 있는 기능 제공
• 부모 - auto layout 적용시킨 대상, 객체를 감싼 프레임 / 자식 - 프레임에 속한 객체
• 부모가 auto layout이고 자식이 auto layout 혹은 텍스트 - Fixed, Hug, Fill 옵션 제어
• 부모가 auto layout인데 자식이 프레임, 벡터, 이미지 - Fixed, Fill 옵션 제어

🍴 옵션 설명

• Fixed width/Fixed height - 폭/높이 영역 고정 => 부모, 자식 모두 적용 가능
• Hug contents - 해당 레이어 감싸는 영역(default) => auto layout과 text에 적용
• Fill container - 부모 프레임에 맞춰 알아서 영역 늘림/줄임 => 자식 객체만 적용 가능

원하는 크기 지정, 자식 감쌈

원하는 크기 지정, 부모에 반응