테마 설정에서 'typography and icons'으로 가서 프라이머리 및 세컨더리 폰트 패밀리를 설정한다.
원하는 폰트를 구글 폰트에서 선택하거나 커스텀 폰트를 업로드하여 추가할 수 있다.
폰트를 추가한 후에는 각 타입 웨이트에 대한 옵션을 작업해야 한다.
FlutterFlow에서는 실시간으로 렌더링하기 때문에 작업 과정에서 실제 타입을 확인할 수 있다.
️타이포그래피 설정하기: 글자 크기, 자간, 기울임, 색상, 반응형
타이포그래피 설정의 첫 번째 단계는 타입 스케일을 설정하는 것입니다. 이는 각 옵션별 글꼴 크기를 말합니다.
타이포그래피 스케일을 잘 설정하면, 사용자에게 구조적인 차이를 명확히 전달하여 읽기 경험을 향상시킵니다.
본문 복사에 대한 기본 글꼴 크기를 설정하고, 타입 스케일을 선택하고 Google Fonts에서 글꼴 패밀리를 선택할 수 있는 tools가 있습니다.
자간 설정, 이탤릭 설정, 타입 컬러 설정과 같은 후속 단계를 설정하고, 반응형 타이포그래피를 만들 수 있습니다.
플러터플로우에서 다양한 기기 크기에 대응하는 타이포그래피 설정 방법
기기 크기별로 동일한 방식으로 타이포그래피 설정을 하되, 각기 다른 사이즈를 고려해야 한다.
다른 기기 크기를 위한 사전 타입 셋팅을 만들고, 각 탭에 고유의 스타일을 적용한다.
FlutterFlow에서 디자인 시스템의 타이포그래피를 설정하는 방법이다.
디자인 시스템에서 타이포그래피 설정하기
테마 설정에서 'typography and icons'으로 가서 프라이머리 및 세컨더리 폰트 패밀리를 설정해요.
원하는 폰트를 구글 폰트에서 선택하거나 커스텀 폰트를 업로드하여 추가할 수 있어요.
폰트를 추가한 후에는 각 타입 웨이트에 대한 옵션을 작업해야 해요.
FlutterFlow에서는 실시간으로 렌더링하기 때문에 작업 과정에서 실제 타입을 확인할 수 있어요.
타이포그래피 설정하기의 첫 번째 단계는 무엇인가요?
타이포그래피 설정의 첫 번째 단계는 글자 크기, 자간, 기울임, 색상, 반응형과 같은 옵션별 글꼴 크기를 설정하는 것이에요.
이는 각 옵션별 글꼴 크기를 말해요.
타이포그래피 스케일을 잘 설정하면, 사용자에게 구조적인 차이를 명확히 전달하여 읽기 경험을 향상시킬 수 있어요.
본문 복사에 대한 기본 글꼴 크기를 설정하고, 타입 스케일을 선택하고 Google Fonts에서 글꼴 패밀리를 선택할 수 있는 도구도 있답니다.
이후에는 자간 설정, 이탤릭 설정, 타입 컬러 설정과 같은 후속 단계를 설정하며 반응형 타이포그래피를 만들 수 있습니다.
플러터플로우에서 다양한 기기 크기에 대응하는 타이포그래피 설정 방법
기기 크기별로 동일한 방식으로 타이포그래피 설정을 하되, 각기 다른 사이즈를 고려해야 해요.
다른 기기 크기를 위한 사전 타입 셋팅을 만들고, 각 탭에 고유의 스타일을 적용해요.
FlutterFlow에서 디자인 시스템의 타이포그래피를 설정하는 방법이에요.
타이포그래피 | FlutterFlow University
Let's set up our typography in our design system. So come over here to theme settings, and the third option down here is typography and icons. And here it is. The first thing you want to do is set up your primary and secondary font families over here. And we have these two because it's a common design pattern to have one font family for your display or header type, and one for your body copy. Now, you may have set these already, and there are three different ways you may have set them. First is in here in your colors when you did explore project colors over here to the explorer. If you set a theme in these options right here, they have different type families for your primary and secondary type families. So you may have set them there. You could have also set them if you generated with AI or if you imported it from Figma. But if you haven't, let's go set those up. Right now, we've got a primary font family set to outfit. And what this is doing is you can see down here that we've got various font families set between the primary and secondary family. And if you click in here to change it, you can see that we've got the whole open-source catalog of Google fonts, or you can add a custom font. Now, I'm going to add a custom font here because I've got a I want to use the display font, so let's come in here and add a font. Let's upload the files. Great! Let's give it a name.. What I'm looking for here is that the mapping is correct; that is, what the type weight and style, like italic or not, maps to the correct font weight and italic here. So thankfully, this typeface has that information in the title of it, so I can just go through and make sure everything is mapped correctly, and it is. So I can add this font. Beautiful! And we get a rendering of it here. Let's just add that in. Okay, great! So now I've got my primary and secondary font family set up. The next step is to work through each of these options for each of the type weights. And keep in mind that FlutterFlow is real-time rendering this type. So what we see over here is the actual type. So if I were to make this very small, you can see that we're getting a preview right here.
Okay, so the first thing is to set up your type scale. That is, your font sizes through each one of these options. And the idea of a typographic scale is that you want enough difference between the type sizes, then it's immediately clear to your users that they are indicating different levels in the hierarchy. So a heading is different from the body copy, but not too much. Difference so that one overwhelms another, grabbing all the user's attention. Having a good typographic scale creates a harmonious reading experience that effortlessly distinguishes between the different types of text. Now, if you have a brand guideline or style guide, your typographic scale will already be set up.. But if you don't, there are easy tools out there like this website typescale.com that you can set your base type size of your body copy and then choose a type of scale about how it scales it up and even choose a font family from Google Fonts. And even if yours is not in here, you can find one that's close enough. And then you can see this scale right here and then just copy the pixel values into FlutterFlow. And if you click on this pane, you can actually see this type scale in action. So right now we have this type scale set up and we can see how it reads. And once you like that typescale, you can just take these values right here and copy them into FlutterFlow. Okay, next you've got your letter spacing or kerning, and you're probably not going to mess with this because the letter spacing is very carefully set by the type designer, and so the distance between the characters is already in the typeface if you do mess. With letter spacing, the main use is when you have really large display type. Sometimes, the characters get very spaced apart and you need to tighten that up a little. But most likely, you won't be messing with letter spacing. Next, you have italic, and all you're doing is telling FlutterFlow which of these is indeed italic, and you want to make sure it actually is italic. Now, this will only work if the weight that you have selected, so here normal, actually has an italic weight.. And you never want to force an italic, that is, allow a browser to simply tilt your letters because an italic, once again, was very carefully designed by the type designer. But if it is italic, you can just switch it on here, and once again, you'll see it rendered. Next, you set your type color, and since you already have your color set up, you can choose from one of your theme colors. And once again, because we're creating the whole design system, if you set it to, for instance, your secondary color, and then later you go and change your secondary color, this will change with it. Okay, awesome! So you want to go through all of your type weights and set them up. After that, you might be done, but if you're shipping your app on significantly different... If you're designing for different screen sizes like mobile and web, then you're going to want to make your type responsive.
And, when you do that, you can see that we have two other options that are set. And, these are just duplicate tabs from our main type setting that we did. And, what you want to do here is set up your type the same way, but for your different device sizes. And, that's how to set up your typography in your design system in FlutterFlow...
만약 가져오지 않았다면 브랜드 가이드라인에 맞게 색상을 수정하거나, 필요한 색상을 추가할 수 있다.
색상은 브랜드 색상, 유틸리티 색상, 액센트 색상, 시맨틱 색상, 그리고 사용자 정의 색상으로 구분된다.
플러터로 라이트 모드와 다크 모드에 대비하여 색상을 설정하는 방법
라이트 모드에서 설정한 색상들을 다크 모드에 복제한다. 유틸리티 색상을 제외하고 동일하게 설정한다.
유틸리티 색상도 다크 모드에 뒤집어서 설정한다. 다크 모드에서는 색상을 뒤집게 되기 때문이다.
새로운 FlutterFlow 프로젝트를 설정할 때는 기본적으로 이 과정이 자동으로 수행된다. 다크 배경과 밝은 배경에 따라 텍스트 색상이 반대로 설정되어야 하기 때문이다.
마지막으로, 기타 색상들(브랜드 색상, 강조 색상, 의미론적 색상)을 검토하여 빛 모드와 동일한 시각적인 효과를 낼 수 있도록 조정해야 한다.
FlutterFlow에서 색상 팔레트 생성하는 방법
FlutterFlow에서는 새로운 브랜드 색상 팔레트를 입력하는 방법 외에 색상 팔레트를 생성할 수 있는 세 가지 방법이 있다.
'Coolers'라는 서비스에서 팔레트를 가져 오거나, 이미지에서 얻어올 수 있으며, AI를 통해 생성할 수 있다.
'Coolers'는 수많은 색 도구를 제공하기 때문에 색상 팔레트를 생성하기 좋다.
따라서 'Coolers'에서 색상 팔레트를 얻기 위해 여러 가지 방법을 제공하는데, 그 중 한 가지는 'spacebar'를 눌러 팔레트를 순환시키는 방법이 있다. 또한 여러 가지 옵션으로 팔레트를 정렬하고 'UI colors'와 같은 검색 기능을 이용하여 색상을 찾을 수 있다.
FlutterFlow에서 색상 생성하는 두 가지 방법.
색상 팔레트를 마음에 들게 만든 후 export and code에서 해당 코딩 정보를 복사하여 FlutterFlow에서 import하여 사용 가능하다.
이미지에서 추출된 색상값을 보고 싶을 때에도 extract image에서 쉽게 사용 가능하다.
마지막으로, Extracted Colors에서 적합한 색상을 선택하여 palette를 생성할 수 있다.
FlutterFlow에서 생성한 바이브랜드 컬러를 색상 값으로 사용하고 이후 불필요하다면 삭제할 수 있다.
색생활을 관리하는 방법 및 테스트
색상 팔레트를 구성하는 방법은 기본색을 선택하고 배경색을 설정한 다음 완료를 클릭하는 것이다.
또 다른 방법은 AI를 사용하여 팔레트를 생성하는 것인데, AI를 통해 색조와 스타일에 따른 다양한 색상이 생성된다.
테스트를 통해 앱에서 색상이 잘 어울리는지, 대비 비율이 적절한지, 라이트 모드와 다크 모드에서 일관성 있는 브랜드 컬러인지, 색각 이상을 고려한지 확인한다.
테마 설정 및 페이지 색 조정
맨 처음 필요한 것은 몇 개의 더미 페이지입니다.
다음으로 테마 설정으로 이동하여 첫 번째 페이지를 선택하여 작업을 진행합니다.
어두운 모드에서는 페이지 디자인에 대비하기 위해 보조 배경 색상을 조정해야합니다.
또한, 아이콘의 배경 색상도 브랜드 색상과 일치해야합니다.
페이지 디자인에서 색상 조합을 테스트하는 방법
임시로 추가한 테스트 페이지에서 색상 테스트를 하고, 만족스러운 색을 찾으면 해당 페이지를 삭제해도 된다.
만족스러운 색상을 찾기 위해 페이지 한 개 더 추가하여 'product page'의 색 조합을 테스트해보면서, 밝기가 적절하지 않은 부분에서도 적합한 색을 찾는 방법에 대해 가르쳐주었다.
색상 조합을 찾는 것은 여러 단계를 거치는 일이며, 이 과정에서 추가되는 색상도 있다.
모바일 앱을 디자인함에 있어서 대비 비율의 중요성을 강조하며, 이 과정을 통해 우리 앱이 좀 더 멋지게 보이게 됐다.
색상 일관성과 대비 비율이 중요하다.
색상 일관성을 확인하기 위해 빈 페이지를 생성하고 배경을 설정한다.
두 개의 컨테이너를 추가하여 밝은 배경과 어두운 배경을 구분한다.
각각의 컨테이너 안에 중앙에 요소를 배치한다.
색상의 밝기 값을 확인하여 대비 비율을 조절한다.
색상이 배경에 더 가까우면 더 부드러운 느낌이고, 배경과 대비가 크면 강렬한 느낌을 준다.
배경색에 따라 적절한 대비 비율을 유지하고, 색맹에 대한 테스트를 실시하세요.
배경색에 따라 디자인한 경우, 대비 비율은 표준이 되어야 하며, 강조하고자 하는 색상을 약화시켜야 합니다.
배경색이나 글자색 또는 둘 다 조정하여 대비를 조절할 수 있습니다.
만약 대비를 약화시키고 싶다면 값을 조정하고, 테마 설정에 반영해야 합니다.
더불어, 색맹에 대한 테스트도 실시해야 합니다. 'Color Service'에서 제공하는 도구를 사용할 수 있습니다.
️색盲 시뮬레이터를 활용하여 앱에서 색상 대비를 통해 구분할 수 있는 적절한 모습을 찾는 방법
선글라스를 씌운 색맹 모드로 색 대비를 시뮬레이션 할 수 있다.
색 대비는 앱에서 다른 요소들과 구별하기 위해 사용되므로 시뮬레이터에서 의도적으로 찾아볼 필요가 있다.
만약 색 대비가 감지하기 힘들 정도로 낮아진다면, 색 대비 조정이 필요하다.
대비가 높아질수록, 요소들 간의 차이를 시각적으로 구분하기 쉽다.
적절한 색 대비를 선택하면, FlutterFlow에서 색상 구성을 완료할 수 있다.
디자인 시스템에서 색상 설정 및 유형은?
'테마 설정'에서 '색상'을 클릭하여 색상을 설정할 수 있어요.
색상을 가져오거나 색상 팔레트를 생성하고 테스트하는 세 가지 방법이 있어요.
이미 가져온 경우에는 해당 색상이 표시됩니다.
가져오지 않은 경우 브랜드 가이드라인에 맞게 색상을 수정하거나 색상을 추가할 수 있어요.
디자인 시스템에서는 브랜드 색상, 유틸리티 색상, 액센트 색상, 시맨틱 색상, 그리고 사용자 정의 색상으로 구분됩니다.
플러터에서 라이트 모드와 다크 모드에 색상 설정하는 방법
라이트 모드에서 설정한 색상들을 다크 모드에 복제합니다.
유틸리티 색상을 제외하고 동일하게 설정합니다.
유틸리티 색상도 다크 모드에 뒤집어서 설정합니다.
다크 모드에서는 색상이 뒤집히기 때문입니다.
FlutterFlow를 새로 설정할 때는 이 과정이 자동으로 수행됩니다.
다크 배경과 밝은 배경에 따라 텍스트 색상이 반전되어야 하기 때문입니다.
마지막으로 브랜드 색상, 강조 색상, 의미론적 색상을 검토하여 라이트 모드와 같은 시각적인 효과를 낼 수 있도록 조정합니다.
FlutterFlow에서 색상 팔레트를 생성하는 방법?
FlutterFlow에서 새로운 브랜드 색상 팔레트를 입력하는 방법 외에 색상 팔레트를 생성할 수 있는 세 가지 방법이 있어요.
'Coolers'라는 서비스에서 팔레트를 가져 오거나, 이미지에서 얻어올 수 있으며, AI를 통해 생성할 수 있어요.
'Coolers'는 수많은 색 도구를 제공하기 때문에 색상 팔레트를 생성하기 좋아요.
따라서 'Coolers'에서 색상 팔레트를 얻기 위해 여러 가지 방법을 제공하는데, 그 중 한 가지는 'spacebar'를 눌러 팔레트를 순환시키는 방법이 있어요.
또한 여러 가지 옵션으로 팔레트를 정렬하고 'UI colors'와 같은 검색 기능을 이용하여 색상을 찾을 수 있어요.
FlutterFlow의 색상 생성 방법은?
FlutterFlow에서는 색상 팔레트를 만든 후 export and code를 통해 해당 코딩 정보를 복사해 FlutterFlow에서 사용 가능해요.
이미지에서 추출한 색상값도 쉽게 extract image에서 사용할 수 있어요.
마지막으로, Extracted Colors에서 적합한 색상을 선택하여 palette를 생성할 수 있어요.
생성한 색상값을 사용하고 이후에는 불필요하다면 삭제하면 돼요.
색상 팔레트를 구성하는 방법?
기본색을 선택하고 배경색을 설정한 다음 완료를 클릭하거나, AI를 통해 색조와 스타일에 따른 다양한 색상이 생성된다고 해요.
테스트를 통해 앱에서 색상이 잘 어울리는지, 대비 비율이 적절한지, 라이트 모드와 다크 모드에서 일관성 있는 브랜드 컬러인지, 색각 이상을 고려한지 확인한다는 것도 중요해요.
웹 페이지 디자인의 핵심 요소는?
몇 개의 더미 페이지부터 시작하는 것이 좋아요.
테마 설정으로 이동해서 첫 번째 페이지를 선택하여 작업을 진행해야 해요.
어두운 모드에서는 페이지 디자인을 위해 보조 배경 색상을 조정해야 하고, 아이콘의 배경 색상도 브랜드 색상과 일치해야 해요.
페이지 디자인의 색상 조합을 테스트하는 방법은?
임시로 추가한 테스트 페이지에서 색상 테스트를 해보고, 만족스러운 색을 찾으면 해당 페이지를 삭제해도 돼요.
만족스러운 색상을 찾기 위해 페이지 한 개 더 추가하여 'product page'의 색 조합을 테스트해봐요.
밝기가 적절하지 않은 부분에서도 적합한 색을 찾는 방법에 대해 배웠어요.
색상 조합을 찾는 것은 여러 단계를 거치는 일이며, 이 과정에서 추가되는 색상도 있어요.
모바일 앱을 디자인할 때, 대비 비율의 중요성을 강조하며, 이 과정을 통해 우리 앱이 더 멋지게 보이게 되었어요.
색상 일관성과 대비 비율의 중요성은?
색상 일관성을 확인하기 위해 빈 페이지를 생성하고 배경을 설정해요.
두 개의 컨테이너를 추가하여 밝은 배경과 어두운 배경을 구분하고, 각각의 컨테이너 안에 중앙에 요소를 배치해요.
색상의 밝기 값을 확인하여 대비 비율을 조절하면 됩니다.
색상이 배경에 더 가까우면 더 부드러운 느낌을 줄 수 있어요.
하지만, 배경과 대비가 크면 강렬한 느낌을 줍니다.
이렇게 색상 일관성과 대비 비율을 잘 조절하면 더 나은 디자인을 만들 수 있어요.
디자인 시 배경색과 대비비율 유지?
배경색에 따라 디자인한 경우, 대비 비율은 표준이 되어야 해요.
강조하고자 하는 색상을 약화시켜야 해요.
배경색이나 글자색 또는 둘 다 조정하여 대비를 조절할 수 있어요.
대비를 약화시키고 싶다면 값을 조정하고, 테마 설정에 반영해야 해요.
더불어, 색맹에 대한 테스트도 실시해야 해요.
'Color Service'에서 제공하는 도구를 사용할 수 있어요.
색감 장애를 위한 앱 디자인 방법
선글라스를 씌운 색맹 모드로 색 대비를 시뮬레이션 할 수 있어요.
앱에서 색 대비는 다른 요소들과 구별하기 위해 사용되므로 시뮬레이터에서 의도적으로 찾아볼 필요가 있답니다.
만약 색 대비가 감지하기 힘들 정도로 낮아진다면, 색 대비 조정이 필요해요.
대비가 높아질수록, 요소들 간의 차이를 시각적으로 구분하기 쉬워지죠.
이렇게 적절한 색 대비를 선택하면, FlutterFlow에서 색상 구성을 완료할 수 있답니다.
색상 | 가져오기, AI 생성, 테스트 | FlutterFlow University
Let's set up our colors in our design system. So come over here to your theme settings in the bottom left here and click on colors. And there are three types of things you can do with colors: you can import colors, generate a color palette, and test your color palette. So first, let's import our colors. Now, if you've either imported from Figma or connected a design system, that would be over here in this design system. And here's your Figma import. And we have a video link below if you need to do that. You will have already imported your colors. In that case, you want to simply confirm that you have all the types of colors you need. That is, we've provided labels for common app color types like background colors, success, error, and warning colors. And it's easy to forget that you need some of these secondary utility-type colors. So you just want to review that you have all the colors you need. But if you haven't imported from Figma already or another design system, then you can just modify the colors to match your brand guidelines. And there are a couple of ways you can do that. You can go into this hex code value right here and just paste in your value and hit return. Or you can come into the color itself and put in whatever color value your brand. Guidelines specify, and then accept. It also, if you mess up, you have Command Z to undo, and Shift Command Z to redo. If you need more colors, you can just come up to this big 'Add Color' button and add another one right here.. And you can specify the name of your color and change the value however you need or delete any colors. Now, we've divided the colors into five different color categories. We've got your brand colors, which are going to be your main brand colors. Then, we've got utility colors, and these are your text and your backgrounds. Then, we've got accent colors, semantic colors. That is, these are colors that you're going to use when you need some UI color for a system state. So let's say when some user action or an API call has been successful or errored out. And then, finally, the last category will come in when you add another color, and that'll be custom colors. Now, one thing to note is that this is just to help you organize the color palette in your mind. But these categories don't restrict your designing in any way. You can use any color in any place that accepts a color. So there's no place where you can, like, only use utility colors.
Alright, so after you've set up your colors for light mode up here, you want to come down and... Set them up for dark mode and there are three steps. First, you want to duplicate all your colors so bring them down what you've set up in here identically down into your dark mode, except for your utility colors, and that's because in dark mode, these are going to be the things that are going to be reversed. That's the second step: bring down your utility colors, but reverse them.. Now, by default, when you set up a new FlutterFlow project, this will happen automatically because the whole idea of light and dark mode is one is on a light background and one is on a dark background, so the text needs to be the opposite color. The third and final step is that you will need to check your other colors: your brand colors, your accent colors, and your semantic colors so that they optically look like they're light equivalent because normally, colors, logos, brand assets are designed on a light background and all of your colors won't have a lightness value at perfect 50 percent. So, in order for it to look like the same color, you'll need to make slight adjustments. We'll review how to review color contrast in our last step, testing. But real quickly, so if you come into your primary color here and change the color type to HSL, you can see. So we've got a lightness value of 58. That is, it is 8 percent closer to pure white than pure black. So, when that's up against a light background, it'll have less contrast than against a black background. So it'll look like this, and you would want to change it slightly like this so they look the same but they're actually not.
Okay, so that's importing your brand color dollars. Now, if you don't have a color palette, FlutterFlow provides three ways to generate a color palette. That is, right here, you can generate it from a service called Coolers, you can extract it from an image, or generate it from an AI. So, let's first start out with Coolers.. Now, Coolers is a color app that provides tons of color tools. So, let's jump over there and see what we've got available to us. So, to get or explore a palette, the most simplest way is to just press spacebar, and it's going to cycle you through a bunch of color palettes. You could also come into this menu right here and click explore, and you can see a lot of the most popular color palettes and sort them according to a bunch of helpful properties. You can also search. So, maybe you want to look for UI colors, and you can select it, and it'll load it into the main panel. Okay, great. So, let's close that.
Once you've got a palette you like, come here to export and code, and what you're looking for is this object right here, but you don't want that comma. You just want the actual object itself which will include the name of the color and the hex value. Okay, so let's copy that. Don't press copy because this will copy all the code here and all we care about is this object. Then let's jump back into FlutterFlow and we can just paste that in and import. And these are going to come in down here in your custom colors. So, if you want to use them for your main brand colors, you would just come in here, grab those values, and then paste them in. And then after you're done, you can just delete them because you don't need duplicate versions of those colors. Okay, the second way to generate a palette is by extracting it from an image.. So, maybe you have an image that you really like the feeling of it, and you want your app to have that same feeling. Well, you can come in here to extract image and grab an image you like. So, here, if you want to delete any of them, you can, but let's continue. And then this last step is mapping. So, what you want to do is come in, when you select the color, you can map it to the colors we just extracted from the image.
So, we've got this color as Our primary color and we want our background to be this lighter color and so on. And when you're done, you can just click done. The last way is to come in with generate with AI, and you have the full flexibility of AI that we've all come to know and love. So maybe I want a color palette from anthropology, awesome! And this is pretty cool because it gets the style, a lot of muted tones with a muted primary which is kind of like the magazine. And the other cool thing is that we have this very powerful interface to test it. So we can come and select a different page. Once again, we don't have another page set up, but you could do that here. You could see all the brand colors. You could refresh that query, so you get another variation on these. And you can come over here to this explore tab where it's giving you a bunch of different type and color variations generated from that query. So this is our current theme that is the one back here, not the one in here. And then we can see this was the one we are seeing in this screen right here.. But then we have a couple of different options, and so it switched out and gave us a different body type choice, and you can select this to see it and look through all of the different options. Super cool, and of course this... It works with dark and light mode. All right, so I'm going to choose this one right here and save changes. Okay, so that's importing your palette and generating. And the last step is testing it. So when we're testing our app, we're going to test for four things. First is just does it look good? Do these colors go well together when they're implemented in a design? Second, we're looking for contrast ratios. That is, when colors are stacked on top of each other, is there enough contrast? Are those elements distinguished enough? Third, we're looking for brand consistency with our colors. Specifically, are they consistent across light mode and dark mode? And lastly, we're checking for how our colors work with color blindness.
Okay, so the first thing that we need is we need some pages. We need some dummy pages. So let's just come over here and let's just grab a template page. And we're gonna grab this dashboard page right here. The name doesn't matter. And let's grab, let's say, a product page down here. Great! Now, we can go back to our theme settings and into "Explore Project Colors", and then let's select our first page we made. And that looks great! Now, of course, this is working like this because this page was set up with the primary color bound. Here, and here, and here. Etc.. And, you can of course go to the page and make adjustments. We'll be doing that in a second. So, this page looks good. Now, let's check it in dark mode. And, we can see here we've got a problem. And, that is this secondary background on these cards right here doesn't have enough contrast with our primary background right here. So, let's come into our secondary background here and let's just bring it up a little bit. Beautiful! Now, we can see that they're actually cards. The next thing is we see that the backgrounds of these icons should match this brand color here. So, let's just save that change and go in here, go into our dashboard page. Select that little card and change this color to our primary color.
Beautiful! And the other one, great! And once you feel good about those colors, you can of course delete these pages because you're just using them to test your color palette. All right, let's look at one more page. So, come back in here, explore project colors. And, let's go to this products page. And, once again, this bottom sheet down here should probably be set to dark. So, let's just go in there and make that change. Come in here and grab this bottom button area and set it to secondary background. But that's not... Exactly right because the contrast ratio between this and the background is not great, and you've got some options here. You could add a greater drop shadow, maybe a border.. You could bump up the fill color here to be lighter, which maybe means that you need to add in additional color in your custom colors. And this is the whole process of testing your colors. Like maybe you didn't realize you needed this tertiary background color. Okay, so this is great. Our app is looking good. We've tested our contrast ratios.
Now let's check for brand consistency with our colors. And here's a little trick I want to show you. So let's just create a blank page. We're just going to call this brand. Let's switch it to light mode. We're going to get rid of our app bar. We're going to add in two containers here. Let's just expand this first, and we're going to duplicate it. And let's take our column here and expand it. Okay, great. So one of these is going to be our primary light background, the other one is going to be our dark background, which will be our primary text because remember those are switched. And then inside each of these, we are going to add in another container. We're going to center it in the middle. So there we go. Let's just make it. A circle, give it a little bit more diameter, and let's just take our tertiary color. We're going to copy that and then paste it into this container. Beautiful, okay. So, we're really looking for two things here. One is that we're looking that our brand colors look consistent across dark and light, and second, we want the contrast ratio to be optically the same between the background and the foreground.. But why does that matter? Well, because that gives your app its distinct feeling. Because if there's a huge contrast ratio, it's going to feel a little bit more punchy, as opposed to if the contrast ratio is smaller, it'll feel more subdued. And if we come into our tertiary color here and we check its lightness value, we can see it's at 65. So it's 15 closer to pure white. So you can think about it this way: this color is 15 closer to its background, as opposed to this against the dark. So this is a subtler feeling, and this is a punchier feeling.
And whatever you change will depend on what you primarily designed it for. So if you designed it on a white background, then this contrast ratio should be canonical. It should be the standard, so this punchier one you want to subdue. And of course, there are two ways to do that. You could change the... Background or this color or both, you can move them slightly towards each other. So if we want to remove these, closer we can just bring this down a little bit. Great. And so that feels a little bit more subtle. Now, this is an art. Get some feedback and once it feels good, that's great. Now, sometimes the difference won't be big enough that you want to make any serious changes. But if you do want to make the change, once you feel good about that contrast, then just copy this value in here and then go back to your theme settings. And in that dark mode, you would just come here and paste it in. Beautiful. All right.. The last testing thing that you should do is check for color blindness and there are a lot of tools out there, but that Color Service has a great one. So let's jump back over there.
So, if you come into these sunglasses right here, it's going to give you a bunch of different types of color blindness to simulate. So, here is your palette up here and here's the simulated color palette down here and you can click through these, okay? But what are you looking for? The main thing you're looking for is that in the colorblind simulated palette, the contrast ratio, the difference between your colors, does not become so close to be. Indistinguishable because you use colors to make distinctions between things in your app. So, if they're no longer able to make that visual distinction, you might want to consider slightly altering your palette to make the contrast work for colorblindness. So, for instance, here you can see that there's quite a bit of contrast between these colors, and these are getting close to each other. Now, these are still different enough to be distinguished, but this is the type of thing that you want to look out for. Alright, that's it! You've set up your colors in FlutterFlow...
Figma에서 디자인에 대해 기본 설정을 해야 색상과 타이포그래피를 가져올 수 있으며, 이를 올바르게 설정해야 한다.
기본적으로 Figma는 디자인에서 타입 스타일과 색상을 생성하지 않는다.
FlutterFlow를 사용하여 가져올 것은 디자인의 텍스트 스타일과 색깔 스타일이다.
포토샵 디자인 시스템에 오브젝트 디자인 관련 작업법 소개
디자인에서 발견한 로컬 스타일을 그대로 적용하면, 오브젝트와 함께 스타일이 금방 추가된다.
오브젝트를 선택한 후, 색깔 채우기를 클릭해 디자인에서 추가된 로컬 스타일을 확인한다.
이것을 디자인 시스템에 추가한 후, 이름과 스타일을 설정하여 디자인 시스템에 적용한다.
예시로 추가한 것이 색상과 텍스트 스타일이니, 필요한 디자인에 직접 적용할 수 있다.
UI 디자인을 통해 은행 앱을 구축하고 FlutterFlow에서 Figma 테마를 가져옴
다양한 웹과 모바일 페이지를 가진 은행 앱의 UI 디자인을 사용하여 실제 예시를 보여줌.
FlutterFlow에서 피그마 테마를 가져올 때 URL과 액세스 토큰이 필요하며, 액세스 토큰은 피그마 대시보드에서 개인 액세스 토큰을 얻는 과정을 설명함.
피그마 테마로부터 가져온 색상을 색상 매핑하여 메인 테마 색상으로 지정하고, 타이포그래피 매핑을 통해 피그마의 글꼴을 매칭함.
이렇게 해서 Figma에서 가져온 색상과 글꼴이 모두 매핑되었음.
Figma에서 색상과 타이포그래피 가져오기
Figma에서 색상과 타이포그래피를 가져오려면, 색상과 타이포그래피에 대한 기본 설정을 하고 올바르게 설정해야 해요.
기본적으로 Figma에서는 타입 스타일과 색상을 생성하지 않아요.
FlutterFlow를 사용하여 가져올 수 있는 것은 디자인의 텍스트 스타일과 색깔 스타일뿐이에요.
포토샵 디자인 시스템에 오브젝트 디자인 추가하기
디자인에서 발견한 로컬 스타일을 그대로 적용하면, 오브젝트와 함께 스타일이 금방 추가돼요.
오브젝트를 선택하고 색깔 채우기를 클릭해 디자인에서 추가된 로컬 스타일을 확인하고, 디자인 시스템에 추가해요.
이름과 스타일을 설정해 디자인 시스템에 적용하면 필요한 디자인에 직접 적용할 수 있어요.
FlutterFlow에서 Figma 테마를 가져오기 위해서는 어떤 정보가 필요한가요?
다양한 웹과 모바일 페이지를 가진 은행 앱의 UI 디자인을 사용하여 실제 예시를 보여줘요.
FlutterFlow에서 피그마 테마를 가져올 때 URL과 액세스 토큰이 필요하고, 액세스 토큰을 얻기 위해서는 피그마 대시보드에서 개인 액세스 토큰을 얻는 과정을 설명해준대요.
피그마 테마로부터 가져온 색상을 색상 매핑하여 메인 테마 색상으로 지정하고, 타이포그래피 매핑을 통해 피그마의 글꼴을 매칭해요.
이렇게 해서 Figma에서 가져온 색상과 글꼴이 모두 매핑되었어요.
피그마 가져오기 | FlutterFlow 대학
In this video, I want to show you how to import colors and typography from a Figma theme. But before we do that, let me show you how it has to be set up in Figma for this import to work. So, by default, Figma doesn't generate type styles and colors from your design, and that's a good thing because typically, designers will be doing many iterations on the design, and so you'll have lots of colors and type styles that they were working with, which aren't going to make it into the final design. So, if you get a Figma file but it doesn't have all the type and colors set out correctly, here's how you do it. So, I'm just in a blank Figma file right here, and what we're looking for is these local styles right here. So, I could click on this right here and add a style. What FlutterFlow is going to import is the text styles and the color styles.
But because you're going to be working with a theme from your designers, let me show you how to add these from the designs themselves. So, let's say you've got a shape right here with a color, and let's just change it to something that's easier to see. You can see these local styles when nothing is selected, so when you select it, you see the properties. But you just need to unselect it, and then you can see your local. Styles, so what you want to do is select the object whose color you want to add to the design system. Go over to the fill and click on these four dots right here to open it up. Then you can just click on the plus sign to add it to your design system.. You can give it a color and create a style. Now, if we deselect that, we can see in our design system that we now have color styles, including a red one. Let's do the same thing with typography. Let's select this text, put something in here, make it a little bigger, and zoom in. Again, go over to these dots right here, add the style, give it a name, and create a style. Now we have a text style as well as a color style. Okay, great. So that's all good.
But for input, let me use a fully fleshed out UI design to give a more real-life example of how this works. Here, I've got the banking app that we're going to be building with different pages for both web and mobile. Currently, nothing is selected, so you can see all the type and color options down here. And of course, if you want to delete any of these, just select it and press backspace or delete. Now, let's import this into our design system in FlutterFlow. We're going to need two things: the URL of the Figma file and... I need an access token. So, let me show you how to get that access token. You want to go back to your main Figma dashboard, and come up into the top right into your account and settings. And scroll down to personal access tokens. And this is going to be for our bank app, so just give it a name. It really doesn't matter what you call it. And when you hit enter, you'll be given your access token. You won't be able to see it again after you generate it, so make sure you copy it down. But you're probably only going to use it once.. So, let's copy this token, and now you're ready to go into FlutterFlow. Alright. So, let's import our Figma theme. I'm going to put in that access token and the URL, and import the theme. This should just take a few seconds. All right, so first it will handle the import of the colors. And so, here are all the colors that it took from those local styles. And so, even if you had excess colors in there you didn't want, you can get rid of them here before we map them into our main theme colors. Because in our next screen, we're going to do the mapping. So, let's import and continue. And so, here's where we map it. So, what you want to do is you want to go into each color. So, this primary one right here, and you'll be able to search through those colors. These are. The ones from Figma, and so you can go down and select the ones that you want. And of course, you can add any utility colors you want and do your dark mode. Okay, that's great. Save and continue. And once again, in these last steps, we're going to do the same thing but with typography. Remove any styles you don't want, continue, and now here's the mapping. So we've got Title One, and once again these are coming from Figma, and you can just map them how you want, boom! And when you're done, save and finish great, so now all our colors and all our type is mapped from Figma...
