안드 개발자의 Figma 정복기

1. 승우가 준비한 Figma 자료 중 도움 됐던 것!

아래 이미지에 대한 저작권은 스토리판다에 있습니다

---

---

---

 

 

+ 참고하면 좋은 Figma 단축키

 

---

2. 알게 된 내용 정리

1. 컴포넌트화 :  ctrl + alt + K

 

2. 스케일 유지되며 확대/축소 : k + 드래그 (특히 Text확장 시 유용)

 

3. 여러 개의 Frame의 같은 위치에 에셋을 붙여 넣기

    1) 붙여 넣을 에셋 cmd + c

    2) 여러 개의 frame 선택(shift 누른 상태에서 클릭)

    3) cmd + v

 

4. rectangle 보다는 frame을활용해 불필요한 요소 줄이기

 

5. Frame속성에서 드래그를 활용하여 수치 변경 가능

<->에 주목!

6. 복사 : alt + (shift) + 드래그

    🔥 오늘 제일 인상 깊었던 부분.. 저는 세상에 복사하는 방법이 cmd C + V밖에 없는 줄 알았어요..

    에셋 클릭 > cmd + c > cmd + v > 드래그해서 이동 

    이 4단계를 한 번에 해결 가능!!!!!!!!!

 

7. 여러 개의 에셋에 오토레이아웃을 적용하면 android에서의 chip과 같이 배치할 수 있음!

    1) cmd + d를 눌러 에셋 복제가능

    2) cmd + x를 눌러 삭제

    3) 제외하고 싶은 항목이 있다면!??

         - Hug가 아닌 Fill Container 활용

         - Abolute Position 활용 -> [ + ]

 

고오급 내용!

8. 이중 컴포넌트(컴포넌트를 컴포넌트화 시키기)를 활용해, 발표자료 소제목 위치를 한 번에 변경하기

    - 소제목 컴포넌트 생성

    - 컴포넌트 복사

    - 복사한 컴포넌트를 또다시 컴포넌트화

    - 해당 컴포넌트의 사이즈를 frame사이즈와 일치 시킴

    - 소제목의 위치를 조정함

    - 새로운 프레임을 만들고, 이중컴포넌트를 프레임에 복사함

    - 이중컴포넌트의 부모에서 위치를 이동하면, 각 frame에서도 움직임..!!

 

---

3. 결론

신세계에 눈을 떴다..

내가 애기였던 시절 초콜릿을 처음 먹었을 때 이런 느낌이었을까..?

 

그간 피그마를 활용하며 답답하게 느꼈었던 부분을 모두 해소할 수 있었다.

1. Alt + 드래그를 통해 복사가 가능하다는 것..

2. 이중 컴포넌트의 활용

    실제로 발표자료 제작 도중에, 배치의 문제로 소제목의 위치를 바꿔야 하는 경우가 있어서 불편한 적이 있었다.

 

이 외에도 컴포넌트의 활용, 오토레이아웃의 경우에는 아직 손에 익지는 않았지만

연습하다 보면 미친 듯이 유용할 것 같은 느낌이 든다.

 

텍스트 스타일, 컬러 스타일을 만들어 나가며 나만의 디자인 시스템을 만들어 봐야지!

한번 만들어두고 나면 평생 우려먹을 수 있을 것 같다.

 

오늘 두 시간 동안 미친 꿀팁을 알려준 승우에게 감사하며 글을 마무리하겠다.

Figma 최고...!!!!!