figma10 맥용 피그마를 다시 설치했다. 어도비에 인수되었지만 뭐가 달라진거지? 피그마가 한창 주가를 올리고 있을때 어도비에서도 adobeXD로 도전을 하며 맞서고 있었지만 피그마를 이길 수 없었고 결국 자본력으로 피그마를 인수했다. (옛날에 플래시도 인수를 했었나?) 결국 사라져 버렸지만 피그마도 어도비 속으로 들어오게 될까? 아님 그냥 지금처럼 유지가 될까? 어도비XD 개발팀들은 뭔가 포지션이 애매하게 될듯하다. XD팀들이 모두 피그마로 넘어가는 걸까? 배워두면 유용할 피그마 꼭 디자이너만 사용하는게 아니라 실제로 디자이너가 아닌 사람이 활용하는 걸 봤는데 자기가 필요한 영역에서 유용하게 잘 쓰더라. 나중에 여기서 디자인한 것들도 바로 실제로 사용할 수 있게 되는 기능도 생길것 같긴한데.. 미리미리 배워둬서 나쁠껀 없을것 같다. + 요즘 h.. 2023. 8. 21. 피그마 해상도와 단위 용어에 관하여 스크린 사이즈 (screen size): 화면의 대각선 길이. 단위는 인치 해상도(resolution): 화면의 총 픽셀 수 ppi (pixels per inch): 화소 밀도. 디스플레이에서 인치당 픽셀 수 dpi(dots per inch): 픽셀 밀도. 화면의 실제 영역 내에 있는 픽셀 수 do (density-independent pixels) sp (scale-independent pixels) pt (point) 픽셀 밀도(DPI) 픽셀 밀도는 화면의 실제 영역 내에 있는 픽셀 수이며 dpi로 나타냅니다. 이 밀도는 화면상의 총 픽셀 수인 해상도와 다릅니다. 다양한 디바이스에 디자인이 같은 비율로 보이도록 1x를 기본으로 디자인합니다. 디자인은 1x로 하지만 디바이스에는 각 배율로 보이게 됩니다.. 2022. 11. 23. Figma 기초 다시 배우기 어쩌다 피그마를 다시 배워볼라고 기록중. V: Move K: Scale(오브젝트나 레이어 전체의 비율을 변경할 수 있다.) scale은 비율대로 조정할 수 있는데 move와 다른건 뭘까? A, F: frame 만들기.(왜 단축키는 중복으로 만들었을까?) S: Slice 원하는 만큼의 영역을 지정하여 내보낼 수 있는 툴(이 툴은 아직 잘 모르겠다!) R: 사각형 O: 원형 L: 선 P: 펜툴 shift+P: 연필툴 T: 텍스트툴 C: 코멘트툴 C를 누르면 코멘트를 남기는 창이 생긴다. 코멘트를 입력 후 줄바꿈을 하려면 cmd+Enter를 입력하면 된다. 피그마 우측 상단 확대 기능 줌(Zoom): 뷰를 확대하거나 축소합니다. 디자인이 캔버스 내 어디에 있는지 보이지 않을 경우 Zoom to ft 을 활용하.. 2022. 11. 22. 피그마 인터렉션 배워보기 피그마 책을 보고 공부한지 벌써 한달은 된것 같은데 이제서야 인터렉션으로 들어왔다. 물론 매일 조금씩 하다보니 늦어지긴 했지만 그래도 드디어! 복잡해 보이지만 어떤 버튼을 눌렀을때 어디로 이동하는지를 보여주는 선들이다. 인터랙션을 적용할때 interaction details 에서 다 조정을 하는데 여기에 나와 있는 기본적인 값들로도 충분히 원하는걸 표현할 수 있는것 같다. (아직까지 아는게 별로 없어서) 멋진 프로그램이다. 지금까지는 그냥 책을 보고 따라만 하는 수준이라 직접 페이지를 기획해보고 만드는건 또 엄청 시행착오가 필요하겠지 그래도 책을 몇번 보고 여러번 계속 따라하다보면 더 나아지겠지. + 결국 중요한건 디테일이다! 디테일에서 명품과 아닌것의 차이가 드러난다. 그거 괜찮아 보이는것과 자세히 들.. 2021. 3. 17. figma 프로토타이핑 prototyping 정적인 화면을 실제 구현한 것처럼 작동시켜 볼 수 있도록 인터랙션을 더하는 작업입니다. digital product 웹이나 모바일 앱처럼 디지털 인터페이스를 통해 상호작용하는 소프트웨어를 말합니다. 2021. 3. 12. figma로 페이지 디자인해보기 고객의 행동을 촉발하는 콜투액션(call to action)버튼. Q. 프레임에 넣은 이미지의 위치를 수정하는 방법은 없나?? Q. 텍스트 상자의 크기를 조정할때 텍스트 크기도 같이 조정되는 방법은 없나?? Q. 오브젝트를 선택하고 움직일때 치수를 나오게 어떻게 하나?? 오버뷰 섹션은 이 서비스가 어떤 서비스인지 가볍게 알려주는 공간이다. Q. 문자 간격을 디테일하게 조정할 수 있는 '단락'설정 탭은 없나?? 플러그인으로 받아야 하는건지? Q. auto height는 어떻게 적용하나?? 이건 옆에 속성 패널에 아이콘을 클릭하면 되는거였음. Q. 처음 만들었던 가이드를 안보이게 할려면 어떻게 해야 하나?? 프레임이 컴포넌트가 되면 프레임안으로 더 이상 이미지 레이어 복사, 붙여넣기가 되지 않습니다. 오토 .. 2021. 3. 4. figma style 설정하는 법 배우기 figma도 사용한 서체를 인디자인처럼 스타일로 정의할 수가 있다. Text에서 저 4개의 점을 클릭하면 스타일 지정할 수 있는 창이 열린다. '+'버튼을 클릭해 스타일을 지정한다. 스타일명을 / 슬래시로 구분 지어 폴더역할을 하게 되면 스타일목록에서 분리되어 보인다. !! 대소문자 구분을 하기 때문에 폴더별로 구분해서 확인할려면 대소문자까지 신경써서 스타일명을 정해줘야 한다. 피그마 스타일에는 내가 만든 스타일에 관해 설명글도 적을 수 있다. 주석같은 기능을 쓸 수 있게 만든건 진짜 괜찮네 인디자인에는 없는.. 우측 상단에 있는 연결고리를 끊어버리면 된다. 브레이크포인트(breakpoint)를 이용하면 접속하는 디바이스에 따라 컬럼 개수를 다르게 보여지도록 설정할 수 있다. 콘텐츠 영역의 최대 너비와 .. 2021. 3. 3. Figma 레이아웃 그리드 배워보기 웹사이트를 디자인할 때는 보편적으로 12, 14, 16 컬럼이 쓰인다고 한다. offset은 컬럼이 시작되는 시점을 말한다. 마진값을 설정하고 gutter 값을 0으로 설정하면 위에 사진처럼 붉은 라인이 생기는구나! 오늘도 하나 배웠네! :) 2021. 2. 25. Figma layout 컨스트레인트 기능(constraint) constraint: 제약(이 되는 것), 제한, 통제 로그인 화면은 서비스 첫인상에 크게 영향을 주기 때문에 디바이스별로 어떻게 레이아웃을 구성할지 많은 고민이 필요합니다. 컨스트레인트는 적용할 요소가 프레임 안에 들어가 있어야 하므로, 프레임을 선택해 컨스트레인트를 적용해 주세요. 옵션 left&right 는 양쪽으로 늘리고 줄어드는 옵션이다. 컨스트레인트를 무시하고 프레임 크기를 줄이려면 cmd를 누른 채 줄이면 된다. 컨스트레인트 기능을 설정하고 프레임 크기를 변경해보면 자동으로 어떻게 표시되는지 바로 바로 확인할 수 있다! 멋지네! 애플 워치도 있다! 이거 빨리 뭔가 웹페이지를 만들어서 각자의 디바이스에 맞게 변하는 레이아웃을 만들어보면 재미있겠다! 옛날에는 브라우저마다 기능이 올바르게 작동하는.. 2021. 2. 24. figma 초보 입문기 재미있는 툴을 하나 알게됐다. 올해 이 툴을 좀 자유롭게 사용할 수 있게 될까? 처음 어도비에서 Muse라는 이름으로 지금의 adobeXD가 출시되었을때 정말 기대하고 배워보고 싶었는데 어느덧 adobeXD가 꾸준히 업데이트를 거치며 UX/UI 도구로 점점 커지고 있는 와중 나도 어도비 XD를 조금씩 써보고 있었지만 figma에 대해 알게되었고 전세계적으로 기대가 되는 툴이라고 소개하고 있길래 뭔가 싶어 한번 사용해봤는데 이건 설치도 필요없고 웹에서 바로바로 적용이 되고 바로 저장이 되고 좋더라! 게다가 무료! 디자인도 깔끔하고! 아직까지 내가 많이 배운건 없어서 잘 모르겠지만 버그고 없고 무엇보다 탈 어도비 툴이라는 점에서 높은 점수를 주고 싶다. 어도비 툴을 잘 사용하고 있지만 점점 뭔가 버그가 자꾸.. 2021. 2. 23. 이전 1 다음
