Skip to content
How to design it in Power Apps
Preview
What does it consist of?
Procedure
Step 1 - create hidden timer
Add a new Timer, call it "OriginalTimer" with this "Visible" property:
false
And "Start" property:
TimerGo
Step 2 - create designed timer
Add a new Manual Container PCF, call it "timer_frame" with default property values.
Add a new Vertical Container PCF, call it "inner_frame" with "Border Radius" property:
105
Add a new Vertical Container PCF, call it "content_frame" with "DropShadow" property:
DropShadow.Regular
and "LayoutAlignItems" property:
LayoutAlignItems.Center
Add a new Button PCF object under "content_frame", call it "timer_value" with this "Appearance" property:
'ButtonCanvas.Appearance'.Transparent
and "Text" property:
Text(Time(0, 0, OriginalTimer.Value/1000), "hh:mm:ss")
Add Label object under "content_frame", call it "total_value" with Text property:
Concatenate(OriginalTimer.Duration/1000," sec")
And Image object under "timer_frame", call it "circle_icon" with Image property:
"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='181' height='184' viewBox='0 0 181 184' fill='none' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(#clip0_3604_8924)'> <path d='M0.00311279 91.255C0.168095 71.6445 6.49313 52.5978 18.0554 36.8939C29.6177 21.19 45.8121 9.65063 64.276 3.95942C82.7398 -1.73178 102.507 -1.27702 120.693 5.25737C138.879 11.7918 154.533 24.0638 165.37 40.2831C176.208 56.5023 181.662 75.8199 180.936 95.4176C180.211 115.015 173.344 133.867 161.338 149.223C149.332 164.579 132.815 175.636 114.197 180.779C95.5781 185.923 75.8326 184.884 57.8411 177.815L90.5 92.0001L0.00311279 91.255Z' fill='#FF4980'/> </g> <defs> <clipPath id='clip0_3604_8924'> <rect width='181' height='184' fill='white'/> </clipPath> </defs> </svg>")
This is an output:
How to design it in Figma
Preview
What does it consist of?
Procedure
Step 1 - create a timer frame
Add a new Frame (F command) object, call it "cont_timer_frame" with these properties:
Step 2 - create a content for timer frame
Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_inner_frame" with these properties:
Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_content_frame" with these properties:
Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object under "vercont_content_frame", call it "btnpcf_timer_value" with these properties:
Add a new Text (T command) object under a "btnpcf_timer_value" frame, call it "timer_value" with these properties:
Add a new Text (T command) object under a "vercont_content_frame" frame, call it "lbl_total_value" with these properties:
Step 3 - create a SVG for timer frame
Import a new SVG file under a "cont_timer_frame" frame, call it "svg_circle_icon" with this XML code:
<svg width="181" height="186" viewBox="0 0 181 186" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-inside-1_67_41" fill="white">
<path d="M0.0031354 92.2469C0.168118 72.4232 6.49315 53.1695 18.0554 37.2949C29.6177 21.4203 45.8121 9.75551 64.276 4.00244C82.7398 -1.75063 102.507 -1.29092 120.693 5.31449C138.879 11.9199 154.533 24.3253 165.37 40.7209C176.208 57.1164 181.662 76.644 180.936 96.4547C180.211 116.265 173.344 135.322 161.338 150.845C149.332 166.368 132.815 177.545 114.197 182.744C95.5781 187.944 75.8326 186.894 57.8411 179.748L90.5 93.0001L0.0031354 92.2469Z"/>
</mask>
<path d="M0.0031354 92.2469C0.168118 72.4232 6.49315 53.1695 18.0554 37.2949C29.6177 21.4203 45.8121 9.75551 64.276 4.00244C82.7398 -1.75063 102.507 -1.29092 120.693 5.31449C138.879 11.9199 154.533 24.3253 165.37 40.7209C176.208 57.1164 181.662 76.644 180.936 96.4547C180.211 116.265 173.344 135.322 161.338 150.845C149.332 166.368 132.815 177.545 114.197 182.744C95.5781 187.944 75.8326 186.894 57.8411 179.748L90.5 93.0001L0.0031354 92.2469Z" stroke="#FE588B" stroke-width="16" mask="url(#path-1-inside-1_67_41)"/>
</svg>
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.