잘가, 어도비 (Goodbye, Adobe)

이 글은 Signe RoswallGoodbye, Adobe글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다

안녕, Figma! 👋

저와 Adobe의 관계는 10년 전 제가 불안하고 얼룩진 십대였을 때 Photoshop과 Clone Tool의 마법의 경이로움을 발견했을 때 시작되었습니다.
나중에 Photoshop은 제가 처음으로 웹 사이트를 디자인한 곳이 되었습니다. 힘들게 일러스트레이터로 넘어가기 전에 말이죠. 저는 드림위버와 짧은 로맨스까지 가졌는데, 드림위버가 제 첫 번째 코드를 썼습니다. 비록 10년이 전체 생애에 비해 그리 많은 것 같지는 않지만, 디자인 분야에서도 엄청난 변화의 시기였습니다. "XD"라고도 알려진 Adobes의 Experience Design 릴리즈를 통해 저는 Adobe Suite에서 계속 작업할 수 있게 되어 기뻤습니다.
그런데 일주일쯤 전에 제가 Figma를 열었던 날이 왔습니다.

가장 먼저 하게 되는 질문입니다. 스케치는요?

저는 거의 모든 스케치(Sketch)를 사용하는 사람들이 이렇게 말하는 것을 들을 수 있습니다. "수아, 스케치(Sketch)만 쓰지 그래요? 스케치(Sketch)는 끝내줘요." 그리고 네, 저도 동의해요. 부분적으로
이전 작업에서는 XD 대신 스케치(Sketch)를 사용해야 했습니다. 하지만 일관되고 품질 좋은 디자인을 제공하면서도 완전히 새로운 디자인 도구를 배워야 하는 데도 불구하고 저는 실제로 스케치(Sketch)를 좋아하게 되었습니다. 저는 보다 빠르고 일관된 설계와 자동 레이아웃과 같은 기능을 갖춘 플러그인을 사용하여 응답성 크기를 조정하기 시작했습니다. 저는 또한 많은 시간을 절약해 주는 신뢰할 수 있는 콘텐츠 생성기(content generator)를 가지고 있었습니다. 무엇보다도 저는 제 디자인을 구조화 할 수 있었기 때문에 한 곳에서만 변화를 주면 되었고, 이런 종류의 논리는 제가 Sass를 프런트엔드에 사용하는 것에 대해 매우 좋아했던 것입니다.
그러나 스케치(Sketch)에는 Windows에서는 사용할 수 없다는 큰 단점이 있습니다.
이때 밖에 나와 있는 다른 맥 디자이너들은 모두 커피를 한 입 가득 뱉어냅니다: "뭐라고요?! PC를 사용하고 있다고요?!"
저는 여전히 게임으로 신뢰하는 PC에 맹세하지만, 저는 제 일에 Mac을 사용합니다. 하지만 실제로는 개발자 대다수와 새 팀의 다른 디자이너가 PC에 의존하고 있다는 것입니다. 즉, 스케치(Sketch)를 옵션으로 배제하는 것입니다. 그래서 제 동료 두 명이 독립적으로 Figma를 언급했을 때, 저는 그들의 웹사이트를 방문했습니다.
presentation
Figma는 특별히 다른 설계 도구와 비교하지 않는다는 점을 고려할 때 특히 "더 나은 설계 방법"이라는 태그라인을 통해 기대치를 상당히 높게 설정합니다. Photoshop for UI Design에서 Figma로 전환하는 것이 Sketch 또는 Adobe XD를 사용할 때 어떻게 해야 하는지를 설계하는 더 나은 방법입니다. Windows(윈도우)의 이유로 새 직장에서 디자인을 위해 XD로 돌아갔지만 Sketch의 편안함에 대한 갈망을 금새 갖게 되었습니다. 첫 번째 프로젝트가 생산에 들어갔고 XD와 관련된 우리 팀의 과제는 더욱 명확해졌습니다.
  • 개발자들은 이 유인물에 만족하지 않았습니다. 개요는 직관적이지 않았습니다. 특정 지점까지 확대하여 검사할 수 있도록 각 개별 화면을 추가로 클릭해야 했습니다.
  • 또한 우리는 서로 목업에 대한 댓글을 읽을 수 없다는 것을 알게 되었습니다. 단지 우리 자신의 의견일 뿐이죠. 이것은 전체 코멘트를 물리칩니다.
  • 또한 현재 XD에서는 모든 파일 간에 색상 팔레트와 텍스트 스타일을 공유하는 것만큼 필수적인 것이 불가능할 때 간소화된 설계를 보장하는 데 어려움을 겪었습니다.
  • 프로토타입은 링크가 있는 모든 사람에게 유료 버전으로도 공개됩니다. 비밀스럽게 만드는 유일한 방법은 비밀번호를 입력하는 것입니다. 그리고 우리 모두는 왜 서비스가 비밀번호에서 벗어나려고 하는지 알고 있습니다. 그것들은 형편없습니다.
  • 마지막으로 Libraries와 같은 간단한 기능은 아직 지원되지 않습니다. XD의 기호 기능(구성 요소 기반 설계)을 사용하면 전혀 의미가 없습니다. Photoshop 또는 Illustrator와 같은 다른 프로그램을 사용하지 않으면 설계 파일을 유지 보수하고 업데이트할 수 없게 되었습니다.
