Learn the design system
Three short videos and six steps: what you need to build a UCalgary page from the blocks in the Figma file.
Tutorial 1 · 2 min 43 s
1. Meet the design system
What is in the file and how a page is made: copy the starter page, add blocks from Pick a block or Assets, choose each block’s design, type its text, and add or remove its items.
Watch on YouTube: Meet the design system (opens in a new tab)
Tutorial 2 · 2 min 29 s
2. Blocks side by side
Layout rows: the nine column layouts, how to fill a region with a block and choose its In a region design, and which block fits which column.
Tutorial 3 · 2 min 37 s
3. A page, start to finish
One program page built from the starter page, then checked: how to add the Page check plugin, run it, fix what it finds and hand the page over.
Watch on YouTube: A page, start to finish (opens in a new tab)
Build a page in six steps
The short version. The full guide, with the starter page, is on the Build a page (opens in a new tab) page of the Figma file.
Copy the starter page
On Build a page, select the starter page, copy it, add a page of your own and paste.
Add blocks
Copy a block from Pick a block (opens in a new tab) and paste it after a block on your page, or drag it in from Assets.
Choose design and text
Select the block, then pick its design, switch parts on or off and type its text in the right panel. A name ending in (max 60) is a limit.
Add or remove items
Double-click into the block until an item is selected. Ctrl/Cmd+D adds one; Delete removes it.
Put blocks side by side
Add Layout/Columns, choose its columns, swap each placeholder for a block and choose its In a region design.
Check and hand over
Run Plugins → Development → UCWC Page check, fix what it lists, and check again.
Get the Page check plugin
The Page check runs in the Figma desktop app and lists what on your page can’t be built as designed: a block in a column it doesn’t fit, text over its limit, anything drawn by hand. You add it once on each computer.
- Download the plugin and unzip it. Keep the folder: Figma reads the plugin from it.
- In the Figma desktop app, choose Plugins → Development → Import plugin from manifest…
- Pick the file manifest.json in the unzipped folder.
- To check a page, open it and choose Plugins → Development → UCWC Page check.
Download the plugin Watch how to add it (opens in a new tab)
Where to look things up
Three pages of the Figma file, right after its cover. Each link opens the page in Figma.
-
Build a page
The short guide, the starter page to copy and a finished example.
Open Build a page (opens in a new tab) -
Pick a block
Every block once, at full size, to copy onto your page.
Open Pick a block (opens in a new tab) -
Block reference
Which block for what, which block fits which column, and the text limits.
Open Block reference (opens in a new tab)