Auto Layout + Background Color Test
1
2
1
2
3
Fill height on desktop
Fixed: 300 Wide
Fill
Fixed:
200 x 200
w:142
h:fill
Fixed:
200 x 200
Fill Width
w:150
h:150
w:150
h:150
w:Fill
h:150
w:Fill
h:150
w:Fill
h:150
w:Fill
h:Fill
min-width: 342
Fill
min-width: 342
Hug
min-width: 342
Figma's Auto Layout Wrap enables elements within a container to automatically move to the next line when space is limited. Set it by selecting a horizontal auto layout frame and choosing the "Wrap" icon in the property panel. Set child elements to "Fill" to ensure responsiveness, creating dynamic, responsive layouts.
1
2
3
1
2
3
1
2
3
1
2
3
4
5
6
Text & Spacing
List, Sub Lists, Sub Paragraphs
- Bullet Item 1. This is a main bullet list item with a sub bullet list.
- Sub Bullet Item. This is a sub bullet list item. It should align to to the left edge of the text from the list item above it.
- Bullet Item 2. This is a main bullet list item with a sub bullet Paragraph and list.
- Sub Bullet & Paragraph. This is a sub bullet list item. It should align to the left edge of the text from the list item above it.
This is a sub paragraph within the same text box as the previous bullet text
- Sub Bullet & Paragraph. This is a sub bullet list item. It should align to the left edge of the text from the list item above it.
- Bullet Item 3. This is a standard bullet list item
Paragraph spacing within a single text box
Paragraph 1. The text in these paragraphs is set to have a consistent 12px space after each paragraph. It is set by the property within the paragraph styles.
Paragraph 2. The text in these paragraphs is set to have a consistent 12px space after each paragraph. It is set by the property within the paragraph styles.
Paragraph 3. The text in these paragraphs is set to have a consistent 12px space after each paragraph. It is set by the property within the paragraph styles.
Paragraph Gap 1. This paragraph is in it’s own text box. It’s spacing is set to a 24px gap, determined by auto-layout.
Paragraph Gap 2. This paragraph is in it’s own text box. It’s spacing is set to a 24px gap, determined by auto-layout.
Paragraph Gap 3. This paragraph is in it’s own text box. It’s spacing is set to a 24px gap, determined by auto-layout.
TEXT TRACKING & LINE BREAKS
Line break after this bold part.
This should be a new line.
Tracked Out. The text in this paragraph should all be tracked out.
Tracked In. The text in this paragraph should all be tracked in.
Paragraph Indent 30px. This paragraph’s first line should be indented by 30px. After that, the text should just flow and flow and flow and flow.
All paragraphs in a single text block
Breathe easy with Bhriezel™
Do not use Bhriezel™ in patients with a known hypersensitivity to flunetrazodil
or any of the components of the formulation. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer faucibus, nisl at sollicitudin faucibus, justo ligula laoreet elit, nec tempus enim nulla at libero.
Each paragraph in a separate text block
Breathe easy with Bhriezel™
Do not use Bhriezel™ in patients with a known hypersensitivity to flunetrazodil
or any of the components of the formulation. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer faucibus, nisl at sollicitudin faucibus, justo ligula laoreet elit, nec tempus enim nulla at libero.
Superscript Sample
Text & Images
Breathe easy with
Bhriezel™
Background Image with text overlay. Auto-layout set to fill horizontally. Image and text areas are split evenly.
Background Image
Background Image
Breathe easy with
Bhriezel™
Background Image with text overlay. Auto-layout set to fill horizontally. Image has fixed width of 250 on desktop, 342 on mobile. Text area is set to fill remaining space
- Bullet Item 1
- Bullet Item 2
- Bullet Item 3
- Bullet Item 4
- Bullet Item 1
- Bullet Item 2
- Bullet Item 3
- Bullet Item 4
- 1.Sign up for a link to browse free coupons on GoodRx
- 2.Select your coupon and show it to the pharmacist from your phone
- 3.Instantly save up to 80% on retail prescription prices
- Sign up for a link to browse free coupons on GoodRx
- Select your coupon and show it to the pharmacist from your phone
- Instantly save up to 80% on retail prescription prices
Text-Based Lists
- Sample text-based (bullet) unordered list
- Replace the text in these unordered list items
- Sub list item 1
- Sub-Sub list item 2
- Sub list item 1
- Third and final unordered list item
- Sample text-based (numeric) ordered list
- Replace the text in these ordered list items
- Sub list item 1
- Sub-Sub list item 2
- Sub list item 1
- Third and final ordered list item
Image: Fit
Image: Fill
Image: Crop
GRADIENT
GRADIENT 2
GRADIENT 3
VERBAL AGITATION
- Constant requests for attention or help
- Making strange noises (including weird laughter or crying)
- Complaining
- Repetitive sentences or questions
NONAGGRESSIVE AGITATION
- Pacing and aimless wandering
- General restlessness
- Repeated movements or gestures
- Hoarding or hiding things
- Inappropriate dressing or undressing
- Eating or drinking things that shouldn’t be consumed
AGGRESSIVE AGITATION
- Biting, pushing, spitting, kicking, scratching, or hitting
- Grabbing people inappropriately
- Inappropriate sexual advances
- Screaming or cursing
