피그마

디자인을 시스템화 하기 위해서는 따로 라이브러리 파일을 만들어주는 것이 좋다. 연동이 가능하기 때문에 시스템화 할 것들을 잘 정리해놓으면 바로바로 쓸 수가 있기 때문이다. 아이콘 만들어서 컴포넌트화 하고 이름을 슬래쉬해서 정리해놓은 모습이다. 시스템화를 할 때에는 컴포넌트화를 반드시 해야한다. 그럼 레이어 옆 에셋패널에서 화살모양이 아이콘 폴더안에 들어가있음을 확인할 수 있다. 이 아이콘을 전체파일에 연동하고자 하고자 할 때 먼저 에셋패널 위쪽에 라이브러리즈를 열어준다. 그러면 파일옆에 퍼블리쉬 버튼이 있다. 이걸 통해서 다른 파일들과 연동해서 그곳에서도 이 라이브러리에 등록한 것들을손쉽게 사용할 수 있다. 디스크립션 적을수있는 창이 뜨는데 이걸로 설명을 적어놓을 수 있다. 연동되는 파일에 다른 작업자가..

같은아이콘이라도 크기와 목적 상태가 다 똑같이 적용되지 않기 떄문에 변수값을 설정해서 다양하게 활용할 수 있어야한다. 초기에 설정만 해놓으면 그다음부턴 간단하니까 힘내자! 라이브러리화, 즉 시스템화가 되기 위해서는 반드시 컴포넌트화를 해주어야한다. 거기에서 베리언트를 사용하여(Add variant) 변수값들 통제하여 다양한 상태를 설정해놓을 수 있다. 위 그림은 선으로 만든 화살표 모양을 아웃라인 스트로크 설정을 통해 선들을 면처리하여 아이콘을 만들어가는 과정이다. 따로따로 놀지않게 선을 크게한번 묶어주고 불리언 그룹에서 이 면들을 모두 유니언으로 합쳐준다. 그리고 합친 3개의 면을 플래튼 시켜서 단 하나의 객체로만 이루어진 아이콘을 만들어준다. 아웃스트로크>유니온>플래튼 순이다. 만든 아이콘을 각각 컴..

컬러를 시스템화해서 사용하는 법에대해 배워보자. 처음에는 색 그때그때 누르면 되는데 굳이 귀찮게 만들어야하나 라는 생각이었는데디자인할 때 색에 통일성을 주는 경우가 많아서 하나하나 색을 찾아서 넣는 것 보다 자주쓰는컬러를 시스템화해서바로바로 적용할 수 있는것을 해보고 이쪽이 훨씬 더 편리함을 경험했다. 디자인 라이브러리를 구축하는 방법은 오른쪽 디자인패널 에서 Fill 옆에 점네개아이콘을 누르고 라이브러리 옆에 플러스로 추가해주는 것이다. 그러면 이름과 디스크립션을 입력해서 시스템화 할 수 있다. 디스크립션을 통해 컬러에 대한 설명도 덧붙일 수 있고 투명도조절도 가능하다. 아래 Create style버튼을 누르면 라이브러리에 컬러가 등록된다. 기존의 라이브러리에 등록했더라도 이퀄라이저같은 아이콘 클릭하면..

이번에는 빠른 퇴근을 도와주는 플러그인 다섯가지를 소개해준다고 한다. 예외없이 기록행~! 상단 도구에서 중앙에 있는 플러그인에 검색해서 사용할 수 있다. 첫번째는 오토플로우이다. Run버튼을 눌러주면 플러그인이 활성화되면서 설정을 할 수 있는 창이 나타난다. 다양한 옵션들을 설정하여 컴포넌트나 요소를 연결할 수 있다. 두번째는 이미지와 관련된 플러그인인 언스플래쉬이다. 다양한 이미지를 피그마에 삽입할 수 있는데 굉장히 만족스러운 퀄리티의 이미지들이 많아서 유료를 사용하지 않아도 충분하다고 소개하고 있다. 세번째는 아이콘을 빠르게 찾을 수 있는 Material Symbols이다. 다양한 아이콘이 있는데다가 옵션 변경을 통해 원하는대로 커스터마이징이 가능하기 때문에 사용범위가 넓다. 네번째는 텍스트를 자동완..

칼퇴가 가능한 리소스들을 추천해주길래 이건 무조건 기록해서 잘 써먹어야겠다고 생각했다ㅋㅋ 그정도로 유용하다는거니까!첫번째는 구글에서 공개한 머터리얼3 디자인 키트이다.구글의 디자이너들이 어떻게 컴포넌트를 활용하고 운영하는지 엿볼 수 있다고한다. 두번째는 애플의 디자인 리소스다.애플에서는 휴먼 인터페이스 가이드 기반으로 만들기 때문에조금 더 UX적인 면들이 많다고 한다.애플의 시스템 UI또한 모두 다 들어있기 때문에 편하게 끌어다가 사용할 수도 있다. 세번째는 밀리 디자인 라이브러리 2.0이다. 국내 개발환경과 디자이너들의 리소스들을 현실적으로 파악한 가이드라인으로 적은 리소스로 빠르게 디자인할 수 있다는 특징이 있다. 네번째는 구글의 머터리얼 디자인 아이콘즈다. 이 파일은 머터리얼 안에서 아이콘 파일들만..