우리에게 더 나은 다른 무언가가 필요하다는 것은 매우 명백했습니다. 우리는 Figma의 월간 구독을 구입했고 그것을 한번 해보기로 결정했습니다.

더 나은 개요

디자인 파일을 구조화하는 방법은 수없이 많으며 올바른 방법이나 잘못된 방법은 없습니다. 여러분과 팀에 맞는 방법만 있을 뿐입니다. 하지만 핸드오프와 협력이 중요하지만, 사실 저는 Figma가 제 구조와 어떻게 작용할지, 아니면 제가 부족한 것에 대해 조금 걱정했습니다.
저는 종종 매우 혼란스러운 작업 파일을 가지고 있습니다. 반쯤 구워진 UI와 완성된 모형, 다시 말해서 완전히 엉망진창입니다. 하지만 동료들은 멋지고 깔끔한 개요를 선호할 것으로 확신합니다. Figma에서는 Google Docs처럼 정확히 동일한 인터페이스와 파일을 볼 수 있습니다. 어, 오...
하지만, 만약 제품을 디자인하는 것이 제게 어떤 것을 가르쳐준다면, 그것은 구조상 지저분하고 부주의한 경향이 때때로 올바른 선택권이 없기 때문이라는 것입니다. 그렇기 때문에 Figma가 파일 정리에 도움이 되는 구조에 대해 한 두 가지 수준이 아니라 네 가지 수준의 옵션을 제공하게 되어 매우 기쁩니다.
  • 팀 아래의 사이드바에 Projects 탭을 투영합니다.
  • 각 프로젝트 내의 파일(아래에 보이는 카드)입니다.
  • 각 파일 내부에 페이지로 이동합니다.
  • 각 페이지 내부의 프레임(artboards)입니다.

presentation
우리는 여전히 사이드바에 있는 Figma의 Projects 탭과 잘 맞는 프로젝트 기반(스프린트 대신)을 작업하고 있습니다. 또한 플랫폼에 각 "영역(area)"을 개별 파일로 저장하여 파일 내의 페이지를 데스크톱, 모바일 및 Tablet 버전에 사용할 수 있도록 하려고 합니다.
presentation

A better Component setup 더 좋은 구성 요소 설정

