{"id":2006,"date":"2026-03-10T22:03:51","date_gmt":"2026-03-10T22:03:51","guid":{"rendered":"https:\/\/acmgd.info\/interactive2\/?p=2006"},"modified":"2026-03-31T18:34:43","modified_gmt":"2026-03-31T18:34:43","slug":"introduction-to-figma","status":"publish","type":"post","link":"https:\/\/acmgd.info\/interactive2\/introduction-to-figma\/","title":{"rendered":"Introduction to Figma"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n


Figma launched in 2026 is a professional design tool used across the industry to create user interfaces, wireframes, and interactive prototypes. It runs entirely in the browser, making it accessible on any device without installation. However app installation is encouraged for our classroom. Designers use it to build everything from early-stage wireframes to polished, production-ready screens \u2014 and with its built-in prototyping features, those designs can be made interactive and shareable with a single link. Figma also supports real-time collaboration, meaning multiple people can work inside the same file simultaneously, much like a shared Google Doc. It’s the industry standard and the same tool you’ll find used at most design teams today. <\/p>\n\n\n\n

<\/p>\n\n\n\n

Figma’s Interface <\/strong><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n


Toolbar ( bottom center)<\/strong> The tools you’ll use most. Includes Move, Frame, Shape, Pen, Text, and the Hand tool for panning. The Present and Share buttons also live up here.<\/p>\n\n\n\n

Layers Panel (left)<\/strong> Shows every element in your file in a hierarchy. Frames sit at the top level, and everything inside them is nested below. Good layer naming habits start here.<\/p>\n\n\n\n

Canvas (center)<\/strong> Your working space. Infinite and zoomable \u2014 frames float on it like artboards. This is where all the designing happens. <\/p>\n\n\n\n

Pages (top of left panel)<\/strong> Figma lets you organize work across multiple pages inside one file \u2014 useful for separating wireframes, final designs, and component libraries.<\/p>\n\n\n\n

Design Panel (right)<\/strong> Context-sensitive , it will change depending on what you have selected. Shows position, size, fill, stroke, effects, and layout options for any selected element. <\/p>\n\n\n\n

Prototype Panel (right)<\/strong> Accessed via the tab next to Design. This is where you draw connections between frames, set triggers, choose animations, and define your prototype flow.<\/p>\n\n\n\n

Assets Panel <\/strong> Stores all your Components and imported libraries. Drag from here to place instances anywhere in your design.

<\/p>\n\n\n\n

1. Using Adobe Illustrator to Export SVG<\/p>\n\n\n\n

Open Adobe Illustrator<\/strong>: Launch the application and open your .ai file.

Export as SVG<\/strong>: Go to File -> Export -> SVG.<\/p>\n\n\n\n

Import to Figma<\/strong>: Drag and drop the exported SVG file into a Figma document

<\/p>\n\n\n\n

<\/p>\n\n\n\n

Design Resources:
————————————————————
How to add a font to Figma<\/a>

<\/p>\n\n\n\n

Prototyping Resources:
————————————————————

Figma Prototype Tutorial Playlist<\/a> *Has many valuable tricks*
Prototyping 101 <\/a>
Figma tutorial: Prototype with variables<\/a>
Create a Button Hover Effect in Figma<\/a>
Vertical, Sticky, and Horizontal Scrolling in Figma<\/a>
Animation basics in Figma <\/p>\n\n\n\n

<\/p>\n\n\n\n


Figma Resources :
Introduction to Figma
<\/a>Flax Academy Tutorials <\/a><\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Figma launched in 2026 is a professional design tool used across the industry to create user interfaces, wireframes, and interactive prototypes. It runs entirely in the browser, making it accessible on any device without installation. However app installation is encouraged for our classroom. Designers use it to build everything from early-stage wireframes to polished, production-ready […]<\/p>\n","protected":false},"author":15,"featured_media":2007,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"nf_dc_page":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-2006","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"jetpack_featured_media_url":"https:\/\/acmgd.info\/interactive2\/wp-content\/uploads\/2026\/03\/3225dab2b34419e6bc17bf52633ed13b4e86cd6d-3262x1836.jpg.avif","jetpack_shortlink":"https:\/\/wp.me\/p78RO3-wm","jetpack-related-posts":[{"id":1978,"url":"https:\/\/acmgd.info\/interactive2\/spring-2026-class-schedule\/","url_meta":{"origin":2006,"position":0},"title":"Spring 2026 Class Schedule","author":"Gisela Ochoa","date":"January 20, 2026","format":false,"excerpt":"Week 1Tue 1\/20\u00a0- Course\/ Syllabus Introduction- Lecture: Intro to ID2- Project IntroductionHomework: - Start thinking about ideas for collections. (5 possible themes\/ideas )- Bring in an example website to share with the class. Add HereThis website should be one that you admire for its narrative qualities, and usability, should be\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/acmgd.info\/interactive2\/wp-content\/uploads\/2026\/01\/Interactive-Design.jpg?fit=1080%2C879&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/acmgd.info\/interactive2\/wp-content\/uploads\/2026\/01\/Interactive-Design.jpg?fit=1080%2C879&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/acmgd.info\/interactive2\/wp-content\/uploads\/2026\/01\/Interactive-Design.jpg?fit=1080%2C879&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/acmgd.info\/interactive2\/wp-content\/uploads\/2026\/01\/Interactive-Design.jpg?fit=1080%2C879&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/acmgd.info\/interactive2\/wp-content\/uploads\/2026\/01\/Interactive-Design.jpg?fit=1080%2C879&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1508,"url":"https:\/\/acmgd.info\/interactive2\/collections-prof-medina\/","url_meta":{"origin":2006,"position":1},"title":"Collection Project Overview","author":"Gisela Ochoa","date":"May 29, 2024","format":false,"excerpt":"\"Good design starts with an understanding of psychology and technology. Good design requires good communication, especially from machine to person, indicating what actions are possible, what is happening, and what is about to happen\" - Don Norman. The Design of Everyday Things Project Overview: For this\u00a0course, you will conceive of,\u2026","rel":"","context":"In "Assignments"","block_context":{"text":"Assignments","link":"https:\/\/acmgd.info\/interactive2\/category\/assignments\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/acmgd.info\/interactive2\/wp-content\/uploads\/2014\/08\/whalhunt.jpg?fit=600%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/acmgd.info\/interactive2\/wp-content\/uploads\/2014\/08\/whalhunt.jpg?fit=600%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/acmgd.info\/interactive2\/wp-content\/uploads\/2014\/08\/whalhunt.jpg?fit=600%2C422&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":2028,"url":"https:\/\/acmgd.info\/interactive2\/interactive-ii-final-deliverables-2026\/","url_meta":{"origin":2006,"position":2},"title":"Interactive II Final Deliverables 2026","author":"Gisela Ochoa","date":"April 28, 2026","format":false,"excerpt":"Below are the Final Deliverables for Interactive Design II.These are due to be handed\u00a0in at our\u00a0Final Exam date\/time:\u00a0Tuesday May 12, 6:20-9:20PM, Bradley Room 527.\u00a0- Each student will give a brief, 6 minute presentation of your Collection project by using your Figma Link and taking us through the final revisions prompted\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1874,"url":"https:\/\/acmgd.info\/interactive2\/midterm-presentations\/","url_meta":{"origin":2006,"position":3},"title":"MIDTERM PRESENTATIONS","author":"Gisela Ochoa","date":"March 10, 2026","format":false,"excerpt":"Create a Presentation PDF that includes everything you have done up to this point, including:CollectionCreative BriefAbstract10 Questions + Interview Results (Charts)PersonasUser Stories ( can be included within personas)Hunt StatementUser JourneysSitemapsWireframesBrand Identity Please take this presentation seriously as it will count as your midterm. Your grade will be affected if you\u2026","rel":"","context":"In "Assignments"","block_context":{"text":"Assignments","link":"https:\/\/acmgd.info\/interactive2\/category\/assignments\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/acmgd.info\/interactive2\/wp-content\/uploads\/2024\/03\/ID2_MIDTERM_MOCK-scaled.jpg?fit=1200%2C927&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/acmgd.info\/interactive2\/wp-content\/uploads\/2024\/03\/ID2_MIDTERM_MOCK-scaled.jpg?fit=1200%2C927&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/acmgd.info\/interactive2\/wp-content\/uploads\/2024\/03\/ID2_MIDTERM_MOCK-scaled.jpg?fit=1200%2C927&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/acmgd.info\/interactive2\/wp-content\/uploads\/2024\/03\/ID2_MIDTERM_MOCK-scaled.jpg?fit=1200%2C927&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/acmgd.info\/interactive2\/wp-content\/uploads\/2024\/03\/ID2_MIDTERM_MOCK-scaled.jpg?fit=1200%2C927&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1848,"url":"https:\/\/acmgd.info\/interactive2\/ia-sitemap-user-journey-considerations\/","url_meta":{"origin":2006,"position":4},"title":"IA \/ Sitemap + User Journey Considerations","author":"Gisela Ochoa","date":"February 25, 2026","format":false,"excerpt":"Although you want to start talking about development frameworks, interaction design, and visual language of your site, there's something you need to get right, right now, if you want your site to come together on time, and on point: your information architecture. Define what information your site is going to\u2026","rel":"","context":"In "Assignments"","block_context":{"text":"Assignments","link":"https:\/\/acmgd.info\/interactive2\/category\/assignments\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/acmgd.info\/interactive2\/wp-content\/uploads\/2024\/02\/653a9915d30b179e53212faa_ECommerce-Website.webp?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/acmgd.info\/interactive2\/wp-content\/uploads\/2024\/02\/653a9915d30b179e53212faa_ECommerce-Website.webp?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/acmgd.info\/interactive2\/wp-content\/uploads\/2024\/02\/653a9915d30b179e53212faa_ECommerce-Website.webp?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/acmgd.info\/interactive2\/wp-content\/uploads\/2024\/02\/653a9915d30b179e53212faa_ECommerce-Website.webp?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/acmgd.info\/interactive2\/wp-content\/uploads\/2024\/02\/653a9915d30b179e53212faa_ECommerce-Website.webp?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1497,"url":"https:\/\/acmgd.info\/interactive2\/welcome\/","url_meta":{"origin":2006,"position":5},"title":"Welcome!","author":"Gisela Ochoa","date":"January 18, 2026","format":false,"excerpt":"\"One of the most essential qualities of digital media is the ability to respond to changing conditions.\u00a0 When the changes in conditions are determined\u00a0by the user\u2019s input, we call this resource, interactivity.\u201d\u00a0 \u2014Marie-Laure Ryan, Beyond Myth and Metaphor: The Case of Narrative in Digital Media COURSE INTRODUCTION Building on the\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/acmgd.info\/interactive2\/wp-content\/uploads\/2018\/01\/wefeel-1.jpg?fit=400%2C279&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/acmgd.info\/interactive2\/wp-json\/wp\/v2\/posts\/2006","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/acmgd.info\/interactive2\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/acmgd.info\/interactive2\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/acmgd.info\/interactive2\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/acmgd.info\/interactive2\/wp-json\/wp\/v2\/comments?post=2006"}],"version-history":[{"count":8,"href":"https:\/\/acmgd.info\/interactive2\/wp-json\/wp\/v2\/posts\/2006\/revisions"}],"predecessor-version":[{"id":2024,"href":"https:\/\/acmgd.info\/interactive2\/wp-json\/wp\/v2\/posts\/2006\/revisions\/2024"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/acmgd.info\/interactive2\/wp-json\/wp\/v2\/media\/2007"}],"wp:attachment":[{"href":"https:\/\/acmgd.info\/interactive2\/wp-json\/wp\/v2\/media?parent=2006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/acmgd.info\/interactive2\/wp-json\/wp\/v2\/categories?post=2006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/acmgd.info\/interactive2\/wp-json\/wp\/v2\/tags?post=2006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}