multiking

베리언트(Variant)?피그마의 베리언트(Variant)는 디자인 시스템 내에서 하나의 컴포넌트에 여러 상태, 크기, 스타일 등을 정의하여 효율적으로 관리할 수 있도록 돕는 기능이다. 이를 통해 유사한 속성을 가진 다양한 컴포넌트를 하나의 그룹으로 관리할 수 있으며, 작업 속도를 높이고 일관성을 유지할 수 있다.베리언트의 주요 특징속성(Property): 각 베리언트는 속성을 기반으로 정의된다. 예를 들어, 버튼의 "크기", "상태", "컬러" 등의 속성을 설정할 수 있다.다양성: 베리언트를 사용하면 단일 컴포넌트에서 다양한 변형을 쉽게 선택하고 적용할 수 있다.컴포넌트 관리 효율성: 디자인 시스템을 더 체계적으로 구성할 수 있다.버튼 베리언트 속성SizeStateColorSmallDefaultPrim..

학습목표- component와 에셋의 개념을 이해하고 활용 할 수 있다. Ctrl + C  & V 만 계속 할 수 없쟎아Component디자인에서 자주 반복되는 UI 요소를 일관되게 재사용할 수 있도록 만든 디자인 모듈을 말한다. 피그마에서 컴포넌트를 사용하면 디자인의 일관성을 유지하면서도 효율적으로 작업을 관리할 수 있다.컴포넌트의 특징과 장점재사용 가능:컴포넌트는 한 번 만들어 두면 다양한 화면이나 페이지에서 반복적으로 사용할 수 있다.예를 들어, 버튼, 카드, 헤더, 아이콘 등이 컴포넌트로 만들어지면 여러 곳에서 같은 스타일로 재사용할 수 있다.일관성 유지:컴포넌트를 사용하면 디자인 전체에 걸쳐 일관된 스타일과 구조를 유지할 수 있다.예를 들어, 버튼 컴포넌트를 업데이트하면 이 컴포넌트를 사용한 모..

콘스트레인트(Constraint)•어떤 오브젝트의 위칫값을 상하좌우에 ‘강제＇로 고정하는 기능콘스트레인트(Constraint) 부모 프레임의 크기를 조정할 때 객체가 어떻게 반응하는지 정의할 수 있습니다. 즉, 객체의 상대적 위치와 크기를 모두 제어할 수 있습니다.1. 제약 조건 (Constraints)제약 조건을 사용하면 부모 프레임의 크기가 조정될 때 객체가 어떻게 반응하는지 설정할 수 있다.객체의 상대적 위치와 크기를 제어하여 다양한 화면 크기에 대응할 수 있는 유연한 레이아웃을 구현할 수 있다.예를 들어, 특정 객체에 Center Constraint를 적용하면 부모 프레임이 크기를 조정해도 객체가 항상 중앙에 위치하게 된다.2. 레이아웃 그리드 (Layout Grid)레이아웃 그리드는 프레임 내 ..

레이아웃 흐름 : Direction세로: y축을 따라 개체를 추가, 제거 및 재정렬합니다. 예를 들어 목록 내의 개체, 뉴스 피드 또는 타임라인 내의 게시물 등이 있습니다.수평: x축을 따라 개체를 추가, 제거 및 재정렬합니다. 예: 버튼 행 또는 모바일 탐색 메뉴의 아이콘입니다.줄 바꿈: 프레임의 여러 행과 열로 개체를 정렬합니다. 개체는 가로로 흐르고 다음 줄로 줄 바꿈됩니다. 예: 사진 갤러리 또는 태그 집합.Canvas stacking order자동 레이아웃 프레임을 선택한 상태에서 오른쪽 패널에서 클릭하여 자동 레이아웃 설정을 엽니다. canvas stacking 옆에서 다음을 선택합니다.첫 번째: 스택의 첫 번째 레이어가 맨 위에 있습니다.마지막이 맨 위: 스택의 마지막 레이어가 맨 위에 있습..

Chapter03_피그마의 정렬과 레이아웃학습목표- 스마트 셀렉션을 이용하여 두 개 이상의 오브젝트를 선택하면 정렬과 간격을 쉽게 조절할 수 있다.- 오토 레이아웃을 통해 개체를 프레임 내에서 여러 행과 열로 자동 정렬할 수 있다.- 레이아웃 그리드의 개념을 이해하고 구성 할 수 있다.- 콘스트레인트의 이해하고 반응형 레이아웃을 구성 해 본다. 1. 스마트 셀렉션두 개 이상의 오브젝트를 선택하면 정렬과 간격을 쉽게 조절할 수 있다.자주색 간격 조절선을 클릭 앤 드래그하여 간격을 조정할 수 있으며, 원형 핸들을 선택해 위치를 빠르게 변경할 수 있다.Alt + 클릭을 통해 간격을 확인할 수 있다.2. 오토 레이아웃 (Auto Layout)오토 레이아웃을 통해 개체를 프레임 내에서 여러 행과 열로 자동 정렬할..

주제 : 프레임, 레이아웃 그리드, 도형, 구성 요소이 프로젝트에서는 Figma Design에서 재사용 가능한 24 x 24 아이콘 그리드를 만들 것입니다. 아이콘 그리드는 아이콘 디자인에 대한 일관된 지침을 제공하는 준비된 프레임입니다.  아이콘은 일반적으로 집합에 존재하기 때문에 한 아이콘에서 다른 아이콘으로 시각적 일관성을 유지하는 것이 중요합니다. 아이콘 그리드 사용에 대한 자세한 내용은 Material Design의 시스템 아이콘을 확인하세요.아이콘 그리드를 구축하려면 다음을 수행합니다.프레임 만들기레이아웃 그리드를 사용하도록 설정합니다직교선을 그린다키 셰이프 추가아이콘 그리드를 구성 요소로 변환완료되면 최종 레이아웃 그리드에는 아이콘 디자인을 위한 20 x 20 픽셀의 안전 영역과 2픽셀 너비..