Figma 변수 가이드

Figma Design의 변수는 모든 종류의 속성과 프로토타입 제작 액션에 적용할 수 있는 재사용 가능한 값을 저장합니다. 디자인을 구축하고, 디자인 시스템을 관리하며, 복잡한 프로토타이핑 흐름을 만들 때 시간과 노력을 절약할 수 있습니다.

예를 들어 변수를 다음과 같은 용도로 사용할 수 있습니다.

• 디자인 시스템 관리 시 효율을 높이기 위한 디자인 토큰 만들기
• 다양한 기기 크기 간에 프레임 전환 및 정의된 공간 시스템에 따라 공백이 즉시 업데이트되는지 확인
• 프레임의 텍스트를 전환하여 다양한 언어에서 텍스트가 어떻게 흐르는지 미리 확인
• 장바구니에 추가된 항목에 따라 주문 총계를 계산하는 등 제대로 작동하는 장바구니 디자인 만들기
• 조건 논리를 사용해 사용자가 질문에 올바르게 대답했는지, 틀리게 대답했는지 보여주는 대화형 퀴즈 프로토타입 개발

Figma에서 변수를 사용하는 주요 세 가지 방법은 다음과 같습니다.

1. 디자인과 디자인 시스템 ↓
2. 고급 프로토타입 제작 ↓
3. Figma API ↓

디자인 및 디자인 시스템을 위한 변수

변수와 모드를 사용하여 디자인 시스템에 디자인 토큰을 구현하고, 라이트 테마/다크 테마 등 다양한 컨텍스트 간에 디자인을 전환하세요. 변수를 사용하면 더 효율적으로 디자인하고 더 강력한 디자인 시스템을 구축할 수 있습니다.

• Figma 튜토리얼: 변수 소개

  이 비디오 튜토리얼에서는 변수의 기초, 변수를 사용하여 디자인 토큰을 표현하는 방법, 그리고 색상 및 숫자 변수를 사용하여 다양한 모드와 테마를 설명하는 방법을 다룹니다.
• Figma 튜토리얼: 타이포그래피용 변수

  이 비디오 튜토리얼에서는 글꼴 속성에 변수를 사용하는 방법, 기존 타입 시스템에 변수를 통합하는 방법, 그리고 이를 활용하여 반응형 디자인을 구현하는 방법을 다룹니다.
• 문서: 변수, 컬렉션 및 모드 개요 →

  여기서 변수 여정을 시작하세요! 다양한 변수 유형과 변수 컬렉션 및 모드에 대해 알아보세요.

• 문서: 변수 생성 및 관리 →

  변수와 컬렉션을 생성하고, 다른 변수 정의를 참조하며, 디자인에 사용할 수 있는 변수의 범위를 설정하는 방법을 배워보세요.

• 문서: 디자인에 변수 적용하기 →

  기존 변수를 디자인 속성에 적용하는 방법을 배워보세요.

• 문서: 변수 모드 →

  변수에 대해 각 모드와 연결된 여러 정의를 만드는 방법을 알아보세요. 또한 이를 사용하여 디자인의 컨텍스트를 빠르게 전환하는 방법을 알아보세요.

• 문서: 변수와 스타일의 차이점 →
  

  Figma가 변수 기능을 확장하면서, 여러 가지 궁금한 점이 생기셨을 수 있습니다. 변수와 스타일의 차이가 무엇인가요? 변수와 스타일은 각기 언제 사용해야 하나요?

• 문서: Dev Mode에서 변수 →
  

  디자인을 검사하는 동안 Dev Mode에서 변수에 접근하는 방법을 알아보세요. 변수의 세부 정보 확인, 추천 변수 보기, 변수 테이블을 통한 로컬 컬렉션 조회 등 다양한 기능을 사용할 수 있습니다.

• 커뮤니티 파일: 변수 플레이그라운드 →

  변수를 직접 사용해 보고 싶으신가요? 학습하면서 연습할 수 있도록 변수 플레이그라운드 파일의 사본을 받아 두세요.

