글

Figma의 드로잉 툴: 펜 툴과 연필 툴의 진화와 활용-일러스트레이터의 경쟁자

이미지
 Figma Config 2025에서 Figma Draw가 발표되면서, Figma는 단순한 UI/UX 디자인 툴을 넘어 보다 광범위한 시각적 표현과 일러스트레이션 영역으로 그 역량을 확장했습니다. '드로잉 툴'이라는 표현이 이전에도 있었던 펜 툴과 연필 툴을 포함하지만, Figma Draw는 이들을 재구축된 벡터 엔진 위에 올려놓고 새로운 기능들을 추가하여, 디자이너들이 외부 툴을 사용하지 않고도 Figma 내에서 높은 수준의 일러스트레이션 작업을 할 수 있도록 지원합니다. 1. Figma Draw의 핵심 요소 및 특징 Figma Draw는 기존 펜 툴과 연필 툴의 기능을 강화하고, 새로운 도구들을 추가하여 벡터 드로잉의 정교함과 표현력을 동시에 높였습니다. 1) 향상된 벡터 편집 기능 - Shape Builder (셰이프 빌더)  Adobe Illustrator와 같은 전문 일러스트레이션 툴에서 볼 수 있었던 기능으로, 여러 겹쳐진 도형이나 선을 쉽게 합치거나 잘라내고, 교차 영역을 조작하여 복잡한 형태를 직관적으로 만들 수 있습니다. 이는 Boolean 연산보다 훨씬 유연하고 빠르게 도형을 구성하는 데 도움을 줍니다. - Lasso Selection (올가미 선택 툴) 특정 영역 내의 벡터 점(노드)이나 패스 세그먼트를 자유롭게 선택할 수 있어, 복잡한 드로잉에서 특정 부분을 정교하게 수정하거나 이동하는 데 용이합니다. - Multi-Edit for Vectors (벡터 다중 편집) 여러 벡터 오브젝트의 앵커 포인트나 핸들을 동시에 선택하고 편집할 수 있는 기능으로, 복잡한 일러스트레이션의 특정 부분을 일괄적으로 수정할 때 시간을 크게 단축시킵니다. - Optimized Vector Editing (최적화된 벡터 편집) 기존 Figma의 벡터 엔진을 재구축하여, 더 부드럽고 정확한 패스 편집 경험을 제공합니다. 이는 더 적은 수의 앵커...
자세한 내용 보기

바로 쓸 수 있는 디자인시스템 구축 실습(디자인 스타일 가이드)

