Sketch에서 Figma로 전환하는 이유 (Why I’m switching from Sketch to Figm)

이 글은 Holly SunderlandWhy I’m switching from Sketch to Figm글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다

Sketch가 한동안 웹 디자인 작업에 접근했을 때 Photoshop보다 훨씬 효율적이고 Sketch를 사용하는 것이 웹 디자인에 대한 작업 속도를 향상시켰습니다. 이건 제가 새로운 도구를 위해 Sketch를 버렸다고 하더군요. 그게 바로 Figma입니다.
presentation
Figma에서 디자인하는 것은 스케치(sketch)와 매우 유사하지만, 제가 Figma에서 선호하는 몇 가지 기능이 있습니다. 아래에 나열된 기능입니다.
이미지 배치(Place image) : 이렇게 하면 이미지를 형상 내에 배치할 수 있지만 크기를 조정할 때는 마스크로 작동합니다. 이 기능은 웹용으로 설계할 때 매우 유용하므로 "좌 정렬(Left align)"과 같이 이미지를 고정할 수 있으므로 크기를 조정할 때 이미지가 어디에 놓일지를 정확하게 나타낼 수 있습니다.
벡터 도구(Vector tool) : 저는 일러스트레이터 환경(Adobe Illustrator is my jam)에서 왔기 때문에 Figma에서 벡터 도구를 사용하는 것은 꿈이었어요! 한 노드(node)에 두 개 이상의 스트로크(strokes)를 연결할 수 있어 복잡한 모양과 기호를 쉽게 그릴 수 있습니다.
스마트 그리드(Smart grid) : 배치 그리드(layout grid)를 숨겼을 때 가장자리를 고정하는 데 도움이 되는 dashed line이 계속 보입니다. Adobe의 스마트 가이드와 같은 대안보다 덜 거슬렸습니다.
프레임(Frames) : Figma의 "아트 보드(art boards)" 버전입니다. 제가 이 버전을 좋아하는 이유는 프로토타이핑할 때 특히 오버레이를 만들기 위해 새로운 크기의 프레임을 만드는 것이 더 부드럽기 때문입니다.
단축 키(Shortcuts) : 웹 디자인에서 사용하는 주요 단축키는 레이어의 요소를 배열하여 앞쪽으로 가져와서 뒤로 보내는 것입니다. 스케치(Sketch)에서는 기억하기에 매우 긴 단축키(Control + Alt + Cmd + Down/Up arrow)이었습니다. Figma에서도 Photoshop과 마찬가지로 (Cmd + [ / ])으로 동일하고 특히 단축키를 사용하는 경우 기억하기가 쉽습니다.
Figma에 대해 제가 좋아하는 몇 가지 디자인 기능입니다. 하지만 Figma에서 프로토타이핑을 할 수 있는 옵션이 바로 Sketch에서 Figma로 바꾸도록 설득한 것입니다.
presentation
Prototype view in Figma.
튜토리얼(tutorials)을 두 번밖에 못 봤는데, 그 어느 때보다 프로토타입으로 더 많은 작업을 할 수 있다는 것을 알게 되었습니다. 이뿐만 아니라 시간도 빠릅니다! 다음은 프로토타이핑할 때 가장 유용한 몇 가지 제가 가장 좋아하는 기능입니다.
오버레이(Overlays) : 오버레이를 수동으로 배치하거나 고정할 수 있을 뿐 아니라 다른 오버레이로 "전환(switch)"할 수 있습니다. 이렇게 하면 디자인에 작은 프레임을 적용할 수 있을 때 화면 로드를 생성하는 시간을 절약할 수 있습니다.
presentation
Manual overlay in Figma.
수평 및 수직 스크롤(Horizontal and vertical scrolling) : 이것은 저에게 큰 문제이며, 현재 작업 부하 중 상당수는 수평 스크롤(horizontal scrolling) 또는 지도 탐색(map navigation)과 관련이 있으며, Figma는 "Overflow behaviour" 기능을 사용하여 이러한 기능의 프로토타이핑을 쉽고 간단하게 할 수 있도록 준비되었습니다.
트리거(Triggers) : click하거나 hover 옵션입니다! 이 기능은 프로토타입을 한 단계 끌어올릴 때 매우 유용합니다.
전환(Transitions) : Figma에는 적용할 수 있는 전환(transitions) 범위가 있습니다. 흥미로운 점은 전환(transitions)의 지속 속도(duration speed)를 제어할 수 있다는 것입니다.
중복 파일(Duplicate Files) : 간단한 기능이지만 프로토타이핑할 때 정기적으로 사용자 이동에 사용할 수 있는 몇 가지 옵션을 사용해 봅니다.
presentation
Prototype original linked up.
모든 프레임을 연결한 후 프로토타입 파일을 복제할 수 있다는 것은 다른 여정 프레임을 추가하는 동시에 연결된 전환 작업을 원래 프로토타입에서 유지할 수 있다는 것을 의미합니다. 이는 Marvel App에서 프로토타이핑할 때 선택할 수 있는 옵션이 아니었으며 모든 여정에 대해 처음부터 시작해야 한다는 것을 의미했습니다.
presentation
Duplicated Prototype, still linked as previous.
프로토타이핑의 다양한 가능성을 통해 저는 Marvel App과 같은 이전 프로토타이핑 도구보다 Figma에서 제 기능을 발휘하는 디자인 아이디어를 훨씬 쉽게 보여줄 수 있습니다.
이제 Figma의 최종 판매 지점으로 돌아와서, 팀과 함께 업데이트를 보여주는 링크를 공유할 수 있습니다. 그런 다음 링크를 통해 의견을 개진하거나 편집할 수 있습니다. 이 링크는 여러 구성 요소 라이브러리와 함께 작업할 때 일관성을 유지하고 피드백을 얻을 수 있어 매우 유용합니다.
또한 Figma는 Mac과 Pc 모두에서 작동하며, 무료라고 언급했습니까? 웹디자인을 시작하는 디자이너에게는 아주 좋은 도구입니다.
전반적으로 저는 Figma를 "이동(go to)" 웹 디자인 도구로 사용하게 되어 기쁩니다. 현재 당면한 문제나 나중에 새로운 툴로 교체하게 될 경우 이에 대한 업데이트를 제공할 것입니다. 읽어주셔서 감사합니다 :)

이 글은 번역 글입니다. 원본 링크입니다.


안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp