
디자인 시스템에서 네비게이션 바를 설정하는 방법은? 디자인 시스템에서 기어 아이콘을 클릭해 네비게이션 바 설정을 시작해요. 따라서, 네비게이션 바 예제가 있는 옵션에서 'Show your nav bar'를 선택하고, 페이지가 적어서 경고가 떴다면 'Add another page' 언더라인을 클릭하여 새 페이지를 하나 더 추가해야 해요. 그리고 그 페이지에서 네비게이션 바를 추가해주어야 하는데, 이 때 어떤 페이지를 추가할지는 네비게이션 바 스타일에 따라 제한이 있어요. 스타일과 네비게이션 바에 추가할 페이지 수를 설정하는 방법을 소개해드릴게요. 어디에서든 'Nav bar' 버튼을 찾아 클릭하고, 페이지를 추가하면 돼요. 마지막으로 'Settings'으로 돌아가 작업을 마무리하면 됩니다. Flutter에서..

디자인 시스템 탭에서 기본 전환 설정을 변경하는 방법은? 오토매틱으로 새로운 페이지가 생성될 때 자동으로 적용되는 기본 전환 속성이 있어요. 전환이 일어나는 방식은 다양하며, 기본값은 오른쪽에서 왼쪽으로 300밀리초간 슬라이드되는 거예요. 이 속성을 변경하려면 전화 타입과 지속 시간을 조절할 수 있어요. 주의할 점은 전환 효과가 두 가지 방식으로 처리된다는 거예요. 디자인 시스템에서 전환 설정의 중요성은? 전환 효과는 디자인 시스템에 맞게 설정해야 해요. 페이지 전환 이외에도 애니메이션을 사용하여 이동 효과를 다르게 설정 가능해요. 전환 효과는 두 가지로 처리할 수 있으며, 두 가지 방법 모두 유의해야 해요. 전환 효과는 두 가지 사이의 관계를 전달하는데 중요해요. 의도에 맞은, 합리적인 전환 효과를 선..

FlutterFlow에서 사용자 정의 아이콘 설정하기 FlutterFlow에서 사용자 정의 아이콘을 설정하는 방법을 알려드릴게요. 사용자 정의 아이콘은 비트맵, JPEG 또는 PNG 파일과 달리 해상도가 손상되지 않고 잘 스케일링되는 벡터 그래픽이에요. 아이콘의 색상을 FlutterFlow에서 커스터마이즈할 수 있으며, font 파일과 Dart 클래스가 필요해요. font 파일과 Dart 클래스는 플러터아이콘닷컴에서 제공해 주지만 직접 업로드할 수도 있어요. 설정이 완료되면 아이콘을 버튼 등에서 사용할 수 있으며, 크기와 색상을 브랜드 컬러에 맞게 설정할 수 있어요. API 통신 상태 시 유저에게 알리는 방법은? 네트워크 요청 시 로딩 인디케이터를 설정해야 해요. 이를 통해 백엔드에서 데이터를 로딩하거나..

https://youtu.be/NsR7f1OZeSY 타이포그래피 | FlutterFlow University ️디자인 시스템에서 타이포그래피 설정하기 테마 설정에서 'typography and icons'으로 가서 프라이머리 및 세컨더리 폰트 패밀리를 설정한다. 원하는 폰트를 구글 폰트에서 선택하거나 커스텀 폰트를 업로드하여 추가할 수 있다. 폰트를 추가한 후에는 각 타입 웨이트에 대한 옵션을 작업해야 한다. FlutterFlow에서는 실시간으로 렌더링하기 때문에 작업 과정에서 실제 타입을 확인할 수 있다. ️타이포그래피 설정하기: 글자 크기, 자간, 기울임, 색상, 반응형 타이포그래피 설정의 첫 번째 단계는 타입 스케일을 설정하는 것입니다. 이는 각 옵션별 글꼴 크기를 말합니다. 타이포그래피 스케일을 ..

색상 | 가져오기, AI 생성, 테스트 | FlutterFlow University 디자인 시스템의 색상 설정 방법 및 색상 유형 '테마 설정'에서 '색상'을 클릭하여 색상을 설정할 수 있다. 색상을 가져오거나 색상 팔레트를 생성하고 테스트하는 세 가지 방법이 있다. Figma나 다른 디자인 시스템에서 이미 가져왔다면 해당 색상이 표시될 것이다. 만약 가져오지 않았다면 브랜드 가이드라인에 맞게 색상을 수정하거나, 필요한 색상을 추가할 수 있다. 색상은 브랜드 색상, 유틸리티 색상, 액센트 색상, 시맨틱 색상, 그리고 사용자 정의 색상으로 구분된다. 플러터로 라이트 모드와 다크 모드에 대비하여 색상을 설정하는 방법 라이트 모드에서 설정한 색상들을 다크 모드에 복제한다. 유틸리티 색상을 제외하고 동일하게 설..

피그마 가져오기 | FlutterFlow 대학 ️️ Figma에서 디자인에 대한 색상과 타이포그래피를 가져오는 방법 Figma에서 디자인에 대해 기본 설정을 해야 색상과 타이포그래피를 가져올 수 있으며, 이를 올바르게 설정해야 한다. 기본적으로 Figma는 디자인에서 타입 스타일과 색상을 생성하지 않는다. FlutterFlow를 사용하여 가져올 것은 디자인의 텍스트 스타일과 색깔 스타일이다. 포토샵 디자인 시스템에 오브젝트 디자인 관련 작업법 소개 디자인에서 발견한 로컬 스타일을 그대로 적용하면, 오브젝트와 함께 스타일이 금방 추가된다. 오브젝트를 선택한 후, 색깔 채우기를 클릭해 디자인에서 추가된 로컬 스타일을 확인한다. 이것을 디자인 시스템에 추가한 후, 이름과 스타일을 설정하여 디자인 시스템에 적용..