이미지
디자인 시스템의 구조는 각 기업의 제품이나 서비스에 따라 알맞게 구성하면 되므로 별도의 정해진 형식은 없습니다. 따라서 다양한 디자인 시스템 구축 사례들을 참고하여 핵심이 되는 요소들을 작성하면 됩니다. 1. 파운데이션(Foundation) 디자인 시스템의 가장 기본이 되는 기초 항목에 대한 내용을 정리한 페이지를 말합니다.  - 환경 요소 : 그리드, 간격, 엘리베이션(Elevation)  - 기초 요소 : 컬러 시스템, 타이포그래피, 아이콘, 형태  - 기타 요소 : 상태  2. 그리드 시스템 페이지 구성하기 그리드(Grid)는 작업 화면에서 콘텐츠를 배치할 때 사용하는 기준선을 말합니다. 디바이스 크기에 맞게 그리드 시스템을 미리 구성해 두면 콘텐츠를 제작할 때 이미지와 텍스트의 배치와 정렬을 쉽게 할 수 있습니다. 그리드 시스템은 각 프레임 크기별 그리드와 함께 브레이크 포인트와 레이아웃을 포함하기도 합니다. * 브레이크 포인트는 반응형 또는 적응형 디자인에서 브라우저의 크기가 모바일, 태블릿, 데스크톱 등고 같이 특정 넓이가 되었을 때 디자인이 변경되는 지점을 말합니다. 모바일, 태블릿, 데스크톱 3개의 브레이크 포인트만 있기도 하고 모바일과 태블릿의 가로세로 간격 등을 고려하여 더 많은 브레이크 포인트를 지정하기도 합니다. 3. 디자인 토큰의 활용 디자인 토큰을 활용하여 컴포넌트의 간격(Spacing)과 높이(Elevation)값을 설정합니다. 간격은 '8dp' 디자인을 고려한 '8dp grid'를 기본으로 제작합니다. 또한 머티리얼(Material) 디자인 가이드의 타이포그래피를 대비하여 '4dp grid' 간격도 함께 설정합니다. 리소트툴을 클릭하여 창에서 [Plugins]를 선택한 후 'Tokens Studio For Figma'를 선택하여 실행합니다. 4. 엘리베이션(Eleva...
자세한 내용 보기

피그마 프로토타입의 활용(프레임 인터랙션, 베리언트 스위치 인터랙션, 캐러셀(carousel) 인터랙션,내비게이션 드로워 인터랙션등)

이미지
1. 피그마와 프로토타입 피그마의 프로토타입 기능을 활용하면, 디자인 요소에 전환, 애니메이션과 같은 인터랙션 효과를 만들 수 있습니다. [Prototype] 메뉴를 살펴보면 디바이스의 기종과 색상, 미리보기 화면의 바탕화면 색상을 지정할 수 있는 옵션이 있습니다. 2. 프레임 인터랙션(Interaction)의 이해 가장 빈번하게 사용되는 인터랙션은 프레임과 프레임 간의 페이지 전환으로 이루어지는 경우가 많고, 프레임 전환  인터랙션은 같은 오브젝트가 다른 프레임에서 색상이나 그림자와 같은 변화로 페이지가 전환되는  인터랙션을 말합니다. 3. 베리언트 스위치 인터랙션 디자인을 하다 보면 한 페이지 안에서 일어나는 인터랙션이 매우 많을 때가 있습니다. 따라서 버튼 형태에 인터랙션을 적용해야 한다면, 버튼을 제작하는 베리언트 단계에서 인터랙션을 지정하여 사용하는 것이 더 효율적입니다. 4. 버튼 인터랙션 버튼은 사용자와 서비스가 상호작용 할 때 가장 많이 사용하는 컴포넌트 중 하나이며, 서비스의 상태를 표시할 수 있는 요소이기도 합니다.  호버(Hover)와 프레스드(Pressed)상태의 버튼을 만들어보고 탭 했을 때 다른 프레임으로 이동하는 인터랙션을 제작해 봅니다. 5. 캐러셀(carousel) 인터랙션 캐러셀은 서비스의 메인 페이지에서 디자인 컨셉이나 마케팅 정보를 순서대로 전환하면서 보여주는 이미지 방식으로 자동 또는 수동으로 이미지를 이동 시킬 수 있습니다. 이는 메인 페이지의 히어로(hero) 이미지뿐만 아니라 다양한 형태의 콘텐츠를 노출하는 방식으로 구현할 수 있기 때문에 이미지를 좌우로 드래그하여 보여주거나 여러 개의 콘텐츠를 배치하여 보여줄 때 유용한 방식입니다. 프레임 밖으로 사각형이 보이는 것은 사각형을 프레임 안에 배치하지 않았다는 의미이며, [Layer...
자세한 내용 보기

피그마 사용자라면 기본, 베리언트 기능활용

이미지
1. 베리언트(Variants)의 이해 저도 프로젝트를 진행하다 보면 생각보다 많은 컴포넌트를 만들어 사용을 하기도 합니다. 컴포넌트의 형태는 같지만, 색상이 다른 [Light] 모드와 [Dark]모드를 제작하여 변경할 수도 있고, 같은 용도지만 크기를 Small/Medium/Large로 설정하여 사용할 수도 있습니다. 이처럼 스타일과 속성값이 다른 경우 일일이 모든 컴포넌트를 만들어 사용하는 것보다 비슷한 종류의 컴포넌트를 세트로 묶어서 사용할 수 있는 베리언트(Variants)를 활용하는 것이 좋을 것 같습니다. (1) 베리언트(Variants)의 주요 장점 및 활용 방법 베리언트는 디자인 시스템의 효율성을 극대화하는 데 핵심적인 역할을 합니다. ① 디자인 시스템의 간결화 수많은 컴포넌트를 단일 컴포넌트 셋으로 통합하여 에셋 패널(Assets Panel)을 훨씬 깔끔하게 유지할 수 있습니다. 디자이너가 필요한 컴포넌트를 찾기 쉬워집니다. ② 재사용성 및 일관성 강화 한 번 정의된 베리언트는 프로젝트 전반에 걸쳐 일관된 디자인을 유지하게 해줍니다. 속성만 변경하면 되므로, 디자인 에셋의 재사용성이 극대화됩니다. ③ 작업 속도 향상 원하는 컴포넌트 속성만 패널에서 선택하면 되므로, 일일이 수동으로 수정하거나 새로운 컴포넌트를 찾아 드래그할 필요가 없어 작업 속도가 비약적으로 빨라집니다. ④ 쉬운 유지보수 특정 컴포넌트의 디자인 변경이 필요할 때, 베리언트 셋 안의 마스터 컴포넌트만 수정하면 해당 베리언트를 사용하는 모든 인스턴스에 변경 사항이 반영됩니다. 이는 디자인 시스템 업데이트 시 엄청난 시간을 절약해 줍니다. ⑤ 개발자와의 협업 효율성 증대 개발자도 베리언트의 속성(Property)과 값(Value)을 명확하게 파악할 수 있어, 디자인과 개발 간의 싱크를 맞추기가 훨씬 용이해집니다. "이 버튼은 state: disabled, size: large 입니다." 와 같이 명확한 커뮤...
자세한 내용 보기

가장 기본이 되는 피그마 컴포넌트의 활용 (컴포넌트 라이브러리)

이미지
컴포넌트란 UI를 구성하는 재사용 가능한 블록입니다. 버튼, 입력 필드, 아바타, 카드, 모달 등 인터페이스를 이루는 모든 시각적 요소를 컴포넌트화하여 관리할 수 있습니다. 컴포넌트 활용의 중요성 1) 일관성 유지 여러 곳에서 동일한 UI 요소를 재사용함으로써 디자인의 시각적 일관성을 유지하고 브랜드 아이덴티티를 강화할 수 있습니다.  2) 생산성 향상 반복적인 디자인 작업을 줄이고, 컴포넌트의 인스턴스를 복사하여 빠르게 UI를 구성할 수 있어 작업 시간을 단축하고 생산성을 높입니다.  3) 유지보수 용이성 컴포넌트의 마스터 속성을 한 번만 수정하면 해당 컴포넌트의 모든 인스턴스에 변경 사항이 자동으로 적용되어 유지보수가 용이해집니다.   4) 협업 효율 증대 팀원 간에 공유된 컴포넌트 라이브러리를 통해 디자인 작업의 표준화를 이루고 커뮤니케이션 오류를 줄여 협업 효율성을 높입니다.  5) 접근성 향상 접근성을 고려하여 제작된 컴포넌트를 재사용함으로써 웹 및 앱 서비스의 접근성 기준을 쉽게 준수할 수 있도록 돕습니다. 피그마 컴포넌트의 활용 1. 그룹, 프레임, 컴포넌트의 이해 - 그룹은 콘텐츠를 하나의 그룹으로 묶는 개념이다. 그룹으로 묶인 콘텐츠는 크기, 색상, 속성이 모두 같이 변경됩니다. - 프레임은 콘텐츠를 아우르는 컨테이너의 개념이며, 내부 콘텐츠의 속성이나 크기에 영향을 주지 않습니다. - 컴포넌트는 재사용 가능한 디자인 요소를 묶은 것이다. 2. 컴포넌트와 인스턴스의 이해 - 컴포넌트 : 재사용 가능한 UI 요소로 등록한 원본을 의미합니다. - 인스턴스 : 원본 컴포넌트를 복제한 오브젝트를 말합니다. - 속성의 차이점 ① 원본 컴포넌트는 복제한 인스턴스의 색상, 크기, 형태 변화에 영향을 주지만, 인스턴스는 원본 컴포넌트에 영향을 주지 않습니다. ② 복제한 인스턴스의 속...
자세한 내용 보기