{"id":296,"date":"2026-10-08T11:21:42","date_gmt":"2026-10-08T11:21:42","guid":{"rendered":"https:\/\/demo.raoatech.ca\/skilltour\/lessons\/what-ui-and-ux-mean-in-a-figma-file\/"},"modified":"2026-10-08T11:21:44","modified_gmt":"2026-10-08T11:21:44","slug":"what-ui-and-ux-mean-in-a-figma-file","status":"publish","type":"raoa_lesson","link":"https:\/\/demo.raoatech.ca\/skilltour\/lessons\/what-ui-and-ux-mean-in-a-figma-file\/","title":{"rendered":"What UI and UX mean in a Figma file"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">A handsome screen can still fail. UI is the arrangement of controls, type, and color. UX is the path: what the person is trying to do, what they see first, and what happens after they click.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In Figma, keep those jobs visible. Put the task in a note at the top of the page. Put the screens in frames below it. If a frame does not serve the task, it is decoration, even if the spacing is perfect.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Write the task before the frame<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>The person and the job, in one sentence.<\/li><li>The first screen they need, not the screen you feel like drawing.<\/li><li>The done state: what &quot;finished&quot; looks like.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Watch Figma, &quot;What&#039;s Figma?&quot; as the short orientation to the tool. This lesson names the two jobs you will do in the file: the interface on the frame, and the task the prototype must finish.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"580\" src=\"https:\/\/demo.raoatech.ca\/skilltour\/wp-content\/uploads\/2026\/10\/raoa-c237-l1-what-ui-and-ux-mean-in-a-figma-file-1024x580.png\" alt=\"Three boxes labeled Task, UI, and Done\" class=\"wp-image-297\" srcset=\"https:\/\/demo.raoatech.ca\/skilltour\/wp-content\/uploads\/2026\/10\/raoa-c237-l1-what-ui-and-ux-mean-in-a-figma-file-1024x580.png 1024w, https:\/\/demo.raoatech.ca\/skilltour\/wp-content\/uploads\/2026\/10\/raoa-c237-l1-what-ui-and-ux-mean-in-a-figma-file-300x170.png 300w, https:\/\/demo.raoatech.ca\/skilltour\/wp-content\/uploads\/2026\/10\/raoa-c237-l1-what-ui-and-ux-mean-in-a-figma-file-768x435.png 768w, https:\/\/demo.raoatech.ca\/skilltour\/wp-content\/uploads\/2026\/10\/raoa-c237-l1-what-ui-and-ux-mean-in-a-figma-file.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">The task and the done state decide which interface you draw.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Practice<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Write the task sentence above a blank Figma page. Example: &quot;A returning student resets a password and lands on the course home.&quot; Do not draw until that sentence exists.<\/p>\n\n\n","protected":false},"author":1,"featured_media":297,"comment_status":"open","ping_status":"closed","template":"","class_list":["post-296","raoa_lesson","type-raoa_lesson","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/demo.raoatech.ca\/skilltour\/wp-json\/wp\/v2\/raoa_lesson\/296","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.raoatech.ca\/skilltour\/wp-json\/wp\/v2\/raoa_lesson"}],"about":[{"href":"https:\/\/demo.raoatech.ca\/skilltour\/wp-json\/wp\/v2\/types\/raoa_lesson"}],"author":[{"embeddable":true,"href":"https:\/\/demo.raoatech.ca\/skilltour\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.raoatech.ca\/skilltour\/wp-json\/wp\/v2\/comments?post=296"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/demo.raoatech.ca\/skilltour\/wp-json\/wp\/v2\/media\/297"}],"wp:attachment":[{"href":"https:\/\/demo.raoatech.ca\/skilltour\/wp-json\/wp\/v2\/media?parent=296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}