Skip to content

Commit f973695

Browse files
pinkeshmarsPoojaB26
pinkeshmars
and
PoojaB26
authored
Added design system (#34)
* Added design system * Add p tags to add more spacing after Arcades --------- Co-authored-by: PoojaB26 <[email protected]>
1 parent 569525a commit f973695

File tree

9 files changed

+343
-0
lines changed

9 files changed

+343
-0
lines changed

‎docs/ff-concepts/design-system/_category_.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"label": "Design System",
3+
"position": 4
4+
}

‎docs/ff-concepts/design-system/design-system.md

Lines changed: 339 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,339 @@
1+
---
2+
slug: design-system
3+
title: Design System
4+
tags: []
5+
description: Discover how to create a consistent UI/UX across your app with a design system in FlutterFlow.
6+
sidebar_position: 1
7+
---
8+
9+
# Design System
10+
11+
A design system is a guideline to create a consistent UI/UX across the app. A design system includes colors, typography, fonts, icons, app assets, a nav bar, an app bar, and pre-designed UI components such as buttons and text widgets.
12+
13+
This is especially helpful when you are working in a team of builders and designers in a large company. Let's say you have an app with several different features and pages, each with its unique design. However, you notice that you are starting to create inconsistencies in the design across different pages, such as using different colors, fonts, and layouts.
14+
15+
To solve this issue, you can create a design system outlining common design guidelines. Then, the team members can use this design system, which ensures the design remains consistent.
16+
17+
<div style={{
18+
position: 'relative',
19+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
20+
height: 0,
21+
width: '100%'}}>
22+
<iframe
23+
src="https://www.youtube.com/embed/moP9VtkoyjY"
24+
title="Sharing a Project with a User"
25+
style={{
26+
position: 'absolute',
27+
top: 0,
28+
left: 0,
29+
width: '100%',
30+
height: '100%',
31+
colorScheme: 'light'
32+
}}
33+
frameborder="0"
34+
loading="lazy"
35+
webkitAllowFullScreen
36+
mozAllowFullScreen
37+
allowFullScreen
38+
allow="clipboard-write">
39+
</iframe>
40+
</div>
41+
42+
43+
44+
## Adding Design System
45+
46+
To create your own design system:
47+
48+
1. Open the **Theme Settings > Design System**.
49+
2. Click **Create Design Library**.
50+
3. Enter the **Design Library Project Name**.
51+
4. Now you can configure the [Colors](#), [Typography & Icons](#), [App Assets](#), [NavBar & AppBar](#), and [Theme Settings](#).
52+
5. To see how the app will look for the new design system, you can open it in preview mode (click the eye icon at the top right side).
53+
54+
<div style={{
55+
position: 'relative',
56+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
57+
height: 0,
58+
width: '100%'}}>
59+
<iframe
60+
src="https://demo.arcade.software/7MfxqDLMHhtmen4DLo35?embed&show_copy_link=true"
61+
title="Sharing a Project with a User"
62+
style={{
63+
position: 'absolute',
64+
top: 0,
65+
left: 0,
66+
width: '100%',
67+
height: '100%',
68+
colorScheme: 'light'
69+
}}
70+
frameborder="0"
71+
loading="lazy"
72+
webkitAllowFullScreen
73+
mozAllowFullScreen
74+
allowFullScreen
75+
allow="clipboard-write">
76+
</iframe>
77+
</div>
78+
79+
80+
<p></p>
81+
6. To use the design system, open your project and navigate to **Theme Settings > Design System**.
82+
7. Click on the **No Design System Selected**.
83+
8. A pop will open displaying the list of the design systems, click on the newly created design system to add it to your project. **Note** that the design system created in [My Organization](#) will also be available here.
84+
85+
:::info
86+
87+
After selecting the design system, you can't change the Colors, Typography, and Theme Widgets.
88+
89+
:::
90+
91+
<div style={{
92+
position: 'relative',
93+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
94+
height: 0,
95+
width: '100%'}}>
96+
<iframe
97+
src="https://demo.arcade.software/VW1EVzUHh70WhDEDz6n7?embed&show_copy_link=true"
98+
title="Sharing a Project with a User"
99+
style={{
100+
position: 'absolute',
101+
top: 0,
102+
left: 0,
103+
width: '100%',
104+
height: '100%',
105+
colorScheme: 'light'
106+
}}
107+
frameborder="0"
108+
loading="lazy"
109+
webkitAllowFullScreen
110+
mozAllowFullScreen
111+
allowFullScreen
112+
allow="clipboard-write">
113+
</iframe>
114+
</div>
115+
<p></p>
116+
117+
---
118+
119+
## Import Figma Theme
120+
121+
You might use Figma to design your app and build it accordingly in our builder. If you have a lot of colors and text styles, importing them manually can take some time. You can now import the whole Figma theme, which includes the colors and text styles, directly into our builder.
122+
123+
:::info
124+
125+
Before you import the Figma theme, ensure you have access to the Figma design file and [**generate the access token**](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens).
126+
127+
:::
128+
129+
To import the Figma theme:
130+
131+
1. Open the **Theme Settings > Design System**.
132+
2. Click the **Import Figma Theme** button. This will open a new popup.
133+
3. Enter your **Figma File URL** and **Personal Access Token**. The *Personal access tokens* allow us to access all of your files and data in Figma.
134+
4. Click **Import Figma Theme**.
135+
1. Now, you'll see a list of colors from your Figma file, and here you can decide which one to keep. If everything looks good to you, Click **Import & Continue**.
136+
2. You can replace the current theme colors with new/imported ones. Click on any color, and the dropdown will display all imported colors. Click on the new color to replace it. When done, click **Save & Continue**.
137+
3. If you have custom text styling in your Figma file, it will be displayed here, and you can choose which one to import. Click **Import & Continue**.
138+
4. Replace any existing style with the new one and click **Save & Finish**.
139+
5. Finally, click **Finish & Close**.
140+
141+
<div style={{
142+
position: 'relative',
143+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
144+
height: 0,
145+
width: '100%'}}>
146+
<iframe
147+
src="https://demo.arcade.software/gEry2KO5BeoZkflYHm8f?embed&show_copy_link=true"
148+
title="Sharing a Project with a User"
149+
style={{
150+
position: 'absolute',
151+
top: 0,
152+
left: 0,
153+
width: '100%',
154+
height: '100%',
155+
colorScheme: 'light'
156+
}}
157+
frameborder="0"
158+
loading="lazy"
159+
webkitAllowFullScreen
160+
mozAllowFullScreen
161+
allowFullScreen
162+
allow="clipboard-write">
163+
</iframe>
164+
</div>
165+
<p></p>
166+
167+
If you prefer watching a video tutorial, here is the guide for you:
168+
169+
<div style={{
170+
position: 'relative',
171+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
172+
height: 0,
173+
width: '100%'}}>
174+
<iframe
175+
src="https://www.youtube.com/embed/kWvWa5PSWhw"
176+
title="Sharing a Project with a User"
177+
style={{
178+
position: 'absolute',
179+
top: 0,
180+
left: 0,
181+
width: '100%',
182+
height: '100%',
183+
colorScheme: 'light'
184+
}}
185+
frameborder="0"
186+
loading="lazy"
187+
webkitAllowFullScreen
188+
mozAllowFullScreen
189+
allowFullScreen
190+
allow="clipboard-write">
191+
</iframe>
192+
</div>
193+
<p></p>
194+
195+
---
196+
197+
## Loading Indicator
198+
199+
To customize the loading indicators used in the app, you can make changes in this section. You have the option to specify the **Indicator Type**, **Color**, and **Radius**, and the preview of the changes will be displayed below.
200+
201+
<div style={{
202+
position: 'relative',
203+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
204+
height: 0,
205+
width: '100%'}}>
206+
<iframe
207+
src="https://demo.arcade.software/6OiSlYPiCEY1p3fg0kpG?embed&show_copy_link=true"
208+
title="Sharing a Project with a User"
209+
style={{
210+
position: 'absolute',
211+
top: 0,
212+
left: 0,
213+
width: '100%',
214+
height: '100%',
215+
colorScheme: 'light'
216+
}}
217+
frameborder="0"
218+
loading="lazy"
219+
webkitAllowFullScreen
220+
mozAllowFullScreen
221+
allowFullScreen
222+
allow="clipboard-write">
223+
</iframe>
224+
</div>
225+
<p></p>
226+
227+
If you prefer watching a video tutorial, here is the guide for you:
228+
229+
<div style={{
230+
position: 'relative',
231+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
232+
height: 0,
233+
width: '100%'}}>
234+
<iframe
235+
src="https://www.youtube.com/embed/3sG-O1lkv0M"
236+
title="Sharing a Project with a User"
237+
style={{
238+
position: 'absolute',
239+
top: 0,
240+
left: 0,
241+
width: '100%',
242+
height: '100%',
243+
colorScheme: 'light'
244+
}}
245+
frameborder="0"
246+
loading="lazy"
247+
webkitAllowFullScreen
248+
mozAllowFullScreen
249+
allowFullScreen
250+
allow="clipboard-write">
251+
</iframe>
252+
</div>
253+
<p></p>
254+
255+
---
256+
257+
## Scrollbar Theme
258+
259+
From here, you can customize the appearance of the scrollbar that shows up on scrollable elements like ListView, GridView, StaggeredView, Row, and Column.
260+
261+
:::note
262+
263+
The scrollbar currently shows up by default only on platforms where Flutter natively supports it, such as web and desktop environments.
264+
265+
:::
266+
267+
You can modify its color, adjust its thickness, give it a rounded border, and more. In the 'Preview' section, you'll also be able to see the immediate visual effect of your changes.
268+
269+
Here are all the properties you can customize:
270+
271+
1. **Thumb Color:** This changes the color of the draggable portion of the scrollbar, often called the "thumb".
272+
273+
![thumb-color](../imgs/thumb-color.avif)
274+
275+
2. **Thickness:** This increases width (in a vertical scrollbar) or height (in a horizontal scrollbar).
276+
277+
![thickness](../imgs/thickness.avif)
278+
279+
3. **Border Radius:** This sets the curvature of the scrollbar's corners. By adjusting the border-radius, you can give the scrollbar a more rounded appearance (higher values) or a more squared appearance (lower values).
280+
281+
![border-radius](../imgs/border-radius.avif)
282+
283+
4. **Min Thumb Length:** This refers to the smallest size that the draggable portion (thumb) of a scrollbar can be. This ensures that users can always see and interact with the thumb, even when the content is very long.
284+
285+
![min-thumb-length](../imgs/min-thumb-length.avif)
286+
287+
5. **Main Axis Margin:** This refers to the space or gap along the primary direction of the scrollbar. For instance, in a vertically scrolling list, it refers to the top and bottom spacing, and in a horizontally scrolling list, it refers to the left and right spacing.
288+
289+
![main-axis-margin](../imgs/main-axis-margin.avif)
290+
291+
6. **Cross Axis Maring:** This refers to the space or gap along the cross direction of the scrollbar. For instance, in a vertically scrolling list, it refers to the left and right spacing, and in a horizontally scrolling list, it refers to the top and bottom spacing.
292+
293+
![cross-axis-margin](../imgs/cross-axis-margin.avif)
294+
295+
7. **Thumb Always Visible:** This determines whether the draggable "thumb" element of the scrollbar constantly remains visible or fades out when not in use. When enabled, you can also specify whether to show the track as well with custom color and border color.
296+
8. **Interactive**: Using this property, you can set different colors for different states of the thumb, including when it's hovered over or being dragged.
297+
298+
![interactive](../imgs/interactive.gif)
299+
300+
---
301+
302+
## Pull to Refresh Style
303+
304+
From here, you can customize the appearance of the pull to refresh (i.e., the loading circle).
305+
306+
You can modify its color, background color, and stroke width. In the 'Preview' section, you'll also be able to see the immediate visual effect of your changes.
307+
308+
<div style={{
309+
position: 'relative',
310+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
311+
height: 0,
312+
width: '100%'}}>
313+
<iframe
314+
src="https://demo.arcade.software/KHdvetH4Eg46TfDmZQUJ?embed&show_copy_link=true"
315+
title="Sharing a Project with a User"
316+
style={{
317+
position: 'absolute',
318+
top: 0,
319+
left: 0,
320+
width: '100%',
321+
height: '100%',
322+
colorScheme: 'light'
323+
}}
324+
frameborder="0"
325+
loading="lazy"
326+
webkitAllowFullScreen
327+
mozAllowFullScreen
328+
allowFullScreen
329+
allow="clipboard-write">
330+
</iframe>
331+
</div>
332+
<p></p>
333+
334+
## FAQs
335+
336+
<details>
337+
<summary>How do I create a new design system if I don't see a button for it?</summary>
338+
<p>Currently, creating a design system requires you to have a team set up, even if you're working solo. You can quickly create a team by following the instructions outlined [here](#). We are working on a solution that will allow for the creation of design systems without needing a team setup. Stay tuned for updates!</p>
339+
</details>

‎docs/ff-concepts/imgs/border-radius.avif

125 KB
Binary file not shown.

‎docs/ff-concepts/imgs/cross-axis-margin.avif

87.4 KB
Binary file not shown.

‎docs/ff-concepts/imgs/interactive.gif

794 KB
Loading

‎docs/ff-concepts/imgs/main-axis-margin.avif

88.9 KB
Binary file not shown.

‎docs/ff-concepts/imgs/min-thumb-length.avif

82.8 KB
Binary file not shown.

‎docs/ff-concepts/imgs/thickness.avif

75.7 KB
Binary file not shown.

‎docs/ff-concepts/imgs/thumb-color.avif

81.7 KB
Binary file not shown.

0 commit comments

Comments
 (0)