[Study | OMEP] week 2: Figma for developers

영어 발표 스터디를 하고 있다. (참고로 OMEP: Oh My English Present 는 사실 내가 그냥 지은 이름이다.)
내 발표들을 다시 정리해두면 좋을 것 같아, 블로그에도 업로드한다.

 

주제 선정 이유

원래 디자인에 관심이 많이 있는 편이다. 당연히 요즘 최고로 핫한 디자인 툴, 피그마에도 많은 관심이 있다. 그동안은 테크 주제를 해야겠다! 라는 생각이 강했으나, 테크 주제가 생각보다 난이도가 있어서 매주 테크 주제를 유창하게 발표하는 것은 부담이 느껴졌고, 좋아하는 분야로 발표해봐야겠다(테크도 좋아하긴 한다!) 싶어 도전해보았다. 

Figma for developers

Features of Figma

1. Windows OS, Mac OS support + Design via web browser

• Using a web-based browser makes the program more versatile and does not require app installation.
  → Sketch is only available for macOS, but figma is also available for WindowsOS and web browsers.
• You can also install and use the (native) program directly on your computer even if it is not a web browser, so you can work quickly.

2. Real-time collaboration system (co-live design)

• It's a web-based browser program that allows multiple people to view an artboard and work on it online in real time by sharing a link between figma account holders.
• Whereas Sketch and XD use a separate app called Zeplin to communicate with developers by exporting (handoff) work, Figma allows you to use the handoff feature right in the app.
• So, let's see for ourselves what the difference is when we actually share without zeplin.

3. A variety of figma plugins and the figma community

• The feature of figma plugins is that you can utilize the functions required for figma created by third parties, such as Google plugins or WordPress plugins, just by installing a plugin.
• Most of the plugins are free programs, and some are paid. Below, you can see the most popular figma plugin recommendations in the field.

https://www.figma.com/community

Why Figma?

2021 UX Tools research shows that Figma dominates UI design software.

https://uxtools.co/survey-2021/

1. Convenient developer handoffs

Handoff refers to the process of moving from the design phase to the development phase. When we say handoffs are easier with figma, we mean easier work and easier communication, because we can communicate everything in one place.

figma can organize exports to facilitate the extraction and delivery of design deliverables, and the Inspect tab allows developers to download code and specification images for reference (Handoff). So, what we used to have to work with in documentation, we now don't have to.

 

2. Design Resource Management & Design System.

As a web-based program, Figma has the advantage of online real-time work. Therefore, planning designs are basically shared in the same concept as sharing documents or presentations on Google to work in real-time. In addition, team libraries allow for design component management and efficient resource management. A unified design system is also possible.

 

Question

Q&A도 당연히 다 영어로 진행하는데, 개인적으로 답변이 부족했다고 생각해서 발표 당일 다시 정리해서 슬랙에 업로드했었다.

 

Q1. 피그마 플러그인 추천

제가 피그마로 디자인을 하는 경우가 많지 않아 다른 플러그인 소개 글 (링크) 들을 참고해보시면 좋을 것 같아요. 피그마로 무엇을 하고 싶은가에 따라서 원하는 플러그인의 종류가 매우 달라지기 때문에 피그마로 무엇을 하고 싶은건지 잘 생각해보시면 좋을 것 같아요.

 

Q2. 피그마를 첫번째 디자인 툴로 사용하는 것

이전에도 간단히 설명 드렸듯이, 저는 영상편집툴 → 포토샵 → 일러 → 피그마 순으로 디자인 툴들을 사용했기 때문에 제 의견이 가장 적절한지는 모르겠지만, 저는 피그마를 추천드릴 것 같아요. 다만 원하시는 게 개발자로서 디자이너(혹은 기획자)와의 원할한 소통 및 편집이 가능한 수준 인지 혹은 피그마로 디자인을 하는 것 인지에 따라서 조금 다를 것 같아요. 만약에 후자라면 adobe의 다른 툴들도 사용해보시는 게 맞을 것 같아요!

 

Q3. 피그마 학습법저도 피그마를 잘 사용하는 것은 아니지만 저는 아까 소개드린 community를 자주 보는 편이에요. 새로운 플러그인이나 재밌는 템플릿이 많이 있어요. (참고로, 애플도 공식 design kit을 피그마에 공개하고 있어요.) 피그마의 기능은 필요할때마다 튜토리얼을 검색하는 방식으로 알아보는데요, 예를 들어 글래스모피즘을 구현하고 싶다면, glassmorphism tutorial figma 와 같이 검색해서 이런 결과를 찾는 방식이에요.

 

PIL: Presentation I Learned..

재밌긴 했으나, 다른 분들이 관심이 있는 주제일지 걱정이 되었다. 다행히 다들 좋은 질문을 던져주셔서 만족했다. (가장 걱정되었던게 질문하시기에 너무 관심없는 주제면 어떡하지? 싶었었다.) 사실은 실습에 가깝게 구성해서 스크립트 읽는 것에서 벗어나보고자 했는데, 쉽지 않았다. 5분안에 디자인을 깊이 있게 다루는 것은 불가능했다...~ 대신 발표 중에 등장하는 디자인 툴들(스케치, 피그마, XD)를 직접 켜서 보여주는 약간의 시각적 효과를 추가할 수 있었다.