[Figma] 디자인 시스템을 위한 기초, 스타일과 라이브러리
·
디자이너
편집디자이너로 활동하면서 사용했던 인디자인, 일러스트레이터와 비교해봤을 때 피그마는 상당히 가벼운 툴에 속합니다.특히나 다른 이와의 협업에도 상당히 특화된 점이 많습니다. UX/UI 디자인, 프로덕트 디자인, 웹디자인.. 여러 이름으로 전문화되는 직군에서 한 번 이상은 꼭 들어봤을 것이 '디자인 시스템'입니다.이번에는 디자인 시스템을 위한 시작인 스타일에 대한 게시물을 작성해보려 합니다. 인디자인에 익숙하신 분이라면 단락 및 문자스타일을 아실텐데요. 기능은 이와 동일합니다. 오브젝트의 색상, 텍스트, 효과, 그리드 4가지 요소의 원하는 설정값을 저장해 다른 오브젝트에 클릭만으로 편하게 적용할 수 있는 기능입니다. 라이브러리로 발행하면 다른 파일에서도 사용할 수 있게 됩니다.  텍스트 스타일스타일을 만들고..
[Figma] 웹페이지 디자인하기 - 레이아웃과 그리드 설정
·
디자이너/UX·프로덕트 디자이너
편집 디자인에서 UX·UI 디자인으로 커리어를 전환하며 가장 먼저 접한 변화는 피그마를 더 잦게 활용한다는 점입니다.특히나 웹에서 이뤄지는 디자인은 정지되어 있지 않고 더 동적인데요. 그럼에도 기본적인 디자인은 원칙은 비슷합니다. 처음 시작은 레이아웃을 기획하기 위해 그리드를 설정합니다. 레이아웃 그리드레이아웃은 한정된 공간에서 타입, 사진, 심벌, 기호, 그래픽 등 요소를 효과적으로 배열하는 기술을 의미합니다. 저는 이것을 시각적으로 봤을 때 '조화'롭게 느껴지게끔 하는 작업으로 이해하고 있습니다.  그리드 시스템을 만들기 위해서는 기본적으로 알아야할 개념이 있는데요. 단(Column)의 수와 여백, 단의 최대폭을 설정해야합니다. 이 중 웹에서 이뤄지는 디자인에서 처음 접한 개념이 '컨테이너'란 개념이..
홍드라곤
'uxui' 태그의 글 목록