피그마(figma) 핵심

안녕하세요. 이번 포스팅에서는 피그마의 핵심 프레임(Frame)에 대해서 알아보겠습니다. 프레임은 툴바에 위치해 있지만 기초툴&인터페이스 카테고리에 다루지 않고 피그마의 핵심기능으로 분류했습니다. 그만큼 중요한 기능이고 프레임을 잘 활용하느냐 그렇지 않느냐로 상당 부분 다시 작업해야 하는 번거로움이 생기기 때문입니다. Adobe illustration, Adobe photoshop 그밖에 다른 디자인 프로그램을 사용할 때 아트보드(대지)를 디자인 영역으로 두고 그 내부에 디자인하는 게 상당히 디자이너에겐 익숙한 형태입니다. 피그마의 프레임이 아트보드와 동일한 개념으로 생각하시면 되지만 큰 차이점이 있습니다. 프레임(Frame)과 아트보드(Artboard)의 차이점 아트보드는 중첩해서 사용하지 않지만 프레..

안녕하세요. 지난 포스팅에선 컴포넌트는 무엇인지 컴포넌트는 어떻게 만드는지 알아보았습니다. 컴포넌트를 만들기만 해도 활용도가 높지만 컴포넌트의 속성을 추가하고 잘 활용하면 작업의 속도뿐만 아니라 시스템으로도 더욱 강화됩니다. 지금부터 컴포넌트 속성에 대해 알아보겠습니다. Property(프로퍼티) = 속성 = 컴포넌트 자체속성 Variants(베리언츠) = 변형 = 단일 컴포넌트에서 파생된 다양한 컴포넌트를 세트로 묶어서 관리 컴포넌트 자체가 가지고 있는 속성을 프로퍼티라고 합니다. 베리언트는 한 개의 컴포넌트를 (상태, 색상, 크기... 등) 필요에 의해 다양한 컴포넌트로 변형 만들고 세트로 묶어서 관리하는 것을 말합니다. 프로퍼티는 현재 총 4가지가 있습니다. 1. Variant (베리언트) : 컴포..

안녕하세요. 이번 포스팅에서는 컴포넌트에 대해서 알아보겠습니다. component는 무엇일까요? 직역하면 구성요소로 풀이됩니다. 구성요소를 사전정의하면 무엇이든 구성하는 가장 작은 단위, 부품, 요소입니다. 프로그래밍에서 컴포넌트는 재사용에 대한 필요성, 중요성으로 시스템적으로 배포할 수 있는 가장 작은 모듈을 이야기합니다. 일회성 비주얼 작업을 위한다면 굳이 컴포넌트를 할 필요는 없지만 웹사이트, 모바일웹사이트, 어플리케이션도 전부 디자인에서 끝나는 게 아니라 개발까지 마무리되어야 사용할 수 있게 됩니다. 피그마 프로토타이핑 툴은 기획자, 디자이너, 개발자를 위한 협업툴인만큼 디자인 목적에 따라 단순히 보기 좋게 이미지로 얹혀서 작업하는 게 아니라 배포 가능한 가장 작은 모듈인 컴포넌트를 고려해야 합니..

안녕하세요~ 오토 레이아웃으로 버튼, 리스트, 카드 만들기를 실습하고 오토 레이아웃이 뭔지 알아봤습니다. 오토 레이아웃의 다른 옵션 및 기능에 대해서 알면 더 쉽게 요소들을 수정 및 제어할 수 있습니다. 우측 디자인 패널에서 오토 레이아웃 속성 보면 아래 이미지와 같습니다. 빨간색 영역에 대해 좀 더 알아봅시다. 가장 먼저 알아볼 영역은 배열입니다. 두 개의 아이템이 있으면 두 항목의 위치와 거리가 있을 거예요. 그 상태로 오토 레이아웃을 하면 내가 만든 그 기준으로 간격값, 배열이 자동 세팅됩니다. 썸네일에서도 보이듯이 총 9개의 위치로 배열됩니다. 크기가 다양한 자식객체들도 배열 기준을 따라 미세하게 조정됩니다. 좌측상단, 중앙상단, 우측상단 좌측중앙, 정중앙, 우측중앙 좌측하단, 중앙하단, 우측하단..

안녕하세요. 오토 레이아웃 만드는 방법에 대해서 지난 포스트에서 알려드렸는데요. 이번에는 오토 레이아웃 활용편인 리스트를 만들어 보도록 하겠습니다. 오토 레이아웃을 생성하면 우측 디자인패널에서 오토 레이아웃 속성이 펼쳐집니다. 리스트를 만들려면 가장 최소크기의 한 개의 아이템을 만들어야겠죠? 그 아이템도 오토 레이아웃으로 만들겠습니다. 아래 레이어 구조를 살펴보겠습니다. 1. 이미지+타이틀 : 오토 레이아웃하고 이름 title으로 변경 2. title+시간 텍스트 : 오토 레이아웃하고 이름 item으로 변경 3. item 선택 후 상하 패딩 : 8 / 좌우 패딩 : 21 / 색상 : 흰색 / 코너 라운드 : 20 4. width값을 Hug에서 Fill로 변경 4. 오토 레이아웃 속성 배열값클릭! 단축키 ..

피그마의 다양한 기능 중에 단연 으뜸가는 기능은 오토 레이아웃(Auto layout)이 아닐까 생각합니다! 오토 레이아웃만 잘 활용해도 정말 빠르게 UI 시스템을 만들 수 있습니다. 오토 레이아웃을 쓰지 않아도 디자인은 할 수 있지만 장기적으로 보면 오토 레이아웃을 사용해야 더 원활한 시스템을 구축할 수 있습니다. : ) 내용이 방대하여 한 번에 설명하기보다는 필요한 부분만 볼 수 있도록 여러 타입을 순차적으로 포스팅할 예정입니다. 1. 오토 레이아웃 - 버튼 만들기 2. 오토 레이아웃 - 리스트 만들기 3. 오토 레이아웃 - 카드 만들기 오늘은 오토 레이아웃을 적용하는 방법에 대해서만 간단히 다뤄볼까 합니다. 오토 레이아웃을 만드는 방법은 3가지입니다. 첫 번째, 모든 아이템을 선택 후 단축키 Shif..