이 기능을 사용할 수 있는 사용자

모든 요금제에서 제한된 베타 버전으로 제공
새롭게 디자인된 Figma에 액세스할 수 없다면 잠시만 기다려 주세요. 이 업데이트는 앞으로 몇 달 동안 출시될 예정입니다. Figma를 처음 사용하고 자동으로 새롭게 디자인된 버전을 사용하고 있는 경우에는 디자인 파일 탐색 가이드를 참조하시기 바랍니다.

Config 2024에서는 UI3라는 새롭게 디자인된 Figma를 소개했습니다. 이 가이드는 Figma의 이전 디자인에서 전환하고 어떻게 달라졌는지 확인하려는 사용자를 위한 것입니다.

Figma를 새롭게 디자인한 이유

시간이 지나면서 Figma는 점점 더 복잡해졌고, UI3는 디자인 경험을 단순화하기 위한 노력의 결실입니다. Figma Design은 디자이너에 집중하면서 더 넓은 대상이 사용할 수 있도록 만들었습니다. 나아가 기존 제품과 향후 출시될 제품을 위한 일관된 기반도 만들고 있습니다.

새로운 디자인의 특징은 다음과 같습니다.

크기 조정 및 축소 가능한 패널로 인터페이스를 더 잘 제어할 수 있습니다.
캔버스에서의 작업에 더 중점을 둡니다.
기능 배치, 그룹화 및 다양한 상황에 맞게 조정하는 방법을 개선하여 기능을 더욱 직관적으로 만듭니다.
다른 제품과 일관성이 있어 Figma Design, FigJam, 개발 모드, Figma Slides 간에 쉽게 전환할 수 있습니다.

팁: 새 디자인에 대해 자세히 알아보고 싶으신가요? 작업의 중심이 되는 새롭게 디자인된 Figma의 내부 모습이라는 블로그 게시물을 확인하세요.

변경된 사항

탐색 패널

캔버스 왼쪽에 있는 탐색 패널을 개편하여 파일에 대한 모든 정보를 담고 사용하기 쉽도록 만들었습니다.

UI 최소화

캔버스에 공간이 조금 더 필요한 경우 이제 탐색 패널에서 UI를 최소화할 수 있습니다. UI 최소화를 클릭하여 탐색 패널과 속성 패널을 모두 접으세요.

UI를 최소화한 상태에서 캔버스에서 무언가를 선택하면 속성 패널이 일시적으로 다시 열리므로 각 속성의 컨트롤에 액세스할 수 있습니다.

파일 이름 및 위치

파일 이름 옆의 드롭다운 아이콘을 클릭하여 파일 이동, 라이브러리 게시, 분기 생성 또는 버전 내역 표시 등의 작업을 수행합니다.

자산 탭

자산 탭에서 구성 요소 검색, 탐색 및 삽입이 더욱 쉬워졌습니다.

툴바

새로운 툴바는 디자인 도구를 편집기 하단으로 이동합니다. 이로 인해 캔버스에서 더 많은 작업 공간이 확보되고 새로운 작업 메뉴를 통해 새로운 AI 기능이 도입됩니다.

참고: Figma Design의 AI 기능은 앞으로 몇 달 동안 출시될 예정입니다. 자세히 알아보기 →

작업

작업은 툴바의 새로운 항목으로, 아이디어를 더 빠르게 현실화할 수 있도록 도와주는 기능입니다. 여기에서 Figma의 모든 AI 도구, 일반적인 생산성 작업, 플러그인 및 위젯, 구성 요소 등에 액세스할 수 있습니다.

개발 모드로 들어가기

이제 툴바에서 개발 모드에 액세스하며, Figma Design의 여러 모드를 쉽게 전환할 수 있습니다.

속성 패널

속성 패널의 디자인 뷰는 사용하기 쉬워지고 속성은 보다 최신 워크플로에 맞게 그룹화되었습니다.

또한 속성 패널의 크기를 조정할 수도 있는데, 이는 이름이 긴 구성 요소로 작업할 때 유용합니다.

속성 레이블

UI3의 새로운 기능으로, 이제 속성 레이블을 활성화하여 각 속성의 기능을 더 명확하게 나타낼 수 있습니다.

