피그마의 constraints(컨스트레인트) 기능에 활용해서 컨텐츠 를 만들어 보겠습니다. 우선 constraints(컨스트레인트) 사전적 의미 부터 알아봐야 하는데 우리나라말로 제약,통제라는 의미를 가지고 있습니다. Frame(프레임)의 크기에 따라 안에 있는 요소의 위치와 통제 할수 있습니다.즉 Frame(프레임) 크기가 커지면 안에 있는 요소도 동일하게 커지고 왼쪽에 고정을 할수 있고 오른쪽 에 고정도 할수 있어요. 이 기능은 사용해보니 꾀나 유용한 기능인거 같습니다.✌️ constraints(컨스트레인트)는 요소를 담고 있는 프레임을 기준으로 해야 하기에 적용해야요소에 Frame Selecting메뉴를 선택해서 Frame(프레임)으로 만들어 주어야 합니다. ----------------------..

Figma(피그마) 기초 튜토리얼 중 Frame 및 constraints를 설명하고자 합니다.처음 사용하시는 분들에게는 조금 생소 할수 있어요. 하지만 워낙에 툴 자체가 가볍고 활용도가 많기 때문에IT디자인 업무 외 IT UI/UX 관련된 업무를 하시는 분들에게 많은 도움이 될거 같습니다. 🤗 1. Frame - Frame(프레임) 이란 포토샵이나 스케치에서의 아트보드랑 동일한 기능이라고 보면됩니다. 그런데 다른 차이점이 정적이 이미지만 만들기만 하는것이 아니라 Figma(피그마)는 하나의 화면 자체를 동적인 화면을 구현하기 때문에 Frame(프레임)이라고 표현합니다. - 좌측 상단 "+"버튼을 클릭 하여 새 파일을 생성 합니다. - 새 파일 생성이후 중앙에 해당 영역을 클릭 하여 파일명을 지정합니다. ..

Figma(피그마)의 가장 큰 장점으로는 별도로 설치 하지 않고100% 웹에서 구동이 가능 합니다. 웹에서 작업한 내용을 공유가 다 가능합니다. 또한, 작업자들과의 현업 할 수 있는 기능이 있어 동일한 파일에 여러명이 동시에 확인이가능하고 해당 결과물에 수정 및 문의 사항에 대한 피드백을 남길 수 있습니다. 1. 인터페이스_새 파일 만들기상단 오른쪽 "+" 버튼 클릭 해서 새 파일을 만들 수 있습니다. 2. 인터페이스_작업 툴기본적인 편집툴 을 사용하신 분들이면 아이콘을 보고 쉽게 이해할 수 있다.툴 좌측 상단에 보면 해당 아이콘들을 확인 가능해요.👍 - Move(단축키 "V") : 오브젝트를 선택하고 움직일 수 있습니다. - Frame(단축키 "F") : 스케치나 포토샵에서 사용하는 아트보드 와 동일한..

해외에서 많이 쓰이고 있는 Figma 에 대해서 간단한하게 소개 하고자 합니다.Figma는 Sketch, Adobe XD 와 같이 많이 사용하게 되는 편집 튤 입니다. Figma, Sketch, Adobe XD 이 3가지 공통 적으로 Zeplin(제플린) 퍼블리셔 또는 개발자를위한 공동작업 이 가능하기에 좀더 효율적 작업을 할수가 있습니다. 일단 개인적으로 사용은 무료로 사용이 가능해 굉장히 많은 분들이 Figma를 사용하고 있으며,컴퓨터OS (MAC, 윈도우) 상관없이 인터넷이 접속되는 모든PC 웹에서도 사용이 가능한굉장히 👍(Good) 한 튤입니다. 그럼 간단하게 초기 사용법에 대해 알아 보도록 하겠습니다. 가입하기- 구글검색에서 Figma를 검색합니다. (국내 포털 사이트에서 검색하면 노출이 안되요..