피그마 중요 정리

요번주부터 미니 프로젝트가 끝나고, UI/UX 특강이다.

피그마를 활용한 디자인 시스템 구축 및 활용에 대한 전반적인 내용을 정리해보겠다.

피그마 잘 다뤄보고 싶었는데 이런 기회가 와서 너무 럭키비키 ㅋㅋ

주요 개념

디자인 시스템

• 장점:

  • 일관성 유지: 디자인 및 개발 전반에 걸쳐 일관된 사용자 경험(UX) 제공
  • 효율성 증대: 재사용 가능한 구성 요소(Components)를 통해 디자인 및 개발 시간 단축
  • 협업 강화: 디자이너와 개발자 간의 원활한 소통 및 협업 지원
  • 유지보수 용이: 디자인 변경 및 업데이트 시 일괄 적용 가능하여 유지보수 비용 절감
  • 확장성: 새로운 기능 추가 및 서비스 확장에 유연하게 대응 가능

• 구조:

  • 디자인 원칙: 디자인 시스템의 철학 및 가이드라인
  • 스타일 가이드: 색상, 타이포그래피, 레이아웃 등 시각적 요소 정의
  • 컴포넌트 라이브러리: 재사용 가능한 UI 요소 (버튼, 입력 필드, 카드 등)
  • 패턴 라이브러리: 여러 컴포넌트가 조합된 UI 패턴 (예: 탐색 메뉴, 폼)
  • 문서: 디자인 시스템 사용 방법 및 지침

아토믹 디자인 (Atomic Design)

• 개념: 디자인 시스템을 가장 작은 단위(원자)부터 시작하여 점차 복잡한 구성 요소로 조합해 나가는 방법

• 단계:

  • 원자: 더 이상 분해할 수 없는 가장 기본적인 UI 요소 (버튼, 아이콘, 레이블 등)
  • 분자: 여러 개의 원자가 결합된 간단한 UI 구성 요소 (검색창, 카드 등)
  • 유기체: 여러 개의 분자와 원자가 결합된 복잡한 UI 구성 요소 (헤더, 푸터 등)
  • 템플릿: 유기체를 배치하여 페이지의 레이아웃을 구성 (와이어프레임)
  • 페이지: 템플릿에 실제 콘텐츠를 적용하여 완성된 페이지

더블 다이아몬드 방법론 (Double Diamond Methodology)

• 개념: 디자인 프로세스를 문제 정의(Discover, Define)와 해결책 도출(Develop, Deliver)의 두 단계로 나누어 접근하는 방법론

  • Discover (문제 발견): 사용자 조사, 인터뷰 등을 통해 문제점을 발견하고 탐색
  • Define (문제 정의): 발견된 문제점 중 핵심 문제를 정의하고, 해결 목표 설정
  • Develop (해결책 개발): 다양한 아이디어를 발산하고 프로토타입 제작 및 테스트
  • Deliver (해결책 제공): 최종 디자인 및 개발 완료, 사용자에게 제공

애자일 프로세스 (Agile Process)

아마도 프론트엔드 개발자라면 가장중요할 부분 같다~~ (정처기에도 중요했었음)

• 개념: 짧은 주기의 반복적인 개발 사이클을 통해 유연하고 빠르게 변화에 대응하는 개발 방법론

• 특징:

  • 반복적 개발: 짧은 주기로 개발, 테스트, 피드백 반영
  • 점진적 개발: 기능을 점진적으로 추가하며 완성도를 높임
  • 협업 중심: 팀원 간의 긴밀한 협업 및 의사소통 중시
  • 고객 중심: 사용자 피드백을 지속적으로 반영하여 만족도 향상

페르소나 (Persona)

• 개념: 제품/서비스를 사용할 가상의 대표 사용자 (아바타라 생각하면됨)

• 목적:

  • 사용자 중심의 디자인 및 개발
  • 사용자의 요구사항, 행동 패턴, 목표 등을 이해
  • 디자인 의사 결정 시 사용자의 관점 반영

• 구성 요소:

  • 이름, 나이, 직업, 배경 등 기본 정보
  • 사용자의 목표, 요구사항, 불만 사항
  • 사용자의 행동 패턴, 기술 사용 능력 등

와이어프레임 (Wireframe)

• 개념: 웹/앱 페이지의 레이아웃 및 UI 요소를 간단하게 표현한 설계 도면

  -> 피그마를 사용하는 이유랄까?

• 목적:

  • 페이지의 구조 및 정보 계층 설계
  • UI 요소 배치 및 기능 정의
  • 디자인 및 개발 초기 단계에서 아이디어 시각화 및 검증

Figma 주요 단축키 및 툴 활용법

기본 단축키

• Ctrl + G : 그룹 (Group)
• Ctrl + Alt + G 프레임 (Frame)
• Ctrl + Alt + K: 컴포넌트 생성 (Create Component)
• Shift + A: 오토 레이아웃 (Auto Layout)
• Ctrl + D: 복제 (Duplicate)
• Alt누르고 드래그: 요소 복사

오토 레이아웃이란?

• 요소들을 자동으로 정렬하고 간격을 조정하는 기능
• 콘텐츠 내용 변경 시 자동으로 레이아웃 조정
• 반응형 디자인에 유용

fit하게 맞추려면??

위 버튼 처럼 기존 버튼을 수정하여 fit하게 맞추려면 width와 height을 hug하면된다!

컴포넌트란?

• 재사용 가능한 UI 요소로 하나를 객체로 묶음
• 마스터 컴포넌트 수정 시 모든 인스턴스에 일괄 적용
• 디자인 시스템 구축의 핵심 요소
• 아토믹 디자인에 필수!!

베리언트(Variants)란?

• 컴포넌트의 다양한 상태나 속성을 하나의 그룹으로 묶어 관리하는 기능
• 예: 버튼의 기본(Default), 호버(Hover), 비활성화(Disabled) 상태를 하나의 컴포넌트 내에서 정의
• 속성(Properties)을 사용하여 디자인 패널에서 쉽게 상태 전환 가능
• 컴포넌트 라이브러리 정리 및 유사 요소 관리 용이
• 디자인 시스템 일관성 향상 및 효율적인 요소 관리에 도움

프로토타입이란?

• 정적 디자인 화면 연결하여 인터랙티브 목업(Mockup) 제작 기능
• 사용자 흐름(User Flow) 시각화 및 테스트 가능
• 인터랙션설정 ( 트리거(Trigger), 액션(Action), 애니메이션(Animation))
• 사용자 경험(UX) 검증 및 효과적인 디자인 공유에 유용
• Present 모드를 통해 프로토타입 시연 및 테스트 가능

Figma 와 Github 연동

피그마로 디자인한 UI를 깃허브와 연동해서 개발할 때 훨씬 편하게 할 수 있다. 그러기 위해서는 피그마 플러그인을 사용하면된다.

순서

1. 피그마 토큰과 깃허브 레포지토리 준비
2. 토큰 생성 (Color, Typography, Spacing 등) 후 Figma Tokens 플러그인에서 생성한 토큰을 Figma 스타일에 연결
   3.Figma Tokens 플러그인 설정에서 GitHub 선택 후 GitHub 저장소 URL 및 브랜치 이름 입력 후 저장
3. 토큰 내보내기 push
4. 토큰 가져오기 pull