속성 레이블을 활성화하려면 속성 패널에서 100% 확대/축소 비율 옆에 있는 드롭다운 메뉴를 클릭하고 속성 레이블을 선택합니다.

선택 작업

이제 속성 패널에는 선택한 개체에서 수행할 수 있는 작업이 포함된 헤더 행이 있습니다.

예를 들어 마스크를 적용하거나 구성 요소를 만들거나 부울 연산을 수행하는 버튼을 찾을 수 있습니다. 더 보기 메뉴를 통해 추가 작업을 사용할 수도 있습니다.

레이아웃

auto-layout-callout (1).png 레이아웃에는 너비, 높이 등 개체의 레이아웃과 관련된 모든 속성이 포함됩니다.

프레임에서 자동 레이아웃 사용을 클릭하면 레이아웃 레이블이 자동 레이아웃으로 변경되고 모든 자동 레이아웃 속성을 사용할 수 있습니다.

위치

이제 위치에서 제약 조건을 포함하여 캔버스에서 개체의 위치와 관련된 모든 속성에 액세스할 수 있습니다.

팁: 이제 속성 패널에서 스포트라이트 기능을 사용할 수 있습니다. 스포트라이트로 들어가면 왼쪽 및 오른쪽 패널과 툴바가 최소화되므로 작업을 보여줄 공간이 더 넓어집니다.

기능이 어디로 이동했나요?

아래 목록에서 이동한 모든 기능과 해당 기능을 찾을 수 있는 위치를 확인하세요.

	이전 디자인	새 디자인
