Skip to content
How to design it in Power Apps
Preview
What does it consist of?
Procedure
Step 1 - create popup container with divider
Add a new Horizontal Container PCF object, call it "info_popup" with this "DropShadow" property:
DropShadow.Semibold
Add a new Rectangle object under "info_popup", call it "info_divider" with this "Color" property:
RGBA(79, 167, 247, 1)
Step 2 - create content container
Add a new Vertical Container PCF object, call it "content_frame" with this "Gap" property:
10
Step 3 - create top container
Add a new Horizontal Container PCF object, call it "top_frame" with this "Gap" property:
10
Add a new Image object under "light_mode", call it "info_icon" with Image property:
"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M18.3333 10.5C18.3333 15.1024 14.6023 18.8334 9.99996 18.8334C5.39759 18.8334 1.66663 15.1024 1.66663 10.5C1.66663 5.89765 5.39759 2.16669 9.99996 2.16669C14.6023 2.16669 18.3333 5.89765 18.3333 10.5Z' fill='#4FA7F7' stroke='#4FA7F7'/> <path d='M10 14.6667V9.66669' stroke='white' stroke-linecap='round'/> <path d='M9.99996 6.33333C10.4602 6.33333 10.8333 6.70643 10.8333 7.16667C10.8333 7.6269 10.4602 8 9.99996 8C9.53972 8 9.16663 7.6269 9.16663 7.16667C9.16663 6.70643 9.53972 6.33333 9.99996 6.33333Z' fill='white'/> </svg>")
and add a new Label object, call it "message_value" with Text property:
"A new software is available. See what's new in the last version."
and add a new Label object, call it "close_button" with Text property:
"X"
Step 4 - create bottom container
Add a new Horizontal Container PCF object, call it "bottom_frame" with this "Gap" property:
10
Add a new Button object, call it "info_button" with this "Text" property:
"View the changelog"
This is an output:
How to design it in Figma
Preview
What does it consist of?
Procedure (for blue info popup)
Step 1 - create a horizontal frame with auto layout and divider
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_info_popup" with these properties:
Add a new Rectangle (R command) object under a "horcont_info_popup" frame, call it "rect_info_divider" with these properties:
Step 2 - create a content frame
Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_content_frame" with these properties:
Step 3 - create a top frame
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_top_frame" with these properties:
Import a new SVG file, call it "svg_info_icon" with this XML code:
<svg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M18.3333 10.5C18.3333 15.1024 14.6023 18.8334 9.99996 18.8334C5.39759 18.8334 1.66663 15.1024 1.66663 10.5C1.66663 5.89765 5.39759 2.16669 9.99996 2.16669C14.6023 2.16669 18.3333 5.89765 18.3333 10.5Z' fill='#4FA7F7' stroke='#4FA7F7'/> <path d='M10 14.6667V9.66669' stroke='white' stroke-linecap='round'/> <path d='M9.99996 6.33333C10.4602 6.33333 10.8333 6.70643 10.8333 7.16667C10.8333 7.6269 10.4602 8 9.99996 8C9.53972 8 9.16663 7.6269 9.16663 7.16667C9.16663 6.70643 9.53972 6.33333 9.99996 6.33333Z' fill='white'/> </svg>
Add a new Text (T command) object under a "horcont_top_frame" frame, call it "lbl_message_value" with these properties:
Add a new Text (T command) object under a "horcont_top_frame" frame, call it "lbl_close_button" with these properties:
Step 4 - create a bottom frame
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_bottom_frame" with these properties:
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "btn_info_button" with these properties:
Into the frame you need to create a Text (T command) node with "View the changelog" text and these properties:
This is an output:
How to use it via DesignKit
Prerequisites
Used Prefixes
YAML Output
Used Colours
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.