피그마에서 로티 추출하기; 피그마로 모션 만들기; 피그마로 애니메이션 만들기; LottieFiles for Figma
미쳤다. 그냥 이 말 밖에 나오질 않는다. 피그마에서 로티를 만들고 추출할 수 있다니. 피그마를 안 쓸 이유가 점점 사라지는 거 아닌가. 나온지는 꽤 된 거 같다. 하지만 최근에 메일이 날라왔다. 예전 플젝에서 로티 가입했던 것 때문에 날아온 로티의 뉴스레터. 이 뉴스레터를 받지 않았다면 몰랐겠지 ㅎㅎㅎㅎ 이래서 관심 있는 제품의 업데이트 소식은 꼬박꼬박 follow-up 해야 하나 싶기도 하고. 로티 https://lottiefiles.com/ LottieFiles: Download Free lightweight animations for website & apps. Effortlessly bring the smallest, free, ready-to-use motion graphics for the ..
[기획자의 Figma] 피그마에서 모자이크 처리하기
포트폴리오 쓸 때 또는 블로그에 글 쓸 때, 설계서들 가끔 캡쳐해서 넣는 경우가 있다. 그때 중요 정보들을 가려야 하는데 그때마다 포토샵 켜기도 귀찮고, 회사 컴퓨터에는 포토샵도 없다. 😢 블로그 에디터 같은거 켜서 할 수도 있는데 그러면 로그인 > 블로그 > 글쓰기 등등등 과정이 너무 복잡하다. 피그마에서 모자이크 처리를 편하게 할 수 있으면 좋지 않을까? 우선 이게 포토샵처럼 정확한 모자이크 처리 효과를 주는 것은 아니다. 다만, 내용을 가리고자 한다면 유용하게 써먹을 수 있다. 만약 정말 모자이크 처리를 하고자 한다면 모자이크 효과를 줄 수 있는 플러그인들을 찾아보자(검색 키워드는 pixel) 1. 모자이크 할 개체(프레임 혹은 이미지)를 이미지로 복사 후 붙여넣기한다. 복사 단축키는 Ctrl + ..
[기획자의 Figma] 피그마로 이미지 크롭하기/잘라내기
워낙 피그마가 활용도가 높다보니까 피그마를 화면설계서 뿐만 아니라 여러가지 편집 툴로 사용하게 된다. 그러다보니 자연스럽게 단순한 이미지 편집도 하게된다. 그 중 단연코 많이 쓰는 기능 중 하나가 이미지 잘라내는 기능이다. 클립보드 복사/붙여넣기를 통해서 쉽게 가져온 후에 Crop해서 사용할 수 있기 때문이다. 근데 이 Crop을 어떻게 하는지가 잘 나와있지 않아서 매번 검색하게 된다. 정석 1. 편집할 이미지 레이어를 선택한다. 2. 우측 사이드바에 이미지 썸네일 선택한다. 3. 활성화된 'Fill' 옵션을 선택하여 Crop을 선택한다. 4. 이미지가 Crop 가능한 상태로 변경되는지 확인한다. 단축키 왼쪽 Alt 키를 누른 상태에서 Crop할 이미지 레이어 위에 마우스를 올리고 마우스 왼쪽 더블 클릭..
[설계를 해보자] 02. 회원 마인드맵
부서 단위로 기획 과제를 수행하고 있다. 과제는 주로 특정 서비스에 대해서 '주제'를 분석하거나 '주제'의 서비스를 벤치마킹 하는 건데, 1월은 자유 주제, 2월은 쇼핑, 그리고 3월은 회원가입이다. 주제를 정하신 분의 의도는 단순 회원가입만이 아니라 회원과 관련된 모든 것을 포함했던 것이고, 아직 진행 중이다. 무슨 서비스를 할까 하다가, 진행중인 프로젝트를 예상보다 빨리 마무리 하게 되어서, 회원을 한 번 정리해보자 싶었다. 그러면서 chatGPT도 만지작만지작 했다.(그건 추후 업데이트 예정) 어떻게 정리할까 싶다가, 글로 쓰는 건 3월안에 끝날거 같지 않아서 마인드맵 그리는 연습도 해 볼 겸 마인드맵을 골랐다. full time은 아닌, 3일 정도는 틈틈히 구성을 짰고, chatGPT는 하루 정도..
[기획자의 Figma] 에이전시에서 피그마 사용하기 - 제한, 공유, 소유권 이전
벌써 피그마 쓴 지도 1년이 훌쩍 넘었다. 에이전시에서 피그마를 사용할 때 고민되는 것들을 정리해 보았다. 꼭 에이전시가 아니더라도 고민이 필요한 경우가 있지만 내가 수행사의 입장에서 피그마를 쓰다 보니 느꼈던 점들 위주라서 적어보았다. 1. 레이어 정리 안 할 거면 제발 안썼으면 좋겠다. 디자이너는 그래도 포토샵 시절부터 레이어 정리하던 훈련?이 되어 있어서 크게 이슈가 없었는데, 기획자들이 쓰는 경우에 디자인 툴에 익숙하지 않다 보니 레이어 정리 없이 한 화면에 모든 레이어가 나열되어 있었다. 이렇게 되면 중복된 항목이 섞여 있는 경우도 있고, 타인이 작업한 걸 수정할 때 찾기가 너무 어렵다. 대단한 레이어 정리를 하라는 건 아니고, 적어도 이미지 프레임이면, 각종 선과 도형을 묶어주면 좋지 않겠는가..
[기획자의 Figma] Autolayout 활용하기: 표, 셀렉트박스
부제: 뻘짓의 역사 레몬 딜 버터를 만들려고 버터를 상온에 두고 있었다. 기다리는 동안 피그마로 뚝딱거리고 있는데, 오토레이아웃으로 만든 셀렉트박스가 크기 변동에 따라서 내용물?이 계속 고정되는 것이다. 정말 개발 테스트 하듯이 하나 수정해보고 확인하고를 무한 반복하며 2시간 내내 매달려서 해결했다. 덕분에 레몬 딜 버터를 위한 버터는 충~~~~~~~~~~분히 녹아 너무 쉽게 만들 수 있었다. 증상은 이러했다. 표의 헤더는 잘 늘어나는데, 오토레이아웃으로 작업한 표의 '행' 부분은 전혀 늘어나지 않았다. 엄청난 시간의 뻘짓을 통해 정돈하자면, Autolayout은 Frame으로 구성하고 Frame 안의 오브젝트들은 Scale / Frame은 Fill container로 변경해야 한다. 사실 아직도 Fil..
[기획자의 Figma] 피그마 시작-후기/ UI 설계서 템플릿 공유
2023.04.19 컴포넌트 수정: 메시지창, 표 피그마가 핫한 툴이긴 한 것 같다. 보수적인 우리 회사에서도 도입해서 쓰고 있으니 말이다. 처음엔 재밌었는데, 하다보니 점점 더 어렵고, 뭔가 디자인 욕심을 내게되는... 하지만 금세 또 포기하고 말았다. 난 설계에 집중해야지... 시행착오 처음엔 어떻게 시작해야 할지 몰라서, description은 대지 바깥에 적거나, Comment 기능을 사용했었다. 그런데 다시 일반적으로 쓰는 설계서 템플릿을 만들어서 사용했다. 결국 산출물 작업을 위해서 고객사에 문서로 전달해야 하는데, 이때 PDF로 출력하기 위해서는 대지로 만든 프레임에 Description이 포함되어야 했다. 또, 수정이 많은 경우엔 사실 히스토리 관리가 쉽지 않다. auto-save라고 하지..