편집 액세스 권한 요청 파일에 대한 `보기 가능` 액세스 권한이 있고 파일을 편집하려는 경우 툴바에서 편집 요청을 클릭하여 편집 액세스 권한을 요청할 수 있습니다.
절대 위치 절대 위치는 이제 자동 레이아웃 무시입니다. 자동 레이아웃을 무시하면 자동 레이아웃 구조를 따르지 않고 자동 레이아웃 프레임 내부의 개체를 수동으로 배치할 수 있습니다. 자동 레이아웃을 무시하려면 자동 레이아웃 프레임의 하위 요소를 선택한 다음 속성 패널에서 을 클릭합니다.
개체 정렬 정렬 컨트롤을 사용하면 개체를 상위 레이어에 정렬하거나 여러 개체를 상대적으로 정렬할 수 있습니다. 둘 이상의 개체를 선택한 다음 속성 패널의 위치에서 정렬 도구 중 하나를 클릭합니다.
자동 레이아웃 프레임에서 자동 레이아웃을 사용하면 콘텐츠 변경 내용과 다양한 화면 크기에 맞게 동적으로 조정됩니다. 프레임에서 자동 레이아웃을 사용하려면 속성 패널의 레이아웃 섹션에서 을 클릭합니다.
자동 레이아웃 너비 및 높이 값 자동 레이아웃 프레임에서는 이제 너비 및 높이 값이 크기 조정 동작과 결합됩니다. 다음에서 이러한 값을 찾을 수 있습니다. 너비 및 높이 크기 조정 동작 옆의 괄호 안 또는 패널이 충분히 넓지 않은 경우 마우스를 올려 놓을 때 캔버스에서 선택한 자동 레이아웃 프레임 아래의 치수 필 안
혼합 모드 혼합 모드는 두 레이어를 혼합하는 방법을 정의합니다. 혼합 모드를 적용하려면 개체를 선택하고 모양 옆의 을 클릭한 다음 모드를 선택합니다.
콘텐츠 숨기기 콘텐츠 숨기기를 사용하면 상위 프레임의 경계를 넘어 확장되는 레이어의 일부를 숨길 수 있습니다. 레이아웃 아래의 콘텐츠 숨기기 확인란을 사용하여 콘텐츠를 숨기거나 표시할지 선택합니다.
구성 요소 속성 구성 요소 속성은 구성 요소의 변경 가능한 측면입니다. 구성 요소의 어떤 부분을 특정 속성에 연결하여 다른 사람이 변경할 수 있도록 정의할 수 있습니다. 구성 요소에 사용 가능한 구성 요소 속성이 있는 경우 속성 패널의 프레임 이름 아래에서 찾을 수 있습니다.
제약 조건 제약 조건은 상위 프레임의 크기를 조정할 때 레이어가 어떻게 작동해야 하는지 Figma에 알려줍니다. 하위 레이어를 선택하면 제약 조건 아이콘이 속성 패널의 위치 섹션에서 X 및 Y 위치 값 옆에 나타납니다.
모서리 반경 모서리 반경은 개체의 모서리를 둥글게 만들 수 있는 속성입니다. 개체를 선택한 상태에서 모양 아래의 모서리 반경 필드를 클릭하고 값을 변경합니다. 을 클릭하여 각 모서리를 개별적으로 수정할 수도 있습니다.
파일 이름, 프로젝트 이름 및 파일 작업 파일 이름, 프로젝트 및 파일 작업 드롭다운이 탐색 패널로 이동했습니다.
마스크 마스크를 사용하여 개체의 특정 영역을 표시하고 나머지는 숨길 수 있습니다. 개체를 선택한 상태에서 마스크로 사용을 클릭하여 개체를 마스크로 사용하는 마스크 그룹을 만듭니다. 사용 가능한 작업 수에 따라 더 보기 메뉴에 마스크로 사용이 표시될 수 있습니다.
다중 편집 다중 편집을 사용하면 프레임, 그룹 및 섹션에서 여러 레이어를 선택하고 동일한 편집 내용을 일괄적으로 적용할 수 있습니다. 다중 편집을 활성화하려면 속성 패널에서 을 클릭합니다.
플러그인 및 위젯 플러그인 및 위젯에 액세스하려면 툴바에서 작업을 연 다음 플러그인 및 위젯 탭을 클릭합니다.
개체의 너비나 높이 조정 또는 적합하도록 크기 조정 레이아웃에서 개체의 너비와 높이를 변경합니다. 아이콘을 클릭하여 하위 레이어에 맞게 프레임의 크기를 조정할 수도 있습니다.
회전 회전 또는 뒤집기를 사용하면 방향을 변경하여 개체를 조작할 수 있습니다. 개체를 선택한 상태에서 위치를 찾고 다음 작업을 수행합니다. 을 클릭하여 개체를 오른쪽으로 90° 회전합니다. 을 클릭하여 수평으로 뒤집습니다. 을 클릭하여 수직으로 뒤집습니다.
개체 표시 또는 숨기기 캔버스에서 개체를 숨기려면 모양 옆의 을 클릭합니다. 다시 표시하려면 을 클릭합니다.
텍스트 텍스트는 이제 타이포그래피라고 합니다. 이제 레이아웃에서 텍스트 레이어의 크기를 조정할 수 있습니다. 단락 간격이 유형 설정으로 이동했습니다. 타이포그래피에서 을 클릭하여 유형 설정 패널을 엽니다.
변수 모드 변수 모드는 디자인의 다양한 컨텍스트를 나타냅니다. 모드에는 컬렉션 내 변수에 대한 값 목록이 포함되어 있습니다. 변수 컬렉션에 여러 모드가 있는 경우 레이어와 요소의 모드를 전환하여 다양한 컨텍스트에 맞게 디자인을 빠르게 변경할 수 있습니다. 개체가 여러 모드가 있는 변수에 바인딩되어 있는 경우 모양 옆의 을 클릭하여 변수 모드를 전환할 수 있습니다.
변형 추가 변형을 사용하면 유사한 구성 요소를 단일 컨테이너로 그룹화하고 구성할 수 있습니다. 구성 요소 인스턴스를 삽입하면 구성 요소 세트의 변형 속성 간에 전환할 수 있습니다. 변형을 추가하려면 기본 구성 요소를 선택한 다음 속성 패널에서 구성 요소 이름 옆에 있는 변형 추가를 클릭합니다.
벡터 경로 편집 벡터 경로를 편집하려면 벡터 옆의 개체 편집을 클릭합니다. 여러 벡터 경로를 선택하면 부울 연산 메뉴가 나타납니다. 여기에서 다음 연산을 수행할 수 있습니다. 합집합 차집합 교집합 차집합
확대/축소/보기 옵션 확대/축소/보기 옵션 메뉴에서 확대/축소 설정을 조정하거나 레이아웃 그리드 또는 멀티플레이어 커서와 같은 보기 옵션을 구성할 수 있습니다.