Essentials
8 guided hoursModules 1-2. An introduction with practical exercises and a small reviewed artifact.
DESIGN · BEGINNER TO INTERMEDIATE
Figma & Design
Build adaptable interfaces and explain your design.
Learn Figma through visual foundations, auto layout, reusable components, prototyping and clear developer handoff. Build a responsive course enquiry experience.
COURSE OVERVIEW
What will you learn in the Figma & Design course?
Learn visual foundations, auto layout, reusable components, prototypes and design handoff. Build a responsive course enquiry experience, then extend into token systems and advanced prototype review.
OPTIONAL AI PRACTICE
Apply AI to a relevant task.
Selected modules include an optional prompt-and-review exercise. Verify the result using the underlying skills taught in this course.
Explore the Prompting FoundationA STARTING POINT THAT FITS
Three learning levels.
Practitioner
24 guided hours totalModules 1-6, including Essentials. Complete the core labs and an assessed practical project.
Advanced
12 additional guided hoursTwo extension modules and a four-hour project clinic after practitioner readiness.
These are curriculum planning options. We confirm the timetable, delivery format, fees and required accounts before enrolment. Practitioner includes Essentials; the two durations are not added together.
Download the Curriculum PDFCheck your starting point
- Create and name a frame with editable title text. If unfamiliar, start Essentials; if fluent, demonstrate Modules 1–2 outcomes before Practitioner placement.
- Resize an auto-layout card containing a long title. Practitioner; successful demonstrators may attempt Advanced entry task.
- Review two themes and document unresolved implementation checks. Advanced after six-module competency evidence, not simply years of software use.
WHAT YOU’LL LEARN
Skills to put into practice.
- Use frames, grids, typography and spacing deliberately.
- Build responsive components and test longer content.
- Create a prototype with happy and error recovery paths.
- Prepare a design handoff and a clear project case study.
Who this is for
College learners, adult beginners, aspiring designers, founders and professionals who want practical interface-design skills.
Before you begin
Basic computer and browser skills. A Figma account with edit access supports the core labs; paid-plan features have manual alternatives.
THE COURSE OUTLINE
A clear path, module by module.
Each module connects a concept to a practical task. Open a module to see its topics and exercise.
01Figma workspace and design foundations
- Frames, layers and purpose
- Selection and precise editing
- Pages and understandable organisation
What you will understand
A frame defines an interface area and can contain other layers. A group organises selections but does not replace a screen frame. Name layers by purpose so another person can find the heading, course card and enrolment button. Drawing software fluency supports design decisions; it does not prove that users need a feature. Use the layers panel when overlapping objects are difficult to select on the canvas. Edit width, height and position deliberately rather than dragging until something looks close. Duplicate a frame to compare alternatives without losing the first version. Keep an original exercise frame intact so revisions can be reviewed. A small file benefits from clear sections for exploration, components and final screens. Free plan limits can change, so check current access before class and use named sections within a single page when necessary. Store fictional content only, and distinguish a working draft from a version ready for review.
PUT IT INTO PRACTICE
Build a navigable first file
OPTIONAL AI PRACTICE
Try this brief
Review my own Riverstone artifact for 'Figma workspace and design foundations'. Use the supplied exercise requirements, identify two questions I should investigate and explain one likely trade-off. Do not create the design for me or invent research findings. I will test suggestions myself.
Check the result
Required dimensions are exact Original and revision stay separate Duration can be found by layer name
02Layout, grids and typography
- Spacing as a system
- Grid arithmetic
- Readable typography
What you will understand
Use a small spacing scale to make layout choices repeatable. A 4, 8, 16, 24 and 32 pixel teaching scale is a design convention, not an accessibility requirement. Align related content and give groups more separation than their internal elements. Consistency makes later revisions easier to explain and apply. A grid distributes available space using margins, gutters and columns. Calculate the dimensions before drawing. For a 1200 pixel content frame, 24 pixel outer margins and eleven 16 pixel gutters leave 976 pixels for twelve columns, or approximately 81.33 pixels each. Fractional columns are normal and should not be rounded independently. Establish a restrained hierarchy with a title, section heading, body and supporting text. Use actual course names to reveal awkward wrapping. Font size alone does not guarantee readability: contrast, line length, weight and spacing matter too. Designs should anticipate text enlargement and longer translations instead of shrinking essential information to fit.
PUT IT INTO PRACTICE
Create a deliberate course layout
OPTIONAL AI PRACTICE
Try this brief
Review my own Riverstone artifact for 'Layout, grids and typography'. Use the supplied exercise requirements, identify two questions I should investigate and explain one likely trade-off. Do not create the design for me or invent research findings. I will test suggestions myself.
Check the result
704 pixel region is filled correctly Text wraps without clipping Hierarchy is consistent across frames
03Auto layout and responsive components
- Direction, padding and gaps
- Hug, fill and fixed sizing
- Resizing as an investigation
What you will understand
Auto layout arranges child objects in an intentional direction. Padding creates space inside the container; gaps separate its children. These are different controls. Build the text and button as nested arrangements so changing a course description pushes the button down naturally instead of requiring manual repositioning of every layer. Hug content allows a container to grow around its children. Fill container uses available space within its parent. Fixed sizing specifies a deliberate dimension. Choose each behaviour according to the content relationship: a button label can hug, while a card in a layout can fill its assigned column. Responsive design requires inspecting how content behaves at different widths. Figma resizing is a useful design check, but does not implement browser breakpoints. Record the intended transition from two columns to one, test longer text and document minimum useful widths. A static screenshot cannot demonstrate that all intermediate sizes work.
PUT IT INTO PRACTICE
Make the course card resilient
OPTIONAL AI PRACTICE
Try this brief
Review my own Riverstone artifact for 'Auto layout and responsive components'. Use the supplied exercise requirements, identify two questions I should investigate and explain one likely trade-off. Do not create the design for me or invent research findings. I will test suggestions myself.
Check the result
No text or button overlap Padding remains 24 pixels Column change is documented
04Components, variants and design tokens
- Main components and instances
- Variants communicate states
- Tokens with an accessible fallback
What you will understand
A main component defines a reusable element; instances reuse it across screens. Change the main component to update shared structure, and use appropriate instance overrides for local content. Avoid detaching every instance to make a small change because the relationship becomes harder to maintain and improvements stop propagating predictably. Variants organise purposeful differences such as default, hover, focus, disabled or loading. Name properties by meaning, for example State=Loading, rather than colour. Include labels and visible state differences so a developer understands behaviour. Figma visual variants are specifications; they do not supply functional keyboard handling or accessible semantics. A token names a reusable design decision such as colour/action or space/card. Variables, modes, shared libraries and their limits depend on account and plan. Mandatory work can use local styles plus a token table containing names and values. This still teaches consistency without making paid collaboration features essential.
PUT IT INTO PRACTICE
Build a small reusable system
OPTIONAL AI PRACTICE
Try this brief
Review my own Riverstone artifact for 'Components, variants and design tokens'. Use the supplied exercise requirements, identify two questions I should investigate and explain one likely trade-off. Do not create the design for me or invent research findings. I will test suggestions myself.
Check the result
Main change reaches both instances States have named purposes Manual token table is complete
05Interactive prototypes and usability checks
- Prototype scope
- Neutral task instructions
- Failures and recovery
What you will understand
A prototype connects designed screens to simulate selected tasks. State what works and what is simulated before using it. A click-through enquiry can test navigation and wording, but cannot prove backend delivery, payment security or screen-reader behaviour. Use the prototype to investigate a specific design question with observable success conditions. Give participants a goal rather than a route. Ask them to find a beginner design course and enquire, rather than telling them which button to click. Observe hesitation and choices before offering help. Small classroom samples reveal issues for iteration but cannot support claims about the whole learner population. Include at least one error and a route back to the task. Missing email should retain already entered course information and explain what needs fixing. Recording success-only interactions hides important design decisions. A prototype can show error behaviour using separate frames when conditional features are unavailable or outside the exercise scope.
PUT IT INTO PRACTICE
Test a complete enquiry task
OPTIONAL AI PRACTICE
Try this brief
Review my own Riverstone artifact for 'Interactive prototypes and usability checks'. Use the supplied exercise requirements, identify two questions I should investigate and explain one likely trade-off. Do not create the design for me or invent research findings. I will test suggestions myself.
Check the result
Happy and error routes work Task instruction is neutral Claims are limited to the observed sessions
06Design handoff and portfolio presentation
- Behaviour over screenshots
- Inspect without a paid dependency
- Honest case studies
What you will understand
Handoff explains what the interface does, not only its appearance. Specify responsive arrangements, field requirements, error wording, focus states and confirmation details. Pair screenshots with short annotations and acceptance criteria. A developer should not have to infer whether a button sends immediately or opens another step in the enquiry flow. Developer inspection features such as Dev Mode can vary by plan, permissions and product availability. Required handoff uses dimensions, colours, spacing, local styles, exported assets and a written specification. Use paid inspection features only if available, and verify proposed code suggestions rather than treating generated values as finished implementation. A credible portfolio tells the problem, your contribution, evidence, alternatives and revisions. Label the Riverstone project as fictional coursework. Include limitations of participant access and prototype scope. A short account of one decision changed by observation is more useful than unsupported claims that the design increased real business revenue or conversion.
PUT IT INTO PRACTICE
Package a usable handoff
OPTIONAL AI PRACTICE
Try this brief
Review my own Riverstone artifact for 'Design handoff and portfolio presentation'. Use the supplied exercise requirements, identify two questions I should investigate and explain one likely trade-off. Do not create the design for me or invent research findings. I will test suggestions myself.
Check the result
States and required fields are explained Assets reopen correctly Fictional scope and evidence limits are stated
AFTER THE CORE COURSE
Advanced extension.
07Advanced design systems and theme governance
- Semantic token layers
- Governance and change control
- Theme quality checks
ADVANCED PRACTICE
Govern a small theme release
08Advanced responsive critique and implementation review
- Stress cases
- Implementation evidence
- Prioritised critique
ADVANCED PRACTICE
Run a design quality clinic
Complete both four-hour extension modules and a four-hour project clinic. Entry uses the core project and readiness evidence.
BRING THE SKILLS TOGETHER
A responsive course enquiry design kit
Design Riverstone's responsive course catalogue and enquiry experience in Figma, showing component reuse, clear states and honest test evidence. Practitioner requires Modules 1–6; Advanced adds theme governance and a stress-test clinic.
Your project deliverables
- Organised source file and responsive course/enquiry screens
- Reusable card/button/field components and local token table
- Happy-path and missing-email prototype routes
- Anonymised usability observations, revisions and scope limits
- Annotated handoff, verified exports and a five-minute case-study presentation
A learning project using sample or permitted material. The final scope is agreed for your learning plan.
KEEP EXPLORING
Useful official resources.
Reference material to complement the Hawa Enterprises curriculum. Account features may vary; basic-feature or manual alternatives support the core exercises.
Course outline published by Hawa Enterprises. Updated . Ask about the learning plan.
GOOD TO KNOW
Before you take the next step.
Is this the same as UI / UX Design?
No. This course concentrates on Figma operation, reusable design construction and handoff. UI / UX Design gives deeper research and experience-design practice.
Is a paid Figma plan required?
Mandatory exercises use free-core drafting, local styles/components and manual specifications. Check current account limits before class; optional modes, libraries or Dev Mode need available access.
Can complete beginners enrol?
Yes, after basic computer skills. Essentials introduces the workspace; placement evidence allows experienced learners to move faster.
What are the fees, schedule and delivery format?
These details are confirmed by email before you commit. The curriculum gives guided-hour options for Essentials, Practitioner and Advanced. Actual schedules, fees and delivery arrangements are confirmed before enrolment. Ask about the course you want and your preferred timeline.
How do I enrol?
Choose a course and complete the enrollment wizard with your name, email and WhatsApp number. Review your details before sending the enquiry. Hawa Enterprises will discuss your starting level, goals and course arrangements before enrolment is confirmed.
YOUR NEXT SKILL STARTS HERE
Let’s find the right
course for you.
Tell us your goal, starting level and preferred timeline.