저는 새로운 UI 디자인을 시작하는 것을 좋아합니다. 형편없는 모조품을 만들어내고 나서, 마치 고양이에게 화장지 롤을 남겨놓고, 모든 것을 작은 조각으로 나누는 것처럼요.
presentation
각각의 화장지 조각들이... 흠... 크랩... 아니, 진짜 헛소리가 아니라... 지금 당장 고양이랑 화장지 비유에 간 걸 후회하고 있어요... *가까운* 일단 이걸로 화장실 돌리기나 해보죠.
각 조각은 색깔, 타이포그래피, 아이콘 같은 스타일입니다. 만약 다시 합쳐진다면... 시간의 역전을 통해... 아니면 정말 꼼꼼한 접착제 작업일까요?...화장지 전체로 카드, 헤더, 네비게이션과 같은 레이아웃 구성요소를 만들 수 있습니다. 결국엔 화장지가 가득 차서... 화장지 롤... 메뉴나 전체 페이지 레이아웃 등... 🤔
BOTTOM LINE, FIGMA의 구성 요소는 문제가 되지 않습니다, 아시겠죠?
그리고 Figma가 처음 로그인할 때 기본값으로, 제가 계속하기로 결정한 사이드 메뉴에 디자인 시스템 프로젝트를 넣었습니다. 👏
presentation
당사의 설계 시스템은 Bootstrap 4 UI를 기반으로 합니다. 특별히 부트스트랩을 사용한 광적인 피치는 없지만, 저는 프런트엔드 프레임워크를 UI 설계의 기반으로 사용하는 것을 선호합니다. 왜냐하면 제가 디자인하는 것은 개발자들이 거의 99%의 정확도로 재현할 수 있다는 것을 알 수 있기 때문입니다. 또한 프레임워크는 많은 다른 플랫폼에 대해 많은 다른 개발 팀에서 사용하는 매우 일반적인 것으로, 사용 편의성이 뛰어난 공통의 확립된 인터페이스 패턴을 갖는 경우가 많습니다.
Figma에서 모든 Bootstrap 4 옵션을 사용하여 설계 시스템을 설정하는 것은 시간이 오래 걸리고 지루한 작업이지만 일단 설계가 완료되면 놀라울 것이 없습니다. 예를 들어, Bootstrap의 세 가지 크기 변형에서 버튼 구성 요소를 빌드한 버튼 파일(텍스트만, 아이콘 및 텍스트만 및 아이콘)이 있습니다.
presentation
버튼이 필요할 때마다 버튼 구성 요소 중 하나를 가져와서 컬러 스타일을 사용하여 스타일링할 수 있습니다. 단추의 텍스트 자체는 텍스트 스타일이며, 디자인 설계 시스템에서 변경하여 구성요소를 업데이트할 수 있습니다.
저희 디자인 시스템 프로젝트에는 "Prefabs"라는 파일도 있습니다. 이 파일에는 메뉴 항목과 탭과 같은 화장지 시트를 조합하여 조립된 전체 메뉴 레이아웃이 만들어집니다. 이것이 우리 팀이 성장함에 따라 플랫폼의 아키텍처를 일관성 있게 유지하는 데 도움이 되기를 바랍니다. 구성 요소는 여전히 제가 가지고 놀 수 있는 것이지만, 저는 이 구성 요소가 작동하는 방식에 매우 만족하고 있습니다.
또 다른 언급할 만한 것은 Layout Grid 기능입니다. 이 기능을 사용하면 페이지에 Bootstrap 4 그리드(grid) 레이아웃을 만들 수 있으며 일반적으로 여러 행(rows)과 그리드(grid)를 추가하여 완전히 그리드 너트(grid nuts)로 이동할 수 있습니다. 모든 파일을 디자인할 때 프레임과 구성요소에 일관된 패딩을 빠르게 추가할 수 있는 그리드 스타일을 사용하여 설계 시스템에서 파일을 만들었습니다. 가장 좋은 요소는 또한 그리드 선에 스냅되어 앞뒤로 누르지 않아도 됩니다.
presentation
그리고 다음 중 작은 쪽과 큰 쪽 모두에 대해 실제로 누깅(nudging) 양을 편집할 수 있는 기능은 무엇입니까? 빌어먹을 농담이에요.
presentation

공유할 수 있는 더 좋은 방법

디자인을 공유할 때, 저는 Figma가 팀 구조보다 몇 년 앞서 있다고 느낍니다. 팀을 만들고 해당 팀에 사람을 초대하면 편집자(편집할 수 있는 사용자) 또는 보기만 할 수 있습니다. Figma에서 우리는 모두 같은 것을 보고 있습니다(때로는 심지어 동시에) 공통의 이해에 쉽게 도달할 수 있습니다). 그리고 만약 제가 우리 팀에 없는 사람과 디자인을 공유하고 싶다면, 저는 그들의 이메일로 그것을 할 것입니다.

...그리고 더 나은 개인 공간도 있습니다.