고급 프로토타입 제작을 위한 변수

변수를 사용하면 더 적은 프레임으로 완성도 높은 프로토타입을 제작할 수 있습니다. 변수와 표현식, 조건문 같은 고급 기능을 사용하여 프로토타입을 한 단계 업그레이드하세요.

프로토타입 제작에서 변수는 개체의 속성을 저장하는 데 사용됩니다. 프로토타입 인터랙션을 사용해 변수 값을 변경하면 몇 개의 간단한 프레임만으로도 디자인 내 개체의 모양, 내용, 표시를 동적으로 제어할 수 있습니다.

• 비디오 튜토리얼: 변수가 있는 프로토타입

  실제 예제를 따라가며 프로토타입에서 변수를 사용하는 방법을 보고 배워보세요. 변수 값을 수정하는 방법, 간단한 표현식을 작성하는 방법, 조건부 검사를 평가하기 위해 여러 액션과 if/else 논리를 사용하는 방법을 다룹니다.
• 문서: 프로토타입에서 변수 사용 →

  변수를 구성하는 방법, 변수 설정 액션을 사용하여 변수 값을 변경하는 방법, 구성 요소 변형 및 인터랙티브 컴포넌트와 함께 변수를 사용하는 방법 등 Figma에서 변수를 사용하여 프로토타입을 제작하는 기본 사항에 대해 알아보세요.

• 문서: 프로토타입에서 표현식 사용 →

  프로토타입에서 표현식과 변수를 사용하여 동적 문자열 값을 생성하고, 숫자 값으로 기본적인 수학 연산을 수행하거나 불리언 표현식을 평가하는 방법을 알아보세요.

• 문서: 다중 액션 및 조건 →

  하나의 트리거에 여러 액션을 무제한으로 연결하는 방법과, if/else 조건문을 활용해 조건이 충족될 때만 특정 액션을 수행하는 방법을 배워보세요.

• 문서: 프로토타입의 변수 모드 →

  프로토타입에서 변수 모드를 사용하는 방법을 배워보세요. 컨텍스트에 따라 특정 모드의 값을 설정하거나 표현식에 특정 모드 값을 사용할 수 있습니다.

• 커뮤니티 파일: 고급 프로토타입 제작 플레이그라운드 →

  고급 프로토타이핑 플레이그라운드 파일을 복사하여 변수를 사용한 프로토타입 제작을 더 실습해 보세요.

API를 사용하는 변수

이제 Figma의 플러그인 API(플러그인 및 위젯 제작용)와 REST API에서 변수를 지원합니다. 

• 개발자 문서: REST API →

  REST API의 변수 지원에는 변수 쿼리, 생성, 업데이트, 삭제를 위한 엔드포인트가 포함되어 있습니다.

• 개발자 문서: 플러그인 API →

  플러그인 API에서 변수 지원은 변수 생성 및 읽기, 그리고 변수를 컴포넌트에 바인딩하는 것을 포함합니다. 예를 들어, 변수를 가져오기하거나 내보내기 하거나 스타일을 변수로 변환하는 플러그인을 만들 수 있습니다.

• 개발자 문서: 위젯 API에 대한 정보 →

  위젯은 플러그인 API를 사용하여 변수에 접근할 수 있습니다. 위젯은 변수를 생성하고 읽을 수 있지만, 위젯 속성은 변수에 바인딩할 수 없습니다.

• Figma 튜토리얼: Figma 변수를 GitHub에 동기화하기

  이 비디오 튜토리얼에서 변수들을 코드베이스와 동기화하는 방법을 배워봐. Figma 변수와 코드베이스를 동기화하는 방법으로 Variables GitHub 액션 예제 저장소를 사용하는 방법을 알아보겠습니다.
• 커뮤니티 파일: 변수 REST API를 사용하여 디자인 시스템 동기화 →

  Figma의 변수 REST API를 사용하여 디자인 파일과 코드베이스 간의 변경 사항을 동기화하는 자동화된 업무 흐름을 설정하는 방법을 알아보세요.