Figma에서 부울 공식을 사용하는 방법

Figma는 전 세계 그래픽 디자이너를 위한 최고의 프로그램 중 하나로 알려져 있습니다. 이 기능은 포괄적이어서 사용자가 눈길을 끄는 로고부터 독특한 랜딩 페이지까지 무엇이든 만들 수 있도록 도와줍니다. 특히 부울 기능(2002년 구성 요소 속성 업데이트의 일부이기도 함)을 사용하면 여러 수식을 통해 레이어를 결합하여 사용자 정의 모양을 얻을 수 있습니다.

여기에서는 다음 디자인에서 부울 기능을 사용하는 방법을 배웁니다.

사용자 정의 모양에 대한 부울 수식 옵션

사용자 정의 모양을 만들기 전에 부울 수식이 어떻게 작동하고 무엇을 달성하는지 알아야 합니다. 부울 그룹을 만들 때마다 채우기 및 획 속성이 모두 포함된 단일 모양 레이어로 계산됩니다.

인터페이스 상단 표시줄에 두 개의 사각형이 겹쳐져 있는 부울 아이콘을 찾을 수 있습니다. 클릭하면 드롭다운 메뉴에 4가지 수식 옵션이 표시됩니다.

이러한 수식 옵션에는 다음이 포함됩니다.

• Union Selection – 이 옵션은 선택한 모양을 부울 그룹으로 바꿉니다. Union을 사용하면 외부 하위 모양의 경로가 새 사용자 정의 모양의 윤곽선을 형성합니다. 그러나 내부에서 겹치는 세그먼트는 포함되지 않습니다.
• 선택 빼기 – 이 옵션을 합집합 선택의 반대라고 생각하면 도움이 됩니다. 기본 모양에서 모양의 전체 영역을 제거합니다. 이렇게 하면 맨 아래 레이어만 표시됩니다.
• 교차 선택 – 교차 선택을 통해 사용자는 원래 모양이나 하위 레이어의 겹치는 세그먼트로만 구성된 사용자 정의 모양을 만들 수 있습니다.
• 선택 제외 – 제외 기능은 교차 부울 그룹 옵션의 반대입니다. 이를 사용하면 원래 모양의 겹치지 않는 부분에서 사용자 정의 모양을 얻을 수 있습니다.

상단 메뉴에서 부울 옵션을 효과적으로 사용하려면 두 개 이상의 도형을 선택해야 한다는 점을 기억하세요. 이는 Boolean이 여러 모양 레이어를 하나의 사용자 정의 및 복잡한 모양으로만 결합하기 때문입니다.

Figma 인스턴스 스왑 속성 사용

Figma가 2022년에 구성요소 속성 업데이트를 발표했을 때 부울 선택은 사용 가능한 여러 새로운 기능 중 하나에 불과했습니다. 구성 요소 업데이트의 요점은 불필요한 옵션을 파헤치는 대신 변형 템플릿을 효과적으로 만들 수 있도록 돕는 것입니다.

부울이 중요한 부분이지만 사용자는 인스턴스 스왑 속성을 사용할 수도 있습니다. 방법은 다음과 같습니다.

1. 디자인 요소를 선택하세요.

   

2. 인터페이스 오른쪽에 있는 인스턴스 교환 메뉴로 이동하여 클릭합니다. 아이콘에는 화살표가 있는 다이아몬드가 있습니다.

   

3. 팝업 메뉴에서 “아이콘”과 같이 속성에 이름을 지정하고 값을 확인 표시 등으로 설정합니다.

   

4. ‘속성 만들기’를 선택하세요. 그러면 Figma는 원래 교체 메뉴가 있었던 구성 요소 속성을 표시합니다.

   

5. 디자인을 선택하고 CTRL + C 명령을 사용하여 디자인 복사본을 만듭니다. 그런 다음 인스턴스를 나란히 설정합니다.

   

6. 표시된 구성 요소 속성 메뉴에서 새 아이콘을 클릭하여 선택합니다. 그러면 인스턴스의 요소가 자동으로 변경됩니다.

인스턴스 스왑 기능은 편의성에 관한 것입니다. 인스턴스 교체 옵션을 사용하면 변형(인스턴스)을 나란히 빠르게 전환하면서 설계 프로세스를 간소화할 수 있습니다.

쉬운 인스턴스 변경을 위해 텍스트 속성 옵션 사용

랜딩 페이지의 클릭 유도 버튼을 디자인한다고 가정해 보겠습니다. 두 가지 변형이 나란히 있고 인스턴스 교환 속성을 사용하여 다른 아이콘을 보았습니다. 그러나 문구는 고려해야 할 또 다른 요소입니다.

