본문 바로가기

Study/Figma6

피그마 초보 강좌 6편: 디자인 시스템 구축하기 이번 강좌에서는 피그마에서 디자인 시스템을 구축하고 효율적으로 관리하는 방법을 알아봅니다. 디자인 시스템은 일관성 있는 디자인을 유지하고, 컴포넌트와 스타일을 체계적으로 관리할 수 있어 팀 전체의 생산성을 높이는 데 큰 도움이 됩니다.1. 디자인 시스템이란?디자인 시스템은 프로젝트 내에서 사용할 컴포넌트, 스타일, 컬러 팔레트, 타이포그래피, 아이콘 등을 모아 일관성을 유지할 수 있도록 체계적으로 관리하는 것입니다. 이를 통해 디자인의 일관성을 유지하고, 모든 팀원이 동일한 기준에 맞춰 작업할 수 있습니다.디자인 시스템을 사용할 때의 장점디자인 일관성 유지: 프로젝트의 모든 화면에서 같은 스타일과 컴포넌트를 사용하여 일관된 사용자 경험을 제공수정 용이성: 디자인 시스템의 컴포넌트를 수정하면 연결된 모든 .. 2024. 11. 4.
피그마 초보 강좌 5편: 팀 협업과 피드백 관리 이번 강좌에서는 피그마의 팀 협업 기능을 활용해 여러 팀원들과 동시에 작업하고, 피드백을 효율적으로 관리하는 방법을 다룹니다. 피그마는 여러 사람이 하나의 파일에서 실시간으로 협업할 수 있는 장점이 있어, 디자인 검토와 피드백 관리가 원활합니다.1. 피그마 파일 공유 및 권한 설정1) 파일 공유하기피그마에서 디자인 파일 상단의 Share 버튼을 클릭합니다.링크를 복사하거나 이메일 주소를 입력하여 공유할 수 있습니다.링크를 복사하면 이메일 없이도 파일에 접근할 수 있어 빠르게 공유할 수 있습니다.2) 접근 권한 설정하기View: 파일을 보기 전용으로 설정해 다른 사람이 수정하지 못하도록 제한합니다.Comment: 팀원이 댓글만 남길 수 있도록 제한하며 파일을 보호할 수 있습니다.Edit: 팀원이 편집 가능.. 2024. 11. 3.
피그마 초보 강좌 4편: 프로토타이핑과 인터랙션 설정하기 이번 강좌에서는 프로토타입(Prototype) 기능을 통해 디자인 화면 간의 전환을 설정하고, **인터랙션(Interaction)**을 추가해 실제 앱처럼 작동하는 인터페이스를 만들어보겠습니다. 피그마의 프로토타입 기능을 통해 사용자의 흐름을 미리 시뮬레이션할 수 있어 UX 테스트나 디자인 리뷰 시 유용합니다.1. 프로토타입 모드 이해하기피그마에서 프로토타입 모드로 전환하면 각 화면을 연결하고 전환 효과를 설정할 수 있습니다. 상단 Prototype 탭을 선택하여 프로토타입 모드로 전환하면 설정 옵션이 오른쪽 패널에 표시됩니다.Trigger(트리거): 사용자가 인터랙션을 시작하는 동작으로, 클릭, 드래그, 호버 등이 있습니다.Action(액션): 트리거에 의해 실행되는 동작으로, 예를 들어 다른 화면으로.. 2024. 11. 2.
피그마 초보 강좌 3편: 컴포넌트와 Variants 활용하기 이번 강좌에서는 컴포넌트(Component) 기능을 통해 반복되는 디자인 요소를 쉽게 관리하고 재사용하는 방법을 알아보겠습니다. 특히, 컴포넌트의 Variants(변형) 기능을 활용해 버튼이나 카드 등의 다양한 상태를 한 번에 관리할 수 있습니다. 이 기능을 활용하면 프로젝트 전체에서 일관성을 유지하면서도 효율적으로 디자인을 수정할 수 있습니다.1. 컴포넌트(Component)란?컴포넌트는 UI 디자인에서 자주 사용하는 요소(버튼, 카드, 입력 창 등)를 하나의 모듈로 만들어 재사용할 수 있는 기능입니다. 컴포넌트로 만든 요소는 다른 곳에서도 쉽게 복제해 사용할 수 있고, 원본 컴포넌트를 수정하면 복제본들도 자동으로 업데이트됩니다.컴포넌트를 사용해야 하는 이유일관성 유지: 버튼, 카드 등 자주 사용하는 .. 2024. 11. 1.
피그마 초보 강좌 2편: 도형, 텍스트, 색상 스타일 활용하기 이번 강좌에서는 피그마의 기본 도구인 도형, 텍스트, 색상 스타일을 활용하는 방법을 다룹니다. 이 강좌를 통해 도형과 텍스트의 크기, 위치, 색상을 조정하고, 자주 쓰는 색상과 텍스트 스타일을 저장하여 일관성 있는 디자인을 만들 수 있습니다.1. 도형(Shape) 도구 사용하기피그마에서는 직사각형(Rectangle), 원(Ellipse), 선(Line) 등 기본 도형을 사용해 쉽게 UI 요소를 디자인할 수 있습니다.1) 도형 추가하기상단의 Shape Tool을 클릭하거나 단축키 R을 눌러 **Rectangle(직사각형)**을 선택합니다.원하는 위치를 클릭하고 드래그하여 직사각형을 만듭니다.마찬가지로, **Ellipse(원)**은 O를 눌러 추가하고, **Line(선)**은 L을 눌러 추가할 수 있습니다... 2024. 10. 31.
피그마 초보 강좌 1편: 피그마 시작하기 – 기본 개념과 인터페이스 익히기 1. 피그마 설치 및 시작하기1) 피그마 계정 만들기피그마 공식 웹사이트인 figma.com에 접속합니다.Sign up 버튼을 클릭해 회원가입을 합니다. 이메일이나 구글 계정을 이용해 가입할 수 있습니다.2) 피그마 데스크톱 앱 설치하기 (선택 사항)피그마는 웹 브라우저에서 바로 사용할 수 있지만, 데스크톱 앱을 설치하면 더 편리하게 사용할 수 있습니다.Download Figma 링크를 통해 데스크톱 앱을 다운로드하고 설치합니다.설치 후 피그마 계정으로 로그인하면 웹에서와 동일하게 사용할 수 있습니다.2. 피그마 대시보드 구성피그마에 로그인하면 대시보드가 나타납니다. 대시보드는 프로젝트와 파일을 관리할 수 있는 곳입니다.1) 주요 기능 살펴보기New File: 새 피그마 파일을 만들 때 사용합니다.Dra.. 2024. 10. 30.