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:
Add a new Rectangle object under "info_popup", call it "info_divider" with this "Color" property:
Step 2 - create content container
Add a new Vertical Container PCF object, call it "content_frame" with this "Gap" property:
Step 3 - create top container
Add a new Horizontal Container PCF object, call it "top_frame" with this "Gap" property:
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:
Step 4 - create bottom container
Add a new Horizontal Container PCF object, call it "bottom_frame" with this "Gap" property:
Add a new Button object, call it "info_button" with this "Text" property:
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
the designed component according to the instructions from the previous section Used Prefixes
horcont_info_popup, horcont_top_frame, horcont_bottom_frame = Horizontal Container vercont_content_frame = Vertical Container lbl_message_value, lbl_close_button = Label YAML Output
Used Colours
Background Popup - #F2FAFC Button Background - #FFFFFF Button Stroke Colour - #D9DBDE