Figma 사용

화면 설계를 위한 준비

화면 설계 전 준비

필요한 문서 :

• 요구사항 명세서
• 기능 명세서
• 서비스 컨셉에 따른 디자인이 필요

화면 설계 고려사항

• 서비스 테마
• CSS 코드 작성
  - CSS
  • SASS : CSS 단점 보완 , 변수정의, 자료형 등 확장기능 제공
  • SCSS : CSS 완전히 호환, 가독성 등 더 좋음
• SweetAlert2, Fontawesome, Three.js 등 라이브러리 사용도 좋음
• 32가지 요소 등 사용해서 UX 좋게하기.

Figma의 사용과 장점

• Most Popular UI Design Tools
  - Figma가 가장인기 있음. (최근 어도비에 인수됨)
  - 카카오오브, AdobeXD 등 있긴 하지만 선호도는 낮음
• 디자인 스타일의 적용이 필요
  - 커뮤니티에서 좋은 거 사용하는 것이 빠르고 좋음
• 디자인 시스템 적용 필요
• 목업 작성 필요
  - 정적 디스플레이
• 프로토타입
  - 최종 프로덕트의 작동 방식을 이해할 수 있도록 상호작용 포함
• Constraints
  - 프레임 안 요소의 위치를 통제
• Layout Grid, Auto Layout 등의 요소 사용 시 효율적 작업 가능
• Component && Variant 사용으로 빠른 작업 가능
• Mirror 기능으로 실제 사용을 간접적 경험가능

추천 플러그인

• Tailwind Color Generator: 색상 그라데이션 스타일 생성
• Figma Tokens: 디자인 시스템 구축
• Content Reel : 텍스트, 이미지 더미 데이터 제작
• Brandfetch: 브랜드 로고 이미지 입력
• Material Design Icons : 매터리얼 디자인 가이드를 준수하는 아이콘
• Iconify: 구글 등 이모지 가져오기
• Unsplash: 썸네일용 이미지 가져오기
• Wireframe: 와이어프레임 키트 제공

프론트엔드 배포 고려사항

• 컴포넌트 분리로 유지보수, 가독성 증대
• NginX, Docker 등 사용으로 프론트앤드 빌드 및 배포