개발자는 공개 링크와 암호 암호를 교환하는 모든 팀 파일에 대한 보기 전용 액세스 권한이 있으며, 우리 팀 전체에서 개인적이고 안전한 공간을 위해 아무도 기억하지 못합니다. 이것은 또한 링크가 어디에서 공유되었는지, 어떤 버전에 액세스할 수 있는지, 업데이트되었는지, 또는 사이버 공간의 어딘가에 보안 위험이 있는지 더 이상 걱정하지 않는다는 것을 의미합니다.
presentation

더 나은 우선순위화

전체적으로 XD와 Figma의 가장 큰 차이점은 다음과 같습니다. 저는 이 말을 하는 것을 좋아하지 않습니다. 왜냐하면 저는 멋진 제품을 만들기 위해 어떤 시간, 에너지, 노력을 기울이는지 알고 있기 때문입니다. Figma가 현대 제품 팀과 그들의 디자인 프로세스에 더 잘 적응하고 있는 것처럼 보인다는 것입니다. 적어도 우리 팀처럼 민첩하고 "스타트업"이 뛰어난 팀에서는 그렇게 느껴집니다. 하지만 우연히도 좋은 제품을 디자인하고 개발하는 것이 사용자와 고객의 요구에 따라 올바른 선택우선시해야 한다는 것을 알게 되었습니다.
물론 XD에는 몇 가지 새로운 음성 프로토타입 기능(?)이 있지만, 라이브러리만큼 필수적인 기능이 없습니다. 파일 전체에 걸쳐 스타일 가이드를 정의하고 재사용할 수 있습니다. 설계에 대한 기초 전체가 누락되어 있습니다.
presentation
Source

또한, 프로토타입 제작의 더 나은 방법 제시

이것은 제가 한동안 Figma를 앓은 후에 최근에 글에 추가한 것입니다(Spoiler Alert: 우리는 지금 완전히 전념했습니다. 서스펜스를 망쳐서 죄송합니다) 하지만 저도 정말 포함시키고 싶었습니다!
Figma의 프로토타이핑에는 장치 유형 및 배경색을 선택할 수 있는 프레젠테이션 설정 등 여러 가지 옵션이 있으며, 추가할 수 있는 중간 기사에 대한 GIF를 만들 때 많은 시간을 절약할 수 있습니다. 동작의 경우, "Back"과 "Close Overlay(오버레이 닫기)"가 있는데, 이는 현재 프로토타입을 함께 연결하는 데 사용하는 "Open URL(열기 URL)"이 있습니다. 또한 드롭다운에 대해 "Hovering" 대신 "Hacking" 트리거를 사용하는 등 "Hacking it"를 사용할 수 있는 많은 유형의 트리거가 있습니다. 그렇지 않으면 마우스가 적중 영역을 벗어날 때 당연히 사라지기 때문입니다.
하지만 제 생각에 가장 멋진 기능은 Overflow behavior입니다. 오버플로우 동작은 아직 그렇지 않은 경우 앉아서 모바일 프로토타입의 슬라이더를 가로로 스핑하여 고정 메뉴로 페이지를 스크롤해야 합니다.
presentation

더 나은 디자인 방법

포토샵을 처음 연 지 10년이 지났습니다. 이제 모든 설계를 Figma로 마이그레이션하고 나면 업무용 컴퓨터에 Adobe 프로그램 하나 없을 것이라는 사실을 서서히 깨닫고 있습니다. 굉장히 확정적으로 느껴지는데요.
제 인생의 시대는 공식적으로 끝났습니다.
하지만 제가 Adobe와의 모든 관계를 돌아보면서 -- 고공행진 흥분과 지구상의 지옥 사이의 모든 영역에 걸쳐 있었던 -- 저는 이제 Adobe가 더 낫다고 말하는 것을 압니다.
더 나은 디자인 방법을 위한 것입니다.
presentation
Source
읽어주셔서 감사합니다!
분명히 말씀드리자면, Figma는 그들의 제품에 대해 쓰는 데 돈을 지불하지 않았습니다. 저는 제 자유의사에 따라 그렇게 했습니다. 그게 그들의 제품이 얼마나 좋은지, 가서 확인해 보세요.

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


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