Unity Figma Importer
  • Getting Started
    • Figma Design Downloader
    • Figma Design
    • Unity Canvas Setup
  • Layout
    • Horizontal & Vertical Layouts
    • Grid Layout
  • Components
    • Text
    • Image
    • Button
    • Toggle
    • Slider
    • Scroll View
    • Input Field
    • Dropdown
    • Custom Component
  • Limitations
  • Bindings
  • Optimization
Powered by GitBook
On this page
  • Canvas Component
  • Canvas Scaler Component
  • Figma Design assets and Canvas

Was this helpful?

  1. Getting Started

Unity Canvas Setup

If you want your designs to be compatible with all screen sizes, you should adjust your Unity Canvas accordingly.

PreviousFigma DesignNextLayout

Last updated 1 year ago

Was this helpful?

You still need to design according to the design rules in order to make your design compatible with different screen sizes. This section only covers setting up an Unity Canvas to scale with screen size.

Canvas Component

Canvas component's Render Mode should be set to "Screen Space - Overlay".

Canvas Scaler Component

Canvas Scaler's UI Scale Mode should be set to "Scale With Screen Size". Reference Resolution should be set to the same resolution you work with in Figma.

Figma Design assets and Canvas

You may drag & drop .figma assets as the child of the Canvas object as a whole, or you may drag and drop individual pages from your .figma asset file to different canvases, as pages are saved as prefabs. Implementation from there differ according to your UI logic.

Canvas and Canvas Scaler Components of a Canvas
Canvas with a page from .figma asset as a child object