피그마로 디자인을 하다보면 여러가지 파일들이 생성되는데 이를 한번에 잘 파악할 수 있게 구별해주는 것이 파일 썸네일의 역할이다. 정리에 매우 유용한 기능이기에 필수로 알아야할 것 같다. 이러한 식으로 다운받은 리소스들도 쌓이고 진행하는 프로젝트도 쌓이다보면 써야할 파일을 찾을 때 눈이 어지러울 것 같다. 썸네일을 통해 구분해서 정리해주는건 필수불가결한 것! 파일의 썸네일을 만들어주기 위해 왼쪽 레이어 패널에서 페이지를 하나 추가해주고 커버라고 이름을 바꾸어준다. 이 안에서 프레임 도구를 사용해서 썸네일 보드를 만들면 된다. 썸네일 프레임의 크기는 오른쪽 디자인 패널에서 보이듯 가로 600 세로 360 으로 했을 때 딱이라고 한다. 이정도 수치는 기억하기 쉬우니까 머리에 넣어둬야지! 썸네일 커버는 잘 보이..

피그마의 툴, 즉 도구의 사용법을 정리해보고자 한다. 도구는 위에 왼쪽 상단에 위치해있고 오른쪽 패널에는 속성을 제어할 수 있는데 이들의 기능과 사용법을 정리하며 익혀보겠다. 먼저 왼쪽 상단이다. 여기서는 디자인 요소들을 만들고 제어할 수 있는 근본적인 도구들이 있는 곳이라고 생각하면 된다. 먼저 파란색으로 되어있는 화살표는 Move로 요소들을 움직이거나 선택하는 도구이다. 그옆에 #모양은 프레임을 만들어주며 사각형모양으로 되어있는 도구는 보여지는 이미지에 해당하는 도형을 만들어주는 곳이다. 클릭하면 선부터 원 삼각형 별모양 삽입이미지 등등 다양한 옵션을 선택할 수 있다. 그다음 펜모양은 선을 그릴 수 있고 텍스트로 글도 쓸 수 있으며 손바닥으로 캔버스를 이동할 수 있고 맨마지막에 말풍선 도구로 코멘트도..

피그마 초심자인 나는 단축키에 익숙하지 않기에 도구나 메뉴를 하나하나 눌러서 설명을 읽으며 써야하는 기능을 찾아 적용하는 중에 있다. 하지만 익숙해지고 빠르게 빠르게 디자인을 만들어내야할 때에는 단축키를 적용하는 것이 훨씬 편리할 것이다. 그런의미에서 단축키에 익숙해지고자 유용하게 쓸 수 있는 단축키를 정리해보면서 머리에 넣어보고자 한다. 한번 정리해놓으면 완벽하게 기억하진 못하더라도쓸 때 어렴풋이 생각나면서 또한번 암기할 수 있는 계기가 되겠지..?! 1. File & Properties Ctrl+Shift+E 출력(저장) Export Ctrl+Alt+S 히스토리 저장 Save to Version History Ctrl+Shift+K 이미지 삽입 Place Image 2. Edit Ctrl+C 복사 C..

나는 단순한 개념적인 부분은 잘 습득하는편인데 응용에 취약한 편이다. 따라서 강의에 나온 응용부분을 추가해서 정리해놓아야겠다. 위 그림은 아이콘을 추가한 버튼을 만든 것으로 다른 페이지에서 복사해서 붙여넣기 해준것이다. 디자인 패널에서 조절할 수도있지만 직접 사이간격을 눌러서 간격을 조절해줄 수 도 있다. 패딩값을 조절해주면 위의 넓이와 높이값이 그에따라 변화되는 것을 확인할 수 있다. 크기를 확인하면서 패딩값을 조절해줄 수 있다. 패딩값이 같으면 크기값도 같은게 아니군. 보면서 조절해야한다. 리사이징 옵션에 대해서 알아보면 Hug로 되어있을 때 텍스트명이 길어지면 패딩값을 조절하여 정사각형으로 만들어 놓은 프레임이직사각형으로 길어지게 된다.즉 안에있는 컨텐츠에 따라 가변이 되는 것이다. Fixed로 되..

버튼이라는 텍스트를 써주고 바로 오토 레이아웃을 설정해준다. 단축키로는 Shift+A를 누르면 된다. 버튼을 만드는 방법이 시작부터 심플하다. 오른쪽 디자인 패널 아래쪽에서 패딩값을 조절해준 모습이다. 사각형이 좌우 선과 위아래 선에 갇혀있는 모양 옆의 숫자를 조절해서 버튼 텍스트를 감싸는 사각형의 크기가 커졌음을 확인할 수 있다. 버튼의 배경색과 글자색을 바꿔주고 텍스트도 볼드로 해주며 모서리 알값도 둥글게 굴려준 모습이다. 여기서 오토 레이아웃을 가로방향으로 설정해주고 간격값을 조절해서 붙여넣기를 해주면 위 사진과 같이 하나의 배경안에서 여러가지 버튼 텍스트들이 가로방향으로 쭉 나열되는 것을 확인할 수 있다. 하지만 이렇게 글자와 글자만 조합되는 경우는 잘 없다. 버튼 배경까지 각각 띄워지는 것을 만..