본문 바로가기

figma

[피그마] 홈페이지(웹페이지)를 피그마에 그대로 가져오기 (html.to.design) 'html.to.design'은 웹페이지를 피그마에서 수정이 가능한 디자인 파일 형태로 그대로 가져올 수 있게 해 주는 플러그인입니다. 비슷한 기능의 플러그인들은 많았지만, 완성도면에서 부족한 면이 많은 것들이 대부분이었다고 하면 'html.to.design'의 경우 꽤 신뢰할만 한 수준의 품질을 보여 줍니다. 설치 및 사용방법 직관적인 이용방식을 보여 주는데, 플러그인 설치의 경우 여타 다른 플러그인처럼 피그마 내부에서 '플러그인' 버튼을 눌러 검색을 시작함으로써 설치 및 실행이 가능합니다. 사용방법은 플러그인 실행 시 나오는 주소창에 가져오고자 하는 페이지의 URL을 입력한 후 사이즈 등을 고르는 과정을 거쳐 임포트 버튼을 누르면 해당 웹페이지의 디자인이 간직된 신규 프레임 레이어가 생성된 것을 확인..
피그마 데스크탑앱에서 export 또는 작업시 색상이 다르게 나오는 문제 해결 피그마 데스크탑앱에서 컬러가 다르게 export 되거나, 작업 환경 상에서 다르게 표시되는 상황이 발생하곤 합니다. 이는 데스크탑앱이 사용중인 컴퓨터의 color space를 그대로 상속받아 사용하기 때문에 발생하는 문제입니다. 문제를 정확히 이해하기 위해서는 color space를 비롯한 디지털색상 관련 추가 리서치가 필요할 것으로 보입니다. 이 포스트에서는 색상이 다르게 보이는 문제해결에 우선순위를 두도록 하고, color space를 비롯한 보다 세부적인 디지털색상 관련 지식은 관련 링크를 포스트 하단에 배치하는 것으로 대체하고자 합니다. 피그마는 기본적으로 sRGB 컬러 스페이스를 사용한다고 합니다. 그렇기에 웹브라우저로 접속시에는 sRGB color space로 표시가 되며, 이는 가장 일반적인..
피그마(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에..
외주/과외 문의