완전히 달라진 Figma Design, 핵심 기능 한 번에 살펴보기 - 피그마 강좌 1-2

지금의 Figma Design은 더 이상 화면만 그리는 디자인 도구가 아닙니다.

UI 디자인은 기본이고, 벡터 그래픽을 만들고, AI에게 프롬프트를 입력해 새로운 디자인을 생성하거나 기존 화면을 수정할 수도 있습니다. 셰이더 효과와 변수, 애니메이션, 개발자 핸드오프까지 하나의 디자인 파일 안에서 처리할 수 있게 되었는데요.

이번 영상에서는 최신 Figma Design에 어떤 기능들이 들어있는지 전체적인 구조를 빠르게 살펴봅니다.

먼저 새로운 디자인 파일을 만들고 캔버스와 사이드바, Pages와 Layers 등 기본 화면 구성을 알아봅니다.

이어 새롭게 추가된 Agent 기능을 이용해 AI에게 모바일 화면을 만들어 달라고 요청해봅니다. 하나의 요청에서 서로 다른 스타일의 UI를 생성하고, 기존 디자인을 선택한 상태에서 다크 모드로 변경하는 것처럼 특정 영역만 수정하는 과정도 확인합니다.

Tools 패널에서는 플러그인과 다양한 그래픽 효과를 사용할 수 있습니다. Chromatic Metal, Gradient Map, Halftone과 같은 셰이더 효과를 직접 적용하고 값을 조절하는 방법도 간단하게 살펴봅니다.

Variables에서는 자주 사용하는 컬러 등의 값을 변수로 등록하고 실제 디자인과 연결하는 기본 원리를 확인합니다. 변수의 값을 변경했을 때 연결된 디자인이 함께 변경되는 과정도 살펴봅니다.

또한 현재 Figma Design에서 사용할 수 있는 Design, Draw, Motion, Dev Mode의 차이를 알아봅니다.

특히 새롭게 추가된 Motion에서는 투명도에 키프레임을 추가하고 이징과 타이밍을 조절해 여러 UI 요소가 순차적으로 등장하는 간단한 애니메이션을 직접 만들어봅니다.

Prototype과 Motion의 차이도 함께 정리합니다. Prototype이 사용자의 행동에 따라 화면이 어떻게 연결되는지를 설계한다면, Motion은 시간의 흐름에 따라 디자인 요소가 어떻게 움직이는지를 만드는 기능입니다.

마지막으로 Dev Mode에서 디자인 정보와 애니메이션을 확인하고, MCP 연결이나 CSS 등 개발 단계로 디자인을 전달할 수 있는 기능까지 간단하게 살펴봅니다.

이번 영상에서는 모든 기능을 깊게 배우기보다 최신 Figma Design의 전체 구조를 이해하는 데 집중합니다. 각 기능의 구체적인 사용법은 이후 강의에서 실제 예제를 통해 하나씩 알아보겠습니다.

다음 영상에서는 Figma의 Draw 기능을 이용해 벡터 그래픽을 만드는 방법을 살펴봅니다.

#피그마 #Figma #피그마강좌 #FigmaDesign #UI디자인 #UX디자인 #피그마AI #FigmaMotion



🕐 타임스탬프
00:00 달라진 Figma Design 살펴보기
00:55 디자인 파일과 기본 화면 구성
01:21 Agent로 AI 디자인 생성하기
03:55 Tools와 셰이더 효과
05:02 Variables로 디자인 값 관리하기
08:08 Motion으로 애니메이션 만들기
10:17 Prototype과 Motion의 차이


🔥 디자인베이스 웹사이트 : http://designbase.co.kr/
🔥 인스타그램 : https://www.instagram.com/designbasekorea/
🔥 이메일 문의 : [email protected]
🔥 카카오 오픈채팅방 : https://open.kakao.com/o/gmwngljb (참여코드 : dgoing12)