Figma는 전 세계 그래픽 디자이너를 위한 최고의 프로그램 중 하나로 알려져 있습니다. 이 기능은 포괄적이어서 사용자가 눈길을 끄는 로고부터 독특한 랜딩 페이지까지 무엇이든 만들 수 있도록 도와줍니다. 특히 부울 기능(2002년 구성 요소 속성 업데이트의 일부이기도 함)을 사용하면 여러 수식을 통해 레이어를 결합하여 사용자 정의 모양을 얻을 수 있습니다.
여기에서는 다음 디자인에서 부울 기능을 사용하는 방법을 배웁니다.
내가 애플 뮤직에 몇 곡을 가지고 있니
사용자 정의 모양에 대한 부울 수식 옵션
사용자 정의 모양을 만들기 전에 부울 수식이 어떻게 작동하고 무엇을 달성하는지 알아야 합니다. 부울 그룹을 만들 때마다 채우기 및 획 속성이 모두 포함된 단일 모양 레이어로 계산됩니다.
인터페이스 상단 표시줄에 두 개의 사각형이 겹쳐져 있는 부울 아이콘을 찾을 수 있습니다. 클릭하면 드롭다운 메뉴에 네 가지 수식 옵션이 표시됩니다.
이러한 수식 옵션에는 다음이 포함됩니다.
- Union Selection – 이 옵션은 선택한 모양을 부울 그룹으로 바꿉니다. Union을 사용하면 외부 하위 모양의 경로가 새 사용자 정의 모양의 윤곽선을 형성합니다. 그러나 내부 겹치는 세그먼트는 포함되지 않습니다.
- 선택 빼기 – 이 옵션을 합집합 선택의 반대라고 생각하면 도움이 됩니다. 기본 모양에서 모양의 전체 영역을 제거합니다. 이렇게 하면 맨 아래 레이어만 표시됩니다.
- 교차 선택 – 교차 선택을 통해 사용자는 원래 모양이나 하위 레이어의 겹치는 세그먼트로만 구성된 사용자 정의 모양을 만들 수 있습니다.
- 선택 제외 – 제외 기능은 교차 부울 그룹 옵션의 반대입니다. 이를 사용하면 원래 모양의 겹치지 않는 부분에서 사용자 정의 모양을 얻을 수 있습니다.
상단 메뉴에서 부울 옵션을 효과적으로 사용하려면 두 개 이상의 도형을 선택해야 한다는 점을 기억하세요. 이는 Boolean이 여러 모양 레이어를 하나의 사용자 정의 및 복잡한 모양으로만 결합하기 때문입니다.
Figma 인스턴스 스왑 속성 사용
Figma가 2022년에 구성요소 속성 업데이트를 발표했을 때 부울 선택은 사용 가능한 여러 새로운 기능 중 하나에 불과했습니다. 구성 요소 업데이트의 요점은 불필요한 옵션을 파헤치는 대신 변형 템플릿을 효과적으로 만들 수 있도록 돕는 것입니다.
부울이 중요한 부분이지만 사용자는 인스턴스 스왑 속성을 사용할 수도 있습니다. 방법은 다음과 같습니다.
- 디자인 요소를 선택하세요.
- 인터페이스 오른쪽에 있는 인스턴스 교환 메뉴로 이동하여 클릭합니다. 아이콘에는 화살표가 있는 다이아몬드가 있습니다.
- 팝업 메뉴에서 '아이콘'과 같이 속성에 이름을 지정하고 값을 확인 표시 등으로 설정합니다.
- '속성 만들기'를 선택하세요. 그러면 Figma는 원래 교체 메뉴가 있었던 구성 요소 속성을 표시합니다.
- 디자인을 선택하고 CTRL + C 명령을 사용하여 디자인 복사본을 만듭니다. 그런 다음 인스턴스를 나란히 설정합니다.
- 표시된 구성 요소 속성 메뉴에서 새 아이콘을 클릭하여 선택합니다. 그러면 인스턴스의 요소가 자동으로 변경됩니다.
인스턴스 스왑 기능은 편의성에 관한 것입니다. 인스턴스 교체 옵션을 사용하면 변형(인스턴스)을 나란히 빠르게 전환하면서 설계 프로세스를 간소화할 수 있습니다.
쉬운 인스턴스 변경을 위해 텍스트 속성 옵션 사용
랜딩 페이지의 클릭 유도 버튼을 디자인한다고 가정해 보겠습니다. 두 가지 변형이 나란히 있고 인스턴스 교환 속성을 사용하여 다른 아이콘을 보았습니다. 그러나 문구는 고려해야 할 또 다른 요소입니다.
일반적으로 프로세스를 완료하려면 레이어 섹션을 뒤섞어야 합니다. 대신 텍스트 구성 요소 속성을 사용하면 사이드바에서 이를 보고 변경할 수 있습니다. 텍스트 속성 기능을 활용하는 방법은 다음과 같습니다.
- 디자인에서 텍스트 요소를 선택하세요.
- '속성 만들기'를 클릭하기 전에 요소에 '텍스트'와 같은 이름과 '버튼' 값을 지정하십시오.
- 그런 다음 텍스트를 변경하고 클릭 유도 문구에 대한 문구를 실험할 수 있습니다.
텍스트 속성은 인스턴스 스왑 및 부울 옵션과 함께 사용하는 것이 편리합니다.
Figma에서 변형 속성을 사용하는 방법
Figma의 새로운 구성요소 업데이트를 통해 여러 변형을 생성하고 오른쪽 사이드바에서 모두 제어할 수 있습니다. 이렇게 하면 텍스트를 변경하고 아이콘을 보다 효율적으로 바꾸는 데 도움이 됩니다. 변형 디자인의 다른 측면도 제어할 수 있습니다. 그렇게 하는 방법을 살펴보겠습니다:
- 디자인을 선택하고 상단 표시줄에서 '변형 추가'를 클릭하세요. 왼쪽을 누른 채 디자인을 클릭하고 바로 옆에 변형을 드래그하세요.
- 두 번째 변형 속성이 오른쪽 사이드바에 어떻게 표시되는지 확인할 수 있습니다. 속성의 레이블을 '버튼'으로 다시 지정하고 그 옆의 값을 '빨간색'으로 다시 지정합니다.
- 이제 이러한 속성이 변형에 라벨을 지정합니다. 원본 디자인을 선택하면 값이 다시 '기본값'으로 변경되는 것을 확인할 수 있습니다.
자주 묻는 질문
불리언 옵션을 사용하여 로고를 만들 수 있나요?
기술적으로 Boolean 속성을 사용하면 해당 경로를 사용하여 여러 모양을 결합할 수 있습니다. 이는 간단한 로고를 만드는 방법일 수 있지만 옵션은 타원과 같은 단순한 모양으로 제한됩니다. 대신 로고 생성과 같은 작업에는 펜 도구를 사용하는 것이 가장 좋습니다. 다른 구성 요소 업데이트를 사용하여 계층화 프로세스를 더 쉽게 만들 수 있습니다.
텍스트 구성 요소 속성 옵션을 사용하여 글꼴을 변경할 수 있나요?
불행히도. 텍스트 구성요소 속성을 사용하면 글꼴이 아닌 텍스트를 변경할 수 있습니다. 그러나 텍스트를 선택하고 오른쪽 사이드바를 통해 적절한 글꼴을 찾을 수 있습니다.
위의 구성 요소 속성을 사용해야 하는 디자인 인스턴스는 무엇입니까?
버튼을 누르지 않고 snapchat에 녹음하는 방법 android
변형에는 구성요소 속성을 사용할 필요가 없습니다. 그러나 이는 설계 프로세스를 훨씬 더 쉽고 빠르게 만듭니다. 예를 들어 다양한 색상이 필요한 버튼(주로 단 하나의 구성 요소만 변경하면 유사함) 또는 작은 방문 페이지 모양 변형이 있습니다. 또한 두 가지 디자인을 만들고 가장 좋은 디자인을 선택하는 데에도 도움이 됩니다.
Figma의 구성요소 속성으로 설계 프로세스를 간소화하세요
부울과 같은 옵션을 사용하면 이전 모양을 조합하여 새로운 사용자 정의 모양을 만들 수 있습니다. 이는 네 가지 수식 옵션이 있는 상단 사이드바를 통해 수행됩니다. 여기에는 결합, 빼기, 교차 및 제외가 포함됩니다. 마찬가지로 텍스트 속성 및 인스턴스 교체와 같은 다른 구성 요소 속성 옵션을 사용할 수 있습니다. 이렇게 하면 다양한 구성 요소로 변형을 쉽게 만들 수 있습니다. 궁극적으로 구성요소 속성을 사용하면 설계 프로세스를 간소화하는 데 도움이 됩니다.
부울 옵션을 사용하여 어떤 복잡한 모양을 만들었나요? 구성 요소 속성 옵션도 사용하기 쉽다고 생각하시나요? 아래 댓글 섹션을 통해 알려주세요.
