본문 바로가기

figma

피그마(Figma) 기능 - 픽셀 그리드와 픽셀 스냅, 그리고 서브 픽셀 피그마는 기본적으로 디지털에서 픽셀 단위로 표현되는 디스플레이에 초점을 두고 제작된 디자인 프로그램입니다. 하지만 동시에 벡터 프로그램이라는 특성을 지니고 있습니다. 벡터 그래픽이 픽셀 단위로 표현될 때 이해가 필요한 부분이 바로 픽셀 그리드와 픽셀 스냅, 그리고 서브 픽셀입니다. 간략하게 이 개념들에 대해 알아 보고 피그마에서 이들을 활용할 수 있는 방법에 대해 알아 보겠습니다. 피그마의 뷰 설정 픽셀 그리드, 픽셀 스냅, 서브 픽셀 등의 개념과 관련된 항목들은 피그마의 '뷰' 메뉴에서 확인할 수 있습니다. 메인 인터페이스의 우측 상단에 있는 뷰의 퍼센테이지를 나타내는 드롭다운 버튼이 '뷰' 메뉴의 주요 메뉴들을 모아 놓은 버튼이기도 합니다. 픽셀 그리드 줌 레벨을 일정 레벨 이상으로 확대하면 나타나는..
피그마(Figma) 기능 - 마우스(마우스휠스크롤)로 수치 쉽게 변경하기 마우스로 디자인 요소의 값을 쉽게 변경할 수 있는 방법을 소개드리고자 합니다. 크게 드래그하는 방법과 스크롤로 변경하는 방법이 있습니다. 본 인터랙션은 대부분의 수치로 표시되는 항목들에 대해서 적용이 가능합니다. 수치를 일일이 기입하는 것에 비해서 작업 효율을 크게 높여줄 수 있는 부분이기에 피그마를 쓰시는 분들은 참고하시기 바랍니다. 1. 마우스 클릭 후 드래그로 수치 변경하기 변경하고자 하는 수치를 나타내는 항목의 아이콘 쪽에 마우스 커서를 올리면 마우스 커서가 '좌우 화살표'로 변경되는 것을 확인할 수 있습니다. 이 때 마우스를 오른쪽으로 드래그하면 값이 감소하고, 오른쪽으로 드래그하면 값이 증가합니다. 값을 더 높이거나 낮추기 위해서 화면 밖으로 마우스를 드래그하더라도 계속해서 값이 유지된 채로 ..
피그마(Figma) 기능 - 스타일(Styles) 관리하기 (색, 폰트 저장하기) * 본 기능 소개는 Figma 공식 유튜브 채널에서 제공하는 튜토리얼 강의(영어)를 기반으로 작성된 포스트이므로 실제 동영상으로 된 기능 소개 내용은 하단에 첨부된 유튜브 링크를 통해서 확인하시기 바랍니다. 색상이나 서체 등 반복적으로 사용되는 스타일 속성에 대해서 특정 속성을 지정하여 저장하고, 이를 다른 작업 때 바로 찾아서 적용할 수 있게 하는 Styles 지정 기능은 다른 디자인 프로그램에서도 유용하게 제공되는 기능이며 피그마에서도 이러한 기능을 지원하고 있습니다. 아래는 텍스트로 설명을 해 놓았지만, 가장 하단에 넣어 놓은 피그마 공식 튜토리얼을 동영상으로 한 번 보시면 더 쉽게 이해하실 수도 있을 것 같으니 동영상도 꼭 참고하시기 바랍니다. 특정 속성을 스타일로 지정하는 방법은 특정 속성을 선..
피그마(Figma) 설치 및 실행 방법 01 - 피그마 소개 피그마는 무엇인가요? 피그마는 실시간 협업을 특징으로 하면서도 스케치와 같이 모던한 기능의 UI디자인 기능을 지원하는 UI디자인 프로그램입니다. UI디자인 프로그램이지만, 경우에 따라 다양한 디자인 프로그램으로 사용할 수 있습니다. 포토샵이나 XD, 스케치가 아닌 피그마를 왜 써야 하나요? 포토샵 포토샵은 기본적으로 UI디자인 프로그램이라고 보기가 힘듭니다. 비트맵 형식의 사진을 편집하는 용도가 기본적인 프로그램의 용도이며, 이외에 브러쉬 기능 등을 통해서 그림을 그리는 용도로도 활용되긴 하지만, UI디자인에 최적화된 기능을 제공하지는 않습니다. 굉장히 다양한 기능을 갖고 있기에 컴퓨터의 리소스를 매우 높게 차지하는 편인데, 이러한 부분은 다양한 화면의 디자인을 필요로 하는 UI디자..
피그마(Figma) 무료 리소스 사이트 모음(템플릿, 아이콘, UI 키트) * 본 게시물은 해외 아티클을 한국어를 통해 더 널리 알리고자 하는 목적의 번역 포스트임을 알립니다. * 원본 게시물: The Best Free Figma Resources: Templates, Icons, UI Kits, and More (Envato tuts+) * 본 게시물은 2018년에 작성된 게시물이며, 최하단 번역자 추가 컨텐츠는 수시로 업데이트됩니다. 피그마는 2016년 출시 이후 강력한 디자인 플랫폼으로서 자리를 잡아 나가고 있습니다. 브라우저 기반의 프로그램으로서 업데이트의 어려움이나, 화면을 동기화하거나, 다른 팀원들과의 작업 상의 문제를 손쉽게 해결할 수 있는 특징을 지니고 있는 프로그램입니다. 특히 실시간 협업 기능은 피그마가 가장 자랑하는 기능 중 하나로서 여러 플랫폼에서 사용이 ..
피그마(Figma)가 앞으로 대세 디자인 프로그램이 될 수밖에 없는 이유 최근 UX Design Tool 2019 Survey에 따르면 피그마의 이용률 상승세가 뚜렷하며, 이제는 스케치의 절반에 달하는 점유율을 보이고 있다고 밝힌 바가 있습니다. 피그마 베타 시절부터 피그마를 어반젤리스팅하던 사람으로서 이같은 현상이 당연하게(?) 느껴지기도 하면서도, 한편으로 이같은 확장세는 여기서 멈추지 않고 더욱 그 영향력이 증대될 거라는 확신 아닌 확신을 갖게 되었습니다. 특히 단순히 UI디자인 영역에 국한되는 것이 아닌 '디자인 소프트웨어'로서, 과거 2000년대 초반의 포토샵의 위상만큼이나 대중적인 소프트웨어로 디자이너 뿐 아니라 일반인들에게까지 자리잡을 것이라고 생각합니다. 이번 글에서는 그 이유에 대해서 개인적인 견해 몇 가지를 밝히고자 합니다. 피그마의 미친 확장성 윈도우XP에..
피그마(Figma) 기능 - 선, 폰트크기, 둥글기 유지한 채로 크기 조절하기 일반적으로 개체의 선, 폰트크기, 둥글기를 유지한 채로 사이즈를 조정하는 옵션은 Scaling stroke, radius, and font size와 같은 용어로 옵션에서 선택이 가능합니다. 이는 스케치와 일러스트레이터, 포토샵에서 모두 확인할 수 있는 옵션입니다. 다만 피그마의 경우와 이러한 옵션을 현재로서는 별도로 제공해 주지 않습니다(2019-10). 피그마에서 개체의 선, 폰트크기, 둥글기 등 개체의 현재 보여지는 속성 그대로 사이즈를 조절하기 위해서는 일반 트랜스포밍이 아닌 'Scale'이라는 별도 메뉴를 통해서 이를 진행해야 합니다. 이 메뉴는 'k'를 통해 접근 가능하며, 또는 무브 툴 하위에 서브메뉴로서 선택할 수도 있습니다. 위 그림에서 보시는 것과 같이 '스케일' 메뉴를 통해서 리사이징..