쑥이의 UI/UX 온라인 무료강의,피그마(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...