위어드섹터 공식 블로그

디자인 시스템 내에는 컬러, 타이포, 아이콘, 쉐도우, 그리드, 버튼, 테이블 등 ,, 여러 가지로 제한할 수 있습니다. 저는 그중에서도 복잡한 디자인 시스템을 어떻게 규정할 수 있을까에 대해 집중해 보았는데요. 그중에서도 Figma의 Variants 기능을 무수히 많이 사용해 보면서 알아낸 것들을 간단한 프로세스 5단계로 공유하고자 합니다. Q. 디자인 시스템의 무수한 경우의 수를 어떻게 정의할 것인가요? 🤯 버튼 시스템 경우 고려할 사항 사이즈 별 다른 UI 상황마다 다르게 쓰이는 UI 아이콘이 있는 경우와 아닌 경우로 변형될 수 있는 UI A. Variants 기능을 5단계로 적용해본다. 😆오늘 5단계로 해볼 수 있는 variants기능을 구조로 요약하자면 아래와 같습니다. 1. 시스템에 들어갈 속..

피그마의 플러그인을 활용하여 원형텍스트 제작과 돌아가는 프로토타입을 구현해 보겠습니다! 원형텍스트 제작방법(circle text) 1. 원하는 텍스트를 작성해 줍니다. 2. community에 arc를 검색해 [arc] 플러그인을 설치해 줍니다. 3. text box를 선택 후 [arc] plugin을 실행해 줍니다. 4. 플러그인에서 [Bend Strength]를 +로 조절하면 바깥쪽으로 곡선이 만들어지고, -로 조절하면 안쪽으로 곡선이 만들어집니다. 5. 검은색으로 원형 텍스트가 생성됩니다. 돌아가는 텍스트 애니메이션 (text animation) 1. 원형 텍스트 그룹을 4개를 만들어준 뒤 각도를 90도씩 다르게 제작해..

피그마를 사용하면 다양한 프로토타입을 사용할 수 있는데, 대표적인 프로토타입으로 스크롤이 있습니다. 기본 제작 원리만 알면 다양하게 이용할 수 있어 배워두면 유용합니다. 스크롤 종류 스크롤은 오른쪽 상단 [Prototype]에서 확인가능합니다. 스크롤은 우측상단의 [Prototype]탭에서 확인가능합니다. 스크롤을 만들 프레임을 선택하면 [Overflow Scrolling]에서 스크롤을 설정할 수 있습니다. 오버 플로우 스크롤은 오버 플로우되는 부분을 스크롤링 하겠다는 의미이기 때문에 “오버플로우(프레임 크기보다 안에 있는 컨텐츠의 크기가 클때)”가 먼저 진행되어야 아래의 항목이 생겨납니다. 스크롤은 총 3가지로 나누어져있습니다. 1. Horizontal Scrolling(가로 스크롤) 2. Vertic..

안녕하세요 ! 디자이너 JJ입니다. 저번 글에서는 Figma에서 가장 유용하게 사용할 수 있는 Component에 대해 알아봤으니 이번 글에서는 그 Component를 활용하는 Variants기능에 대해 알아보겠습니다.🧐 1. Variants란 무엇일까요? Variants란 변형이란 뜻으로 컴포넌트들을 조합하여 컴포넌트 세트를 만들어 좀 더 체계적으로 사용하는 기능입니다. 이 기능을 사용하여 토글버튼의 on/off상태를 만들 수도 있고 버튼의 Default, hover, focus, disabled를 사용할 수 있습니다. 예를 들어 이런 토글을 사용할때 각각의 컴포넌트를 만들어 사용하기보단 컴포넌트에 variant 속성을 부여해 하나의 컴포먼트로 토글의 [on/off]를 사용하는 것이 더 편리합니다. 2..

✏️ 안녕하세요 디자이너 JJ입니다. 오늘은 Figma를 사용하면서 가장 유용하게 사용할 수 있는 사실 반드시 알아야 할 component에 대해 소개해 보겠습니다. 1. Component(컴포넌트)란 무엇일까요? 디자인작업에서 생산성과 효율성을 높여주는 component란 무엇일까요? compenet의 사전적 의미는 요소, 부품 등을 의미합니다. Figma에서도 컴포넌트는 화면을 구성하는 모든 요소들입니다. (텍스트, 이미지, 버튼, 아이콘 등) 이런 요소들중 재사용하는 요소들을 정의해 필요할 때마다 검색해 사용할 수 있도록 만든 것이 바로 컴포넌트 기능입니다. 2. Componet 만들기 (1) 자주사용하는 버튼을 제작합니다. (2) 버튼을 클릭후 위에 2개의 버튼 중 맨 왼쪽 다이아 4개짜리를 선택..