web55 피그마 인터렉션 배워보기 피그마 책을 보고 공부한지 벌써 한달은 된것 같은데 이제서야 인터렉션으로 들어왔다. 물론 매일 조금씩 하다보니 늦어지긴 했지만 그래도 드디어! 복잡해 보이지만 어떤 버튼을 눌렀을때 어디로 이동하는지를 보여주는 선들이다. 인터랙션을 적용할때 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 2 3 4 5 다음
