오늘은 Figma에서 스타일을 등록하는 것을 배웠습니다. 어플을 만들 때도 디자인을 정하고 만들게 되는데 이 때도 자주 사용하는 색상들은 이름을 붙여 지정하고 사용하게 됩니다. 이처럼 Figma에서도 이런 기능이 있는데 그걸 배우게 되었습니다! Color Style 지정 첫 번째로는 자주 사용하는 색상을 등록하고 그룹화하여 사용하는 방법입니다! 그 전에 이미 알고 계실수도 있지만 저는 이 강의를 통해 처음 알게 되었기 때문에 혹시나 도움이 될까 싶어 알려드립니다! https://color.adobe.com/ko/create/color-wheel https://color.adobe.com/ko/create/color-wheel color.adobe.com 위의 링크는 색상값을 알려주는 사이트인데 내가 구현..

오늘은 Figma에서 텍스트를 사용하는 방법을 배웠습니다! 전에 제 프로젝트를 만들기 위해 화면을 구현하던 도중 텍스트를 넣어야 해서 사용한 적이 있었지만 이렇게 강의를 통해 배워보니 더 많은 기능들이 있음을 알 수 있었습니다! 텍스트 툴 만들기 위에 사진에서 빨갛게 표시한 부분을 선택한 후 프레임 내부에 클릭을 하면 텍스트를 입력할 수 있는 커서가 생성됩니다! 글꼴 바꾸기, 간격 조정하기, 세부 설정 위 사진을 보면 디자인 패널에 빨갛게 밑줄 친 부분이 보이실겁니다. 그 부분을 클릭하면 텍스트의 글꼴을 선택할 수 있습니다! 그럼 다른 기능들도 봐볼까요?!? 텍스트의 간격을 조정하고자 한다면 저 부분을 수정해주시면 됩니다!! 저는 현재 50%로 설정하였기 때문에 텍스트 사이에 어느정도 간격이 있는 걸 보..

오늘 수업에선 삼각형, 오각형, 육각형을 그리는 것과 별을 그리는 방법에 대해 배웠습니다! 다각형 도형 그리기! (삼각형, 오각형, 육각형) 우선 기본적으로 삼각형을 만들기 위해서는 위의 사진에서 보이는 부분을 클릭하고 Polygon을 클릭해줍니다! (아이콘으로 삼각형이 그려져 있습니다) 이후 화면에 드래그를 하면 삼각형이 생성되고 다른 도형들과 마찬가지고 Shift를 누른 상태로 드래그를 하게 되면 정비율의 도형이 그려지게 됩니다! 또한 오른쪽 디자인 패널의 빨간 밑줄은 도형의 색을 바꿀 수 있는 부분이고 그 밑에 파란 밑줄은 도형 테두리에 색을 바꿀 수 있는 부분입니다. 위 사진의 빨간 동그라미 부분을 클릭하고 안쪽으로 드래그를 하면 도형의 Radius를 줄 수 있습니다! #예시 또한 위 사진의 파란..

이번에 MVVM 패턴과 Firebase를 배우게 되어 복습을 하기 위해 새로운 메모 프로젝트를 만들게 되었습니다! 그러던 중 지금까지 배운 Figma를 활용해보는 어떨까 라는 생각이 들어 많이 부족하지만 시도를 해봤습니다,,! 아직 강의를 많이 듣지 못해서 부족하지만 더욱 노력하여 다음엔 더 나은 기획을 할 수 있게끔 노력하겠습니다!! 사용한 색 정리! 어떤 색 조합을 해볼까 하다가 Pinterest를 참고하여 제가 구현하고자 하는 색 조합을 찾고 그걸 참고해서 비슷하게 만들어봤습니다! 로그인 화면! ㅎㅎ,,,,이렇게 보니 아직 퀄리티가 많이 떨어지는 거 같습니다ㅠㅠ 암튼 이건 로그인 화면이며 카카오 로그인 API를 사용해서 로그인을 할 수 있게끔 구현하려 합니다! 회원가입! 이는 회원가입 화면이며 사용..

이번 수업에선 Frame위에 도형 그리는 것을 배웠습니다! 사각형과 모서리 둥근 사각형, 원형을 배웠으며 여러 신기한 단축키들도 배울 수 있었습니다! 사각형! 1, Frame을 먼저 만들어 줍니다! 2, 왼쪽 툴바에 빨간 색으로 밑줄 그어놓은 부분을 클릭하고 Frame 내부에다가 드래그를 하여 사각형 도형을 만들어 줍니다! ※이때 shift 키를 누른 상태로 Frame안에 드래그를 하게 되면 정비율(정사각형)의 사각형이 만들어지게 됩니다! 3, 디자인 패널에는 가장 상단 부분에 도형의 크기를 조절하는 부분이 있습니다 디자인 패널의 Fill부분에선 도형의 색을 지정할 수 있으며 옆에 눈동자(?) 처럼 생긴 버튼을 클릭하면 색이 사라지고 하얀 바탕이 뜨게 됩니다! ↓예시↓ 디자인 패널의 stroke는 도형의..

평소 개인적인 프로젝트를 진행할 때 항상 칠판에 화면을 그려 어플을 기획하고 그걸 토대로 화면을 구현했었습니다 그러던 중 멘토님께서 Figma를 소개시켜 주셨고 오늘부터 주말마다 강의를 통해 조금씩 배워보려고 합니다!! 오늘은 Frame 생성, Guide 생성에 대해 배웠습니다 Frame이란?! 디자인적 작업을 할 틀이라고 생각하면 됩니다 지금은 제가 2개의 Frame을 생성해놓은 상태인데 바로 저걸 Frame이라고 부릅니다. 저걸 생성하기 위해선 화면 좌측 상단에 위의 사진에 표시된 버튼을 클릭하고 위의 카테고리들 중에 자신이 만들고 싶은 프레임의 규격을 선택하면 됩니다! 이 때 자주 쓰이는 단축키가 있는데 1, [space bar] + 마우스 좌클릭 후 커서 옮기기 --> Frame의 위치를 이동시킬..