{"id":112,"date":"2025-07-04T23:20:00","date_gmt":"2025-07-04T23:20:00","guid":{"rendered":"https:\/\/sites.create.ou.edu\/des3633\/?p=112"},"modified":"2026-01-19T20:25:43","modified_gmt":"2026-01-19T20:25:43","slug":"week-01-course-introduction-learning-figma","status":"publish","type":"post","link":"https:\/\/sova.ourcloud.ou.edu\/des3633\/2025\/07\/04\/week-01-course-introduction-learning-figma\/","title":{"rendered":"Week 01: Course Introduction &amp; Figma Fundamentals"},"content":{"rendered":"\n<p>This week introduces the course and core Figma skills through hands-on activities. You will learn about the Atomic Design framework and practice key tools like Auto Layout and Components by recreating an existing website or an app.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/sooners-my.sharepoint.com\/:p:\/g\/personal\/raju_ou_edu\/ETwbxe27CiVNiYijiC1nz5YB6fcAIb0tjhQGTRyBxHOGSA?e=DYZHHK\" target=\"_blank\" rel=\"noreferrer noopener\">Click here to access the lecture slides<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Topics<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Course Introduction&nbsp;<\/li>\n\n\n\n<li>Figma<\/li>\n\n\n\n<li><a href=\"https:\/\/atomicdesign.bradfrost.com\/chapter-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">Atomic Design<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Class Activities<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.figma.com\/education\/\" target=\"_blank\" rel=\"noreferrer noopener\">Figma account set up <\/a><\/li>\n\n\n\n<li>Figma Fundamentals (Design your profile card in Figma)\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/help.figma.com\/hc\/en-us\/sections\/15330107388951-Create-and-edit-layers\" target=\"_blank\" rel=\"noreferrer noopener\">Figma Layers<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/help.figma.com\/hc\/en-us\/sections\/31585889321751-Design-with-vector-tools\" target=\"_blank\" rel=\"noreferrer noopener\">Vector Tools<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/help.figma.com\/hc\/en-us\/sections\/360006606853-Text-and-typography\" target=\"_blank\" rel=\"noreferrer noopener\">Text &amp; Typography<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/help.figma.com\/hc\/en-us\/sections\/360006798733-Color-gradients-and-images\" target=\"_blank\" rel=\"noreferrer noopener\">Color, Gradient, &amp; Images<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Applying Atomic Design framework: Web\/Mobile app design<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background has-background\"><a href=\"https:\/\/canvas.ou.edu\/courses\/415482\/assignments\/3193059\" target=\"_blank\" rel=\"noreferrer noopener\">Assignment 1: Figma Beginner Course<\/a><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Helpful Links<\/h2>\n\n\n\n<p>Atomic Design: <a href=\"https:\/\/atomicdesign.bradfrost.com\/table-of-contents\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/atomicdesign.bradfrost.com\/table-of-contents\/<\/a><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Atomic Design Principles for Designers: Full Guide\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/jZX74XDQPDU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>Learning Figma<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Figma Documentation: <a href=\"https:\/\/help.figma.com\/hc\/en-us\/categories\/360002042553\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/help.figma.com\/hc\/en-us\/categories\/360002042553<\/a><\/li>\n\n\n\n<li>Figma Courses: <a href=\"https:\/\/help.figma.com\/hc\/en-us\/sections\/23691657321239\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/help.figma.com\/hc\/en-us\/sections\/23691657321239<\/a><\/li>\n\n\n\n<li>Figma Example Projects: <a href=\"https:\/\/help.figma.com\/hc\/en-us\/sections\/13148624530967\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/help.figma.com\/hc\/en-us\/sections\/13148624530967<\/a><\/li>\n\n\n\n<li>Figma Youtube Channel: <a href=\"https:\/\/www.youtube.com\/@Figma\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.youtube.com\/@Figma\/<\/a><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Part 1: Learning Figma Components &amp; Auto Layout | Instagram App Design Tutorial\" width=\"560\" height=\"420\" src=\"https:\/\/www.youtube.com\/embed\/juGsVPlgMJs?list=PLv3Jx2LapDOulLcenPYxpiOc21AuSGqiV\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>Portfolio\/Wordpress: <\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/documentation\/\">https:\/\/wordpress.org\/documentation\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This week introduces the course and core Figma skills through hands-on activities. You will learn about the Atomic Design framework and practice key tools like Auto Layout and Components by recreating an existing website or an app. Topics Class Activities Assignment 1: Figma Beginner Course Helpful Links Atomic Design: https:\/\/atomicdesign.bradfrost.com\/table-of-contents\/ Learning Figma Portfolio\/Wordpress: https:\/\/wordpress.org\/documentation\/<\/p>\n","protected":false},"author":23,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-112","post","type-post","status-publish","format-standard","hentry","category-schedule","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/sova.ourcloud.ou.edu\/des3633\/wp-json\/wp\/v2\/posts\/112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sova.ourcloud.ou.edu\/des3633\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sova.ourcloud.ou.edu\/des3633\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/des3633\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/des3633\/wp-json\/wp\/v2\/comments?post=112"}],"version-history":[{"count":1,"href":"https:\/\/sova.ourcloud.ou.edu\/des3633\/wp-json\/wp\/v2\/posts\/112\/revisions"}],"predecessor-version":[{"id":950,"href":"https:\/\/sova.ourcloud.ou.edu\/des3633\/wp-json\/wp\/v2\/posts\/112\/revisions\/950"}],"wp:attachment":[{"href":"https:\/\/sova.ourcloud.ou.edu\/des3633\/wp-json\/wp\/v2\/media?parent=112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/des3633\/wp-json\/wp\/v2\/categories?post=112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/des3633\/wp-json\/wp\/v2\/tags?post=112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}