일반적으로 프로세스를 완료하려면 레이어 섹션을 뒤섞어야 합니다. 대신 텍스트 구성 요소 속성을 사용하면 사이드바에서 이를 보고 변경할 수 있습니다. 텍스트 속성 기능을 활용하는 방법은 다음과 같습니다.

1. 디자인에서 텍스트 요소를 선택하세요.

   

2. “속성 만들기”를 클릭하기 전에 요소에 “텍스트”와 같은 이름과 “버튼” 값을 지정하십시오.
3. 그런 다음 텍스트를 변경하고 클릭 유도 문구에 대한 문구를 실험할 수 있습니다.

텍스트 속성은 인스턴스 스왑 및 부울 옵션과 함께 사용하는 것이 편리합니다.

Figma에서 변형 속성을 사용하는 방법

Figma의 새로운 구성요소 업데이트를 통해 여러 변형을 생성하고 오른쪽 사이드바에서 모두 제어할 수 있습니다. 이렇게 하면 텍스트를 변경하고 아이콘을 보다 효율적으로 바꾸는 데 도움이 됩니다. 변형 디자인의 다른 측면도 제어할 수 있습니다. 그렇게 하는 방법을 살펴보겠습니다:

1. 디자인을 선택하고 상단 표시줄에서 ‘변형 추가’를 클릭하세요. 왼쪽을 누른 채 디자인을 클릭하고 바로 옆에 변형을 드래그하세요.

   

2. 두 번째 변형 속성이 오른쪽 사이드바에 어떻게 표시되는지 확인할 수 있습니다. 속성의 레이블을 “버튼”으로 다시 지정하고 그 옆의 값을 “빨간색”으로 다시 지정합니다.

   

3. 이제 이러한 속성이 변형에 라벨을 지정합니다. 원본 디자인을 선택하면 값이 다시 ‘기본값’으로 변경되는 것을 확인할 수 있습니다.

   

자주 묻는 질문

불리언 옵션을 사용하여 로고를 만들 수 있나요?

기술적으로 Boolean 속성을 사용하면 해당 경로를 사용하여 여러 모양을 결합할 수 있습니다. 이는 간단한 로고를 만드는 방법일 수 있지만 옵션은 타원과 같은 단순한 모양으로 제한됩니다. 대신 로고 생성과 같은 작업에는 펜 도구를 사용하는 것이 가장 좋습니다. 다른 구성 요소 업데이트를 사용하여 계층화 프로세스를 더 쉽게 만들 수 있습니다.

텍스트 구성 요소 속성 옵션을 사용하여 글꼴을 변경할 수 있나요?

불행히도. 텍스트 구성요소 속성을 사용하면 글꼴이 아닌 텍스트를 변경할 수 있습니다. 그러나 텍스트를 선택하고 오른쪽 사이드바를 통해 적절한 글꼴을 찾을 수 있습니다.

위의 구성 요소 속성을 사용해야 하는 디자인 인스턴스에는 어떤 것이 있습니까?

변형에는 구성요소 속성을 사용할 필요가 없습니다. 그러나 이는 설계 프로세스를 훨씬 더 쉽고 빠르게 만듭니다. 예를 들어 다양한 색상이 필요한 버튼(주로 단 하나의 구성 요소만 변경하면 유사함) 또는 작은 방문 페이지 모양 변형이 있습니다. 또한 두 가지 디자인을 만들고 가장 좋은 디자인을 선택하는 데도 도움이 됩니다.

Figma의 구성요소 속성으로 설계 프로세스를 간소화하세요

부울과 같은 옵션을 사용하면 이전 모양을 조합하여 새로운 사용자 정의 모양을 만들 수 있습니다. 이는 네 가지 수식 옵션이 있는 상단 사이드바를 통해 수행됩니다. 여기에는 결합, 빼기, 교차 및 제외가 포함됩니다. 마찬가지로 텍스트 속성 및 인스턴스 교체와 같은 다른 구성 요소 속성 옵션을 사용할 수 있습니다. 이렇게 하면 다양한 구성 요소로 변형을 쉽게 만들 수 있습니다. 궁극적으로 구성요소 속성을 사용하면 설계 프로세스를 간소화하는 데 도움이 됩니다.

부울 옵션을 사용하여 어떤 복잡한 모양을 만들었나요? 구성 요소 속성 옵션도 사용하기 쉽다고 생각하시나요? 아래 댓글 섹션을 통해 알려주세요.