#3 디자인 시스템 구축을 위한 피그마 기능 (feat. Create Style, 버전 관리)

Figma를 효율적으로 사용하기 위한 관문이 되는 영상

• Figma에 의한 디자인 시스템을 구축하는데 기초가 되는 피그마 기초 강좌 영상입니다. 
• 협업을 하는데 중요한 기능 Version History, 효율적인 컬러 시스템 구축 방법, 그 외 figma로 할 수 있는 스타일링에 대한 가이드 영상입니다.
• Figma는 전문가에 최적화된 도구인 만큼, 비 디자인 직군에게도 유용한 편집 도구입니다.  다소 전문적 용어가 남발 되어도 끝까지 시청 부탁드려요. 

디자인 시스템이라는 거창한 단어보다 좀더 쉬운 용어가 있다면 좋겠지만 없더군요. 하지만 이번 영상을 이해하시면, figma에 진정으로 입문하게 되시는 터닝 포인트가 될거라고 자신합니다. 여러분의 수정 시간을 절약하는 Tip이 되는 영상입니다. 

 

자, 시작해 볼까요?

[피그마 기초 - Part 3 영상 목차] 

• 00:00 Intro
• 00:50 Section1 - Version History(버전관리 기능, 유료버전 기능, 계정 생성후 한달간 무료)
• 02:01 Section2 - 컬러 시스템 구축이 필요한 이유
• 03:20 Section3 - Local Styles을 활용한 컬러 시스템 구축 {Color}
• 05:13 Section4 - Section 4 컬러 외 가능한 스타일링 1 {Text, Effect}
• 06:14 Section5 - Section 4 컬러 외 가능한 스타일링 2 {Layout Grid}

Part3은 일정상 너무 급히 업데이트하여, 영상편집의 완성도에 대해 조금 아쉬움이 남네요. 그래도 내용만큼은 알차게 준비했습니다.

Part4 다음 영상에서 더 알찬 영상으로 찾아뵐게요!! Figma 핵심 기능인 컴포넌트에 대해 다뤄볼것이 때문에 제가 더 설레네요. 이전 영상에서 한번 다뤘던 소재이나 그동안 새롭게 알게 된 팁들을 방출할 예정이니 기대해 주세요 ^^

*영상에서 언급된  Version History 기능의 경우 figma 프로 버전(유료)이용자에 한에 사용할 수 있는 기능입니다. 

*영상 안에서 소개된 블로그 페이지 링크는 다음 아래에 게시하였습니다. 

 

figma에 의한 디자인 시스템 구축 사례 및 개념 정의

 

*위 영상에서 저는 APP을 설치하여 진행하였습니다. 아래 링크는 Desktop App Download 링크입니다.  

Download Figma Desktop Apps, Mobile Apps, and Font Installers

Desktop App을 사용하면, 여러 개의 파일을 열고 작업을 할 수 있기 때문에 1개 이상의 파일에 대해 편집 시 편리합니다. Web 버전 figma의 경우 이미 연 파일에서 다른 파일로 전환 시 번거로운 부분이 있어서 APP에서 작업하는 것을 선호하는 편입니다. 

---

아래 영상들은 시즌3 업데이트 전에 올렸던 시즌 1 영상들입니다.  

도움이 될만한 추천 영상

 

이번 Part3 영상의 경우 Text 스타일링, Layout Grid에 대해 간략하게 다뤘기 때문에 아래 영상들을 참고하시면 더 도움이 되실 겁니다.

 

아래 영상 반응형 웹을 위한 Layout Grid 영상은 긴 기획 소요 시간 만큼 알찬 내용이어서 3,000명 이상의  많은 분들이 시청해 주셨는데요. 업로드 당시, 영상 편집 초보시점이라 녹음에 더 취약했던 시절이었습니다. 볼륨을 높이고 시청해 주세요. (영상의 소리가 작습니다.)

반응형 웹을 위한 Figma의 Layout Grid 기능

 

디자인 시스템을 위한 팀라이브러리 기능의 경우 협업을 위한 필수 기능입니다. 이 기능의 경우 figma 프로 버전(유료)이용자에 한에 사용할 수 있는 기능입니다. 

디자인 시스템을 위한 Figma의 팀 라이브러리 기능

 

효율적인 UI 디자인을 위한 figma의 컴포넌트 기능

 

---

연정's figma - Youtube 채널

구독과 좋아요는 힘이 됩니다. 

연정's Figma