Are there guidelines or tips to understand the design limitations of Power Apps Canvas Apps when creating prototypes in Figma? I want to ensure my designs are compatible with Canvas App constraints. Any resources or advice would be appreciated!
While Figma allows unlimited canvas size, Canvas Apps work best with the 16:9 aspect ratio (1366x768)
Design components need to be responsive within containers rather than fixed-position
Consider creating multiple Figma frames showing how layouts adapt to different screen sizes
Remember to account for the 48px top navigation bar in Canvas Apps that reduces usable vertical space
Component Translation Strategy
Map Figma components to their closest Power Apps equivalents:
Figma buttons → Power Apps Button control
Text fields → Text input control
Lists/grids → Gallery control
Forms → Form control or container with input fields
Tables → Data table control
Icons → Icon control (limited to built-in set)
Document any custom components that will need to be recreated using combinations of basic controls
Layout System Translation
Instead of Figma's free-form layout, plan your design using Power Apps' container hierarchy:
Vertical container for top-to-bottom layouts
Horizontal container for side-by-side elements
Gallery containers for repeating content
Use Figma's Auto Layout to simulate how Power Apps containers will behave
Consider standard padding/margin values in Power Apps:
Default container padding is 8px
Standard spacing between elements is 4px or 8px
Form field padding is typically 12px
Color and Typography
Create a Figma color system matching Power Apps theme colors
Use web-safe fonts available in Power Apps
Define text styles that map to Power Apps' text control properties
Remember that custom fonts require additional setup in Power Apps
Interactive States
In Figma, create variants showing different states:
Button hover/pressed states
Form field focus states
Error states for input validation
Loading states for data-dependent elements
Document these states for implementation in Power Apps formulas
Data Visualization
Design galleries and tables with sample data that reflects actual data structure
Account for variable content length in text fields
Plan for loading states and empty states
Consider how sorting, filtering, and search will affect the layout
Navigation and User Flow
Create a screen map in Figma showing all app screens
Document navigation patterns between screens
Consider the navigation bar placement and consistency
Account for back navigation and screen history
I hope this is helpful.
Was this reply helpful?YesNo
Under review
Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.
2
Share
Report
All responses (
Answers (
