[디자인부트캠프] DAY 17 | 피그마 심화_디자인 스타일

 

 

DAY 17 | 피그마 심화_디자인 스타일

1. 디자인 스타일 고도화 개요
   • 디자인 스타일이란?
     색상, 텍스트, 아이콘, 그래픽 등 디자인 요소를 체계적으로 관리하는 기능으로, 디자인 수정 시 일관성을 유지하고 빠르게 업데이트할 수 있게 합니다.
2. 디자인 스타일을 고도화하는 이유
   • 브랜드 아이덴티티 유지
   • 협업 효율성 향상
   • 다양한 그래픽 효과를 사용하여 디자인에 깊이감과 디테일 추가
3. 스타일 고도화의 주요 요소
   • 컬러 스타일(Color Style): 브랜드 컬러 팔레트를 정의하고 적용.
   • 텍스트 스타일(Text Style): 제목, 본문, 캡션 등 관련된 타이포그래피 설정.
   • 이펙트 스타일(Effect Style): 그림자(Shadow), 블러(Blur), 그라디언트(Gradient) 등의 효과를 설정.

* 디자인 스타일은 디자인 시스템의 핵심 요소로, 정부 사이트에서 사용자 경험의 일관성과 정부 기관의 신뢰성을 보장하고 사용자 접근성을 강화하기 위해 설계되었다. KRDS의 스타일 가이드는 색상, 타이포그래피, 형태, 레이아웃, 아이콘, 엘리베이션, 디자인 토큰을 체계적으로 정의하여 적용 기관의 요구를 충족하면서도 사용자 중심의 경험을 실현한다. 준수해야 할 기준과 변경 가능한 항목을 명확히 구분해, 디자인 시스템의 효과적인 활용과 적용의 용이성을 돕는다.

1. SVG와 벡터 그래픽 편집
   • SVG 파일을 가져와서 직접 수정하고, 벡터 포인트를 활용하여 커스텀 아이콘을 제작.
2. 추천 Figma 플러그인
   • Unsplash: 고화질 무료 이미지를 삽입할 수 있는 플러그인
   • Iconify: 다양한 아이콘을 쉽게 삽입할 수 있는 플러그인
   • Wireframe Designer: UI 와이어프레임을 빠르게 디자인할 수 있도록 돕는 플러그인
   • Content Reel: 텍스트 및 데이터 블록을 디자인 목적으로 빠르게 삽입할 수 있는 플러그인
   • 3D Shape Generator: 3D 모델을 디자인에 추가할 수 있는 플러그인
   • Material Design Icons: Google Material Design 아이콘을 사용하여 아이콘을 추가할 수 있는 플러그인
   • Unofficial Microsoft Fluent 3D Emoji: 3D 형태의 이모지를 추가할 수 있는 플러그인
   • 3D Icons: 3D 아이콘을 삽입할 수 있는 플러그인
   • html.to.design: HTML 페이지를 Figma로 가져오는 플러그인

필요한 요소에 따라 추천 플러그인을 활용한다면, 효율적인 작업이 가능하다.

3dicons, pixabay, unsplash을 활용한 예시

fig3D를 활용한 예시

 

fig3D를 활용한 예시

unofficial microsoft fluent 3D emoji 활용 예시

3D shape generator 활용 예시

content reel 활용예시

html. to.design 활용예시

 

 

디자인 스타일을 어떻게 체계적으로 관리할 수 있는지,

또한 고급 그래픽 디자인 기술을 어떻게 활용할 수 있는지에 대한 중요한 지식들을 얻을 수 있었다.