Figma
-
12. 그리드Figma 2023. 3. 7. 14:34
그리드를 사용하는 이유 그리드는 웹사이트나 앱을 디자인할 때 퀄리티를 올려줄 수 있는 도구입니다. 그리드를 사용함으로써 얻을 수 있는 장점들은 다음과 같습니다. 1. 정돈된 디자인 그리드는 페이지에 컴포넌트들을 정돈된 방법으로 배치할 수 있게 도와줍니다. 물론 Auto layout이나 Distribute같은 기능들이 있기는 하지만 그리드가 존재하지 않는다면 컴포넌트들이 원하는 대로 배치되도록 설계할 때 더 많은 노력을 기울여야 할 겁니다. 2. 반응형 디자인 가능 그리드를 이용하면 처음부터 디자인 포맷을 만들지 않고도 기존 디자인을 재활용하여 반응형 디자인을 구현할 수 있습니다. 대체로 아래와 같이 화면에 보여지는 카드의 개수를 조절하는 형태로 구현됩니다. 위의 예시에서 화면의 크기가 변할 때 그리드가 ..
-
11. 플러그인과 템플릿Figma 2023. 3. 5. 22:29
Figma의 Community 탭에서는 다른 유저들이 올려 놓은 플러그인과 템플릿을 구경하고 바로 사용해볼 수 있습니다. 플러그인 메인에서 Explore Community를 눌러 커뮤니티로 접근할 수 있습니다. 검색 등을 통해 원하는 플러그인, 템플릿을 찾을 수 있습니다. 플러그인의 경우 Try it out 버튼이 나옵니다. 가장 유용한 플러그인 중 하나인 Unsplash를 사용해 보겠습니다.(컨셉에 맞는 이미지를 간편하게 검색해서 가져올 수 있는 플러그인입니다.) Run을 누르면 바로 사용해볼 수 있도록 페이지가 나옵니다. 프레임이나 도형 등을 만들고 Unsplash에서 이미지를 클릭하면 해당 오브젝트의 형태로 이미지가 만들어집니다. 플러그인은 기존 작업 환경에서 오른쪽 클릭-Plugins에서 찾아서 ..
-
10. 이펙트Figma 2023. 3. 5. 20:10
이펙트는 도형을 선택하면 나오는 우측 패널에 아랫 부분에 있습니다. '+'버튼을 누르면 바로 이펙트가 추가됩니다. 그림자 넣기 버튼을 누르면 곧바로 Drop shadow 이펙트가 적용됩니다. X, Y는 가로, 세로 방향으로 그림자가 얼마나 뻗어나갈 지, 아래의 색상으로는 그림자의 색상을 지정할 수 있고 오른쪽에서는 Blur를 설정해서 그림자를 흐리게 만들 수 있습니다.(농도를 결정) Spread는 농도가 유지된 상태에서 크기를 결정합니다. 마지막 숫자는 그림자의 투명도입니다. 이미지 블러 처리 새로운 도형과 Background Blur 이펙트를 이용해서 이미지에 블러 처리를 할 수 있습니다. 우선 검정색 도형으로 이미지를 덮습니다. 그 다음 검정색 도형에 Background Blur 이펙트를 주고 Fil..
-
9. 이미지와 마스크 기능Figma 2023. 3. 5. 19:31
이미지 상단 내비게이션에서 Place image/video를 선택하면 이미지를 가져올 수 있습니다. 이미지는 가급적이면 사이즈를 조절하더라도 기본 비율을 유지하는 것이 권장됩니다.(비율이 달라지면 원래와 다른 느낌으로 보이기 때문에) 이미지 또한 도형과 같이 라운딩을 줄 수 있습니다. Fill에서 이미지 누르면 노출, 대비 등 사진에 간단한 보정 작업이 가능합니다. 이미지 자르기 Fill에서 이미지를 클릭하고 상단의 Fill을 눌러 메뉴를 열면 가장 많이 사용되는 기능 중 하나인 Crop이 보입니다. 이 기능으로 이미지를 자를 수 있습니다. 틀을 조정한 이후 이미지의 원하는 부분이 오도록 위치를 조정해주고 엔터를 누르면 적용됩니다. 원본은 항상 보존되기 때문에 원할 경우 다시 조정할 수도 있습니다. 마스..
-
8. 색상 관련 기능 - 그라데이션, 피커Figma 2023. 3. 5. 18:03
그라데이션 오브젝트의 색을 정하는 Fill에서 기본값인 Solid 외에 다른 옵션을 선택하여 그라데이션을 넣을 수 있습니다. 투명 외에도 다른 색으로 점점 변해가게 만들 수도 있습니다. 색상을 결정하고 오른쪽의 퍼센티지를 바꾸면 해당 투명도가 적용된 색으로 점점 변해가게 됩니다. 그라데이션의 방향을 바꿀 수도 있습니다. 두 색상을 잇는 선의 꼭짓점을 끌어다 놓으면 그라데이션의 방향이 변화합니다. 피커(picker) 피커는 다른 오브젝트의 색상을 그대로 사용하고 싶을 때 그 색을 가져오는 도구입니다. 단축키 i를 눌러서 간편하게 색을 선택할 수 있습니다. 오브젝트가 선택된 상태에서 i를 누르고 색을 가져올 다른 오브젝트에서 원하는 부분을 누르면 해당 부분의 색이 오브젝트에 적용됩니다. Fill을 누른 후 ..
-
7. 텍스트 만들기Figma 2023. 3. 5. 16:42
만들기 텍스트는 상단 내비게이션 T모양을 누르거나 단축키 T를 눌러 만들 수 있습니다. 텍스트가 전부 차있지 않더라도 파란색으로 표시되는 영역은 다른 오브젝트와 상호작용 할 때 텍스트의 영역으로 인식이 됩니다. 영역 조절 오른쪽 패널 Text 부분의(중간 아래 쯤 있습니다.) Auto height버튼을 누르면 영역을 글자의 사이즈에 맞게 조정할 수 있습니다. Auto width를 누르면 텍스트가 한 줄로 바뀌게 됩니다. 폰트 Text 패널 가장 위에는 폰트를 바꿀 수 있는 창이 있습니다. 행간(줄높이) 폰트 아래에는 행간(한 줄 한 줄 사이의 거리)를 조정하는 창이 있습니다. 기본적으로 Auto로 되어 있습니다. 숫자를 입력하면 해당 간격이 적용되니다. 단락(Paragraph) 간격 단락(엔터를 기준으로..
-
6. 정렬, 분배, Tidy up, Smart SelectionFigma 2023. 3. 5. 14:57
정렬 위 사각형들을 직접 정렬한다고 생각하면 굉장히 골치가 아파오는 것을 느낄 수 있습니다. 클릭 한두번으로 끝날 일도 아니고 굉장히 마우스를 세밀하게 컨트롤해야 할 테니까요. 우측 Design 패널 가장 위에 있는 정렬 기능은 굉장히 간편하게 이러한 작업을 수행할 수 있도록 해줍니다. 정렬을 위해서는 우선 정렬할 대상들을 드래그해서 잡은 후에, 적절한 정렬 방법을 선택하면 바로 정렬됩니다.(이 경우 Align Top을 선택했습니다.) 이 때 Top이나 Bottom, Center의 기준은 저 파란색 사각형이 됩니다. 분배 위아래 정렬 외에 간격을 한꺼번에 맞출 수도 있는데 맨 오른쪽 More Options에서 Distribute horizontal spacing을 선택하면 됩니다. 수직 간격 맞추기 : ..
-
5. 피그마 단축키 2 - 트랜스폼 및 오브젝트 이동Figma 2023. 3. 5. 12:52
사이즈 변경 기능 - 자유 변경 : 코너를 잡고 드래그 - 비율 고정 사이즈 변경 : Shift 누른 상태에서 코너 잡고 드래그(Constraint Proportions건 것과 같습니다.) - 비율 고정 & 가운데 중심으로 사이즈 변경 : Shift+Alt 누른 상태에서 코너 잡고 드래그 회전 관련 기능 - 자유 회전 : 코너 바깥 쪽을 잡고 회전 - 15도 단위로 회전 : Shift 누른 상태에서 코너 바깥 쪽을 잡고 회전 (주로 180도 회전 같은걸 하고 싶을 때 사용합니다) 참고로 우측 패널에서 직접 각도를 줘서 회전시킬 수도 있습니다. 반전시키기 관련 기능 - 좌우 반전 : Shift + H (마우스 우측 클릭 후 Flip Horizontal) - 상하 반전 : Shift + V (마우스 우측 클..