And while they may appear simple, designing interactive and scalable checkboxes in Figma requires a clear understanding of components, variants, states, and properties.

This guide walks you through everything you need to know, from the purpose and variations of checkboxes to step-by-step instructions for building fully interactive components.

You’ll also learn best practices to improve usability and discover ways to speed up your workflow with ready-made components, helping you create more efficient and production-ready designs.

Table of Contents:

1. What Is a Checkbox?

2. Checkbox Variations in UI Design

3. States of a Checkbox

4. Steps to Create an Interactive Checkbox in Figma

5. Checkbox: Various properties

6. Best Practices for CheckboxDesign in Figma

7. Speed Up with Ready-Made Checkbox Components

8. Conclusion

What Is a Checkbox?

A checkbox is a user interface element that allows users to select one or more options from a set of choices. Each checkbox operates independently, allowing multiple selections at the same time.

In Figma, checkboxes are typically created as components with variants, allowing designers to represent different states, such as checked, unchecked, hover, or disabled, in prototypes.

What Is the Purpose of a Checkbox? (Why We Use It)

You can use checkboxes in your designs when users need to:

• Select multiple options

• Confirm an action

• Enable or disable a feature

• Agree to terms or policies

Common real-world examples:

• “I agree to the Terms & Conditions.”

• Choosing notification preferences

• Selecting filters in e-commerce apps

• Marking tasks as completed in to-do apps

In Figma prototypes, interactive checkboxes help simulate real user behavior, making designs easier to validate before development.

Checkbox Variations in UI Design

Different Checkbox Formats

Depending on your design system, checkboxes can appear in many formats:

Card-Based Checkbox Selection – Uses cards as selectable elements with integrated checkboxes. This pattern improves visual clarity and is ideal for selecting rich content options.

Simple To-Do List Checkboxes – Basic checkbox layout for task lists where users can mark items as complete. Commonly used for straightforward tracking and productivity flows.

Status & Completed Checkboxes – Represents different task states such as pending, in-progress, or completed. Helps users quickly understand progress and current status.

Error State Checkboxes – Displays validation errors when a required checkbox is not selected. Often used in forms to guide users toward required actions.

Chip-Style Checkbox Selection – Combines checkboxes with chip UI elements for compact, multi-select options. Ideal for filters, tags, or quick selections.

Nested Checkbox Structures – Organizes checkboxes in parent-child relationships. Allows bulk selection and partial (indeterminate) states for better hierarchy control.

Design tip:

• Use checkboxes when users can select multiple options.

• Use radio buttons when only one option is allowed.

States of a Checkbox

A well-designed checkbox should clearly communicate its current state to users.

Common Checkbox States:

In the below illustration, you can see examples of the various states of checkboxes – Unchecked, Checked, Indeterminate, Disabled Uncheck, and Disabled Check:

Unchecked (default): The default state where no selection has been made. It indicates that the option is available but not currently chosen.

Checked: This state shows that the option has been selected by the user. It confirms an active choice and is typically represented with a checkmark.

Hover: Appears when the user moves the cursor over the checkbox. It provides visual feedback to indicate that the element is interactive.

Active / Pressed: Triggered when the user clicks or taps the checkbox. This state gives immediate feedback during the interaction before the final state is applied.

Disabled: Indicates that the checkbox is not interactive and cannot be changed. It's usually dimmed to show that the option is unavailable.

Indeterminate (partially selected): Represents a mixed or partial selection, often used in parent-child relationships. It shows that some, but not all, related options are selected.

How Figma Handles These States (Using Variants)

In Figma, these states are best managed using variants within a component, which allow you to group multiple versions of the same UI element into a single, organized component set.

Instead of creating separate checkbox designs for each state, variants let you define all states, like checked, unchecked, hover, and disabled inside one component. Each state becomes a variant, and you can switch between them using properties such as:

• State = Unchecked

• State = Checked

• State = Disabled

This approach helps you maintain consistency across all checkbox instances and quickly switch states from the properties panel. It also lets you create interactive prototypes by linking variants (for example, click → change to checked), and scale design systems efficiently without duplicating components.

In simple terms, variants act as different “versions” of a component, and Figma allows you to connect these versions together to simulate real UI behavior – just like how a checkbox works in an actual product.

Steps to Create an Interactive Checkbox in Figma

Building interactive checkboxes from scratch is useful for learning. But in real projects, speed and consistency matter.

If you want production-ready checkbox components, check out Shadcn Studio.

It offers clean, scalable UI components inspired by modern design systems, helping designers move faster without sacrificing quality.

Step 1: Design the Checkbox UI

Start by drawing a square (recommended size: 24 × 24 px). Then add a check icon to it for the checked state (recommended size: 20 × 20 px).

Next, add a text label (recommended size: 14 px medium). You can use Auto Layout for proper spacing (recommended spacing: 12).

It should look like this:

Step 2: Create a Component

Convert your checkbox design into a reusable component to ensure consistency and scalability. By adding variants, you can manage different states efficiently within a single component set.

• Select the checkbox design

• Convert it into a Component

• Create variants for different states:

  • Unchecked

  • Checked

  • Indeterminate

  • Disable Check

  • Disable Uncheck

Name the variant properties clearly, for example:

• State = Unchecked

• State = Checked

And so on.

Step 3: Add Interactions Between Variants

Before setting up interactions, it’s important to understand what’s happening here.

In Figma, variants don’t automatically “know” how to switch between each other. You have to define how and when one variant transitions to another. This is done using prototype interactions.

Think of it like this:

• Each variant = a state (Unchecked, Checked, Hover, and so on)

• Interactions = the rules that tell Figma when to switch states

So when a user clicks a checkbox, you're essentially telling Figma: “When this happens (click), change from this state to that state.”

This is what creates the illusion of a working, interactive component, similar to how state changes work in real code.

Now let’s implement it:

• Switch to the Prototype tab

• Select the Unchecked variant

• Add an interaction:

  • Trigger: On click

  • Action: Change to → Checked

Now, repeat the same steps to create the reverse interaction (so the checkbox can toggle back):

• Select the Checked variant

• Add an interaction:

  • Trigger: On click

  • Action: Change to → Unchecked

This two-way connection (Unchecked → Checked and Checked → Unchecked) is what creates the toggle behavior of a checkbox.

Step 4: Test the Checkbox

Preview the component to ensure all interactions and states are working as expected. This step helps verify that the checkbox behaves correctly before using it in your designs.

• Click Present

• Interact with the checkbox

• It should toggle between checked and unchecked states

Checkbox: Various Properties

Before diving into specific properties, let’s understand what Figma variables are and why they matter.

What Are Variables in Figma?

Variables in Figma allow you to store and control values, such as visibility, text, colors, sizes, or states, and reuse them across your components. Similar to how variables behave in code.

Instead of manually updating every instance of a component, variables let you define a value once and control it dynamically.

Think of variables like:

• Switches (Boolean) – Show / hide elements

• Options (Variants) – Change between states like checked or unchecked

• Scalable controls – Adjust sizes, styles, or themes across multiple components

This makes your components more flexible, scalable, and easier to manage, especially in larger design systems.

Why Use Variables for Checkboxes?

Checkboxes often need to adapt based on context, like showing labels, changing sizes, or switching states. Variables help you manage all of this without creating separate components for every variation.

With variables, a single checkbox component can behave in multiple ways.

What You Can Control with Variables

With Figma variables, you can:

Show or Hide Label – Controls whether the label is visible alongside the checkbox. Useful when space is limited or the context is already clear.

State Variant – Defines interaction states like checked, unchecked, hover, and disabled to ensure consistent behaviour and feedback.

Size Variant – Specifies checkbox sizes (small, medium, large) to maintain visual hierarchy across different UI contexts.

Creating Different Variant – Combines state, size, and label visibility into structured variants for scalability and easier management in Figma.

First, let’s learn how to show and hide the label in a checkbox.

1. Turn it into a component

You can convert your checkbox into a reusable component so it can be used consistently across your designs. This also allows you to add properties and variants later.

• Select the entire checkbox, including the checkbox icon and the label text

• Press Cmd / Ctrl + Alt + K to convert it into a Component

• Rename the component to Check Box

2. Create a Boolean property for the label

You can use a Boolean property to control whether the label is shown or hidden. This makes the component more flexible for different use cases.

• Select the main component

• In the Properties section on the right panel, click +

• Choose Boolean

• Name the property Label

• Set the default value to True

This Boolean property controls the label's visibility.

3. Bind the Boolean to the label visibility

You can associate the Boolean property with the label layer to enable dynamic visibility based on the property's value.

• Select only the label text layer

• In the Appearance section of the right panel

• Click the icon that is highlighted in the image with a red square

• Choose Bind to property

• Select the Label Boolean

Now, we’re going to learn how to add properties for size, state, and variants.

We'll create all checkbox designs covering:

• States: Unchecked, Checked, Indeterminate, Disabled check, Disabled uncheck

• Variants: Primary, Secondary, Info, Warning, Destructive

• Sizes: Sm, Md, Lg

Then select all checkbox designs and convert them into components by selecting Create Multiple Components (Cmd / Ctrl + Alt + K)

With all components selected, click Combine as variants.

Select the main component set and rename properties:

• Rename Property 1 to state

• Add a Variant property and rename it to variant

• Add another Variant property and rename it to size

Select all unchecked checkboxes and set:

• state = Unchecked

Same for all state values.

• Select all primary checkboxes and set:

  • variant = Primary

Same for all Variant values.

Then select all medium checkboxes and set:

• size = md

Same for all Size values.

Drag any checkbox instance onto the canvas and verify that State, Variant, and Size properties work correctly:

Best Practices for CheckboxDesign in Figma

Always include clear and readable labels – Clear labels help users quickly understand the purpose of each checkbox and reduce confusion during interaction.

Maintain consistent spacing using Auto Layout – Consistent spacing ensures visual balance and alignment while keeping layouts scalable and structured.

Ensure sufficient colour contrast for accessibility – Proper contrast improves visibility and ensures the checkbox is accessible to all users.

Make the clickable area large enough – A larger clickable area enhances usability, especially on touch devices, and reduces misclicks.

Keep interactions simple and predictable – Simple and predictable interactions help users easily understand behavior and build confidence while using the interface.

Speed Up with Ready-Made Checkbox Components

Building interactive checkboxes from scratch is useful for learning, but in real projects, speed and consistency matter.

If you want production-ready checkbox components, check out Shadcn Studio. It offers clean, scalable UI shadcn components and blocks inspired by modern design systems, helping designers move faster without sacrificing quality.

Why use Shadcn Studio?

• Save hours on repetitive UI work

• Maintain consistent checkbox styles

• Easy to integrate into existing design systems

• Ideal for SaaS products, dashboards, and web apps

You can explore Shadcn Checkbox components on Shadcn Studio. You'll also find animated checkbox components you can try out.

Conclusion

Checkboxes are small but essential UI elements that improve usability and help simulate real user interactions in Figma. By using components, variants, Auto Layout, and variables, designers can create scalable, accessible, and consistent checkbox systems.

Following best practices ensures clarity and better user experience, while ready-made component libraries can speed up workflows and maintain design consistency. Mastering interactive checkboxes ultimately helps designers prototype more effectively and deliver polished, production-ready interfaces.

I have prepared this article with the help of Nirmi Nagori, a passionate Figma designer.

I’ve been taking it one topic at a time. My last piece on system design principles received great feedback, and that encouragement has kept me going.

Lately, I’ve developed a deep interest in UI/UX design – not just out of curiosity, but because so many readers have been requesting a detailed guide. They want one that explains how to learn web design, how to apply it to real-world projects, and how AI is reshaping the field.

Looking back, my journey started six years ago as a software tester. From there, I transitioned into full-stack development, then DevOps. I also explored data analysis, and today I manage a full-time freelancing career alongside my farming work.

One thing I’ve learned along the way is that a strong portfolio can take you to places you’d never imagined.

I’ve had a portfolio for years, but now I’m completely rebuilding it from scratch to make it cleaner, smarter, and more reflective of who I’ve become as a developer.

In this tutorial, I’ll walk you through how I created my new portfolio and show you how you can build yours too – with the right structure, design, and a touch of copywriting magic to make it stand out.

What We’ll Cover:

• What is a Portfolio Website and Why Do You Need One?

• Important Portfolio Website Components

• How to Make Your Portfolio Website Stand Out

• How to use Figma to Design Your Own Portfolio

• Tools for Figma to Code Generation

• Copywriting for Your Portfolio

• Testing Benchmarks for a Portfolio Website

• Hosting Your Portfolio

• How to Use Your Portfolio Effectively

• Q&A

• Final Notes

• Conclusion

What is a Portfolio Website and Why Do You Need One?

A portfolio website is your own space on the internet where you can proudly show your best work, projects, and achievements. Think of it as your digital résumé, but far more visual and personal. Instead of just listing your skills or job titles, it lets people actually see what you’ve built, designed, or created, and this tells your story better than any document can.

It helps employers, clients, or collaborators understand your skills, experience, and creativity at a glance. While it’s beneficial for designers, developers, writers, and photographers, anyone who wants to share their work online can create one, from students and freelancers to business professionals.

Here’s why having a portfolio website matters:

• A collection of your best work: like a gallery where you keep your most impressive projects, artwork, or achievements all in one place.

• Your online identity: It’s your personal brand, showing who you are, what you do, and what makes your work stand out.

• A way to showcase your skills: Through images, videos, and live demos, it give people a clear picture of your talent and creativity.

• An open door for opportunities: People can visit your site, explore your work, and contact you directly for jobs, collaborations, or freelance work.

• A tool for career growth: A well-built portfolio helps you attract clients, get noticed by employers, and open doors to new partnerships.

In simple words, your portfolio website is your professional story told visually – a mix of your work, passion, and personality that helps the world see what you’re capable of.

Important Portfolio Website Components

Now that we know why a portfolio website matters, let’s look at the key components that make it stand out. Each part plays a role in showing who you are, what you can do, and how you can help others.

Since I’m a developer, and the people who have reached out to me are mostly tech enthusiasts, here I’ll give a technical portfolio example. But you can apply the learnings from this guide to build any type of portfolio for any niche/business.

1. Home Page: The First Impression

Your homepage is like the front door to your digital world. It should quickly tell visitors who you are, what you do, and why you’re worth hiring or collaborating with. Keep it clean, simple, and welcoming: just a few strong lines about your skills and what kind of projects you work on.

Tip: Use a short headline like “Hi, I’m Prankur – I build fast, user-friendly web apps.”

2. About Section: Your Story

This is where you make your connection with the audience. Share your journey: how you started, what drives you, and what kind of problems you love solving. Keep it conversational and honest. People love working with real humans, not buzzwords.

Tip: Add a professional but friendly photo (optional) here to make it more personal.

3. Projects / Work Section: Show, Don’t Just Tell

This is the heart of your portfolio. List your best projects – the ones that represent your strongest skills and the kind of work you want to keep doing. Each project should include:

• A short description of what it is.

• The tools or technologies you used.

• The challenge you solved.

• A screenshot or live demo link.

• GitHub link so that people can see how you code

Tip: 3–6 strong projects are better than 15 average ones. If you’re actively contributing to open source, you should add that to your portfolio, too.

4. Case Studies: Tell the Story Behind the Work

Case studies take your projects one step further. They explain your thinking process and how you understood the client’s problem, what steps you took, and what results you achieved. This helps potential employers or clients see your problem-solving skills, not just your designs or code.

Tip: Keep it short and focus on the “before → after” transformation.

5. Skills & Tools Section

List your key technical and creative skills, like HTML, CSS, JavaScript, React, Figma, or AI.
You can group them as:

• Frontend Tools

• Backend Tools

• Design Tools

• AI or Productivity Tools

Tip: Keep the list focused and highlight the tools you actually use, not every tool you’ve ever tried.

6. Testimonials: Social Proof (Optional)

People trust people. Include a few quotes or short testimonials from clients, teammates, or mentors who can vouch for your skills and professionalism. It instantly builds trust and credibility.

If you are just starting, you can add this section later on, as initially you won’t have testimonials. Once you start working, you can politely ask your clients to give their feedback on your work. Just make sure to get their permission to add it to your site.

Tip: Ask for a 2–3 sentence testimonial right after finishing a project.

7. Blog or Articles Section (Optional)

If you write tutorials or share knowledge, add a blog section. It helps you stand out as someone who not only builds but also teaches and communicates ideas clearly. It also boosts SEO and keeps your site fresh.

Tip: Even 2–3 strong, educational articles can make a huge difference.

8. Contact Section: Make It Easy to Reach You

Your contact page should be simple, visible, and welcoming. Include your email, social links (LinkedIn, GitHub, X/Twitter), and maybe a contact form. You can also add a small call to action like:

“Have a project in mind? Let’s connect.”

Tip: Place your contact link in the main menu. Don’t hide it.

9. Résumé / Downloadable CV (Optional)

If you’re job-hunting, include a link to download your latest résumé. You can also add a “quick summary” of your experience, education, and certifications directly on the website.

10. Call to Action (CTA)

Every great portfolio ends with a nudge – a simple next step for your visitor. It could be:

• “Let’s build something amazing together.”

• “Hire me for your next project.”

• “Check out my latest work.”

A clear CTA can help turn a visitor into a lead or follower.

Your portfolio is not just a gallery. It’s a storytelling tool. It tells the world what you can do, how you think, and what makes you unique. Make sure every section serves a purpose, looks clean, and reflects your real personality.

How to Make Your Portfolio Website Stand Out

1. Showcase Your Best Work
Only include your strongest and most relevant projects. Quality matters more than quantity. A few great examples of your work will create a much better impression than a long list of average ones.

2. Use High-Quality Images and Videos
Make sure your work looks clear and professional. Good visuals instantly catch attention and show that you care about presentation. Use clean screenshots, mockups, or short demo videos.

3. Write Clearly and Keep It Short
Explain your work and skills in simple, easy-to-read language. Avoid long paragraphs — most visitors just skim. A few lines that get straight to the point are enough.

4. Tell Your Story
Use your “About Me” section to share your journey — how you started, what you love building, and what kind of work you enjoy most. People connect more with stories than with just titles or resumes.

5. Keep Navigation Simple
Make sure visitors can easily find your projects, contact info, and other key details. A clean menu and clear layout help people focus on your work instead of figuring out where to click.

6. Keep It Updated
Whenever you finish a new project or learn a new skill, add it to your portfolio. An up-to-date portfolio shows that you’re active, learning, and growing in your field.

7. Optimise for SEO
Use the right keywords — the ones people might type when searching for your kind of work (like “frontend developer” or “Figma to code expert”). This helps your site appear in search results. Many AI-powered website builders can assist with basic SEO setup.

How to Use Figma to Design Your Own Portfolio

Designing your own portfolio might sound intimidating at first, but tools like Figma make the process surprisingly intuitive – even if you’re not a professional designer. With Figma, you can visually plan every section of your portfolio before turning it into a live website.

I’ve been learning web design and using Figma for a long time for my client projects. But here, I didn’t build the entire portfolio from scratch. I used Figma’s design inspiration library to get some ideas, and I built the portfolio based on that.

Let’s walk through how you can do that, step by step, using the layout shown below as an example:

1. Start With a Wireframe

Before adding colours or fancy visuals, begin with a simple wireframe. It’s basically a rough sketch of your portfolio layout.

In Figma, you can create frames for each section you want on your site:

• Hero section (your name, title, and call-to-action buttons)

• “What I Do Best” or skills

• Tech stack

• Featured projects

• Blog or article previews

• Services and pricing

• Contact form

This helps you get the structure right before focusing on design. Don’t worry about fonts or images yet – just boxes and text placeholders are enough.

Here’s a sample wireframe I created to visualise how everything should look before moving into Figma. It’s always a good idea to sketch or plan your design on paper first, as it helps you get a clear picture of the layout and refine details like colours, fonts, and spacing early on.

Once the wireframe is ready, you can start adding your preferred colours, typography, and images to bring the design to life. If you want to go a step further and understand how to choose the right colour palettes and fonts, it’s worth exploring design psychology — it plays a huge role in how people perceive your work.

2. Add Visual Hierarchy and Colour

Once your structure feels solid, start adding typography and colour to create a visual hierarchy. This helps the viewer’s eyes know where to focus first.

For example, in the sample design above, the hero section (at the top) instantly grabs attention with bold typography (“I build things for the web”) and a subtle background/hero image.

Use Figma’s colour styles to define a consistent palette. Try using about 3 to 4 shades that complement each other. Keep it minimal and professional. For text, you can choose neutral fonts like Poppins, Inter, or Roboto, which look great on both dark and light themes.

3. Create Components for Reuse

Figma allows you to turn recurring UI elements like buttons, cards, and tags into components. In the portfolio example here, notice how every project card, article preview, and pricing box follows the same layout. By creating a single card component and reusing it, you can easily maintain consistency and update everything in one go later.

In this design, I will be using a blog featuring component multiple times, so instead of designing it again and again, I have made it once, and I am now using it multiple times.

4. Add Your Content and Images

Now that your base design is ready, it’s time to make it personal. You can go ahead and replace placeholders with:

• Your best project screenshots (use mockups if needed),

• Professional headshot or relevant visuals,

• Real content, like your bio, skills, and service details.

Make sure you keep the spacing clean. It ensures all sections stay neatly aligned, even when you adjust or add new elements later.

In this hero section, I have used my name and colour and font of my choice on the left, and you can see the Styles showing all the colours I have used across the project.

5. Create Interactive Prototypes

Before exporting your design, use Figma’s Prototype Mode to link different pages together – for example, make “Projects” in the top navigation scroll smoothly to your project section. This gives you a working demo to test how users will experience your portfolio before you even write a single line of code.

You can also share this prototype with friends or mentors for quick feedback.

6. Export or Hand Off for Development

After testing your design in Prototype Mode when you’re satisfied, the final step is the handoff. Use the Export panel to download all required assets (icons, logos, images) in their correct formats. Then share the Figma file and go to Dev Mode, where you can inspect typography, spacing, sizes, and colour values. These exported assets and inspected specs are what developers use to create the live HTML/CSS code.

Note: The Dev Mode in Figma allows you to inspect CSS and export your stuff easily. Since I don’t have a paid Figma plan, I can’t show inspecting and exporting.

Designing your portfolio in Figma gives you full freedom over layout, colour choices, and how you present your personality. Keep it simple, prioritise usability, and design with clarity. Once the layout is complete and tested, converting it into a functional site becomes straightforward.

You can also use auto layout just by right-clicking on the design section components.

Auto Layout allows designers to define rules for spacing, direction, padding, and alignment of elements. This ensures layouts like buttons, lists, and cards instantly adapt (scale/shrink) to content changes or different screen sizes without manual adjustments.

Once you’ve built and tested your Figma layout, converting it into code becomes the easy part.

Tools for Figma to Code Generation

By the time you’re done with the wireframe and colours, and your portfolio is live on Figma, it’s time to convert that Figma design into code. There are two ways to do so:

• Manual Method

• AI Method

How to Manually Convert Figma Designs to Code

When you design a website or app in Figma, the next big step is turning that design into working code. Traditionally, developers have done this manually: inspecting each element, writing HTML, CSS, and then refining the layout in frameworks like React or Tailwind CSS.

It’s important to understand how this process is normally done by hand. This is the foundation that every frontend developer relies on — and it’s also what helps you evaluate and improve AI-generated code later.

When you design a website or app in Figma, the next step is to translate that visual layout into real HTML, CSS, and JavaScript. Developers usually start by examining each element in the design – its size, spacing, typography, colour, and layout rules – and manually rebuilding it in code.

Exporting Visual Assets

Using Figma’s Export panel, you download only what needs to be recreated visually in code:

• icons

• illustrations

• logos

• images or thumbnails

Most structural elements (buttons, cards, sections, containers) are not exported – you’ll need to build them using HTML and CSS.

Rebuilding the Layout with HTML and CSS

You’ll recreate the page section by section:

• Setting up the HTML structure

• Adding Flexbox or CSS Grid for layouts

• Applying typography exactly as specified in Figma

• Matching spacing using padding, margins, and gaps

• Defining colours using the hex codes from the Figma Inspector

If you’re using Tailwind CSS, this becomes a matter of applying the right utility classes, but the logic remains the same: everything is recreated manually.

Once you have your Figma layout ready, the real work happens inside your code editor (which for me is VS Code). Here’s how developers traditionally rebuild the UI one section at a time.

Set Up Your Project Structure

In VS Code, create your project structure. It’ll look something like this:

project/
 ├─ index.html
 ├─ styles.css
 ├─ /assets
 │    ├─ logo.svg
 │    ├─ hero-image.png
 │    └─ icons/

If you’re using React, this becomes the structure:

src/
 ├─ App.jsx
 ├─ components/
 ├─ index.css
 ├─ assets/

This structure mirrors what you saw in Figma: each major design section becomes a container or component.

Write the HTML Structure Section-by-Section

Now, you’ll look at the Figma frame and convert it to raw markup.

As an example, let’s look at the Hero Section.

Figma frame shows:

• a headline

• subtext

• a button

• an illustration

So your HTML becomes this:

<section class="hero">
  <div class="hero-content">
    <h1>Modern UI for Everyone</h1>
    <p>Beautiful designs built for speed and accessibility.</p>
    <button class="cta-btn">Get Started</button>
  </div>

  <img src="assets/hero-image.png" alt="Hero illustration" class="hero-img" />
</section>

You're essentially mapping each Figma layer onto an HTML element.

Build Layouts Using Flexbox or Grid

In Figma, layouts are visual. In HTML/CSS, you must translate the layout rules.

If Figma shows two columns (text + image), you’ll use Flexbox:

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

If Figma has a 3-card layout, you’ll use Grid:

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

You literally reconstruct the layout from scratch by interpreting the Figma frame’s structure.

Apply Typography Exactly as in Figma

Next, you’ll go to Figma, select a text layer, and check the Inspector:

• Font family: Inter

• Font size: 36px

• Line height: 44px

• Font weight: 700

• Letter spacing: -1%

Then recreate it like this:

.hero h1 {
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

This is why developers need to know their fundamentals: AI tools often miss these fine details.

Recreate Spacing With Padding, Margins, Gaps

In Figma, spacing is visual. But in code, you must calculate and apply it.

Example Figma spacing:

• Padding inside a button: 16px vertical / 32px horizontal

• Margin below a heading: 24px

• Gap between elements: 32px

So you write this code:

.cta-btn {
  padding: 16px 32px;
}

.hero h1 {
  margin-bottom: 24px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

Everything must match the design. And in this case, spacing is what makes UI look polished.

Apply Colours Using Figma Hex Codes

In Figma Inspector:

• Primary Blue → #4A78FF

• Background → #F8FAFC

• Text → #1A1A1A

In your CSS:

body {
  background-color: #F8FAFC;
  color: #1A1A1A;
}

.cta-btn {
  background-color: #4A78FF;
  color: white;
}

You’ll need to manually copy each hex code into CSS, as this is where accuracy matters.

(If Using Tailwind) Apply Utility Classes Instead of Writing CSS

Switching back and forth between your Figma design and a separate CSS file can slow down your whole workflow. Tailwind CSS solves this by letting you write styles right inside your HTML using small, reusable utility classes.

In this section, you’ll learn how to take the exact pixel values you see in the Figma Inspector and turn them into Tailwind utilities.

Step 1: Understand Tailwind’s Spacing Scale

Tailwind doesn’t use raw pixel values. Instead, it uses a consistent spacing scale, usually based on a 4px grid.

Here’s the simple rule: Take the pixel value from Figma, divide by 4, and that number becomes your Tailwind utility.

Example:

Prefixes you should know:

• m = margin

• p = padding

• t, b, l, r = top, bottom, left, right

• x = horizontal (left + right)

• y = vertical (top + bottom)

Step 2: Converting Complex Padding

If your Figma element uses different padding for X and Y, convert each side separately.

Example:

Step 3: Converting Font Sizes

Tailwind doesn’t use pixel sizes for fonts. Instead, it uses semantic names – almost like T-shirt sizes.

Example:

This encourages typography consistency, instead of manually choosing random font sizes.

Why This Method Is So Fast

Once you get used to it, the workflow becomes second nature:

Figma value → divide by 4 → apply Tailwind class

No switching files. No naming CSS classes. No extra stylesheet bloat.

Just fast, direct, design-to-code translation.

Try It Yourself

Open a Figma component (like a button or a card) and check its spacing, padding, and font size in the Inspector. Then convert everything using the simple rules above.

Before long, you’ll be turning Figma designs into clean Tailwind code in seconds.

You still translate Figma to code manually.

Alright, back to our workflow:

Making It Responsive

You check how the design should behave on different screen sizes:

• stacking vs. side-by-side layouts

• font scaling

• spacing adjustments

• collapsing navigation or rearranging grids

This requires writing responsive styles and breakpoints, which AI tools can attempt but rarely perfect.

Why the Manual Way Is Important

Even though it takes more time, this approach teaches fundamentals that AI tools simply can’t replace:

• How spacing systems work

• How components behave in real browsers

• How layout changes across devices

• How to optimise for performance and accessibility

These skills allow you to inspect code intelligently and improve it wherever needed, which is almost always necessary, no matter which tool you use.

How to Use AI Tools to Convert Figma Designs to Code (Optional)

To speed up this process, you can now use AI-powered and automated Figma-to-code tools. These tools analyse the Figma file and instantly generate code that you can integrate into your tech stack.

There are multiple tools available in the market, like V0, Builder.io, and Kombai.

• V0 is A Vercel project focused on fast UI generation, integrated with Next.js workflows.

• Builder.io is visual CMS with Figma integration and a visual editor that can export components for web apps.

• Kombai is an IDE extension that converts selected Figma frames into React/NextJS/React Native code and offers repo-aware features.

Building Live

For demonstration purposes, I’ll be using Kombai, a VS Code extension. And since most of us developers spend a lot of time inside VS Code, it’s the perfect place to test it out.

To install it in VS Code, simply open the Extensions Marketplace, search for 'kombai', click 'Install' and open the extension.

Now, at the agent panel, click on the “Let’s get started” button and sign up or log in with your credentials.

Now it’s time to test the agent for real work. To do so, I’ll be using the Figma file attached to build this portfolio.

A few things to keep in mind as you get going:

• You’ll need to enable WebGL if Figma is not working on your browser.

• You need to know how to copy the Figma file link and how to export the design from Figma.

To copy the Figma design file link, open your Figma design file and simply select your desired design, select copy/paste, and then select copy link to selection. It will copy the complete design file URL.

You can also copy the link of any Figma component and follow the same approach to get the desired outcome.

Open the agent extension in VSCode and select the Figma (icon) agent at the bottom of the agent toolbar. It will open a new pop-up. In it, paste the link you copied to the design file (check the screenshot below). Then you can prompt the agent with what you want it to do with this Figma file.

In my case, I wanted to replicate the same design, so I gave this prompt along with my Figma design link:

“You are an expert UI/UX designer and your task is to build and replicate the entire Figma design in the HTML/CSS/JS code from the attached URL.“

After confirming this, the agent will start working to replicate the same design as you’ve seen in the Figma file.

And here are the results:

Now you have the full picture of both approaches and when to use each one.

Here is the live Project link - FCC FIGMA TO CODE

Here is the GitHub link for the project code - Github Code

Challenges in AI-Generated Code (and Why Developer Oversight Is Essential)

AI tools can speed up the design-to-code process, but the output is rarely production-ready. Most tools struggle with layout precision, accessibility, and responsiveness, especially in real-world designs. You should expect to review and improve various parts of the generated code, such as:

• Spacing and alignment issues: AI may misinterpret padding, margins, or grid spacing, so layouts often need manual adjustment.

• Responsive breakpoints: Most tools generate layouts for a single screen size. You still need to add tablet/mobile breakpoints and test them across devices.

• Semantic HTML: AI tends to use too many <div> elements instead of meaningful tags like <header>, <nav>, <section>, or <button>.

• Accessibility gaps: Missing alt text, improper labels, weak colour contrast choices, and a lack of ARIA(HTML Tags) attributes are common issues.

• Utility class overload (in Tailwind-based code): AI outputs long, repetitive class lists that need cleanup for maintainability.

• Inconsistent component structure: AI may generate components that aren’t reusable or follow naming conventions, so refactoring is often required.

• Tokens and theming: Colours, font sizes, and spacing may not map to design tokens unless manually corrected.

Because of these limitations, AI-generated code should be treated as a starting point, not a final product. You’ll still need to validate the logic, refine the structure, and ensure the final result meets real-world quality standards. AI reduces repetitive work, but you, as the developer, need to ensure the code’s correctness, accessibility, and long-term maintainability.

What I Prefer

The manual method gives you complete control and teaches you the fundamentals, which are essential for understanding how layouts, spacing, and components actually translate into real code.

When you write the HTML, CSS, and component structure yourself, you build a deeper understanding of how layouts, spacing, responsiveness, typography, and accessibility truly work under the hood. These fundamentals are what make you a strong frontend developer, and no automated tool can replace that learning.

AI-assisted design-to-code tools can help with speed – especially in the early stages when you just want a quick starting point. They remove some of the repetitive setup work, but the output almost always needs refinement.

In real projects, the most dependable workflow is a combination of both approaches: Use automation only for the boilerplate, then rely on your own frontend knowledge to clean up, reorganise, and fine-tune the interface so it meets real-world standards.

Personally, I still prefer coding my designs manually because it keeps me connected to the craft and helps me build muscle memory. It’s the only way to fully understand how the design translates into a live, responsive interface and how each decision affects performance and user experience.

AI tools don’t replace frontend developers. They simply support them. They handle repetitive tasks so you can focus on the skills that truly matter: clarity of structure, accessibility, responsive behaviour, and crafting an experience that feels polished and intentional.

Copywriting for Your Portfolio

Now that your portfolio is designed and coded, let’s turn our attention back to what it actually says.

Copywriting is the art of using words to convince people to take a specific action, like buying a product, signing up for a service, or visiting a website. It’s a mix of creativity and marketing, where words are used to sell ideas or products smartly and emotionally.

A copywriter writes many types of content, from sales pages, website text, and social media posts to ad scripts and emails. The goal is simple: to make people take action.

So what makes copywriting effective?

• Knowing your audience: A good copywriter understands what people need, what problems they face, and what motivates them.

• Using persuasive words: Words that spark emotions and make readers want to act.

• Clarity and impact: Keeping the message short, clear, and easy to understand.

• Consistent brand voice: Writing in a tone that matches the brand’s personality — whether it’s fun, professional, or inspiring.

How to Use Copywriting in Your Portfolio

Your portfolio isn’t just about showing your work – it’s about telling your story in a way that connects with people. That’s where copywriting comes in. Good copy turns your portfolio from a plain showcase into something that feels personal, clear, and convincing.

Here’s how you can use copywriting effectively while building your portfolio:

1. Start With a Strong Headline

The first line people see should instantly tell them who you are and what you do. For example:

“I build modern, responsive web apps that turn ideas into digital reality.”

Your headline is like your elevator pitch: short, powerful, and clear.

2. Tell Your Story

In the About Me section, don’t just list your skills. You should also tell visitors about your journey. Write about how you got started programming, what you’ve learned along the way, and what drives you. Keep it conversational and real, like you’re talking to a friend.

“I started coding six years ago with simple HTML pages. Today, I design full-stack apps and help startups bring their ideas to life.”

3. Write Benefit-Focused Descriptions

When you show your projects, don’t just describe what you built. Explain why it matters.

Instead of: “I built a task manager app.”
Try: “A simple, clutter-free task manager that helps users stay productive without distractions.”

This small change turns your project into a problem-solving story, not just a tech demo.

4. Add a Call-to-Action (CTA)

Every portfolio should guide visitors toward an action, like contacting you, checking your GitHub, or reading your blog.

Here are some examples:

“Want to collaborate? Let’s build something amazing together.”
“Looking for a developer who writes clean and efficient code? Reach out!”

A clear CTA shows confidence and gives people a direction.

5. Keep It Simple and Authentic

Avoid fancy words or buzzwords. Write like a human, not a brochure. Use simple, clear sentences that sound like your real voice.

Good copywriting is not about being clever – it’s about being clear and honest.

6. Maintain a Consistent Tone

Whether your style is formal or friendly, keep it the same across all pages – home, about, projects, and contact. A consistent tone helps build your personal brand and makes your portfolio feel professional.

Copywriting is the invisible thread that ties your portfolio together. It helps people not just see your work, but feel your story.

Testing Benchmarks for a Portfolio Website

Before your portfolio goes live, it’s important to test it so that you know it looks and works as it’s supposed to. A fast, responsive, and accessible site leaves a strong first impression, and benchmarks help you measure whether it’s up to your standards. And a well-tested site loads faster, ranks better, and gives users (and recruiters) a seamless experience.

Below are the key benchmarks you should always check, along with why they matter.

1. Page Load Time

This is the time it takes for your page to fully load after someone visits it. A fast-loading site feels smooth and professional, while a slow one instantly turns people away.

This matters because most visitors leave if a site takes more than 3 seconds to load. Tools like GTmetrix or Pingdom can help you track and improve page load speed by optimising images and reducing unnecessary scripts.

2. Core Web Vitals (LCP, INP, CLS)

Google uses Core Web Vitals to measure real-world user experience.

• LCP (Largest Contentful Paint): How quickly your main content becomes visible.

• INP (Interaction to Next Paint): How fast your site responds when users interact.

• CLS (Cumulative Layout Shift): How stable your layout is while loading.

These metrics directly affect how users perceive your site and also impact SEO ranking. You can test them on PageSpeed Insights.

3. Mobile Friendliness

Most people will view your portfolio on their phones, so it needs to look and work perfectly on smaller screens.

A mobile-optimised site not only improves user experience but also ranks better on Google’s mobile search results. Use responsive layouts and flexible grids to ensure smooth viewing on all devices.

4. Accessibility Compliance (WCAG)

Accessibility means making your portfolio usable for everyone, including people with disabilities.

This is important because following WCAG standards (like proper colour contrast, keyboard navigation, and alt text for images) shows professionalism and inclusivity. Tools like Lighthouse or WAVE can help you check how your portfolio ranks for key accessibility metrics.

5. SEO Best Practices

SEO isn’t just for businesses. It can also help your personal site appear when someone searches your name or skills.

If you add proper meta tags, structured headings (H1, H2, H3), and descriptive URLs, these features can help recruiters or clients find you more easily. A well-optimised portfolio often performs better on job searches and tech blogs.

6. Responsiveness (Interaction Delay)

Responsiveness measures how quickly your website reacts when users click or scroll. And a laggy interface feels unprofessional and hurts user engagement. By minimising heavy scripts and optimising animations, you ensure smooth, immediate feedback for every action.

7. Security Checks (HTTPS)

Even a simple portfolio needs HTTPS. It builds trust and protects both you and your visitors from data breaches. Browsers like Chrome now flag non-secure sites, so enabling SSL is a must.

8. Resource Size (HTML, CSS, JS, Images)

Heavy resources can slow everything down. Compressing files, minifying CSS/JS, and using next-gen image formats (like WebP) can dramatically improve speed and performance.

9. Browser and Device Compatibility

Not everyone uses Chrome on a laptop. So make sure you test your portfolio across major browsers (Chrome, Firefox, Safari, Edge) and devices (desktop, tablet, mobile). Simulated testing tools like DebugBear or Basemark Web help catch layout issues early.

10. Real User Monitoring (RUM)

Instead of just testing in a lab, RUM captures how real visitors experience your site. This helps you understand performance in real-world scenarios – on different devices, networks, and locations – and adjust your design based on real data.

Hosting Your Portfolio

Now it’s time to push your changes to GitHub and deploy them on a hosting provider of your choice. Hosting services play a crucial role in showcasing your work. Depending on the type of projects you build, here are some of the best free hosting options that I have used so far for my personal and professional projects.

• Vercel – Best for Next.js/React projects, offering seamless deployment inside the Vercel ecosystem.

• GitHub Pages – Great for hosting static websites and personal portfolios.

• Netlify – Ideal for frontend-heavy projects with easy deployment and CI/CD integration.

Your portfolio is ready, and you can share it anywhere with just a link.

How to Use Your Portfolio Effectively

Now that your portfolio is ready, it’s time to use it the right way. Whether you’re applying for a job, pitching to a freelance client, or simply networking with like-minded people, your portfolio is your strongest asset.

Think of it as your digital introduction. It not only shows what you’ve built but also how you think and work. The key is to use it smartly in the right context.

Let’s say you come across a job post or want to reach out directly to a recruiter or a company founder. Instead of just sending a plain résumé, you can make your message stand out by attaching your portfolio link. Here’s an example of how you can do it:

Example email/direct message:

Hi [Hiring Manager/CEO Name],

I’m Prankur, a Full Stack Developer from India with over 6 years of experience building mobile and web applications.

I came across the opening for [Job Title/Role] at your company and believe my skills align perfectly with what you’re looking for.

You can explore my work here: [Portfolio URL]

I’m available to start immediately and excited about the opportunity to contribute to your team and codebase.

Best regards,

Prankur Pandey

This small but professional touch – including your portfolio link in every email, proposal, or LinkedIn message – increases your chances of being noticed. A well-presented portfolio speaks louder than a résumé, and it helps recruiters or clients quickly understand your skills, design sense, and coding depth.

So, don’t just build your portfolio. Use it actively. Share it on job boards, LinkedIn posts, your GitHub bio, or even in casual conversations with potential collaborators. Every share is a new opportunity waiting to unfold.

Q&A

1. Is building a portfolio really important?
Absolutely. Instead of sending out a dozen links to your GitHub, Behance, and LinkedIn, it’s much more effective to combine all your work into one clean, accessible portfolio site. It makes you look organised, professional, and easy to evaluate.

2. Is it worth buying a domain name?
Yes, it is, if you’re serious about your career. Having your own domain (like yourname.dev or yourname.com) gives a personal and professional touch,

But if you’re still learning or just experimenting, it’s fine to start with a free domain. Once you have solid projects to show, investing in your own domain is totally worth it.

3. Can I use AI or no-code tools to build my portfolio?
You can, but if you’re a developer, you should try coding it yourself first. It’s a great way to showcase your creativity and technical control over design and logic. Here’s a simple and straightforward guide to help you get started with that.

Once your design is ready, you can always use AI or no-code tools to speed up the process or automate parts of it. Think of AI as a helper, not a replacement.

4. How can I get AI tools for testing?
It’s easy: visit the official websites of the tools you’re interested in and sign up. Most AI tools offer free trials or limited credits that you can use to explore and test their features based on your workflow and needs.

5. I am just starting. What should I use: AI tools or the Manual Method?
I strongly recommend using the Manual Method as it will help you to understand your craft well, and you will also build muscle memory about a technology and how it works.

6. Which Platform should I use for hosting?
Most of the hosting providers offer a free plan, so you can start with that. Then, when you feel the need to expand your portfolio, switch to a paid plan.

Final Notes

Building a strong portfolio requires time, effort, and attention to detail. But it’s one of the smartest investments you can make in your tech career.

Tools and templates can help speed up the process, but your creativity, skills, and storytelling are what truly make a portfolio stand out. A well-crafted portfolio not only shows what you can build, it reveals how you think and why your work matters.

While you can use design tools, frameworks, or even AI assistance to save time, make sure you understand the basics of design, structure, and usability. The goal isn’t to create something flashy; it’s to produce something clear, professional, and authentic.

Your portfolio is your digital identity, so treat it like your personal brand. Keep refining it as your skills grow and let it evolve alongside your career.

Conclusion

A portfolio isn’t just a website. It’s your story told through your work. It helps employers, clients, and collaborators understand what you do best and why you stand out.

In this article, I’ve shared everything that helped me build and refine my own portfolio, from understanding design structure and copywriting to testing and optimisation benchmarks. My goal is to help you create a portfolio that not only looks great but also opens real opportunities for you.

In my next tutorial, I’ll explore something new for sure.

Design + Creativity+Development + Execution = The Ultimate Developer Stack 🔥

Keep learning, keep building, and most importantly — keep sharing your work.

If you found this article useful, feel free to let me know. I’m always open to learning, collaboration, and new opportunities.

Now it's your turn: what are you building next? Let me know by sending me a DM!

• Follow me on 𝕏: Prankur's 𝕏

• Connect with me on LinkedIn: Prankur's LinkedIn

• Follow me on GitHub: Prankur’s GitHub

• View my Portfolio: Prankur's Portfolio

This comprehensive guide provides actionable strategies and practical methods for developers. It covers the specific steps and considerations needed to bridge the gap between design files and functional code. By following the practices outlined here, you will be able to transform static Figma artboards into high-quality, fully functional Flutter UIs that exactly match the design specifications.

Table of Contents

• Table of Contents

• Prerequisites

• Use the Figma "Inspect" Panel: Your Blueprint for Precision

• Implement a Consistent Spacing & Sizing System: The End of Magic Numbers

• Replicate Typography with Absolute Fidelity: Beyond Basic Fonts

• Deconstruct Layouts with Flutter's Primitives: Column, Row, Stack, and Spacer

• Master BoxDecoration: The Aesthetic Workhorse

• Utilize ClipRRect and Overflow Management: Handling the Intangibles

• Leverage FittedBox and AspectRatio: Maintaining Proportions

• Replicate Opacity and Blending Modes: The Subtle Layers

• Implement Vectors and Icons with Scalability: Sharpness at Any Scale

• Master Componentization and Reusability: Building Scalable UIs

• Scrutinize Interactive States: Buttons, Inputs, and Others

• Cross-Reference and Iterate Continuously: The Verification Loop

• Understand Design System Thinking: Beyond Individual Components

• Embrace Constraints and Responsiveness: Adapting to All Screens

• Handling Assets Efficiently: Images and SVGs

• Accessibility Considerations: Designing for Everyone

• Performance Optimization during Replication

• Version Control and Collaboration: Working with Teams

• Handling Edge Cases and Data Dynamics

• Implement Vectors and Icons with Scalability: Achieving Visual Consistency Across All Resolutions

• Self-Correction and Learning from Mistakes

• Project Overview

• Conclusion

Prerequisites

To effectively follow and implement the strategies outlined in the comprehensive guide for pixel-perfect Figma to Flutter replication, you should ideally possess the following prerequisites:

I. Foundational Programming & Framework Knowledge

1. Dart Programming Language:

   • Core Concepts: Solid understanding of Dart's syntax, data types, variables, control flow (if/else, loops), functions, classes, objects, and asynchronous programming (Futures, async/await).

   • Null Safety: Familiarity with Dart's null safety features.

2. Flutter SDK & Development Environment:

   • Installation & Setup: Flutter SDK correctly installed and configured on your machine.

   • IDE Proficiency: Familiarity with a Flutter-compatible IDE like VS Code or Android Studio, including running/debugging apps, using hot reload/restart.

   • Basic Project Structure: Understanding of a typical Flutter project's directory structure (lib, assets, pubspec.yaml, etc.).

3. Fundamental Flutter Concepts:

   • Widget Tree: A clear understanding of how Flutter's widget tree works, including parent-child relationships and widget composition.

   • StatelessWidget & StatefulWidget: Ability to differentiate and appropriately use StatelessWidget for static UI and StatefulWidget for dynamic/interactive UI.

   • Build Context: Understanding of BuildContext and its role in the widget tree.

II. Essential Figma Knowledge

1. Figma Interface Navigation:

   • Ability to open and navigate Figma files and artboards.

   • Understanding of layers, groups, and frames.

2. Figma "Inspect" Panel Mastery:

   • Crucial: Proficient use of the "Inspect" panel to extract precise values for:

     • Dimensions (width, height)

     • Spacing (padding, margin, gap between elements)

     • Colors (hex codes, RGB, opacity)

     • Typography (font family, weight, size, line height, letter spacing)

     • Borders (radius, width, color)

     • Shadows (offset, blur, spread, color, opacity)

     • Gradients (colors, stops, angle)

   • Understanding Auto Layout: Basic comprehension of how Auto Layout works in Figma, as it often dictates Flutter's Column/Row and Spacer/Expanded usage.

3. Figma Asset Export:

   • Knowledge of how to select and export various assets from Figma (images, SVGs) in the correct formats and resolutions.

III. General Development Practices (Highly Recommended):

1. Version Control (Git):

   • Basic understanding of Git commands (clone, add, commit, push, pull, branch). This is essential for collaborative development and managing code changes.

2. Debugging Skills:

   • Ability to use your IDE's debugger to inspect widget trees, variable values, and diagnose issues.

   • Familiarity with Flutter DevTools for UI inspection and performance profiling.

3. Problem-Solving:

   • A logical approach to breaking down complex problems into smaller, manageable parts.

   • Patience and persistence in troubleshooting visual discrepancies.

Use the Figma "Inspect" Panel: Your Blueprint for Precision

The "Inspect" panel in Figma is your single most valuable resource. Before you write a single line of code, spend significant time dissecting every element here. Think of it as your precise blueprint.

• Exact Dimensions: Don't approximate. Note down exact width and height values, even if they have decimals (for example, 123.45px). Flutter's double values perfectly accommodate this precision.

• Granular Spacing: Examine margin and padding from all four sides. Are they uniform, or is there asymmetry? This dictates whether you use EdgeInsets.all(), EdgeInsets.symmetric(), or the more specific EdgeInsets.fromLTRB().

• Positioning Logic: Understand if an element is absolutely positioned or part of an Auto Layout frame. This crucial distinction determines whether you'll employ Positioned widgets within a Stack or rely on Column/Row with mainAxisAlignment and crossAxisAlignment.

• Typographical Deep Dive: Extract the exact font family, weight (for example, "Inter Medium," "Inter Bold"), size, line height, letter spacing, and color. Every one of these properties has a direct counterpart in Flutter's TextStyle.

• Color Codes: Copy the hex codes exactly. Always use Color(0xFFRRGGBB) in Flutter to ensure exact color matching, including the alpha channel if specified.

• Borders & Shadows: Extract border radius, color, width, and for shadows, the x/y offset, blur, spread, and color. These translate directly to BoxDecoration and BoxShadow properties.

• Gradients: If a gradient is present, meticulously note its angle, the precise colors involved, and their respective stops. Flutter's LinearGradient or RadialGradient will be your tools here.

Implement a Consistent Spacing & Sizing System: The End of Magic Numbers

Randomly hardcoding 16.0, 8.0, or 24.0 throughout your codebase is a recipe for inconsistency and maintenance headaches. Establish a design system for spacing and sizing.

• Identify the Base Unit: Figma designs often implicitly use a base spacing unit (for example, all paddings are multiples of 4 or 8 pixels). Identify this consistent increment.

• Centralized Constants: Create a dedicated file, perhaps lib/utils/app_dimensions.dart, to store your spacing and sizing variables.

    // lib/utils/app_dimensions.dart
    class AppDimensions {
      static const double spacingSmall = 8.0;
      static const double spacingMedium = 16.0;
      static const double spacingLarge = 24.0;
      static const double iconSizeMedium = 24.0;
      // ... and so on for all consistent measurements
    }
  

• Consistent Usage: Always refer to these constants in your widgets:

    Padding(
      padding: const EdgeInsets.all(AppDimensions.spacingMedium),
      child: // ...
    ),
    SizedBox(width: AppDimensions.spacingSmall),
  

• Benefit: This approach not only ensures consistent visual rhythm but also simplifies global design adjustments.

Replicate Typography with Absolute Fidelity: Beyond Basic Fonts

Text is a cornerstone of UI design. Achieving pixel-perfect typography means going beyond just selecting the right font family.

• Custom Font Integration: If your Figma design uses custom fonts, you must correctly add them to your pubspec.yaml and ensure they load properly in your Flutter app.

• Precise Font Weights: Distinguish meticulously between FontWeight.w400 (Regular), w500 (Medium), w600 (SemiBold), w700 (Bold), and so on. The Figma inspect panel will provide the exact weight.

• fontSize Accuracy: Use the exact pixel size from Figma for your fontSize property in TextStyle.

• Line Height (height): This is paramount for vertical text spacing. Figma's "Line Height" property, often expressed as a percentage or pixel value, needs conversion. If Figma states 24px line height for a 16px font size, your TextStyle height property should be 24 / 16 = 1.5.

• letterSpacing: Directly apply the letter spacing value from Figma (which is often in pixels and translates directly to Flutter's letterSpacing property).

• textBaseline (Advanced): For very specific multi-font or icon-with-text alignments, you might occasionally need to fine-tune textBaseline to match Figma's visual precision.

Deconstruct Layouts with Flutter's Primitives: Column, Row, Stack, and Spacer

Flutter's declarative layout system offers powerful primitives. Learning to map Figma's visual arrangements to these widgets is key.

• Primary Flow: Determine if the main flow of elements is horizontal (Row) or vertical (Column).

• Overlapping Elements (Stack): If elements are layered or positioned on top of each other in Figma, a Stack widget combined with Positioned children is the correct approach. Do not force overlapping elements into Column/Row with complex negative margins or paddings.

• Content Distribution:

  • mainAxisAlignment: Use this to distribute children along the main axis of a Row or Column (for example, start, center, end, spaceBetween, spaceAround, spaceEvenly).

  • crossAxisAlignment: Use this to align children along the cross axis (for example, start, center, end, stretch, baseline).

• Flexible Spacing (Spacer): Replicate Figma's "stretch" or "fill available space" auto-layout behaviors using Spacer() widgets within Row or Column.

• Adaptive Sizing (Expanded, Flexible): When elements need to take up remaining space or be constrained within a certain proportion, Expanded and Flexible are essential. Mimic Figma's "Fill Container" or "Fixed Width" behaviors precisely.

Master BoxDecoration: The Aesthetic Workhorse

BoxDecoration is your primary tool for replicating the visual aesthetics of containers in Figma, including backgrounds, borders, shadows, and gradients.

• color: The background color of the container, directly from Figma's hex code.

• borderRadius: Match Figma's exact corner radii. Use BorderRadius.circular() for uniform corners, BorderRadius.only() for specific corners, or BorderRadius.all(Radius.elliptical(x, y)) for more complex shapes.

• border: Replicate border styles using Border.all(color: ..., width: ...) or more specific options like Border.symmetric() or BorderDirectional() if individual sides have different styles.

• boxShadow: This is where minute details truly matter. Extract every value:

    boxShadow: [
      BoxShadow(
        color: Color(0x33000000), // Exact color, including opacity (alpha channel)
        offset: Offset(0, 4),      // Exact X and Y offset
        blurRadius: 8,             // Exact blur radius
        spreadRadius: 0,           // Exact spread radius (often 0, but always verify)
      ),
    ],
  

• gradient: Precisely translate linear or radial gradients:

    gradient: LinearGradient(
      begin: Alignment.topLeft, // Or specific angles derived from Figma
      end: Alignment.bottomRight,
      colors: [Color(0xFF00FF00), Color(0xFF0000FF)], // Exact colors
      stops: [0.0, 1.0], // Exact color stop positions
    ),
  

Utilize ClipRRect and Overflow Management: Handling the Intangibles

Sometimes, elements in Figma might appear to "spill out" or be precisely cropped. Understanding Flutter's clipping and overflow behavior is critical.

• ClipRRect for Rounded Corners: If a child widget's content needs to be clipped to a parent's rounded corners (for example, an image within a card), wrap the child in ClipRRect. Don't solely rely on the parent's BoxDecoration, especially in complex hierarchies.

• Overflow Behavior (OverflowBox): Figma designs might show elements extending beyond a frame's boundaries. By default, Column/Row clip content (overflow: Clip.hardEdge). If you need content to be visible outside its immediate parent, you might need a Stack or explicitly manage overflow, potentially using an OverflowBox for specific scenarios.

• Extended Shadows: If a shadow in Figma extends significantly beyond its element, ensure your BoxShadow spreadRadius and offset values are accurate. Also, confirm that the parent container allows for this visual extension (for example, it doesn't have clipBehavior: Clip.hardEdge if clipping is not desired).

Leverage FittedBox and AspectRatio: Maintaining Proportions

Images and content blocks often need to scale proportionally or fit within specific areas. These widgets are indispensable for responsive design.

• FittedBox: Excellent for ensuring a child widget (like an icon or text block) scales to fit its parent, while maintaining its original aspect ratio. Carefully consider the fit properties like contain, cover, fill, and scaleDown to match Figma's behavior.

• AspectRatio: Crucial for images, videos, or any container where the ratio of width to height must be maintained regardless of the available screen space.

    AspectRatio(
      aspectRatio: 16 / 9, // Derived directly from Figma's image dimensions
      child: Image.network('...'),
    ),
  

• Smart Image Sizing: Avoid setting fixed width and height on Image.network or Image.asset unless the design explicitly dictates a static size. Instead, think about how the image scales and fills its container in Figma.

Replicate Opacity and Blending Modes: The Subtle Layers

Subtle effects often define the "feel" of a design. Don't overlook transparency and blending.

• Opacity Widget: Use this widget for general element transparency.

• Alpha Channel in Colors: For background colors, borders, or text colors with transparency, always include the alpha channel in your hex code (for example, 0x80RRGGBB for 50% opacity).

• ColorFiltered or ShaderMask (Advanced Blending): While less common for everyday designs, if Figma utilizes complex blending modes (for example, "Multiply," "Screen," "Overlay"), you'll need to explore ColorFiltered with its blendMode property or, for more advanced custom effects, ShaderMask. Look for subtle color interactions where one visual layer directly affects another.

Implement Vectors and Icons with Scalability: Sharpness at Any Scale

Rasterizing icons or complex vector shapes is a common mistake that leads to blurriness on different screen densities. Embrace vector graphics.

• SVG Icons: Always export icons from Figma as SVGs. Leverage a library like flutter_svg to render them in your Flutter app, ensuring crispness and scalability across all device resolutions.

• CustomPaint for Unique Shapes: For highly unique, non-standard shapes, illustrations, or complex dividers, CustomPainter is your ultimate tool. This requires translating Figma's vector paths (Bezier curves, lines) into Flutter's Path object. This is the epitome of "deep attention to detail" for custom graphics.

• Icon Fonts: For standard icon sets (for example, Material Icons, Font Awesome), use Flutter's built-in Icon widget or import the specific icon font family into your pubspec.yaml and reference it in your Icon widget.

Master Componentization and Reusability: Building Scalable UIs

Figma's components are not just for design, they're a direct hint at how to structure your Flutter code.

• Identify Figma Components: Every button, card, input field, or navigation bar that's a component in Figma should ideally be a reusable StatelessWidget or StatefulWidget in Flutter.

• Prop-Based Customization: Design your Flutter components to accept parameters (props) for text, colors, icons, and interactive behaviors, just like Figma components have variants or properties.

• Theme Integration: Leverage Flutter's ThemeData to define global styles for colors, typography, and widget behaviors. This mirrors Figma's design tokens and ensures consistency across your app.

• Shared Styles: Create classes or constants for frequently used TextStyle or BoxDecoration to centralize your design language.

Scrutinize Interactive States: Buttons, Inputs, and Others

Design isn't static. Replicating interactive states is a critical, often overlooked, detail.

• Hover, Press, Focus: Figma designs often include states for buttons (hover, pressed), input fields (focused, error), and other interactive elements. You must implement these in Flutter using GestureDetector, InkWell, MaterialButton, TextFormField, and so on, and manage their state visually.

• Animations: If Figma showcases micro-interactions or transitions, plan how to replicate them using AnimatedContainer, Hero animations, PageTransitionsBuilder, or custom AnimationController.

• Disabled States: Ensure that disabled buttons or input fields are visually distinct and match their Figma counterparts in color, opacity, and cursor changes.

Cross-Reference and Iterate Continuously: The Verification Loop

Replication is not a one-time task, it's an iterative process of comparison and refinement.

• Side-by-Side Comparison: Always have your Flutter app running on a device or emulator right next to your Figma design. Ideally, take screenshots of your app and overlay them on the Figma design to spot discrepancies.

• Pixel-by-Pixel Scan: Literally zoom into both the Figma design and your running Flutter app. Look for:

  • Off-by-One Errors: A single pixel difference in padding, border, or spacing.

  • Subtle Color Shifts: Are the colors exactly the same? Account for monitor calibration, but strive for hex code matching.

  • Font Rendering Nuances: Sometimes font rendering can subtly vary across platforms or Flutter's text engine. Adjust letterSpacing or height slightly if needed to achieve visual parity.

  • Shadow Fidelity: Are the shadows exactly as soft/hard, diffuse, and offset as in Figma?

  • Alignment Precision: Even a tiny misalignment of text baselines or icon centers must be corrected.

• Automated Tools (If Applicable): While manual inspection is paramount, some plugins or third-party tools can assist in comparing Flutter UI with Figma, offering a quick initial check.

• Peer Review: A fresh pair of eyes from another developer can often spot details you've become blind to.

Understand Design System Thinking: Beyond Individual Components

Why it Matters: Figma files often represent a living design system. Understanding this philosophy helps you build a more robust and maintainable Flutter app.

Actionable Advice:

• Design Tokens: Recognize how Figma uses "design tokens" (variables for colors, typography, spacing, shadows). Translate these directly into Flutter's ThemeData, custom Color and TextStyle constants, and your AppDimensions class.

• Component Libraries: Think of your Flutter widgets as a direct extension of the Figma component library. Each component in Figma should ideally correspond to a well-defined, reusable Flutter widget.

• Naming Conventions: Adopt consistent naming conventions in your code that mirror Figma's (for example, primaryButton, headline1TextStyle). This creates a shared language between designers and developers.

Embrace Constraints and Responsiveness: Adapting to All Screens

Why it Matters: Figma designs are often fixed at a certain width (for example, 375px for mobile). Your Flutter app must be responsive and adapt gracefully to various screen sizes, orientations, and device types.

Actionable Advice:

• Figma Constraints: Pay close attention to how elements are constrained in Figma (left/right, top/bottom, center, scale). These directly inform your use of Flexible, Expanded, Align, Positioned, and FractionallySizedBox in Flutter.

• MediaQuery: Use MediaQuery.of(context).size to get the current screen dimensions and adapt layouts accordingly. Avoid fixed pixel widths/heights for entire screens.

• Layout Builders (LayoutBuilder, OrientationBuilder): For more complex responsive layouts, use LayoutBuilder to get the available constraints of a parent widget and adjust children based on that. OrientationBuilder helps adapt to portrait vs. landscape modes.

• Relative Units: Where possible, think in terms of percentages or fractions (FractionallySizedBox) rather than absolute pixel values for spacing and sizing that needs to scale.

Handling Assets Efficiently: Images and SVGs

Why it Matters: Proper asset management is crucial for performance and scalability.

Actionable Advice:

• Export Formats: Discuss with designers the best export formats. For icons and simple illustrations, SVGs are king (flutter_svg library). For complex photos, PNG or WebP (with proper compression) are often preferred.

• Resolution: For raster images (PNG, JPG), ensure designers export assets at 2x and 3x resolutions, and place them in assets/images/2.0x/ and assets/images/3.0x/ directories respectively, so Flutter automatically picks the correct one for the device's pixel density.

• Asset Bundling: Declare all your assets in pubspec.yaml under the assets: section.

• Image Caching: For network images, consider using cached_network_image to improve performance and user experience.

Accessibility Considerations: Designing for Everyone

Why it Matters: A pixel-perfect replica isn't truly complete if it's not accessible. Figma designs should ideally include accessibility annotations, but as a developer, you're the last line of defense.

Actionable Advice:

• Semantic Widgets: Use Flutter's semantic widgets whenever possible (for example, ElevatedButton instead of a custom Container with a GestureDetector). These widgets often have built-in accessibility features.

• Meaningful Labels: Provide semanticsLabel for icons and images that convey information to screen readers.

• Color Contrast: While primarily a design responsibility, double-check color contrast ratios, especially for text, against WCAG guidelines. If the design is failing, flag it.

• Tap Targets: Ensure interactive elements have sufficiently large tap targets (minimum 48x48 logical pixels) even if the visual element is smaller, using minWidth on buttons or Padding around Icons.

Performance Optimization during Replication

Why it Matters: A beautiful UI is useless if it's janky. Code-level decisions impact performance.

Actionable Advice:

• const Widgets: Use const constructor for widgets whenever possible. This tells Flutter that the widget can be reused without rebuilding, significantly improving performance. This is a common missed opportunity.

• RepaintBoundary: For complex, static parts of your UI that don't change often but have many children or custom painting, consider wrapping them in a RepaintBoundary to prevent unnecessary repaints of their children.

• Avoid Deep Nesting: While Flutter's widget tree is deep, excessively deep nesting can sometimes lead to performance issues. Try to flatten your widget tree where logical (for example, using Wrap instead of many nested Rows for flow layouts).

• Profile Your App: Use Flutter DevTools's Performance tab to identify UI flaws and memory leaks early in the development process.

Version Control and Collaboration: Working with Teams

Why it Matters: UI development is rarely a solo endeavor. Effective team collaboration is essential.

Actionable Advice:

• Git Best Practices: Use Git for version control. Create feature branches for specific UI screens or components. Commit frequently with descriptive messages.

• Code Reviews: Get your UI code reviewed by peers. They can spot missed details, potential performance issues, or suggest better widget usage.

• Communication with Designers: Maintain an open channel of communication. If a Figma detail is unclear, ask. If a replication is proving difficult, discuss alternatives. Use tools like Slack, Discord, or project management platforms to share progress and clarify requirements.

• Figma Plugins/Integrations: Explore Figma plugins that might aid developers (for example, extracting CSS/Flutter code snippets, though often these are just starting points).

Handling Edge Cases and Data Dynamics

Why it Matters: Designs often show ideal states. Real-world apps have varying data, empty states, and loading states.

Actionable Advice:

• Empty States: Replicate any "empty state" designs from Figma (for example, empty shopping cart, no search results).

• Loading States: How does the UI look when data is being fetched (for example, skeletons, loading spinners)?

• Error States: What happens if an API call fails or input validation errors occur? Ensure these are designed and replicated.

• Dynamic Content: Consider how varying text lengths (short vs. long names), image aspect ratios from real data, or lists with many/few items will affect your layout. Test with diverse data.

Implement Vectors and Icons with Scalability: Achieving Visual Consistency Across All Resolutions

Rasterizing icons or complex vector shapes is a common mistake that leads to blurriness on different screen densities. Embrace vector graphics and ensure you're using the exact icons specified in the design.

• Exact Icon Source Verification:

  • Figma Inspect Panel: For each icon, meticulously check the "Inspect" panel in Figma. Does it indicate a specific icon font (for example, Material Icons, Font Awesome), a custom SVG, or a raster image?

  • Design System Documentation: Consult the design system documentation (if available) for the prescribed icon set and how they should be implemented.

• SVG Icons (Preferred for Custom Icons):

  • Export from Figma: Always export custom or unique icons from Figma as SVGs. This format ensures they scale without pixelation.

  • Flutter Integration: Leverage the flutter_svg package (add flutter_svg: ^x.x.x to your pubspec.yaml).

      import 'package:flutter_svg/flutter_svg.dart';
      // ...
      SvgPicture.asset(
        'assets/icons/my_custom_icon.svg',
        width: 24.0, // Match Figma's exact size for initial layout
        height: 24.0,
        colorFilter: ColorFilter.mode(Colors.black, BlendMode.srcIn), // Match icon color if needed
      );
    

• Icon Fonts (Preferred for Standard Sets):

  • Identify the Font: If Figma uses a standard icon font like Material Icons, Cupertino Icons, or Font Awesome, ensure you're using the correct one.

  • Material/Cupertino Icons: For built-in Flutter icons, simply use the Icon widget with the appropriate constant:

      Icon(
        Icons.arrow_back,
        size: 24.0, // Match Figma's exact size
        color: Colors.blue, // Match Figma's exact color
      );
    

  • Custom Icon Fonts (for example, Font Awesome, custom brand icons):

    1. Obtain Font Files: Get the .ttf font file(s) from your designer or the icon font provider.

    2. Add to pubspec.yaml:

        flutter:
          fonts:
            - family: MyCustomIcons
              fonts:
                - asset: assets/fonts/MyCustomIcons.ttf
       

    3. Reference in Code: Create a static const IconData class or use the direct Icon constructor:

        import 'package:flutter/material.dart';
       
        class MyCustomIcons {
          MyCustomIcons._(); // Private constructor
       
          static const IconData home = IconData(0xe900, fontFamily: 'MyCustomIcons');
          static const IconData settings = IconData(0xe901, fontFamily: 'MyCustomIcons');
          // ... map other icons using their Unicode code points from the font
        }
       
        // Usage:
        Icon(MyCustomIcons.home, size: 24.0, color: Colors.red);
       

• CustomPaint (For Complex, Unique Shapes):

  • Vector Path Translation: If the icon is a highly custom, unique illustration that can't be easily exported as a simple SVG or is part of a larger complex graphic, you might need to translate its vector paths from Figma into a Path object using CustomPainter. This is the most granular level of icon replication.

• Avoid Rasterized Icons: Unless an icon is inherently a photograph or complex raster image, never export icons as PNG or JPG as they will pixelate when scaled or viewed on high-density screens.

Self-Correction and Learning from Mistakes

Why it Matters: The best way to improve is to reflect on what went wrong and why.

Actionable Advice:

• Document Challenges: When you encounter a particularly tricky replication, document the problem, the Figma details, and how you eventually solved it. This builds your knowledge base.

• Refactor Regularly: As you learn new Flutter techniques or discover more efficient ways to structure your UI, don't be afraid to refactor existing code to apply these improvements.

• Stay Updated: Flutter and Figma are constantly evolving. Keep an eye on new features, widgets, and best practices that can make your replication process smoother.

To bridge the gap between theory and practice, we’ll build a complete Flutter application that replicates the three distinct UI designs shown below. I got this image from Envato. This project isn't just about copying, it's a practical demonstration of every principle we've discussed, from dissecting Figma's "Inspect" panel values to implementing a robust, scalable, and pixel-perfect component structure.

What we’ll build:

1. A Smart Home Dashboard: Focusing on layout, BoxDecoration, and clean information hierarchy.

2. A Music Player UI: Highlighting the use of Stack for complex overlapping layouts and custom list items.

3. An Apartment Booking App: Demonstrating PageView for creating interactive carousels and a custom bottom navigation bar with a FloatingActionButton.

This hands-on example will solidify your understanding and serve as a reference for your own projects. Let's dive into the code.

Project Overview

This project is built following the core principles of a scalable and maintainable Flutter application. We are not just replicating the UI, we are architecting it correctly.

Guide:

1. Componentization: Every logical piece of the UI (a header, a card, a button) is isolated into its own widget file. This makes the code readable, reusable, and easy to test.

2. Separation of Concerns: "Screen" files are responsible for the overall layout and state management. "Widget" files are responsible only for their own appearance and internal logic.

3. Centralized Design System: All colors, dimensions, and text styles are defined in central utility files (utils/), mirroring the concept of "Design Tokens" in Figma.

Final Project Directory Structure

This is the clean, organized file structure we will build. It is the professional standard for Flutter projects.

lib/
├── main.dart
|
├── models/
│   └── track_model.dart
|
├── screens/
│   ├── home_dashboard_screen.dart
│   ├── smart_home_screen.dart
│   ├── music_player_screen.dart
│   └── apartment_booking_screen.dart
|
├── utils/
│   ├── app_colors.dart
│   ├── app_dimensions.dart
│   └── app_styles.dart
|
└── widgets/
    ├── app_mockup_frame.dart
    ├── smart_home/
    │   ├── power_usage_card.dart
    │   ├── remote_access_card.dart
    │   ├── room_card.dart
    │   └── smart_home_header.dart
    ├── music_player/
    │   ├── artist_card.dart
    │   ├── music_player_header.dart
    │   ├── track_list.dart
    │   └── track_list_item.dart
    └── apartment_booking/
        ├── apartment_card.dart
        ├── apartment_carousel.dart
        ├── booking_bottom_nav.dart
        ├── booking_header.dart
        └── booking_search.dart

Step-by-Step Code Implementation

Here is the complete code for each file, with explanations.

1. pubspec.yaml

First, ensure your pubspec.yaml includes the google_fonts package to match the typography.

name: figma_replication_project
description: A new Flutter project.
publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: '>=3.0.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^6.1.0 # For high-quality, custom fonts

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true

2. Utilities (lib/utils/)

This directory centralizes our design system, perfectly demonstrating the "Design Tokens" and "Consistent Spacing" principles from your article.

lib/utils/app_colors.dart

import 'package:flutter/material.dart';

// Centralizes all application colors for consistency and easy theming.
class AppColors {
  static const Color background = Color(0xFFFFD1B5);
  static const Color primaryBlue = Color(0xFF3D82F8);
  static const Color lightBlue = Color(0xFFD2E2FF);
  static const Color textDark = Color(0xFF2E3A59);
  static const Color textLight = Color(0xFF8F9BB3);
  static const Color cardBackground = Colors.white;
}

lib/utils/app_dimensions.dart

// Centralizes all spacing and sizing values to maintain a consistent visual rhythm.
class AppDimensions {
  static const double spacingXXSmall = 4.0;
  static const double spacingXSmall = 8.0;
  static const double spacingSmall = 12.0;
  static const double spacingMedium = 16.0;
  static const double spacingLarge = 24.0;
  static const double spacingXLarge = 32.0;

  static const double borderRadiusSmall = 8.0;
  static const double borderRadiusMedium = 16.0;
  static const double borderRadiusLarge = 24.0;

  static const double mockupWidth = 320.0;
  static const double mockupHeight = 680.0;
}

lib/utils/app_styles.dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'app_colors.dart';
import 'app_dimensions.dart';

// Centralizes text styles and common decoration elements like shadows.
// This ensures absolute fidelity to the Figma typography specs.
class AppStyles {
  // Base text style using a specific Google Font for a modern look.
  static TextStyle get _baseTextStyle => GoogleFonts.poppins(
        color: AppColors.textDark,
      );

  // Specific, named text styles that correspond to the Figma design.
  static TextStyle h1 = _baseTextStyle.copyWith(fontSize: 22, fontWeight: FontWeight.w600);
  static TextStyle h2 = _baseTextStyle.copyWith(fontSize: 18, fontWeight: FontWeight.w600);
  static TextStyle bodyText = _baseTextStyle.copyWith(fontSize: 14, fontWeight: FontWeight.w500);
  static TextStyle subtitle = _baseTextStyle.copyWith(fontSize: 12, color: AppColors.textLight, fontWeight: FontWeight.normal);
  static TextStyle buttonText = _baseTextStyle.copyWith(fontSize: 14, color: Colors.white, fontWeight: FontWeight.w600);

  // Reusable box shadow, matching the Figma properties exactly.
  static BoxShadow cardShadow = BoxShadow(
    color: AppColors.primaryBlue.withOpacity(0.1),
    blurRadius: 20,
    offset: const Offset(0, 10),
  );
}

3. Model (lib/models/)

This holds the data structure for our application's content, separating data from UI.

lib/models/track_model.dart

// Represents the data structure for a single music track.
class Track {
  final String title;
  final String duration;
  final bool isPlaying;

  Track({required this.title, required this.duration, this.isPlaying = false});
}

// Mock data for the music player screen.
final List<Track> topTracks = [
  Track(title: 'Old Town Road', duration: '3:41'),
  Track(title: 'I Don\'t Care', duration: '4:35', isPlaying: true),
  Track(title: 'Dancing With A Stranger', duration: '3:12'),
  Track(title: 'Sweet But Psycho', duration: '4:07'),
  Track(title: 'If I Can\'t Have You', duration: '4:07'),
];

4. Reusable Widgets (lib/widgets/)

This is the core of our component-based architecture.

Generic Widget

lib/widgets/app_mockup_frame.dart

import 'package:figma_replication_project/utils/app_dimensions.dart';
import 'package:flutter/material.dart';

// A wrapper widget to create the "phone" frame around each UI design.
class AppMockupFrame extends StatelessWidget {
  final Widget child;

  const AppMockupFrame({Key? key, required this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: AppDimensions.mockupWidth,
      height: AppDimensions.mockupHeight,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(AppDimensions.borderRadiusLarge),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.15),
            blurRadius: 30,
            offset: const Offset(0, 10),
          ),
        ],
        border: Border.all(color: Colors.white.withOpacity(0.5), width: 2),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(AppDimensions.borderRadiusLarge - 2),
        child: child,
      ),
    );
  }
}

Smart Home Widgets (lib/widgets/smart_home/)

Each file here is a self-contained component for the Smart Home screen.

lib/widgets/smart_home/smart_home_header.dart

import 'package:flutter/material.dart';
import 'package:figma_replication_project/utils/app_colors.dart';
import 'package:figma_replication_project/utils/app_styles.dart';

class SmartHomeHeader extends StatelessWidget {
  const SmartHomeHeader({Key? key}) : super(key: key);
  // ... (code from previous answer)
}

lib/widgets/smart_home/power_usage_card.dart

import 'package:flutter/material.dart';
import 'package:figma_replication_project/utils/app_colors.dart';
import 'package:figma_replication_project/utils/app_dimensions.dart';
import 'package:figma_replication_project/utils/app_styles.dart';

class PowerUsageCard extends StatelessWidget {
  const PowerUsageCard({Key? key}) : super(key: key);
  // ... (code from previous answer)
}

lib/widgets/smart_home/room_card.dart

import 'package:flutter/material.dart';
import 'package:figma_replication_project/utils/app_dimensions.dart';
import 'package:figma_replication_project/utils/app_styles.dart';

class RoomCard extends StatelessWidget {
  final String roomName;
  final String deviceCount;
  final Color color;
  final Color textColor;

  const RoomCard({
    Key? key,
    required this.roomName,
    required this.deviceCount,
    required this.color,
    required this.textColor,
  }) : super(key: key);
  // ... (code from previous answer)
}

lib/widgets/smart_home/remote_access_card.dart

import 'package:flutter/material.dart';
import 'package:figma_replication_project/utils/app_colors.dart';
import 'package:figma_replication_project/utils/app_dimensions.dart';
import 'package:figma_replication_project/utils/app_styles.dart';

class RemoteAccessCard extends StatelessWidget {
  const RemoteAccessCard({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(
        horizontal: AppDimensions.spacingMedium,
        vertical: AppDimensions.spacingSmall,
      ),
      decoration: BoxDecoration(
        color: AppColors.primaryBlue,
        borderRadius: BorderRadius.circular(AppDimensions.borderRadiusMedium),
      ),
      child: Row(
        children: [
          const Icon(Icons.info_outline, color: Colors.white, size: 20),
          const SizedBox(width: AppDimensions.spacingSmall),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Quick Remote Access',
                    style: AppStyles.bodyText.copyWith(color: Colors.white)),
                Text(
                  'Click here to connect with your phone.',
                  style: AppStyles.subtitle
                      .copyWith(color: Colors.white.withOpacity(0.8), fontSize: 10),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Music Player Widgets (lib/widgets/music_player/)

These widgets are the building blocks for the Music Player UI.

lib/widgets/music_player/music_player_header.dart

import 'package:flutter/material.dart';
import 'package:figma_replication_project/utils/app_colors.dart';
import 'package:figma_replication_project/utils/app_dimensions.dart';

// This widget creates the distinctive blue, curved header.
// It uses SafeArea to ensure content isn't obscured by system UI (like notches).
class MusicPlayerHeader extends StatelessWidget {
  const MusicPlayerHeader({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 260,
      decoration: const BoxDecoration(
        color: AppColors.primaryBlue,
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(50),
          bottomRight: Radius.circular(50),
        ),
      ),
      child: SafeArea(
        bottom: false,
        child: Padding(
          padding: const EdgeInsets.all(AppDimensions.spacingLarge),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Icon(Icons.arrow_back, color: Colors.white),
              Container(
                width: 40,
                height: 40,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: AppColors.lightBlue.withOpacity(0.5),
                  border: Border.all(color: Colors.white, width: 1.5),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

lib/widgets/music_player/artist_card.dart

import 'package:flutter/material.dart';
import 'package:figma_replication_project/utils/app_colors.dart';
import 'package:figma_replication_project/utils/app_dimensions.dart';
import 'package:figma_replication_project/utils/app_styles.dart';

// The floating card that displays artist information.
// It uses the centralized AppStyles.cardShadow for a consistent shadow effect.
class ArtistCard extends StatelessWidget {
  const ArtistCard({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(AppDimensions.spacingMedium),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(AppDimensions.borderRadiusMedium),
        boxShadow: [AppStyles.cardShadow],
      ),
      child: Row(
        children: [
          Container(
            width: 80,
            height: 80,
            decoration: BoxDecoration(
              color: AppColors.lightBlue,
              borderRadius: BorderRadius.circular(AppDimensions.borderRadiusSmall),
            ),
          ),
          const SizedBox(width: AppDimensions.spacingMedium),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('Antonia Berger', style: AppStyles.h2),
              Text('Hip Hop Artist', style: AppStyles.subtitle),
              Text('antonia.com', style: AppStyles.subtitle.copyWith(color: AppColors.primaryBlue)),
            ],
          )
        ],
      ),
    );
  }
}

lib/widgets/music_player/track_list_item.dart

import 'package:flutter/material.dart';
import 'package:figma_replication_project/models/track_model.dart';
import 'package:figma_replication_project/utils/app_colors.dart';
import 'package:figma_replication_project/utils/app_dimensions.dart';
import 'package:figma_replication_project/utils/app_styles.dart';

// Represents a single row in the music track list.
// It conditionally renders its UI based on the `track.isPlaying` property.
class TrackListItem extends StatelessWidget {
  final Track track;
  const TrackListItem({Key? key, required this.track}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: AppDimensions.spacingSmall),
      child: Row(
        children: [
          Container(
            width: 40,
            height: 40,
            decoration: BoxDecoration(
              color: track.isPlaying ? AppColors.primaryBlue : Colors.transparent,
              shape: BoxShape.circle,
              border: Border.all(color: track.isPlaying ? AppColors.primaryBlue : AppColors.textLight.withOpacity(0.5), width: 1.5),
            ),
            child: Icon(
              track.isPlaying ? Icons.pause : Icons.play_arrow,
              color: track.isPlaying ? Colors.white : AppColors.textDark,
              size: 20,
            ),
          ),
          const SizedBox(width: AppDimensions.spacingMedium),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(track.title, style: AppStyles.bodyText),
                if (track.isPlaying)
                  Padding(
                    padding: const EdgeInsets.only(top: 4.0),
                    child: SizedBox(
                      height: 2,
                      child: LinearProgressIndicator(
                        value: 0.4,
                        backgroundColor: AppColors.lightBlue,
                        valueColor: const AlwaysStoppedAnimation<Color>(AppColors.primaryBlue),
                      ),
                    ),
                  ),
              ],
            ),
          ),
          Text(track.duration, style: AppStyles.subtitle),
        ],
      ),
    );
  }
}

lib/widgets/music_player/track_list.dart

import 'package:flutter/material.dart';
import 'package:figma_replication_project/models/track_model.dart';
import 'package:figma_replication_project/utils/app_dimensions.dart';
import 'package:figma_replication_project/utils/app_styles.dart';
import 'package:figma_replication_project/widgets/music_player/track_list_item.dart';

// This widget builds the scrollable list of tracks.
// It maps the mock data from `topTracks` to `TrackListItem` widgets.
class TrackList extends StatelessWidget {
  const TrackList({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.fromLTRB(
        AppDimensions.spacingLarge,
        AppDimensions.spacingLarge,
        AppDimensions.spacingLarge,
        0,
      ),
      children: [
        Text('Top Tracks', style: AppStyles.h2),
        const SizedBox(height: AppDimensions.spacingMedium),
        // Using the spread operator (...) to add all items from the list.
        ...topTracks.map((track) => TrackListItem(track: track)).toList(),
      ],
    );
  }
}

Apartment Booking Widgets (lib/widgets/apartment_booking/)

These widgets are the building blocks for the Apartment Booking UI.

lib/widgets/apartment_booking/booking_header.dart

import 'package:flutter/material.dart';
import 'package:figma_replication_project/utils/app_colors.dart';
import 'package:figma_replication_project/utils/app_dimensions.dart';
import 'package:figma_replication_project/utils/app_styles.dart';

// The header section for the apartment booking screen.
class BookingHeader extends StatelessWidget {
  const BookingHeader({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(
        AppDimensions.spacingLarge,
        AppDimensions.spacingMedium,
        AppDimensions.spacingLarge,
        0,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Icon(Icons.arrow_back, color: AppColors.textDark),
              Container(
                width: 40,
                height: 40,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: AppColors.lightBlue.withOpacity(0.5),
                  border: Border.all(color: AppColors.primaryBlue, width: 1.5),
                ),
              ),
            ],
          ),
          const SizedBox(height: AppDimensions.spacingMedium),
          Text('Discover & book', style: AppStyles.h1),
          Text('unique apartments', style: AppStyles.h1),
        ],
      ),
    );
  }
}

lib/widgets/apartment_booking/booking_search.dart

import 'package:flutter/material.dart';
import 'package:figma_replication_project/utils/app_colors.dart';
import 'package:figma_replication_project/utils/app_dimensions.dart';
import 'package:figma_replication_project/utils/app_styles.dart';

// The search bar component with a suggestion chip and a search button.
class BookingSearch extends StatelessWidget {
  const BookingSearch({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: AppDimensions.spacingLarge),
      child: Row(
        children: [
          Expanded(
            child: Container(
              padding: const EdgeInsets.symmetric(
                horizontal: AppDimensions.spacingMedium,
                vertical: AppDimensions.spacingSmall,
              ),
              decoration: BoxDecoration(
                color: AppColors.primaryBlue,
                borderRadius: BorderRadius.circular(30),
              ),
              child: Center(
                child: Text(
                  'TRY "COPENHAGEN"',
                  style: AppStyles.buttonText.copyWith(fontSize: 12),
                ),
              ),
            ),
          ),
          const SizedBox(width: AppDimensions.spacingSmall),
          Container(
            padding: const EdgeInsets.all(AppDimensions.spacingSmall),
            decoration: const BoxDecoration(
              color: AppColors.primaryBlue,
              shape: BoxShape.circle,
            ),
            child: const Icon(Icons.search, color: Colors.white, size: 24),
          ),
        ],
      ),
    );
  }
}

lib/widgets/apartment_booking/apartment_card.dart

import 'package:flutter/material.dart';
import 'package:figma_replication_project/utils/app_colors.dart';
import 'package:figma_replication_project/utils/app_dimensions.dart';
import 'package:figma_replication_project/utils/app_styles.dart';

// A single card representing an apartment in the carousel.
// It uses a Stack to position the text and the send button.
class ApartmentCard extends StatelessWidget {
  const ApartmentCard({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: AppColors.lightBlue,
        borderRadius: BorderRadius.circular(AppDimensions.borderRadiusLarge),
        boxShadow: [AppStyles.cardShadow],
      ),
      child: Stack(
        children: [
          Positioned(
            left: AppDimensions.spacingMedium,
            bottom: AppDimensions.spacingMedium,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Tidy Minimal', style: AppStyles.h2),
                Text('Berlin, Germany', style: AppStyles.subtitle),
              ],
            ),
          ),
          Positioned(
            right: AppDimensions.spacingMedium,
            bottom: AppDimensions.spacingMedium,
            child: Container(
              padding: const EdgeInsets.all(AppDimensions.spacingSmall),
              decoration: const BoxDecoration(
                color: AppColors.primaryBlue,
                shape: BoxShape.circle,
              ),
              child: const Icon(Icons.send, color: Colors.white, size: 20, semanticLabel: 'Send'),
            ),
          ),
        ],
      ),
    );
  }
}

lib/widgets/apartment_booking/apartment_carousel.dart

import 'package:flutter/material.dart';
import 'package:figma_replication_project/utils/app_dimensions.dart';
import 'package:figma_replication_project/widgets/apartment_booking/apartment_card.dart';

// This widget manages the PageView for the apartment cards.
// It's a StatelessWidget because it receives its state (controller, currentPage)
// from the parent StatefulWidget.
class ApartmentCarousel extends StatelessWidget {
  final PageController pageController;
  final int currentPage;

  const ApartmentCarousel({
    Key? key,
    required this.pageController,
    required this.currentPage,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 320,
      child: PageView.builder(
        controller: pageController,
        itemCount: 3,
        itemBuilder: (context, index) {
          // AnimatedContainer creates the subtle scaling effect when a card is active.
          return AnimatedContainer(
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOut,
            margin: EdgeInsets.only(
              right: AppDimensions.spacingSmall,
              top: currentPage == index ? 0 : 20,
              bottom: currentPage == index ? 20 : 0,
            ),
            child: const ApartmentCard(),
          );
        },
      ),
    );
  }
}

lib/widgets/apartment_booking/booking_bottom_nav.dart

import 'package:flutter/material.dart';
import 'package:figma_replication_project/utils/app_colors.dart';

// The custom bottom navigation bar with a notch for the FloatingActionButton.
class BookingBottomNav extends StatelessWidget {
  const BookingBottomNav({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      shape: const CircularNotchedRectangle(),
      notchMargin: 8.0,
      color: AppColors.cardBackground,
      surfaceTintColor: AppColors.cardBackground,
      elevation: 20,
      shadowColor: Colors.black.withOpacity(0.05),
      child: const Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Icon(Icons.home_outlined, color: AppColors.textLight, size: 28),
          Icon(Icons.search, color: AppColors.textLight, size: 28),
          SizedBox(width: 48), // The placeholder space for the FAB
          Icon(Icons.favorite_border, color: AppColors.textLight, size: 28),
          Icon(Icons.person_outline, color: AppColors.textLight, size: 28),
        ],
      ),
    );
  }
}

5. Screens (lib/screens/)

These files now act as clean, readable blueprints. They compose the smaller widgets to build the final UI.

lib/screens/smart_home_screen.dart

import 'package:flutter/material.dart';
import 'package:figma_replication_project/utils/app_colors.dart';
import 'package:figma_replication_project/utils/app_dimensions.dart';
import 'package:figma_replication_project/widgets/smart_home/power_usage_card.dart';
import 'package:figma_replication_project/widgets/smart_home/remote_access_card.dart';
import 'package:figma_replication_project/widgets/smart_home/room_card.dart';
import 'package:figma_replication_project/widgets/smart_home/smart_home_header.dart';

// This screen composes various "smart_home" widgets to build the UI.
// Notice how readable this is compared to having all the code in one file.
class SmartHomeScreen extends StatelessWidget {
  const SmartHomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.cardBackground,
      body: Padding(
        padding: const EdgeInsets.all(AppDimensions.spacingLarge),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SmartHomeHeader(),
            const SizedBox(height: AppDimensions.spacingXLarge),
            const PowerUsageCard(),
            const SizedBox(height: AppDimensions.spacingLarge),
            const Row(
              children: [
                Expanded(
                  child: RoomCard(
                    roomName: 'Living Room',
                    deviceCount: '9 Active Devices',
                    color: AppColors.lightBlue,
                    textColor: AppColors.textDark,
                  ),
                ),
                SizedBox(width: AppDimensions.spacingMedium),
                Expanded(
                  child: RoomCard(
                    roomName: 'Bathroom',
                    deviceCount: '1 Active Device',
                    color: AppColors.primaryBlue,
                    textColor: Colors.white,
                  ),
                ),
              ],
            ),
            const Spacer(),
            const RemoteAccessCard(),
          ],
        ),
      ),
    );
  }
}

lib/screens/music_player_screen.dart

import 'package:flutter/material.dart';
import 'package:figma_replication_project/utils/app_colors.dart';
import 'package:figma_replication_project/utils/app_dimensions.dart';
import 'package:figma_replication_project/widgets/music_player/artist_card.dart';
import 'package:figma_replication_project/widgets/music_player/music_player_header.dart';
import 'package:figma_replication_project/widgets/music_player/track_list.dart';

// This screen uses a Stack to create the overlapping UI effect,
// a perfect demonstration of the "Deconstruct Layouts with Stack" principle.
class MusicPlayerScreen extends StatelessWidget {
  const MusicPlayerScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.cardBackground,
      body: Stack(
        children: [
          const Positioned.fill(top: 220, child: TrackList()),
          const MusicPlayerHeader(),
          const Positioned(
            top: 120,
            left: AppDimensions.spacingLarge,
            right: AppDimensions.spacingLarge,
            child: ArtistCard(),
          ),
        ],
      ),
    );
  }
}

lib/screens/apartment_booking_screen.dart

import 'package:flutter/material.dart';
import 'package:figma_replication_project/utils/app_colors.dart';
import 'package:figma_replication_project/utils/app_dimensions.dart';
import 'package:figma_replication_project/widgets/apartment_booking/apartment_carousel.dart';
import 'package:figma_replication_project/widgets/apartment_booking/booking_bottom_nav.dart';
import 'package:figma_replication_project/widgets/apartment_booking/booking_header.dart';
import 'package:figma_replication_project/widgets/apartment_booking/booking_search.dart';

// This is a StatefulWidget because it needs to manage the state of the
// PageController and the current active page index for the carousel animation.
class ApartmentBookingScreen extends StatefulWidget {
  const ApartmentBookingScreen({Key? key}) : super(key: key);

  @override
  State<ApartmentBookingScreen> createState() => _ApartmentBookingScreenState();
}

class _ApartmentBookingScreenState extends State<ApartmentBookingScreen> {
  final PageController _pageController = PageController(viewportFraction: 0.85);
  int _currentPage = 0;

  @override
  void initState() {
    super.initState();
    // Listen to page changes to update the UI for the scaling effect.
    _pageController.addListener(() {
      if (_pageController.page?.round() != _currentPage) {
        setState(() {
          _currentPage = _pageController.page!.round();
        });
      }
    });
  }

  @override
  void dispose() {
    _pageController.dispose(); // Always dispose controllers to prevent memory leaks.
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.cardBackground,
      body: SafeArea(
        bottom: false,
        child: Column(
          children: [
            const BookingHeader(),
            const SizedBox(height: AppDimensions.spacingMedium),
            const BookingSearch(),
            const SizedBox(height: AppDimensions.spacingLarge),
            // The carousel is passed the controller and current page state.
            ApartmentCarousel(
              pageController: _pageController,
              currentPage: _currentPage,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        backgroundColor: AppColors.primaryBlue,
        shape: const CircleBorder(),
        elevation: 4.0,
        child: const Icon(Icons.add, color: Colors.white, size: 32),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: const BookingBottomNav(),
    );
  }
}

6. Application Entry Point

Finally, the main.dart and home_dashboard_screen.dart tie everything together.

lib/screens/home_dashboard_screen.dart

import 'package:flutter/material.dart';
import 'package:figma_replication_project/screens/apartment_booking_screen.dart';
import 'package:figma_replication_project/screens/music_player_screen.dart';
import 'package:figma_replication_project/screens/smart_home_screen.dart';
import 'package:figma_replication_project/utils/app_dimensions.dart';
import 'package:figma_replication_project/widgets/app_mockup_frame.dart';

// This is the main screen that displays the three mockups.
// It uses a LayoutBuilder to create a responsive layout, demonstrating
// the "Embrace Constraints and Responsiveness" principle.
class HomeDashboardScreen extends StatelessWidget {
  const HomeDashboardScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: AppDimensions.spacingXLarge),
            child: LayoutBuilder(
              builder: (context, constraints) {
                bool isWide = constraints.maxWidth > (AppDimensions.mockupWidth * 3 + 100);

                // Show in a Row on wide screens, and a Column on narrow screens.
                return isWide
                    ? const Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          AppMockupFrame(child: SmartHomeScreen()),
                          SizedBox(width: AppDimensions.spacingXLarge),
                          AppMockupFrame(child: MusicPlayerScreen()),
                          SizedBox(width: AppDimensions.spacingXLarge),
                          AppMockupFrame(child: ApartmentBookingScreen()),
                        ],
                      )
                    : Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          const AppMockupFrame(child: SmartHomeScreen()),
                          const SizedBox(height: AppDimensions.spacingXLarge),
                          const AppMockupFrame(child: MusicPlayerScreen()),
                          const SizedBox(height: AppDimensions.spacingXLarge),
                          const AppMockupFrame(child: ApartmentBookingScreen()),
                        ],
                      );
              },
            ),
          ),
        ),
      ),
    );
  }
}

lib/main.dart

import 'package:flutter/material.dart';
import 'package:figma_replication_project/screens/home_dashboard_screen.dart';
import 'package:figma_replication_project/utils/app_colors.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Figma to Flutter Replication',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: AppColors.primaryBlue,
        scaffoldBackgroundColor: AppColors.background,
        useMaterial3: true,
      ),
      home: const HomeDashboardScreen(),
    );
  }
}

Conclusion

Replicating Figma designs in Flutter with pixel-perfect accuracy is a skill developed through deliberate practice and an unwavering commitment to detail. It requires more than just understanding Flutter widgets. It demands a deep appreciation for the nuances of design, a systematic approach to breaking down complex layouts, and a relentless pursuit of visual fidelity. By internalizing these practices, you won't just be writing code, you'll be sculpting user interfaces that truly honor the designer's vision.

Penpot designs directly translate to code that meets web standards, facilitating collaboration and hand-off between designers and developers.

This tutorial will walk you through recreating or moving existing Figma components to Penpot. It will include a rundown of the Penpot tool and how to use it, a brief comparison of the two tools, and important resources.

Table of Contents

• How to Recreate Existing Figma Files in Penpot

• Understanding the Penpot User Interface

• Understanding Penpot Layouts

• How to Create and Use Penpot Components

• How to Create Reusable Assets in Penpot

• How to Add and Use Icons in Penpot

• Figma Vs. Penpot - My experience

• Resources and Notes

How to Recreate Existing Figma Files in Penpot

There are two ways to move or recreate existing Codex components from Figma to Penpot: By using the community-supported migration tool or by manually recreating the components and files.

Using the Community-Supported Migration Plugin

You can use this plugin to move your Figma designs to Penpot. It is a straightforward way to migrate from Figma, especially if you have many components.

To do so, add it as a Figma plugin and find the option in the context menu. Then, click on the "Penpot Exporter" option to activate the plugin. The plugin will then create a zip file for your component and download it.

Over in Penpot, in your Projects dashboard, click on the three dots context menu and select "Import Penpot files" to open a file picker window. Click on the zip file downloaded from Figma, and Penpot will create a new project with the same name as the zip file. This new project will contain your Figma component translated to the Penpot environment.

Looking at the new component, you'll notice that the migration plugin correctly picks up any child components and typography variables while keeping things fairly organized. But it does not pick up color variables.

Manually Recreating Figma components

Another way to move Figma components to Penpot is to recreate them manually. While this option is more tedious than the previous one, it gives you fine-tuned control over how the component looks, how the files are organized, and how the assets are carried over.

It is an excellent excuse to spruce up the existing components, especially if there are few. It is also a good exercise for first-time users to grasp Penpot.

To effectively move components using this method, you will need to understand how Penpot works. The following concepts will help make this process more efficient.

Understanding the Penpot User Interface

Penpot's UI is pretty similar to Figma's, except that Penpot defaults to Dark Mode. You have your controls on the right and your files, assets, and layers on the left, with a canvas in the middle.

Both have a toolbar that enables you to interact with the canvas. The toolbars have slightly different icons and names but have the same functionality. Notably, in Penpot, the Frame tool is called Board.

Penpot supports most of Figma's features, except for Design Tokens, which will be added soon.

Understanding Penpot Layouts

Penpot supports Flex and Grid layouts. These layouts allow you to position items precisely and simplify creating fluid designs. For those familiar with CSS Grid and Flex, they work in the same way.

Flex layout allows you to organize the elements within a parent container, like a board or an encompassing shape, across one dimension, width, or height. It enables you to determine the spacing and positioning of the child elements via visual controls with labels on the right side panel.

Grid layouts allow the same controls as Flex layouts but with the added flexibility of simultaneously spanning a child element across both dimensions. This makes Grid layouts quite helpful in creating complex and nuanced designs.

How to Create and Use Penpot Components

Creating a component in Penpot is relatively straightforward. You select the elements that will make up the component, then right-click and click "Create component," turning your selection into a component.

Your new component will be available under the "Assets" tab on the left side panel. To use, drag it onto the canvas.

You can also create copies of the component. By default, the copies are tied to the main component, and any changes to the main will be reflected in all copies. You can override this by detaching the copies from the context menu.

How to Create Reusable Assets in Penpot

Penpot has three asset types: Typography, Colors, and Components, with Penpot design tokens coming very soon. Typography refers to information on font types and weights that make up text styles. Colors enable you to create and sort your repeated colors. Components refer to reusable design pieces and, in this context, include graphical items like icons and images.

To create a color or typography asset, click the "Assets" tab and the plus icon on the relevant accordion item. For color, it will open a color picker. Paste the hex value in the appropriate place, then save it. The color will show up in the accordion drop-down. You can click on it to give it a semantic name if desired.

For typography, click on the plus icon at the relevant accordion. This will open a panel where you can specify the font, font weight, letter spacing, and line height. You can also change the asset's name after it's saved.

How to Add and Use Icons in Penpot

You can add icon packs and libraries in Penpot from the Project dashboard. At the bottom of the page, a banner containing a list of commonly used libraries is displayed. These libraries usually include a few icon packs. You can scroll through to choose one or click on the explore more option at the end of the slider to open up the dedicated Penpot templates page.

If you find a relevant library from the bottom banner, click the download icon. Penpot will prompt you to add the selected library. Once you accept it, it will be added to the "Libraries" menu item on the left side panel.

If you click through to the dedicated templates page, clicking the download icon will download a Penpot file. You can then drag it to the projects page, and it will also be available in the "Libraries" section of the projects page.

To use the libraries within your project file, click the "Assets" tab on the left side panel, then click the "Libraries" button below it. This will open a modal with all your libraries listed under "Shared Libraries."

Click on the plus icon on the ones you want to use in your project. This will link that library to your project and be available in the left side panel. You can then search for any particular icon from the search bar and drag it onto the canvas.

To remove a library from your project, click on the libraries button. In the modal, under "libraries in this file," all used libraries are listed. Click on the link icon next to the library you want to remove. This will delink it and remove it from the side panel.

Figma Vs. Penpot – My experience

As a first-time user of Penpot and a long-term casual user of Figma, I noticed some differences and encountered some teething problems.

Swapping Out Icons

You can swap out components in Penpot! It's too bad that I discovered this after I had finished my first component migration.

Renaming Files and Folders

I struggled to find how to rename files and folders in Penpot. I kept looking for the shortcut or a menu item in the context menu. It turns out you have to double-click on the title to change it. You can rename files in the same way in Figma, but I just never did it like that.

Adherence to Web Standards

I was pleasantly surprised at the code quality that Penpot provides, along with your designs. It meets the w3c standards, but the HTML could be more semantic.

Penpot Design System

Penpot avails its design system along with lots of little libraries that help you understand how the tool works. This is very nice as it allows you to get a good understanding of design language and how to organize design systems.

Limited Shape Options in the Toolbar

The Penpot toolbar lacks essential shapes such as pen, arrow, and triangle. While you can recreate this with the path tool or use a library to import them, it is definitely something I missed that was readily available in Figma.

It took me a few tries to get comfortable with Penpot and in the end, I really liked it. Plus, its open-source nature makes it even more endearing.

Resources and Notes

Using Penpot has a learning curve, even if you are familiar with other design tools like Figma. These resources can help you get up to speed faster and make you more efficient with Penpot.

• Penpot video on layouts

• Penpot live on design tokens

• Penpot documentation

• Penpot migration plugin

• Penpot templates and libraries

• Penpot design systems

In this article, we're going to look at components as features which can help boost your efficiency as a designer. I'll show you how to create an interactive button component using Figma.

Table of Contents

1. Prerequisites
2. What are Components?
   – Button components
3. How to Create an Interactive Button Component in Figma
   – Build the button component
   – How to create variants
   – How to create hover and active states
   – How to create other button states
   – How to group buttons by states
   – How to make the button components interactive
4. Conclusion

Prerequisites:

To get the most out of this article, it'll be helpful to have basic knowledge of how to use Figma and its features. But note that this is not necessary, as I wrote this article for everyone – irrespective of their individual level of knowledge.

This article is for everyone who is interested in learning more about components, reusable elements, Figma, and design in general.

What are Components?

Components are reusable design elements that you can use multiple times within a project or across different projects.

Components are interactive building blocks for creating a user interface. They can be organized into categories based on their purpose: Action, containment, communication, navigation, selection, and text input. – Material Design 3

Components can range from simple elements like buttons or icons to more complex structures like navigation bars or entire UI modules. They help maintain consistency and uniformity in a design, they are scalable, and they're very helpful for collaboration.

Button Components

Buttons, sometimes called CTAs, are elements which allow a user to carry out a specific action like signing up, buying a product, subscribing to a newsletter, and so on. They come in different formats and sizes, and are very important elements in design.

Button components typically consist of visual attributes such as shape, size, color, and typography to convey their functionality and encourage user interaction. They can vary in style and appearance based on the design system, brand guidelines, or the context of their usage within an application or website.

How to Create an Interactive Button Component in Figma

Next, we're going to create an interactive button component in Figma. This button component will contain text only buttons, buttons with icons on either the left or right side of the text, and buttons with icons only.

The button component will contain different button states (default, hover, and active), and will be interactive.

This is very helpful for when you're designing interfaces with different use cases. For instance, you could want a button in your design to carry text and an accompanying icon, for a particular screen. In another screen, you might want to use an icon only button. If you have already created these different components, you'll save a lot of time.

_Different button types (Icon only, Icon & text, text only). Image from Telerik_

Let's get started!

Build the Button Component

Open a new Figma file. If you don't have a Figma account, go ahead and create one at figma.com.

Opening a new Figma file

Next, click on the Text icon on the left hand panel, and type Button.

Typing "button" in the search bar.

Next, add auto-layout (Shift + A).

Adding auto-layout

Make the horizontal button padding to be 36px and the vertical padding 12px.

Adding horizontal and vertical padding

Also, give the button a border radius of 8px.

Adding a border radius.

Add a fill to the button.

Moving to the "fill" section.

I'll choose the color code #1C199, which is a shade of blue.

Choosing a color code.

Next, I'll make the text a little bit bolder. To do that, click on the text, and move to the font section on your right panel.

Moving to the font section.

I'll give the button a font size of 16px, and make the weight "medium".

Changing the font size to 16 px

Changing the font weight to medium.

Showing the edited text

Next, I'll add any icon of my choice to the button frame. This will enable me easily create a button component with icons, and not just text when the time comes.

To add an icon, I'll use a Figma plugin called Iconify, which is one of the largest icon collections in Figma. To do this, right-click on your canva and a menu will pop-up. Go to the Plugins tab.

Opening Plugins

A list of the recent plugins you have used will pop-up. You'll also see all the Saved plugins you have. The first plugin on my list is Iconify (that's because I use it a lot, lol). Now, I'll just click on Iconify and search for the particular icon I want to use.

If you have never used a plugin before, and so there are no plugins on your list, you can use the resources section to search for your plugin of choice and save it to your list.

Going to the resources section

Searching for plugins

I want to use the forward arrow icon, so I'll just search for that using the search field on the plugin.

Searching for the forward arrow icon.

A lot of forward arrow icons from different collections will pop-up so, I'll just choose any particular one that works best for me, in this case, a forward arrow icon from IonIcons.

Selecting a particular forward arrow icon

I'll select the icon and click on the Import icon button so it can appear on my Figma file.

Importing the icon to your file

Next, we'll reduce the size of the icon to whatever height and width we want it to be. It's currently on 48 x 48 and I want it to be 24 x 24.

Icon size currently 48x48

Changing icon size to 24x24

We'll also change the colour of the icon to match the text colour (white). To do this, make sure the icon is selected and then scroll down to Selection colours to input the color code, which in this case is #FFFFFF.

Changing icon colour to white (#FFFFFF)

Next, we'll add the icon inside the button frame. To do this, just drag your icon inside the frame.

Dragging arrow icon into the button frame

You'll notice that the frame size increases to accommodate the icon added.

Next, duplicate the icon and move it to the other side of the text. Duplicating the icon will help us easily create button components with icons on either sides of the text later.

To do this, simply use Ctrl + D, and move the duplicated icon to the other side.

Using Ctrl + D to duplicate an icon

Moving the duplicated icon to the other side of the frame.

Next, I'll hide both icons because I want to create my first button component (text only button). I'll rename the frame to Button.

To hide both icons, move to the layers panel on your left, and click on the eye icon by the side of the assets you want to hide.

Moving to the layers panel to hide the icons

You'll notice that the frame resizes automatically once both icons are hidden.

Button frame with hidden icons

I'll then rename the frame to Button. To do that, double click on the heading of the frame, and rename.

Double-clicking the frame

Renamed button frame

How to Create Variants

Next, we'll make the button frame a variant.

Variants help you create multiple versions or states of a component. They're very useful when designing interfaces that have different states or variations, such as buttons with different sizes or designs, like we're creating here.

To make the button frame a variant, double-click on the component icon at the top of your screen.

Moving to the component icon at the top of the screen and double-clicking

Variant of the button component

Next, I'll add another variant because I want to have three states for the button (Default, Hover, and Active). To add another variant, click on the plus icon on any of the already existing variants.

Clicking on the olus icon on a variant to add nother variant

Automatically, a new variant will be added.

Added third variant

Next, I'll increase the size of the component frame so it can accommodate other variants that will be added. To do this, simply select the whole component, and drag to your satisfied size.

Selecting the component frame

Increasing the width of the component frame.

How to Create Hover and Active States

Next, I'll tweak the last two buttons (hover and active states), so the difference between the three button states will be obvious. To do this, I'll make the hover state lighter, and the active state darker.

For the hover state, I'll change the color code to #392AE7, which is a lighter shade of blue. Make sure the particular button is selected so the changes take effect:

Changing color code for the hover state

For the active state, I'll change the color code to #19107A which is a slightly darker shade of blue.

Changing the color code of the active state

How to Create Other Button States

Next, we want to create other button states (buttons with icons on either side of the text, and with icons only).

To start with, I'll duplicate the three buttons. To do this, select the three buttons and duplicate using Ctrl + D.

Duplicating the three buttons

Next, we want to create button components with text and a left icon. To do this, click on the eye on the left icons on each of the icons to reveal them.

Revealing the icons on the left side of the buttons

Next, we want to create button components with text and a right icon.

To do this, duplicate the buttons again, and do the same for the right icons.

Duplicating the buttons a second time

Revealing the icons on the right side

Lastly, we want to create button components with icons only.

To do that, we'll duplicate the buttons one last time to hide the text.

Duplicating the buttons a third time

Hiding the text

I'll make the icon only frames a square shape. To do that, select the three frames and drag to resize.

Selecting the 'icons only' frames

Resizing the frames

I'll now resize the component frame to fit its content.

Resizing the component frame.

Next, we'll rename the different button states so it'll be easy to identify them. First, select the whole component frame. Then move to the section labelled Properties, and change Property 1 to Button to show that this is a button component.

Moving to properties section

Renaming the component frame

Next, we'll rename the button frames by icons. Select the first three frames horizontally, and go over to the Current variant section. Rename them No icons.

Selecting first three buttons and renaming them

Renamed no icons buttons

We'll do same for the next three buttons, and name them Left Icons.

Renamed left icons' buttons

We'll do the same thing for the next set, renaming them Right Icons.

Renamed right icons' buttons

Finally, for the last set, we'll rename the buttons Icons only.

Renamed icons only buttons

How to Group Buttons by States

Next, we'll group the buttons by states and name them. We'll start with the first state: Default. Select all the button frames under default and move to the Current variant section on the right hand panel. Click on the configure icon to edit the component configuration.

Clicking on configure icon

Click on the description box to add a description. In this case, I'll simply type Default state.

Adding a description

Do the same for the other two states – hover and active.

Adding a description for the hover state

Adding a description for the active state

How to Make the Button Components Interactive

To start, switch to the Prototype tab, located at the top of your screen, right-hand panel.

Switching to prototype mode

Next, add an interaction from the first to the second no icon button frame. To do this, click on the first button frame and drag the plus icon to the second frame.

Adding an interaction

This will bring up a list of interaction options and settings for the animation.

Bringing up interaction setting

Change On click to While hovering.

Changing interaction type to "while hovering"

Do the same for the next button frame but, instead of While hovering, change to While pressing.

Animating the third button frame

Now, repeat the same steps for the other sets.

Repeating the animation steps for the other button sets.

Voilà, you just created an interactive button component.

Conclusion

Components help enhance your designs and make them more efficient. They also help you save time and they improve consistency across your designs. But they can only help when they're created the right way.

Practicing often will help improve your ability to create helpful reusable components. Remember, make every decision with your users in mind.

In this tutorial, you'll learn what variables in Figma are, and how to create and implement different types of variables while designing in Figma.

Prerequisites:

To get the most out of this handbook, it'll be helpful to have basic knowledge of how to use Figma and its features. But note that this is not necessary, as I wrote this handbook for everyone – irrespective of their individual level of knowledge.

This handbook is for everyone who is interested in learning more about variables, Figma, and design in general.

Table of Contents:

• What are variables?
• Differences between Variables and Styles in Figma
• Why are Variables Important to the Design Process?
• How to Create Variables in Figma
  • How to Create Colour Variables in Figma
    • How to Create Colour Variables for Tokens
    • How to Implement Colour Variables in Your Designs
    • How to Create Different Modes with Variables
  • How to Create Number Variables in Figma
  • How to Create String Variables in Figma
  • How to Create Boolean Variable in Figma
• How to Use Variables for Advanced Prototyping
  • Advanced Prototyping with Number Variables
  • Advanced Prototyping with Boolean Variables
• How to Use Variables for Developers- Using APIs
• Conclusion

What Are Variables?

The word "variable" has a lot of definitions. The Oxford Dictionary defines the word variable as "not consistent or having a fixed pattern; liable to change." Another definition says "an element, feature, or factor that is liable to vary or change."

The definitions above simply tell us that variables are elements which are dynamic and prone to change. With these definitions, we can now define what a variable is in Figma.

In Figma, a variable stores reusable values like colour and text values that you can apply to different kinds of design properties and prototypes.

Differences between Variables and Styles in Figma

Given the definition of variables above, you might have begun to see some similarities between variables and style guides. Although both features exist to make your work better, there are a few key differences to keep in mind:

• Variables are a more advanced feature, and they allow you to define and reuse values like colours, text, and spacing across your designs. On the other hand, styles are predefined sets of design properties such as text styles, colour styles, and effect styles.
• Variables allow designs to change when used in various contexts, because of their dynamic nature, unlike styles. For example, you can change your designs from light mode to dark mode or have padding values change when designing for different devices. This makes variables useful for creating design systems with adaptable components.
• Variables offer a more flexible design process in creating flexible design components, especially where you want to change values like button text or color on different instances of the same component. Styles are typically used for maintaining consistent design elements like button styles, text headings, or colour palettes.
• Variables can store raw, single values, while styles store sets of values.

Why are Variables Important to the Design Process?

Using variables is quite important for a number of reasons.

First, variables help maintain consistency across a design system. By defining variables for colors, typography, spacing, and other design elements, you ensure that these elements have a uniform appearance throughout your project. This consistency is crucial for branding and user experience.

Variables also make designs adaptable. Designers can quickly experiment with different values such as colour schemes or font sizes by adjusting the variables. This adaptability is valuable when creating designs for different platforms or devices.

Variables are also quite efficient. When a variable is updated, all instances of that variable in the design updates automatically. This saves time and effort, and eliminates the need to manually update every instance of a specific element.

Variables are particularly useful in large projects or design systems because of their scalability and ease of maintenance. They allow designers to scale their designs without losing control.

Since projects grow and design systems evolve over time, variables can be adjusted globally to accommodate new requirements. Variables also provide a central place to update these changes, ensuring that all design elements are consistently modified.

And finally, variables can be beneficial to developers during the hand-off process. Designers can provide developers with precise values for design elements, reducing the chances of misinterpretation and streamlining the implementation process.

How to Create Variables in Figma

Variables are quite easy to create in Figma. Below, I'll walk you through the steps for creating different kinds of variables in Figma.

At the moment, we have four types of variables in Figma:

• Color: used for colour fills.
• Number: used for dimensions, corner radius, and auto layout properties.
• String: used for text layers and variant properties.
• Boolean: used to toggle layer visibility.

We'll create and implement each of these variables in Figma, and also use them for advanced prototyping.

How to Create Colour Variables in Figma

The first type of variable we'll be creating is a colour variable. As a designer or developer, you have likely used colours in your projects. So, the concept of colour shouldn't be unfamiliar to you from a design standpoint.

Step 1: Open a new Figma file

Let's assume that you want to create colour variables for a new design project you're going to start working on, like a magazine website for example. The first thing you need to do is open a new Figma file.

Blank Figma file

Step 2: Choose a colour palette

The next step is to choose a colour palette for the project. Every design project has a set of colours used repeatedly to establish consistency – for example, for headers and backgrounds, to call attention to a primary button, and so on.

You'll want to choose colours which complement each other for your design. If you need some help here, you can read my article on the 60-30-10 rule in design.

Creating a colour palette

Step 3: Create variables for each colour

Next, we'll create variables for each colour code in the palette. Go to the panel on the right-hand side and click on local variables.

Local variables means all the variables located in the design file.

Click on local variables

Click on create variable to create the first variable in the file.

A dropdown will appear containing the four types of variables I explained earlier. Since we're trying to create colour variables in this section, we'll choose color.

Create a colour variable

A created variable section will come up, with two columns: the title of the variable (Color), and the value of the variable (the colour code-FFFFFF).

Choose colour variables

Give your new variable a name – you can use the role of the colour, primary background for instance. In the next column, type the colour code or use a colour picker.

Rename variable & type in colour code

And there you go – you just created your first colour variable!

To see more editing options, hover over the variable's row. An edit variable icon will pop up.

Edit variable

Click on it to edit the colour variable to your taste.

Edit the colour variable/add a description

In the editing section, you can add a description on how to use the variable, hide from publishing, and so on.

Having done that, follow the steps above to create variables for the remaining colours in the colour palette.

Create variables for other colours

You can also organise your variables into groups. To do this, select the colour variables you want to group (hold down SHIFT key), and right-click.

Group the colour variables

This will bring out some options:

• New group with selection
• Edit variables
• Duplicate variables
• Delete variables

New group with selection

Choose New group with selection, double-click on the group name, and rename it to color/blue.

Rename group

You can group your colour variables anyway you'd like to – for example, background colours, header colours, different shades of a particular colour, and so on.

Colour blue variables grouped.

Violà! You just created a colour variable group in Figma. Click on the collection drop-down and choose rename collection.

Rename collection

You can rename this collection primitives.

Primitives means basic. Also, you can decide to rename your collections or not. The choice rests on you.

Renamed primitives collection

How to Create Colour Variables for Tokens

Now, we'll create colour variables for the text, surfaces (such as backgrounds), and borders we need for the project. We want to assign different functions to the colour palette (variables) we created earlier.

Click on local variables and create a new collection. You can name this tokens.

New collection

Create a new colour variable and rename it "primary text".

In order to save yourself time, and group your variables as you're naming them, rename the variable as text/primary. This will automatically form a group.

Creating and grouping text variables

Click on the fill box and go to Libraries to see all colour variables created.

Assigning colour from libraries

We'll choose Main Black which is under color/greys.

Choosing colour black

We can go ahead and assign other colour variables for different text functions, as much as we want to. Remember to add text/ before the actual name of the variable, so it'll form a group automatically.

Assigning colour variables for text

Next, we'll create colour variables for surfaces such as backgrounds, and for borders as well.

Colour variables for surfaces and borders

Some of the colour variables might bear the same colour code, but they have different functions, so that's totally fine. For example, the colour code for button text is the same as the colour code for main background.

How to Implement Colour Variables in Your Designs

Next, we're going to implement these colour variables in our design.

In the image below, there are four mobile wireframes with no colour and images (I created these previously).

You can read about how to create wireframes in this article: What is Wireframing? How to move from Paper Sketches to High Fidelity Wireframes.

We'll use the colour variables we've created to add colour to the buttons and text, making sure all elements are consistent.

Low-fidelity wireframes

Starting with the first screen, let's add colour to the button. Click on the button, and go to to Fill on the right-hand side of your screen.

Click on button

In the Fill section, click on style (the four dot icon by the side). Selecting style will bring up a list of colours in your libraries. Select the colour you've assigned for the primary button in order to implement it.

Select a fill colour from the colour variables in libraries

Implemented button colour

Next, give the button text a white colour following the same steps.

Implementing colour variable for button text

Implemented button text colour

You can go ahead and do the same for the other screens, following the steps above. Don't forget to update the text and colours as well.

Updating colour variables for other screens

You can also add some images or illustrations to complete the look.

Adding illustrations to updated design

Note: You can get your illustrations from plugins in Figma like Storyset by Freepik, Artify Illustrations, and so on, as well as from illustration libraries like Freepik, Lapa Ninja, and others.

How to Create Different Modes with Variables

Next, we'll create different modes for our design. For instance, if you're working on a project that requires light and dark modes, instead of changing all the design elements manually to accommodate the modes, you can simply use variables to implement that.

To start with, click on Local variables to create a new variable. A list of all variables in the file and their groups will come up:

color/blue:

• Primary Button
• Main Blue

color/greys:

• Main Black
• Main Background

Opening "Local variables"

Next, I'll create a new collection so I can just focus on the modes I am about to create. To create a new collection, simply click on the menu icon on the variables header.

Note that creating a new collection isn't mandatory. It's just to help take your focus away from other variables you have already created.

Creating a new collection

Next, I'll rename the collection to Modes. To rename a collection, simply double-click on the title, and input your preferred title.

Renaming a collection

Renamed collection "Modes"

Next, click on Create variable to create a new variable. I'll choose Color because that's the variable we're working with.

Creating a variable called Color

The created colour variable will come up with a default colour code: FFFFFF.

Created color variable with default colour code: FFFFFF

Next, I'll rename the variable Background because I'm trying to set the background colours for each mode (light and dark).

Renamed color variable: Background

Now, we've been working with only the name and value of the variables we've created, but we can add another column when we want to create modes. To do this, simply click on the plus icon on the header to add a new variable mode.

Clicking on the plus icon

The new mode will come with three columns:

• Column 1 (the title of the variable – Background)
• Mode 1 (the first value of the variable – colour code FFFFFF)
• Mode 2 (the first value of the variable – colour code FFFFFF)

Created new mode

Next, I'll rename the modes to light and dark. To do this, simply double-click on the title and edit the name.

Renamed modes: Light & Dark

Now, we'll assign a value to the background for dark mode. To do this, simply input the colour code/value you prefer for the background. I'll use #0C3272 as my background colour for dark mode.

Changed value for dark mode background

Next, we'll create other colour variables for other elements like, text, button colour, button text colour, and so on for the two modes. I''ll list out the specifications to make it easier:

Light/Dark:

• Body text: 1A1A1A/FFFFFF
• Button: 0C3272/FFFFFF
• Button text: FFFFFF/0C3272
• iPhone header: 1A1A1A/FFFFFF

Next, we'll go ahead to create the variables. Just follow the steps we followed earlier to create the variables and assign values for each of the modes.

Created variables for other elements

Next, we make sure the design is connected to the variables we created. To do this, simply hold the element and use Fill to tie it to the colour variable.

For the Button text for instance, select the text, and click on the style icon in Fill.

Clicking on style icon in the "FFill" section

Next, scroll down the list that comes up, to the specific variable you want to tie the variable to (in this case Body text).

Selecting Body text variable.

Do the same for the other elements in the design, including the background.

Note that I'll be leaving the illustrations the way they are.

Screens connected to the variable modes.

To check if the modes actually work, click on the change variable mode icon on the Layer section on the right-hand panel of your screen.

Clicking on the "change variable mode" icon

A list of all modes (Light & Dark) will come up and you can switch the screen to whatever mode you choose.

Switching modes

A section named Modes will appear on the Layer section, indicating that one of the screens is in dark mode.

One dark mode & one light mode screen.

How to Create Number Variables in Figma

Next, I'll show you how to create number variables in Figma.

Number variables are defined by number values, and they can be applied to corner radius, width or height padding, and so on. Here are the steps to follow to create your own:

Step 1: Choose a variable

Just like we did when creating color variables, click on the local variables panel to select the kind of variable you're trying to create. Here, you'll select number.

Choosing variable to create

Selecting "number"

When you select number, it appears on the list of variables with a value, in this case 0.

Number variable showing Number with a default value of 0

Now, you can rename the number variable to whatever you decide. To rename the variable, double click on number, and change it to whatever name you want.

Renaming number variable

I'll rename mine to OrderCount, because I'm trying to implement a function that allows a user to increase the number of portions of food they're trying to order.

Renamed number variable

Next, we'll set the default number value to 1.

Setting default number value

Now we'll tie the number on the design to the number variable (OrderCount). To do this, click on the number in the design.

Implementing the number variable

Then go to Text on the left hand side of your screen. Click on the Apply variable icon to apply the variable.

Note: The apply variable icon will only appear on the Text section when a variable has been created.

Clicking on the "appy variable" icon

Clicking on the icon will bring up a list of all number variables available in the file. Next, you'll select the variable you're trying to implement. I'll choose OrderCount.

Selecting a number variable

When the variable has been implemented (tied to the number), it'll appear on the text section, indicating that a number variable has been implemented.

Implemented number variable

Now, we'll also need two more number variables for the other number values in the design (cost of food and total cost). This is so that these values will also change when a user increases the number of portions they're ordering.

We won't include delivery fee, because it remains the same way irrespective of the number of portions a user orders.

Next, we'll follow the same process as we did above to create number variables for these.

Creating other number variables

Next, we'll tie the numbers in the design to their respective number variables, just as we also did earlier.

Note: In the main design, I gave the actual number (25) a different frame from the dollar sign (which is in text). This is because when creating the number variable, the dollar sign will not be attached, because it's a word, not a number.

Consequently, when I tie the number variable to the design, I'll be applying it to the frame containing the number alone.

Give the number a different frame from the dollar sign

So, when I tied the first number to the number variable I created (Cost-Portion), something interesting happened. The number in the design took on the value of the variable. Instead of 25.00 which was in the screen earlier, it changed to just 25 because that's what the number variable was set to.

Number variable changing the number in the design

Now, to avoid any unpleasantness, I'll change the values of the other numbers, and realign them.

Changed and realigned number values in the design

We've just created number variables for our design. In the section for advanced prototyping, we'll check to see if these number variables actually work.

How to Create String Variables in Figma

Next, you'll learn how to create string variables in Figma.

As I wrote earlier, string variables are used for text layers and variant properties. With string variables, you can change the headings in your design, flip text on different screens, change language modes, and so on.

For this article, we'll use string variables to change the headings on the screens for each mode we created earlier (light and dark).

As usual, our first step is to click on Local variables and select the type of variable we want to create.

Going to local variables to create a new variable

I'll choose String.

Choosing "String" out of a list of all variables

When I do that, the string variable I just created will appear on the list of variables.

Created String variable

If you noticed, the string variable has two columns for "string value", because I created the variable in the Modes collection. Following that, let's see if we can change the headings for each mode.

Note: The string value is the actual text you're trying to change.

So, for the first screen whose heading is "Transactions Made Easy", I want it to change to "Easy Transactions, Less Stress" for dark mode. For the second screen whose heading is "Pay Bills with Ease", I want it to change to "Paid Bills, Easier Life" for dark mode.

Since we're changing the headings for two different screens, we'll create another string variable.

Creating another string variable

Next, we'll input the different values for the different modes. To do this, just input the different texts for the two screens in both modes.

Inputing string value

Next, we'll tie the headings to the string variables we just created. To do this, click on the particular heading, and go to the Apply variable icon on the Text section.

Applying string variable

Next, scroll down and choose the string you're applying it to.

Choosing string variable

Once you're done, a string icon will come up, indicating that a string variable was applied to the text.

Applied string variable

Do the same for the second string:

Applying string variable to the second screen

Next, let's test to see if the string variable works. Select the screens which have the applied variable, go to Layers, and change the mode from light to dark.

Selecting screens which have the applied variables

Selecting dark mode

Mine works:

Screens changed to dark mode

How to Create Boolean Variables in Figma

Next up, we'll learn how to create Boolean variables.

Generally, boolean variables are variables that can only have two possible values – true or false. In Figma, boolean variables have the same function: they are used for variant properties or components with two values: true or false.

Remember the toggle in the design above?

Toggle in the design used for implementing number variables

I'll change that to a checkbox and use boolean variables to make it work.

To do this, I'll copy out the component and paste it on another frame. I'll then add the checkbox (and replace it in the main design screen later).

Checkbox on a blank frame.

Next, we'll make the selection a variant. To do this, double-click on the Create component icon on your Figma file header.

Double-clicking on "create component" icon

A variant will automatically appear:

Variant of the component

Next, I'll create different states for the checkboxes: default, hover, and filled.

Different states for the chechboxes: Default, hover and filled.

Now, we'll create the boolean variable.

To do this, go to Local variables as usual and select Boolean.

Opening local variables

Click on Create variable.

Next, we'll choose Boolean from the list.

Choosing "boolean" from the list

Created boolean variable

Next, we'll rename the boolean variable SaveFood since we're trying to create a function for saving a food choice for subsequent orders.

Renamied boolean variable

Next, we'll make the variable True by default. To do this, just click on the toggle icon by the side of the variable.

You've created a boolean variable!

We'll create an interaction for this boolean variable in the advanced prototyping section and check if it works.

How to Use Variables for Advanced Prototyping

In this section, we'll learn how to use variables for advanced prototyping in Figma, using the colour, number, string, and boolean variables we implemented earlier in the design.

N.B: You can only use advanced prototyping features on Figma if your file is on a paid team file. If you don't have a paid team version, you can apply for the Figma for Education plan. It's a way Figma helps learners and educators by giving them access to resources, and all benefits of a paid version, for free.

You can use advanced prototyping when you have a lot of screens to work on, and to simply make prototyping easier.

Advanced Prototyping with Number Variables

Starting with the number variables we created above, let's try to check if it actually works. But before we do that, we'll have to actually prototype the design.

Note that you can prototype number variables for designs where your user can increase or decrease the number of an item on the screen. Prototyping helps to show the functionality and how that particular feature would work.

To start with, I'll make the frame where the order count is a component. To do this, select the frame, and click on the component icon on your Figma file header.

Selecting the order count frame

Clicking on the component icon

The order count component

Click on the component icon again to make it a variant.

Making the order count component a variant

I'll make a frame outside the screen and drag the variant there, so I'll be able to work on the interactions well.

Making a frame outside the screen

Remember that we want to implement a function where the number of portions increases when the user clicks on the plus icon.

We'll start prototyping from here.

Now, click on the plus icon in the default variant and move to the prototype tab.

Clicking on the plus icon in the default variant

Next, click on the plus icon in the interactions area to add an interaction.

Adding an interaction

A tab will come up showing interactions. In this case, it's set to default On click, and no interaction has been added yet (None).

Adding an interaction

Now, click on the dropdown icon that says None.

Clicking on the dropdown icon

It'll bring up a list:

• Navigate to
• Change to
• Back
• Set variable
• Conditional
• Scroll to
• Open link
• Open overlay
• Swap overlay
• Close overlay

List following the dropdown

Choose Set variable.

A list of all variables in the file will come up, and you can then select the particular variable you want to implement. I'll click on OrderCount.

Choosing "set variable"

Clicking on Order Count (the first time)

Next, I'll click on OrderCount again to write a mathematical expression, and all the available mathematical expressions will appear:

Clicking on Order Count (the second time) and showing all mathematical expressions

I'll select Addition, because that's what we're trying to do.

Choosing the "addition" expression

You'll notice that an addition icon popped up to signify that the addition expression was given.

Next, I'll input 1 by the side of the addition icon to show that it's plus 1.

Adding number 1 to the expression

Done!

Now, we'll follow the same steps to do the same for the minus icon, making the expression subtraction instead of addition.

Added interactions for the minus icon

Done!

Note: We don't really need the variant we created earlier. You might only use the variant in cases where you want to create a hover state. I just wanted to show you how easy it would be to create a variant while doing this.

Next, we'll just copy the prototyped component and put it back in the main design.

Frame containing the prototyped variable

To put the prototyped component in the main design, click on Assets at the top of the left hand panel.

This section will show all the assets in the page you're currently on.

Showing all assets on the page

Next, I'll drag the frame to the design.

Dragged asset to main design

Note: If you don't want to follow the process above to place the prototyped component in the design, simply copy the component (CTRL + C), and paste to replace the frame on the main design.

Now, let's check our prototype out. To do this, you don't need to open the prototype on another tab. You can simply click on the asset and press SHIFT + space bar.

Clicked asset

Another frame will appear on your screen. It's interactive and you can test your prototype on it.

Interactive frame on your Figma screen.

Try clicking on the minus and plus icons on the frame to see if it carries out its function.

After checking the prototype, I'd like to implement some logic.

We don't want a scenario where the clicking on the minus icon continues till after 0 and now gives us a negative sign like -1 as you can see in the image below.

Minus icon giving us negative values

That wouldn't make sense, so we'll add a conditional.

A conditional is simply a condition that sets rules about how the interaction should work.

To do this, I'll move to the frame containing the component I made earlier.

Frame containing prototyped component

I'll be adding the conditional to the minus icon since that's the area that would give us negative values. So, I want the values to stop at 1 since that's the least a user can order (they can't order half or 0, for example).

So, we'll just zoom into the component to add our conditional. Make sure you're on the prototype tab as well.

Moving to prototype tab and zooming in on the prototyped component

I'll click on the variable icon by the minus frame.

Selecting the variable icon close to the minus icon frame

This will bring up the already set interactions:

Already made interactions on the minus frame

Next, I'll click on the plus icon by the 'x' on the interactions header.

Clicking on the plus icon in the interaction header

I'll choose conditional from the list of options which will appear:

• Navigate to
• Change to
• Back
• Set variable
• Conditional
• Scroll to
• Open link
• Open overlay
• Swap overlay
• Close overlay

Choosing conditional from the list of options

We'll then write the condition. To do this, click on Write condition by the if else statement.

Writing a condition for the interaction

When we click on Write condition, a list of all number variables will come up. I'll choose OrderCount.

Selecting ordercount

This will bring up a list of all available conditions:

• Equal to
• Not equal to
• Greater than
• Greater than or equal to
• Less than
• Less than or equal to

I'll choose Not equal to.

Choosing "Not equal to" condition

Next, the icon for the condition I chose will appear on the input field for writing the condition.

Condition appearing on the input field

Next, I'll input 0, which means the interaction is not equal to 0.

Inputing 0 (zero)

Next, I'll close the frame and try moving the Set variable section under the conditional section in the interaction. To close the Set variable section, click on the little dropdown icon.

Clicking on the dropdown icon to close set variable

When you click on the little dropdown icon, the Set variable section will be minimized, allowing you move the section under the Conditional section.

Closed set variable section

Next, I'll drag the set variable section under the conditional section. To do this, just hover on the set variable section and use your trackpad or mouse to drag it.

Dragging set variable under conditional

We just added a conditional to our interaction! The icon for the minus frame will change to a condition icon, showing that a conditional has been added.

Added a conditional to minus interaction

Now, you can test this new interaction to see how it works.

Mine certainly does! It doesn't go lower than 0 anymore.

How to implement cost per portion variable

Now, we want the other number values (cost per portion and total cost) to increase in response to the number of portions a user orders.

We'll start with the Plus icon frame:

Going back to the component we've been working on...

Frame with prototyped component

I'll click on the plus frame and go ahead to set variable.

Opening the interactions for plus frame

I'll click on the plus icon on the interactions header.

Clicking on the plus icon on the interactions header

Next, I'll select set variable.

Selecting set variable

A list of all variables that have been created in the file will come up:

• The color variables for text, buttons, headings, and so on.
• Number variables – OrderCount, Cost-Portion, and so on.

A list of all variables in the file

I'll scroll down to choose cost-portion, which is the cost per food portion a user orders.

Choosing "Cost-portion" (the first time)

An input field to write an expression for the variable will come up.

Write expression input filed

To write an expression, click on Cost-Portion again and select Addition.

Choosing cost-portion (the second time) and selecting addition

Addition icon coming up on input field

Next, I'll input 25, meaning that +25 should be added for every portion of food a user orders.

Inputing 25

Having added the interaction for the plus frame, we'll follow the same process for the minus frame. When you're done, the Set variable section should be under the Conditional section.

Adding interaction for the minus frame

Remember there's a conditional for the minus frame, so I'll just drag the new interaction inside the conditional.

Dragging the new "set variable" interaction inside the conditiona;

Now, try testing the new interaction you just added. Mine certainly works!

Testing the new interaction

Next, we still have one last variable to add (Total Cost).

Follow the steps above to recreate this interaction. Starting with the plus frame, implement the variable to make sure $25 adds when the order increases. It should show a placeholder – Total Cost + 25.

Implementing Total Cost variable

Now, do the same for the minus frame and test the interaction. Don't forget to add the new interaction inside the conditional.

Mine works!

Testing the interactions

You just learnt how to implement number variables with advanced prototyping in Figma. Congrats!

Advanced Prototyping with Boolean Variables

Next, we'll create an interaction for the boolean variable we created earlier in the article.

Note that you can prototype your boolean variables in designs where you have features like checkboxes and toggles. The prototype would show how the checkbox is supposed to function.

To create the interaction, move to the prototype tab and focus on the frame containing the boolean components.

Frame containing boolean components

Now, our main interaction will start from the hover state because that's when a user tries to click on the checkbox. But we still need to add an action that will take the user from the default state to the hover state.

To do this, I'll just click on the first variant and drag it to the second variant.

Connecting first variant to the second variant

I'll change On-click to While Hovering. To do this, just click on the On-click dropdown and select from the list that pops up:

• On click
• On drag
• While hovering
• While pressing
• Key/Gamepad
• Mouse enter
• Mouse leave
• Mouse down
• Mouse up
• After delay

Clicking on the on-click dropdown

Selecting "while hovering" from the list

Selected "while hovering"

I also want to change Instant to Smart Animate, so I'll click on the dropdown icon by Instant, and select from the list that appears:

• Instant
• Dissolve
• Smart animate

Changing "Instant" to "Smart Animate"

How the interaction looks

So, we're done with the first interaction and we'll get started on connecting the second variant to the third variant (Hover - Filled).

Just as we did earlier, we'll just drag the second variant to the third variant.

Connecting the second to the third variant

How the interaction looks

Like I said earlier, the main interaction starts from the second variant so we'll not be following the same steps we took to add the first interaction.

To continue, I'll click on the plus icon on the interaction header to add an action, and select Set variable from the list that pops up:

• Navigate to
• Change to
• Back
• Set variable
• Conditional
• Scroll to
• Open link
• Open overlay
• Swap overlay
• Close overlay

Clicking on the plus icon on the interaction

Choosing "set variable" from the list

Next, I'll click on Pick target variable to select the boolean variable.

Clicking on "pick target variable"

I'll scroll down the list of variables to choose the variable I want: SaveFood.

Selecting "SaveFood" variable

Now, to write the expression for this variable, we're going to say the value will be equal to true. So, I'll select True.

Writing the expression and selecting "true"

Having selected True, the expression (true) will go under the SaveFood variable, indicating that an expression was applied.

How the interaction looks

Next, we'll just copy the original component and paste it in our design so it can sync when we're checking the prototype.

Pasting the default component in the main design

To check the prototype directly on your Figma page, click on Shift + space bar.

Mine works!

But I noticed something; I can't un-check the checkbox. No interaction was provided for that. Now, we'll quickly add that interaction so our component works perfectly.

To do this, we'll go back to our components, making sure we're in prototype mode, and drag the connection from filled all the way back to default.

Dragging the connection from filled state to default state

Now, it's works perfectly!

How to Use Variables for Developers – Using APIs

Variables are very helpful for teams consisting of developers and/or designers.

Variables are now supported in Figma’s Plugin API—for building plugins and widgets—and in the REST API. Since variables is currently in open beta, features and functions may change as we respond to feedback. – Figma Docs

There are three documentations which contain support for variables for developers on Figma:

• For the REST API:

This API includes endpoints for querying, creating, updating, and deleting variables. – Figma docs

To be able to use this API, you must be a member of an enterprise.

• For the plugin API:

This API provides support for creating and reading variables, and binding variables to components. – Figma docs

• For the widget API: This API is connected to the plugin API. It is available to widgets by using the Plugin API the widget contains.

Widgets are interactive elements that can be used to create interactive prototypes. Widgets extend the functionality of design files and FigJam boards and are often part of the larger design system, which is a collection of reusable components.

Conclusion

Variables exist in Figma to make your designs better. They are easy to use and create, and are helpful in every design project. In order to save yourself time, make sure to incorporate variables into your design process.

The key is to practice and explore, and you'll get better as you go.

Thank you for reading this article, I hope you enjoyed it!

In Figma, there are other ways to resize elements apart from the default method. So don't fret if using the default approach dose not give you the result you need.

First we'll look at the default method so you're familiar with it, and then we'll see some other ways to resize elements and groups as well.

How to Resize in Figma – Default Method

The default method for resizing something in Figma is to just click and drag. To resize an element with the default method, all you need to do is select your object and use any of the transformation controls and resize it until you're content.

Holding down SHIFT on your keyboard while doing this will help constrain your proportions.

Sometimes, the default approach might not work on some elements. Click and drag in those cases might lead to the object being distorted. So what can you do instead?

How to Resize an Object with Properties in Figma

To resize an object really precisely, go to the properties inspector located at the top right part of your file. Find the height and width fields and input the values of your choice. You could also drag the values with your mouse cursor. You can always use this method to get the exact proportions you need, like 140 x 140, 100 x 50, and so on.

Remember, whatever values you input in the properties fields will be reflected in your frame so, it's important to choose proportions that wouldn't distort your frame. For example, a 150 x 20 element will likely look distorted.

You can always experiment with values until you resize the element to your satisfaction. It's all up to you.

How to Resize an Object with the Scale Tool in Figma

The Figma scale tool is located at the top left corner of your screen. To use the scale tool, select your frame, click on the scale tool, and drag using the scale controls.

This tool is especially useful when you're dealing with resizing icons. Some icons get out of shape when you're trying to resize them. The scale tool helps make sure your element or the elements of your frame are not distorted.

Scaling works for text objects, frames, components, and so on. You can use the scale tool to resize elements anytime you want to.

How to Resize Objects with Keyboard Shortcuts in Figma

To resize an object with the keyboard shortcut, select the object, hold down CTRL, and use the arrow keys to resize your object. You can increase or decrease the width or height by 1px at a time. You can use the keyboard shortcuts in any situation.

Tip: Holding down SHIFT on your keyboard at the same time will speed up your resizing to 10px at a time.

How to Resize without Moving Objects Inside the Frame in Figma

Sometimes, while trying to resize frames containing input fields, you'd find that some objects move along with the frame because of constraints.

Of course, that isn't the desired result. To ignore an element's constraints while resizing, hold CTRL while you drag. Also, holding Ctrl + Alt while dragging will resize your element proportionally.

Conclusion

Knowing how to resize elements can really help you create equal, beautiful frames for your designs.

Good luck with your Figma designs!

‌‌‌‌In this article, we'll be learning about what glassmorphism means, how accessible it is, and how to design a simple glass card.‌‌

What is Glassmorphism?

Glassmorphism is a style which, as the name implies, uses properties of glass to enhance your designs. It gives a translucent or transparent look and feel to its elements.

Glassmorphic elements and shapes work really well on vibrant, colorful backgrounds which accentuate the glass effect. Glassmorphism helps you add visual hierarchy to your designs and puts focus on the content you want to highlight.

‌‌Accessibility of Glassmorphism

Glass designs aren't the best if you're designing for people who have vision problems. You'll have to be very careful when choosing colors and fonts to make sure screen readers and other devices can properly interpret the designs.

‌‌Also, using glassmorphism can cause your site to become slow and can also increase battery usage.

If you can work around these issues, however, glass designs do look really, really cool – so we'll learn how to make them here.

Here are some tips to help increase accessibility of your glass designs:

1. Use the transparency or blur effect sparingly/moderately. Don't overuse it. The effect looks best when used on only two or three elements in your design.
2. Establish a clear sense of hierarchy. The right spacing between the cards in the design layout and making sure the right elements stand out will help with accessibility issues. Remember, a strong visual hierarchy helps give users the right visual clues.
3. Set the right background. Make sure the background isn't bland or dull. Using vibrant colors as backgrounds will help accentuate the effect. Of course, this will also achieve a very aesthetically pleasing look.
4. Using larger fonts can make your glass designs more accessible. Also, choose fonts that contrast with the glass background.

Glassmorphic Design Examples

To give you a better idea of what glassmorphic designs look like, here are a few examples of websites that apply this technique:

Glassmorphic Website by Sahid Aldi Susilo

Glassmorphic design by Stefan Brown‌

You can see this design here.

Glass card by Pratheek Purohit

You can see this design here.

Let's see how we can recreate something similar to the last example.

How to Create a Glass Card in Figma

Glass cards are simply cards created using glassmorphism. The cards could be images of credit cards, profile cards, invoice cards, and more.

Follow the steps below to create a glass credit card in Figma.

Step 1 – Set a Colorful Background

A colorful background is essential as it helps accentuate your glass design and make it stand out. You could just use the uiGradients plugin to select a gradient of your choice like I did below.

Step 2 – Draw a Shape

Here, we'll imitate the shape of a physical credit card, which looks like a rectangle.

Draw a rectangular shape with the dimensions 640×400, and set the corner radii to 40pt.

Step 3 – Apply Fill Using Gradient

Next, you need to fill the shape with translucent colors like white. Both colors of the gradient should be white but they should be set to different opacity levels.

Step 4 – Apply Background Blur

Set the blur value to 40, or any value of your choice depending on how blurred you want it to look.

‌‌Step 5 – Add Strokes to Create Borders

Adding borders makes your card look more polished and elegant. It helps to have a sharper contrast through thicker and more distinguishable borders.

‌Step 6 – Apply a Drop Shadow

Using a drop shadow effect helps strengthen the visual hierarchy.

Set the blur value to 24 and the spread to -1.

‌Step 7 – Add Your Content

You can now add content to your card like text, a logo, and so on. Using the Iconify plugin like I did to get your Visa logo and EMV chip will save you a whole lot of time.

Fill your content with the color white, decrease the opacity, and set the blending mode of the layer to Overlay.

The frost effect adds polish to your design. To apply this effect, simply use the noise plugin to fill the image with noise.

If you already have the plugin installed, go straight to plugins and click on noise. If you don't, go to https://www.figma.com/community/plugins to install the plugin.

Once you installed and selected the plugin, set the blending mode of the layer to Overlay and decrease the opacity.

When you apply the noise plugin, the card will look like this:

Next, you change blending mode to Overlay.

Decrease the opacity of your card. Play around with the opacity until it suits your taste.

You can reduce the opacity by clicking on any number on your keyboard – 2 for 20%, 3 for 30%, 4 for 40% and so on.

And there you have it – a beautiful and glassy-looking card.

Conclusion

Adding the glassmorphic affect to your designs is pretty simple. As the glassmorphism trend gets more popular, knowing how to create glass designs might really come in handy in the future.

Styles help you simplify your workflow, keep text and layers consistent, and save valuable time.

‌‌How to Use Color Styles in Figma

You can apply color styles to text, background, and strokes. You can also apply color styles to shapes created in your designs or to elements or sections of the particular website or mobile app you are designing. These could include buttons, rectangles, the top and bottom bars, and more.

You can also use color styles for images or gradients.

How to create a color style

To create a color style, follow these steps:

• Create a new shape and go to Fill. Fill your layer with any color of your choice.

• Click on the four dots icon to trigger the Color Styles modal.
• Click on the + icon in the right-hand corner of the Color Styles modal.

• Give your style a preferred name (let's say Color Style 1) and click the Create Style button.

Remember, you can create as many Color Styles as you would like.‌‌

How to apply a color style to a layer

Select your layer and go to the Fill section in the right-hand sidebar.

• Click the four dots icon in the right corner of the Fill section to trigger the Color Styles modal.
• Select your preferred color style.

Done!

‌‌How to edit a color style

Click on the file's gray backdrop to display your styles.

• Right-click on the Color Style and select Edit style in the menu.

How to delete a color style

Deleting a color style is really easy to do.

• Click on the file's gray backdrop to display your styles.
• Right-click on the Color Style and select Delete Style.

‌How to Use Text Styles in Figma

You can also apply styles to text. It could be a whole block of text or part of the text in a block. This helps define the style of your headers.

To create a new text style, start by creating a new text layer and add some settings. For example:

• Font family: Roboto
• Font size: 30
• Font weight: Regular

• Click on the four dots icon in the Text section to trigger the text modal.
• Click on the + icon in the right corner of the Text Styles modal.

• Give your style your preferred name (let's say Text Style 1) and click on the Create Style button.

‌‌How to apply a text style to a layer

First off, select your layer and go to the Text section in the right-hand sidebar.

Then click the four dots icon in the right corner of the Text section to trigger the text styles modal.

Finally, just select your preferred Text Style.‌‌

How to delete a text style

To delete a text style, you'll need to click on the file's gray backdrop to display your styles. Then you can just right-click on the text style you want to delete and select Delete Style.

How to combine color and text styles

You can also combine text and color styles while designing. You can add a color style to different text objects. This is an extra step which can make your system easier to maintain especially when you don't have to create different text styles for every color combination.

• To save color styles specifically for text: Create a text box and input your text. Follow the steps of 'How to apply a color style to a layer'.
• When you get to where you are supposed to give your style a description/name, input your text description, for example sub-heading, page heading, button text, and so on.

Conclusion

Note that using and creating styles when designing is entirely up to you. No one will know what color/text styles you use in your design unless you let them know. Like I said, it's entirely up to you!

However, styles help keep your designs consistent and creating great styles can help make your user experience seamless.

‌‌‌‌‌‌‌‌‌‌

Plugins help make your design process easier and smoother. From image assets to embedding maps into your designs, plugins are easy to use and they help you create beautiful, complex designs in less time.

How to Install Plugins on Figma

Figma makes it easy for you to install plugins which are quite essential for your designs. You can install plugins from different places.

How to install a plugin from your account

To install a plugin from your account, you just have to:

1. Login to your Figma account
2. Click on Explore Community at the top-left corner of your screen:

3. Select Plugins from the options at the top:

4. Search for your preferred plugin and install it:

Click on the plugin name to open the plugin page and learn more about it.

You can also see plugins already installed on your Figma account.

‌‌How to install a plugin in the file

1. Right click on the canvas – your cursor could be positioned anywhere.

2. Hover your cursor on Plugins, which will bring up all installed plugins.

3. Scroll down to Browse plugins in Community and click on it. This will open Figma Community in a separate tab.

‌‌‌‌How to Add Plugins on a PC

‌‌There are quite a number of ways to add plugins to your designs.‌‌

Add plugins from the File menu

Access the File menu at the top left corner of your screen in Figma. The File menu contains functions like edit, view, and text. You can also run your plugins from the menu.

1. Click on File Menu

2. Hover your cursor on Plugins, which will bring up all your installed plugins.

3. Click on your preferred plugin and apply it to your design.

How to add plugins with Ctrl+/

This is a Quick Action that helps you locate items, including plugins on your Figma file.

1. Press Ctrl +/ on your keyboard. This action will lead to a window pop-up.

2. Input the name of the plugin on the pop-up window. There could be different plugins with similar names. In this case, Figma displays all related plugins so you can pick the exact one you want.

3. Press Enter or click on the plugin, once you find it, to start using it in the file.

8 Figma Plugins Every Designer Should Know

There are lots of really helpful Figma plugins out there. Here's 8 really cool ones.

‌‌Iconify

Designs can seem incomplete without icons. From Google Material Icons to Carbon icons, this Figma plugin has a wide collection of icons that many developers use to create beautiful, modern user interfaces.‌‌

You can get icons in your preferred color, width, height, and size. You can also generate your SVG icon with this plugin.

‌‌Pattern Hero

This plugin helps you with different beautiful patterns for your designs. You can shuffle the patterns, and work with different templates.‌‌ You can also create grids and textures.

Unsplash

You need beautiful pictures to create beautiful designs. This amazing plugin helps you import images for your designs at a single click.

Using Unsplash, you won't need to waste your time searching through various portals for images – you get to download free images directly to Figma. You don't need to worry about the quality of the photos, as Unsplash images are usually of a very high quality.

Remove Backgrounds

Sometimes we download nice pictures for our designs, only to notice that the background of the image does not fit with the design.

As the name implies, the Remove Backgrounds plugin allows you to remove the background from your images. Just keep in mind that you do have to create a remove.bg account before you can use this plugin.

Mapsicle

You don't need to use screenshot images for maps ever again. The Mapsicle Plugin helps you place maps easily into your designs.

With this plugin, you can search for any location in the world, and embed a map into your design. You can also adjust the style of the map.

UI Gradients

Gradients make designs look unique. uiGradients is a great gradient palette with tons of ready-to-use gradients for your next amazing design.

With this plugin, you don't have to worry about which hue is perfect for your design. Just go through the gradients and find the combination that works for you.

‌‌Table Generator

Table Generator saves you the time when you're data tables. You just have to copy and paste your data in and voilà! Your table is generated.

This plugin enables you align text, add constraints to your cell frame, and lots more.

‌‌StorySet

This is an illustration plugin that lets you add illustrations to your work. StorySet contains hundreds of beautiful illustrations that you can use for your design. What's more, you can edit the illustrations' colors, styles, and backgrounds. You can also animate.

Conclusion

Plugins are essential when you're creating sophisticated designs. Just find the ones useful to you and learn how to add them to your designs.

We just published a UI / UX design course on the freeCodeCamp.org YouTube channel that will teach you how to use Figma to design a web app based on the needs of users.

Joseph Brendan developed this course. Joseph is a great instructor who has taught thousands of people on his YouTube channel.

In this course you will learn how to use the d.school design thinking process and self process management to come up with design solutions. You will develop a Fintech app from scratch.

Here are the sections in this course:

• Outline Breakdown
• Workflow Breakdown In FigJam
• User Empathy ( Empathize )
• Creating User Experience Survey With Google Forms
• Creating User Personas
• Creating Problem Statement
• Ideate
• Prototype Analysis
• User Goals & User Tasks
• Information Architecture
• Low Fidelity Prototyping
• High Fidelity Prototyping
• Creating Style Library
• Creating Component Library
• Prototype Presentation & Assignments

Watch the full course below or on the freeCodeCamp.org YouTube channel (2-hour watch).

Transcript

(autogenerated)

In this course you will improve your user interface and user experience design skills by building a mobile app.

Instructor, Joseph Brendan is a great designer and great teacher.

Hey, guys, my name is Joseph, Brandon.

And in this course, I am going to show you how to design a mobile app from scratch.

Now, this mobile app will be a stock investing mobile app that users can use to invest in the stocks of companies that they would like to invest in.

So here is a demonstration of the app that we are going to design.

Now over here, we have the splash screen of the app, which is what's going to show up when you launch the app.

Now, let's go to the next page here.

Now, this is the page where the user will have to select their next action, which is either to log in as an existing user or to get started as a new user.

So I'll go ahead and click on get started, just like a new user would do.

And here on this page, the new user will be required to sign up to this application with an email address, a phone number and a password.

Now, when the new user doors that the new user will be taken to this page, where the new user will have to enter a verification code that's been sent to the phone number of that new user.

Now, when the phone number of the new user is verified, it means that the new user is now a registered user on this application, and the next thing the user is going to do is to click on the Proceed button here.

And when the user does that, the user will be taken to the homepage of the application, which is this page here.

And here on the homepage of this application.

Over here, the account balance of the user will be displayed here.

Also, the user will have a button here that can be used to fund the account on this application.

And right over here, the user will have a list of recent transactions that they have carried out on this application.

Now coming down here, the user will see a banner here that they can click on to get a referral link that can be used to invite friends to have an account on this app.

Now, at the bottom here, we have the navigation section of this app.

Currently, we are on the homepage of the app.

Now let's navigate to the InVEST page, which is the page where the user will have the features that they can use to invest in stocks.

So I'd come here, and I'll click on invest.

When I do that, I'll be taken to the InVEST page, which is this.

And over here on the InVEST page, you can see that we have a display of cash and assets owned by the user.

And right after that, over here, we have a list of top stocks that the user can invest in.

And also, we have the investment portfolio of that user over here, which is a list of all the investments that the user had made on this app.

Now let's say the user is trying to invest in one of the stocks listed here, let's say this one, yeah.

Now, if the user clicks on it, the user will be taken to the details page of that stock that they clicked on.

And on this details page, we are going to have information about the stock and the company that owns the stock.

Now if the user likes what they see here, the user will go ahead to click on the InVEST button here.

And when the user clicks on that button, the user will be required to enter the amount that they wish to invest in that stocks with.

Now when the user enters the amount and the user clicks on the Proceed button here, the user will see a summary of the investment that they are about to make.

And when the user is okay with what they see here in the summary.

The user will be required to enter their secrets pin here, and then click on the InVEST button here.

And when the user does that, it means that the investment has been successful.

So this app that I just demonstrated here is what we are going to design in this course from scratch.

Now before we start designing this app, I would love to break down the stages of our workflow for this project, so that you can understand In the execution process of designing products that are actual business solutions.

So here are the stages of our workflow.

First things first, the stakeholders of this project, which is the owner of the project, or the company we are working for, will present us with a problem that they would want us to design for.

Now, when they present these problems on us, they are also going to tell us about the users, which are the people facing the problem that they want us to design for.

Now, after that, the stakeholders will state their expected goals for the project.

Now after the stakeholders presents a problem and states, their expected goals to us, the next stage of our workflow will be for us, the UX designers to empathize with the users.

Now after we empathize with the users patient problem, we are going to create what we call a problem statement.

And after creating this problem statements, the next stage of our workflow will be the stage where we will have to come up with ideas that can be best business solutions to the problems highlighted in the problem statement.

Now, when we are able to get an idea for the problems in the problem statement, the next action will be for us to design that idea into a testable prototype.

And after designing that idea into a testable prototype, we will go ahead to test the design to be sure that it is able to solve the problems in the problem statement.

So let's get to work.

Now outcome here in figma.

And I'll use a fig jam file to walk on all the analytical parts of our workflow.

So let's create a fig jam file.

And to do that, come here and click on the new fig jam File button there.

When you do that, you have created a junk file as easy as that.

And I'd like to mention that if you are new to using fie jam, you have nothing to worry about.

It's a really simple tool to use.

Just follow along, and you'd see that at the end of this course, you would be good with using feature.

So I'll close this.

And the next thing I'll do after creating a fifth gem file is to give the fifth gem file a name.

So I'll call this stocks, big jam, you can call it whatever you want to call it.

Now after giving this junk pile in him.

The next thing to do is to outline the stages of our workflow here in peach jam.

So let's do that.

So first things first out, zoom into 200% outcome here to zoom in and out Select Zoom to 200% here.

And when I zoom in to 200% out, use a square shape here to write down a headline for our workflow.

So I would keep this there, I would select the text to now so that I can write my text.

And I would say, workflow stages, then outcome here, and I'll align the text to the left.

And I'll change the color of the rectangle to this.

And that.

Okay, so the next thing I'll do is to have sticky notes, were out outline the workflow stages in.

So to create a sticky notes in peach jam, I would come here and now select the sticky note tool here.

When I select it out, come here and out, click on the big jam Canvas to have this.

Now let's select this.

And let's expand the width to align with our sticky notes.

So first things first, I will change the color of my sticky notes to this, then I'll click on this Add text placeholder here.

So that I can write down all of those workflow stages that I talked about.

So I would like to make this a list.

And I'd like it to be a bulleted list.

So I would come here and I would select the bulleted list property here.

Then I would write down the first workflow stage, which is this, it says stakeholders present the problem and the users facing the problem.

Now I'll create another list item, which is going to be the next stage of our workflow.

And that's going to be where the stakeholders will define the goals for this project.

So I would say define goals.

Let's come here.

Let's create some space here.

Now let's outline the next stage of our workflow.

After the goals are defined, we view X designers will empathize with the users.

So let's come here.

Let's create the space also.

Now After we the UX designers empathize with the users, the next stage of our workflow will be where we are going to create a problem statement.

So I would say, creates problem statements.

So let's come here, let's create the space.

Now after we create a problem statements, the next stage of our workflow will be the stage, where we are going to come up with an idea that can solve the problems listed in the problem statement.

Now, after we come up with a best idea that can solve the problems in the problem statement, the next stage of our workflow will be the stage where we are going to design that idea into a testable prototype.

So I would say design prototype here.

And after we design that idea into a testable prototype, we are going to move over to the next stage of our workflow, which is going to be the stage where we are going to test that idea that we have designed into a prototype.

So I would just call that test and have that spaced.

Now we have outlined our workflow stages here.

So just to make this better, I would select all of these and I would make all of the text bold.

To have that outcome here, I would select this text, and I'll make it bold also.

Now zoom back to 100%.

To see what we have, and this is okay, so I'll use the hand tool, which is this, you can come here to click on it to select it or just press the H key on your keyboard to have it selected.

And now grab and shift a canvas to this point.

So now we have outlined our workflow stages here right.

Now the next thing to do is for AWS to outline all of the actions that will be taken on that each of this workflow stage.

So this means that we are now going to break down each of these stage one after another, so that we know what actions to take at each of these stage and how to optimize for our results.

So I would select the Move tool here by clicking on it or by pressing the V key on my keyboard to select it.

And I would come here, I would select the square tool there so that I can create this shape like this.

And over here, I would write a text inside this shape.

And that text will be this first stage out select all of this text here, then I'll use CTRL.

C, if you are using a Mac, its command C, I would use that to copy that text.

And I'll paste it inside this question like this.

Now expand this to this point.

Now this is the first stage of our workflow right outcome here now.

And I'd have a sticky note here, right under that.

Now in this sticky note out write out what's going to happen at this stage, which is the first stage of our workflow.

Now this stage is the stage where the stakeholders will present the problem to us.

And also let us know about the users that they want us to design for.

So in this course, I would like us to assume that we have a stakeholder somewhere or we have a company somewhere that wants us to design an app that you can use to invest in stocks for them, right.

So I'll paste this in here in this sticky note, which says users find it really hard to invest in stocks using existing investment apps due to information overload and complex presentation of information on the apps.

Now, who are the users, the users are stock investors in Nigeria.

So this so having this here means that the stakeholders have presented us with a problem and the users facing the problem.

So this is sorted.

So let's change the color of the sticky notes.

Something like this to differentiate it from this one here.

And let's come here.

Let's change this, to that to differentiate it also.

So this is the first stage of our workflow.

And we have seen what's going to happen here at this stage.

So let's look at the next stage here, which is the stage where the stakeholders will define the goals of the project.

So I would come here, I would select this and now duplicate it to duplicate is Ctrl D.

If you are using a Mac, its command D.

So I'll duplicate this and our habits to here.

I will take out this text inside this shape.

And out writes define goals there.

I can have in brackets saved by stakeholders.

So I'll keep this here.

Now outcome here also out duplicates these and out habits, they're right on the dish shape, which is a square shape, right.

So inside the sticky notes, I'll take all of these out and out.

also assume that we have stakeholders somewhere who sent us the goals.

That's the ones for this project.

So let's assume that the stakeholders sent us this as their goal.

And it says, research and help us us simplify every task needed to make a stock investment.

So what we have here so far is this, the stakeholders have presented us with a problem and B users facing the problem.

And they have gone ahead to define their expected goal for this project.

And the expected goal is that they want us to research and help users simplify every task needed to make a stock investment.

So let's move over to the next stage of our workflow, which is the stage where we the UX designers will have to empathize with the users facing the problem.

So I would come here, I'll duplicate this, I would have this here.

And I would say empathize.

Now I have this here also.

And I'll take out all we have here.

And at this empathize stage, this is actually the stage where we the UX designers will now get to work.

So what do we do at this stage? What are the actions that we need to carry out at this stage, so that we can say that we have properly empathized with the users facing the problem.

So what we are going to do is to interview the users face to face or send out surveys digitally to the users.

The purpose for that is so that we can understand the problems from the perspective of the people facing the problem.

Now after that, we are going to create what we call user personas, all under this empathize stage.

So out, make this a list, just like this, to have that organized properly.

And when we are done with the empathize stage, by carrying out these two actions here, the next thing we are going to do is to move over to the next stage of our workflow, which is the stage where we will have to create a problem statements.

So I would come here, I would have this here.

And I'll change that to create problems statements, and have this stay here.

So at this stage, where you the UX designer will be needed to create a problem statements, what you do to create a problem statements, it's easy, just state the problem of the users with all you have gathered from the previous stage, which is the empathize stage.

So after you have interviewed the users to understand the problems from their perspective, and you have created user personas for each of the user, what you do is you'd use all of that data to properly state the problem that the users are facing.

Now when you create the problem statement, which is you stating the problem properly, the next thing you do is to move to the next stage of our workflow, which is the idea stage.

Now, when you get to the idea stage, let's have this here.

When we get to the idea stage, the actions that you take at the idea stage are simple actions.

All you'd have to do with this, launch a brainstorming session, then during the brainstorming session, vote for the best idea, when you vote for the best idea, select the idea with the highest votes.

And there you have gotten an idea that you can then take to the next stage of our workflow, which is the stage where we are going to design that best idea into a testable prototype.

So before we go there, let's select this and let's make it a list like this.

Now, let's come here and let's look at the next stage here, which is the design prototype stage.

And when you get to this stage, what are the actions that you need to take for you to properly design a workable prototype, we are going to look at the actions now.

So out have this the here I'll take all of these out.

And the actions that we are going to take to properly design a prototype are all of this.

First things first, we are going to create an information architecture for the best idea that we got from the idea stage.

When we create that in commission architecture, we are going to use that information architecture to create what we call a low fidelity prototype.

Now, after we create that low fidelity prototype, we are going to test the low fidelity prototype.

And when the test is successful, we are going to go ahead to create a high fidelity prototype for that best idea that we got from the idea stage.

Now, after we create the high fidelity prototype, we are going to move over to the next stage of our workflow, which is the stage where we are going to need to test that high fidelity prototype.

So I would come here, I'd have this here, I would say test prototype.

And I'll bring this here, I can just say usability testing here.

And that's all.

Let's come here, let's make all of these illest.

And that's okay.

So what we have here is a proper breakdown of our workflow.

So I like to connect all of this so that we understand that these stages are to be followed one after another.

So I would select the connector tool here, you can see where my mouse cursor is on, click on it to select it, I would come here out, select this point, click hold and drag.

And I would connect with this other point here, I would select this also connected here.

I'll do that for all of these other items.

Also, I would have all of them connected.

So we are going to design our products by following the breakdown of this workflow.

So now that we have outlined our workflow stages, and we have broken down all of our workflow stages like this, the next thing we need to do is to start executing each of the actions that we have outlined here, one after another.

So let's get to work.

So the first stage of our workflow here is the stage where the stakeholders will present us with the problem and the user space in the problem, right.

And as you can see, that stage is sorted, because I assumed that a stakeholder presented us with this problem and the users facing the problem.

So this stage is sorted.

Now over to the next stage, which is the stage where the stakeholders will state their expected goals for the project.

And that is sorted also, as you can see here, I also assumed that the stakeholders has stated the expected goals to us, which is to research and help us simplify every task needed to make a stock investment.

Now over to the next stage, which is the stage where we the UX designers will get to work.

And that is the empathize stage.

And under the empathize stage here, these are the actions that we need to take.

The first action is to interview the users face to face, or send out surveys digitally to the users.

Now in this course, since this is a lesson, I can't show you how to set up a face to face interview.

But I'll show you how to create a digital survey using Google Forms.

So let's do that.

So I would come here in my browser, and I would open a new tab, then come here, I would click on this menu icon here so that I can access my Google Apps out scroll down and out, click on forms here.

And when I do that, I would come here and I would click on Blank there, then a blank form will be created for me.

Now I'll give this form a title.

I can call it stock app UX survey.

And that's its outcome here also, and I'll give the form a name.

So I can call the form stock up UX survey also, or you can give it any name at all that you want to give it.

Now the next thing I would need to do is to have a form description just to describe what the survey form is all about.

So outcome here, and I'll have this and it says this survey is carried out by best technologists.

And it is aimed at improving the experience of users who want to invest in stocks from an app without having complex steps.

Now you can come up with a better description when you are doing this in real life.

Now after that out, start passing in the fields that I want the users to give me a response to, and the first field out have here will be an email field.

I'd like to collect the email address of everyone that will take part in the survey.

So that's going to be my first field here.

So to collect email addresses outcome here.

I'll click on settings here.

Then I'll expand responses here.

You can see the responses section here, I'll expand it.

Then in front of this collect email addresses option here, I'll turn on this toggle button, just like that.

And that's sorted.

Now when I come back here, you will see that we have an email field here, which is going to require the user to enter their email address here.

And as you can see, there is a red Asterix there, showing that this is a mandatory field, which means that anyone taking this survey must have to enter their email address.

Now let's move over to the next question that we are going to ask anyone taking the survey? And that's going to be us asking them to enter their full name.

Yeah.

So I would come here, when I type that in, I would change this from multiple choice to shut answer just like that, then I would come here and I would turn on this toggle button to make this field a required field, meaning that anyone taking this survey must have to enter their full name.

And that's sorted.

So I would come here and I would click on the plus sign here to add another question.

Just like that, then this question will be country of residence.

Now, this is important, because coming from what the stakeholders presented us as a problem and the user space in the problem, we could see that the stakeholders are actually trying to solve a problem for people living in Nigeria.

So it is important to ask anyone taking the survey from where they reside.

So if someone from Germany takes the survey, by mistake or happenstance, then it means that when we are collecting the data from the survey, we are actually going to ignore that person's imputes.

Because the person is not based in Nigeria.

So that's why it's going to be important to ask this question.

So I would come here and I would make this required also.

Now make sure this is set to short answer also, then I would come here and I would click on this button to add another question.

Now this question is going to be us asking anyone to can be surveyed enter their age.

And this is also important, because usage of apps, and the experience behind the usage of apps differs by age range.

So I would ask this question, and I would set this to short answer, then I would make this a required question.

So I would go ahead and add another question option here.

So that I can ask my next question, which is going to be us asking whoever is taking the survey to enter their profession? I would keep this short answer.

And I'll make this required.

Then I'll add another question here.

And this question is going to be us asking, have you invested in stocks from a mobile app? Now this is going to be a yes or no answer.

And Google Forms automatically suggest this because I have a question mark at the end of the question.

Now outcome here, and I'll click on yes as my first option.

And I'll click on No as my second option, and that's going to be fine.

Then I'll come here and now make this is a required question.

Then I'll add another question here, which is going to be select the goals you always love to achieve when investing in stocks from a mobile app.

Now, I'll have that in brackets.

Same select more than one.

Now outcome here, and I'll make sure this is a checkbox option.

Now mimicking this checkbox option is because I want the person taking the survey to select more than one answer.

So I would come here, I'll type in my first option, which is going to be invest quickly.

My second option will be found my wallet with more than one option.

The third option will be withdraw my dividends quickly, the fourth option will be easily access transaction history.

And the final option here will be to save time.

So this is me asking anyone taking this survey to tell us what they would love to achieve more when using a mobile app to invest in stocks.

So these are all the options that they can choose from and from the answers they select.

We the UX designers will understand what to focus on when designing and what not to focus on when designing.

So I would come here and I would make this a required question also.

And that's fine.

And I'll add another question here.

Which is going to be me asking anyone taking this survey this question it says select the frustrations you face when investing with the app you are currently using to invest so out also good Give them the option to select more than one answer here.

And I'd have checkboxes selected here.

So the first option here will be complex and unnecessary graphs, the second one will be long time to invest.

And the third option will be excessive ambiguity of information.

The fourth option will be on friendly user interface.

And the final option will be difficulty in funding wallets or accounts.

Now, this is us asking whoever is taking the survey to tell us the problems that they have with any investment app that they're currently using.

Now from what they would select here, we the UX designers will understand the problems to tackle and what to completely avoid when designing our own investment up.

So outcome here and I would make this a required question also.

And the final question, or the final request out have in this survey is to have the person taking the survey to upload their picture.

Now, this is not going to be a mandatory field, we are going to make it optional if they like the upload if they like they don't.

So I would come here out, click on the plus sign that add question.

And I'd come here and select File Upload.

Now outcome here, and I'll click on Continue.

And I would come here and I'd say upload your image.

And I would make sure this is not set to required.

That's because I want it to be optional.

And that's fine.

So at this stage, I'd like for us to preview this survey to see how it will look like when it is sent out to the people facing the problem.

So I would come here, and I would click on this button here, you can see where my mouse cursor is on, when I click on it, I would have a preview of the survey.

And this is it here.

It looks okay.

So let's come back here.

And let's click on send.

When you click on Send, you'd have this pop up show up here.

Now you'd come here and you'd edit this message, just in case you want to send this as an email to whichever person you want to send it to.

So you would come here and you'd say, vest, technologies there, you put in your own company's name, best technologies, has invited you to fill in a survey for UX research, or whatever you want to say there.

And that's fine.

Now this option is only when you want to send this survey form an email directly to people, you would come here and you type in their email address.

Let's say you type this in, you would use comma then type in the next email and the next email and the next email.

Now, if you don't want to send this as an email, you have the option of sending this also adds a link.

Now this option will make it possible for you to put this link up on your social media or send it through WhatsApp or send it through any other app to the public so that anyone that stays in Nigeria can stumble upon the link and take the survey.

Now to do that, come here and click here.

When you click there, you'll see the link here.

Now come here and click on this checkbox that says shorten URL.

When you do that, you'd have a shorter link.

Now you'd come here and just copy this link.

When you copy it, then you can post it on LinkedIn, you can post it on Twitter, you can post it anywhere you want to post it, you can send it to anyone.

And when they click on the link, they will be taken to the survey form for them to take the survey.

Now when they take the survey, you will be having the option to see the responses here.

All you do is come back to the form, click on responses and you'd see all of the responses over here.

Currently, I have zero responses.

So what's going to happen is out take this survey myself, I would take it twice, so that I would have two responses.

And I'll use those two responses to continue our research process.

Now take note in real life, you'd have more than two responses.

So I'll pause this video here.

I would go ahead and out.

Take the survey myself twice.

So I have taken the survey by myself twice.

And these are my responses.

As you can see here we have this field that says who has responded and these are the emails of the people that have responded and these are their full names and all of that now, this summary tab here in the responses section will just give you a full summary of all the responses.

Now for you to attend to one response at a time, come here and click on the individual tab appear.

When you do that, then you can come here and select the individual responses based on their email addresses.

Currently, this email is and@xyz.com.

And, and all of these responses here, all of these answers are the answers of this particular user.

If you want to see the answer from any other user, come here and select that with the email of that user.

If I select chicks@xyz.com, you will see that I would have all of this show up here.

Now, as you can see here, this is the email of chooks.

And this is the full name of trucks, trucks, EK, and the country and city of residence is Nigeria, Enugu, the age is 24.

The profession is importer.

Have you invested in stocks? Yes.

Have you invested in stocks from a mobile app? Yes.

Select the goals you always love to achieve when investing in stocks from a mobile app.

And Chuck said to invest quickly to one my wallet with more than one option to easily access transaction history and to save time.

Now, the next question here is select the frustrations you face when investing with the app you are currently using to invest.

And chucks says, long time to invest complex and unnecessary graphs, excessive ambiguity of information and non friendly user interface.

Now, for the other user, which is n, you can see the email of the user here and the name of the user is M for lucky.

And the country and city of residence is Nigeria Lagos.

I know in my initial survey form, I did not include city of residence, actually.

But I just had to include that so that I can target the particular location where the user is staying.

And the age is 24.

The professional is mural artist.

Have you invested in stocks? Yes.

Have you invested in stocks from a mobile app? Yes, select the goals you always love to achieve when investing in stocks from a mobile app and MCs to invest quickly to find my wallet with more than one option is the access transaction history save time and for this question here and select long time to invest complex and unnecessary graphs, excessive ambiguity of information and non friendly user interface.

Now at the bottom here, you would also see that the date of submission and the time of submission is recorded.

So I'll come back here.

And I'd also like to let you know that you can, you can export this response to a spreadsheet.

Now, I would advise you that if you want to do that, come here, click on summary, then click on create spreadsheets.

When you do that, you'd have this option to select, create a new spreadsheet or select existing spreadsheets.

Now, if this is your first time, just create a new spreadsheet.

Now I'll keep that now out, keep that selected, come here and out, click on Create.

When I do that, I'll have a new tab launched.

And as you can see, all of my responses has been exported into the spreadsheets.

Now you can also choose to come here and make your analysis from the spreadsheets.

And that's okay.

So after you create your surveys and send them out and the users or the people that you sent them out to send in their responses, you would go ahead to create what we call user personas for each and every user that sent in a response.

So at this stage, I'd like us to see how to create user personas and take notes.

Creating user personas is an action you take while you're at the empathize stage.

Now just understand that this empathize stage is the stage where you get to know the users better and understand their frustrations better.

And that's because it's only when you understand a problem better that you can come up with a better solution for that problem.

So let's go ahead and let's see how to create user personas for each of the user that sent in a response to our survey.

So I would come here now.

And I would select the text tool here.

And I'd have this here, I would say user personas, I would keep that selected.

I'll change this text from a normal text to a sub heading text.

And I'd make this bold, then I would come here and I'll change the color of this text to that.

So this is going to be our user persona section.

Let's duplicate this.

Let's come up here.

Let's call this section, workflow break down.

However you want to call it, it's fine.

That's okay.

So I'll just scroll down to the user persona section.

And the first thing I'd have here is the image of the user that I want to create a persona for.

So I would come here, I would select the square tool here to have a square shape here, which I am going to use to place the image of that user in.

Now this is necessary, whether the user sends in an image or not, you can just have these here, if the user does not send in an image, then you leave this blank, go ahead and do the rest.

But if the user sends in an image, then you place the image in here.

Now there's one way to place an image into a shape here in feature, all you have to do is keep the shape selected, right click on it, then go to plugins and use the Unsplash plugins for that.

So I would come here, I would launch that plugin.

And I would come in here and I'll type in African woman.

So I can have an image of an African woman show up there.

So I'd come here and out select this.

And that's okay.

So the next thing to do is to have all of these details about this person who has this image.

Now the name here is an felucca, the country and city is Nigeria, Lagos the age is 24 Professional mural artists.

Now, over here, I would say an is a mural artist resident in Lagos, Nigeria, and is also a stock investor who invests in stocks with existing stock investing apps in Nigeria.

And this is like his summary about her personality.

Now, I'll go ahead and out highlight her frustrations with the existing investment apps that she used in Nigeria and out also highlights the goals that she aims to achieve with an investment app.

So outcome here, now have this here, outpaced this.

And over here, these are the things that she wishes that she had as an experience with an investment app.

And these are her current frustrations.

Now all of these details about an was gotten from the response that she gave us when she took this survey that we created.

So you can see how this connects.

So let's go ahead and let's create a user persona for the other user that took the survey.

So that is going to be chooks.

So I would come here, I would have this shape here.

And I would run the Unsplash plugin on that shape.

And I would type in African man.

And I would go with this here.

And that's okay.

So I would have this hair for chooks.

This is his name, and his country and city, age, profession, and all of that out also highlight his goals and frustrations.

And that's fine still.

So what we have done so far is this, we have concluded the empathize stage, we have gotten to know about the problem from the perspective of the users.

And we have created user personas for each user that took our survey.

So we are going to move ahead to the next stage of our workflow here, which is the stage where we are going to create a problem statement based on all we have gathered during the empathize stage.

Now this really makes sense because you can create a better problem statement when you understand the problem better.

And the way to understand the problem better is to empathize with the people facing the problem.

And that's what we have done.

So let's go ahead and let's create a problem statement based on what we have learned.

So I'll duplicate this outcome here, I'd say problem statements.

And for me going by all we have learned from the empathize stage, this is my problem statement.

My problem statement states that users are frustrated with existing investment apps, as a result of excessive ambiguity of information and complex steps.

These consents negatively affect the experience of these users.

Now, this is my problem statements and this is the problem that our try solve.

So, if we come up here, you will see that we have empathized with the users and we have created a problem statement.

So the next stage of our workflow is the idea stage, which is the stage where we have to come up with an idea that can solve the problems that we have in the problem statement and what actions are we to take at this stage.

So at the idea stage, the first thing we are going to do is to set up a brainstorming session where we are going to invite other designers, product managers, business managers Lawyers, software engineers, and so on and so forth.

Now, when we invite all of these people, we are going to present them with enough information about the problems in the problem statement, and ask them to come up with ideas that can possibly solve the problems in the problem statement.

Now, when each and every one of these people that we have invited, come up with an idea, the next thing to do is to read out all of these ideas to everyone and call a vote for the best idea.

Now, the idea with the highest votes should be selected.

And when that is done, it means that you are ready to move to the next stage of our workflow, which is the stage where you'd have to design that idea into a testable prototype.

So before we move over to this stage here, I'd like to come here out also highlights that this stage is the idea stage.

This is the idea stage.

And since this is going to be a brainstorming session stage, and obviously I can't have a brainstorming session here in this lesson, it's going to be something that you'd set up with the people you want to set it up with, beat on Zoom discord, beat real life, anyhow, you want to set it up, that's fine.

So I'll just highlight this stage here.

And what I'm going to do is, I would assume that I conducted a brainstorming session offline, just so that we can learn better.

And I'd also assume that during that brainstorming session, we arrived at an idea.

So I'd have this here selected idea.

And I would paste this as our selected idea.

Now this is the selected idea for this course, it says Create an investment app where graphs are represented with text, where users will have the option to fund the account and wallet via bank transfer or their debit cards, where recent transaction history will be easily accessible.

And were plain and easy to understand English will be mostly used.

Now if you look at this idea, you'd see that this idea solves the problems that we have in this problem statements.

And this problem statement was gotten from all we learned during the empathize stage.

And we were able to learn all we learned during this stage because we created a survey form and sent out the survey to use us so you can see how everything connects.

So now that we have an idea that we can use to solve the problem, the next stage here is the design prototype stage.

And at this stage, the actions that we need to take all of these First things first, we need to create an information architecture for this best idea that was selected during the idea stage.

So I would come here, I would scroll down to this point.

And I would have this here, I'd say information architecture.

Now before we create the information architecture, let's understand what an information architecture is and why it is important to create one.

So the information architecture of a mobile app is the way you organize and arrange information on the mobile app that will help the users have that mobile app to accomplish their task on that mobile app without a bad experience.

So it is in the information architecture, that you will decide what features and what information we exist on each page of the app, and each step of the app.

So let's go ahead.

And let's create an information architecture for this idea.

Now, the way to start creating your information architecture is to first of all, define the goals of the users who will use the app, then define the task that the users have to complete to achieve their goals on the app.

So outcome here, and I'd have this here.

So this here is the goal of the user to invest with a good experience.

Now the user task here are the actions that the user will have to take to achieve this goal.

Now, what are the task, the user will have to sign up to the application as a new user or log in as an existing user then fund their account or their wallet, then use the fund that they have in their account or wallet to invest in any stock of their choice.

So if they can accomplish this task, this task and this task, it means that they have achieved that goal on that app.

So after defining the goals of the user and stating the task that the user has to complete to achieve that goal, we are going to go ahead to create our information architecture flow, and for the sake of time out, speed up this process, and I'll explain it so that you can understand.

So what we have here is our information architecture flow.

And our zoom in so that I can break down this flow one after another and also show you how to come up with a flow like this.

This is the start point of the flow.

This is where the user launches the app.

So when the user launches the app, the user will have two options, one to sign up and want to log in.

So let's go with the signup flow here.

Now, if the user is trying to sign up, the user will be required to sign up with their email address, phone number and password.

And after this step, the user will have to verify their phone number.

Now, after the phone number is verified, the user will be taken to the homepage of the application.

When the user gets to the homepage of the application, the user will have all of these options here.

And the first route or the first option here will be the menu icon, which will be on the homepage.

The user will also have the account balance displayed on the homepage, the user will have a fund account option that they can use to fund the account still on the homepage.

And still on the homepage.

The recent transactions by the user will be displayed there on the homepage.

Now, still, on the homepage, we are going to have a referral banner.

Still on the homepage, we are going to have an invest route that the users can take if they wish to invest in stocks.

Now still, on the homepage, we are going to have a transact option, just in case the user wishes to deposit or withdraw.

So all of this is on the homepage.

Now let's look at the flow of the first item here, which is the Menu icon.

Now if the user clicks on the menu icon, which is on the homepage, the user will see all of these options, recent transactions, card management, investment portfolio request statements and settings.

Now, just for the sake of those who don't know what a menu icon is, if you go to an app or a website, using your mobile phone, you would always have this icon here at the top that when you click on it, you'd have a drop down or you'd have a menu bar sliding from the left or from the right now, that's what we call the Menu icon.

And most mobile apps have that.

So this is going to be all that we show up when the user accesses the menu icon route now for the account balance, or that's going to show a base available balance.

And that's all.

Now for the fund accounts option.

This is the flow, the user will have to choose a method.

And this is important for the experience.

Because from our user research, it was clear to us that the users actually want an experience where they would have the option to fund their account with more than one option.

So when they choose a method, then they would go ahead to find the account with that method that they have chosen.

So that's what the fund accounts route right now for the recent transactions route.

All the user will have when they access a recent transaction will be the transaction details.

And that's okay.

Now we have the referral banner option here.

And when the user access the routes, they would have a referral promo code that they can copy you know and send to a friend to join the app for all of that and all of that.

And that's fine.

Now we have the InVEST route here.

When a user accesses this route, the user will see a list of stocks that they can invest in and will also see their stock portfolio that they had invested in.

So if the user access one of the stocks that's been listed, the user will see the detail for that stock.

And if they like what they see in the detail, they will go ahead to invest.

And that's a good flow.

So if you come here, we have this route here, which is the transact route.

When the user accesses this route, the user will have the option to make a deposit, which is also like funding the account you get.

And the user will also have the option to make a withdrawal from the account.

So this is just the basic information architecture flow for this app.

And it is always important for you to create this information architecture, so that you will understand and organize the steps that the user will take on the app.

It is also important so that you can also streamline the core features that each page Your app will have.

Now if you remember, that was the signup proud, the login routes is still the same, because all you have to do here to login is just enter your email address and your password, then you'll be taken to the homepage.

Still, when you get to the homepage, every other theme is the same.

So that's that if you have any questions on the information architecture here, draw my attention to it.

And I'm there to help.

So if you come here now, in our flow breakdown, you'd see that under the design prototype stage, we have created our information architecture.

The next action at this stage is to create a low fidelity prototype of the best idea using the information architecture.

Now before we do that, I'd love to explain what a low fidelity prototype is.

So a low fidelity prototype is a dummy version of your final design for an app.

Now, the question you may ask is this, why do we need to design a dummy version? Now this is it.

Designing a dummy version is important because at this stage of trying to figure everything out, your design, and your design process can be subject to lots of changes, and imputes from the stakeholders.

Now, it's just like building a dummy house first, before you build the main house.

Now, if you use paper to build a dummy house first, before building the main house, it's going to be a lot easier when the owner of the house comes to make a correction or comes to make a change.

Since it's a paper, you don't have much to lose, all you have to do is just tear it and put it back in seconds.

But if you go ahead to build the main house first, and the owner of the house comes and says, Okay, I don't want this design here, I don't want that there, it means that you'd have to break down that part of the house and rebuild that part of the house with all of the resources that you have put into building that part of the house.

And that's going to be a lot more hectic compared to you using a paper to just build a prototype or a model of the house.

So that's basically what a low fidelity prototype is.

And that's why it is important for you to have a low fidelity prototype, then take that to the stakeholders for correction and changes and imputes and all of that.

Now, when the low fidelity prototype has been accepted and agreed on, then you can go ahead to design the real app itself, which is the high fidelity prototype.

So let's go ahead and let's see how to create a low fidelity prototype of our best idea.

So we are going to do that using a figma design file.

So I would come here, I would go to figma.

And I'll create a new design file.

And I'll call this stock investment app.

And out come here and out, rename the page one to low fidelity.

And this page is going to contain all our low fidelity screens.

So let's go ahead and let's start.

So to design low fidelity screens is easy.

And it is easy because you don't need a design system for that.

Like you don't need a style library.

To do that.

You don't need a component library.

To do that.

You don't need all of that, all you have to do is focus on the user task.

So if you come here, you'd see that our user task on this app is to sign up a login on your account or wallet and invest.

And if a user accomplish all of these tasks, it means that the user will achieve their goal on this app, which is to invest in stocks.

So we are going to design a low fidelity screams around these user task.

So let's come back here and I've picked my design file.

And let's see what it is to create low fidelity screams, all you have to do is select the frame tool, then go with any template of your choice, I would go with iPhone 13 Promax, and not have that.

So the next thing I'll do is to just come here.

And since this is going to be the splash screen, I'll just have this logo stay here out align it to the center, horizontally and to the center vertically, then I would go ahead to create the login screen, the signup screen and all of that.

And actually, the way I like doing it is this, I like to segment the screams into categories using the user task.

This section or this segment should be four authentication screens.

So I'll go ahead, speed up this process and have other screens here.

Then I'll explain how I came about all of that.

Now before I do that, I may have missed something here.

I know some people who are new to fit jam may not understand how these connectors are created.

Now all you have to do is use the connector to select it, click on the point, then you connect it anyhow, you want to connect it, you can take your connector anywhere, connect any shape that you are trying to connect, and that's fine.

And when your connector is created, you can actually play around with it, you can click on it to select it, grab the points, take it up, take it down, anyhow, you want to play around with it, it's fine.

Now you can also select the connector and change the color of the connector, just like this.

So all of these connection lines were created using the connector tool here.

So let's go back to our figma design file.

And out pause this video here and come back with all of our low fidelity screams, then I'll explain further.

So what we have here are low fidelity screens for the authentication task.

So let's zoom in.

As you can see, here, we have the splash screen, which is this.

Now after the splash screen, we have this screen where the user will have to choose that authentication action, which is either to login or to sign up.

Now to create this button here, you don't need to use an auto layout or any of that, all you just have to do is select the rectangle to like this created anyhow, you want to create it, then come here, select the text to and you can just say login or sign up or whatever you want to have.

They're just like this.

That's how I created this.

And I did not have to come up with a color.

And it's advisable for you not to use colors when creating your low fidelity screams.

And that's because if you have colors chosen, it may distract the stakeholders when you are presenting the low fidelity screams to them at this stage, all you should focus on is the user experience.

So having colors or making the low fidelity screams look good, may distract the stakeholders away from the user experience.

So that's how I came up with the buttons there.

And here also, this impute fields, I just use the rectangle, the rectangle to create a rectangle shape there, I added a stroke.

And I took out the field color and I had that then I had a text inside there saying email just like that.

And this button, we know how to do that.

I duplicated all of this.

And I had one more field here for the phone number.

And my button is still here.

Then here we have this field for a verification code.

And over here I have the Verify button that Okay, so all of the screens here are for the authentication task.

Now let's scroll down to the next task, which is going to be the fund wallets task.

And that task actually will happen from the homepage.

So that's why I created a low fidelity version of our homepage.

So you can see that we don't have too much of information here.

So if I scroll down, you'll see that I have the fund accounts pop up action here.

Now this element is going to show up when a user clicks on fund accounts here.

When they do that, this pop up will show up for them to choose the method that they want to fund the account with.

And that's okay, so this is easy to create, just have a rectangle like this and have your text inside of it.

Then the background of this navigation section is also a rectangle that I had across the screen like this, and I changed the color to something like this, just like that.

That's easy.

So over here, this is a rectangle also with a text on it.

And I have a rectangle here with a corner radius of 16 px.

And that's okay here, we know how to create a button.

And this is just text.

Now for this icon here, I got that from an icon plugin, I used the feather icons plugin to have that sorted.

So this task is complete, we have the font accounts button here, which if a user clicks on it, you will have this pop up show up like this.

Now let's move over to the next task on our app.

And the next task here is to invest.

So if I come here, and I scroll down, you'll see that I have this screens for the InVEST task.

Now this is the section for that we have this page here we have this icon we have this text here.

Now I have this section which is like the list of stocks to invest in.

I have this search bar here.

I have this search field here which is also easy to create.

All you have to do is create a rectangle give it a corner reduce of let's say 16 Or let's say 816 is a lot.

Then come here take out the the fill color and give it a stroke Hello, and you have that, then you have a text inside there, that's really easy to create, then I have the list of stocks here.

So I just have a rectangle here also with this text on top of it.

So it's also easy to create, all you have to do is just have something like this, then give it a canary use of 16, then take the color down the beats to this point, then have your text written on top of its plot away, then keep this here, then have this plus 234 percent.

They're all any number that you're okay with.

So that's how I created this.

And if you scroll down, you'll see that we have the your stock portfolio section, which has this also, we know how to create this.

And over here we have the navigation section.

And that's okay.

So the next page here, let's zoom out a bit.

The next page here is the stock Details page.

Now, this is all assuming that a user is interested in this stock here, you can see where my mouse cursor is on.

So if a user is interested in this stock, and the user goes ahead to click on it, this details page will show up for the stock showing the details of that stock and the company that owns the stock, you'd have the company logo here.

And you'd have the stock percentage and all of that there, you'd have the interest for that stock, minimum cap volume, about the company, the valuation rank and all of that, then you'd have an invest button here.

And I think by now we know how to create all of the elements here.

Now, if a user clicks on the InVEST button, they would go to this page where they would have to enter the amounts that they wish to invest in that stocks with.

And I believe on this page here, we know how to create all of the elements that we have here.

Now, if a user clicks on the next button here, after entering, the amount they wish to invest in that stocks with the user will be taken to the next page here, which is going to display the summary of the investments they're about to make.

Over here, they would have the amount that they typed in here, display here, the minimum cap, the interest value, and so many other details, and so many other details that are not listed here.

Now, if the user is okay with that, the user clicks on the Proceed button, and the next page that user will be taken to is the success page indicating that that investment is successful.

Now the user will have the option to click on the back to home button here.

And that's that it means that that task, which is the Invest task has been successful.

So for us to properly present low fidelity screens like this for testing and for impute and for opinions.

And for all of that.

For us to properly do that, it means that we need to make a prototype of this low fidelity screens, so that we can present them properly for testing and for imputes from the stakeholders.

So let's go ahead and let's do that.

I'll click on the prototype option here.

So let's start with the splash screen.

So out select out, click on the splash screen to select it.

When the splash screen is selected, you'd have this point here, all you have to do is click on it, hold it and drag it to the screen of destination.

So I would want the users to go from the splash screen to this screen here.

Now when I connect this splash screen to this other screen here, you'll see that figma will bring up this interaction details card for us.

So that we can set the mode of our interaction.

So over here I have the On Click event.

And the action for that onclick event is a navigate to action.

So what this means is that when the splash screen is clicked, we are going to navigate to this screen here, which is iPhone that in Promax two, this is the name here actually, you can actually it is advisable for you to rename all of your screens, that's the best way to do it.

So this practically means when the splash screen is clicked on, navigate to this other screen, which is this one here.

Now we have an animation section here that we can set the animation of that transition or the animation of that navigation.

So currently to set instance, I can come here and set this to smart animate, then set this to ease in and out and out.

Set the animation delay time to 800 milliseconds, just type in 800 there and press the Enter key on your keyboard and figma will add the milliseconds for you.

Now this animation settings is optional.

The most important thing here is that we have set the event and the action that will be triggered by that event, then we have sets to destination frame for that action.

And that's okay.

So that's sorted.

Now outcome here, out, click on this button.

And I will say, okay, when a user clicks on this login button, they should go to the login screen, which is this.

Now for the Interaction Details, ugly with set like this.

This is the setting we had before now.

So I'll leave it set like that.

Now, for the sign up button.

When a user clicks on the sign up button, it means the user is a new user.

So I would like that user to be taken to the signup page, which is this one here.

Now, when the user goes to the login page, and the user enters their email and their password, it means that they would have to click on the login button.

And when they click on the login button, I'd like them to go straight to the home page, which is this.

Now remember, for a user to log in, it means the user is an existing user.

Now, when a user selects the Sign Up option here, it means the user is a new user, and the user will have to enter their email address, phone number and password right.

Now when they do that, it means they would have to have their phone number verified first.

So when the user clicks on sign up, the user will be taken to the verification code page.

And when the user's phone number is verified, the user will then be taken to the homepage.

And that's fine.

So you have seen that we have created the authentication flow.

So let's come over here on the homepage, let's work on the next task.

Now the next task is to fund the accounts, right.

And to fund the accounts, the user will have to click on the fund accounts button.

Now when they do that, we are going to want a pop up to show up on the screen.

And that pop up should show this card here that will that will require the user to choose the method that they want to fund their accounts with.

Let's come here in our Interaction Details.

Over here, it's an On Click event.

That's okay.

Now, over here, we have the Navigate to option.

And that's not what we want, we want a popup to show up on that same screen, we don't want the user to leave that page that the user is on, we want the user to still stay on that page, but have a pop up show up.

So how do we make that happen, we are going to change this from navigates to to open overlay.

When we change it to open overlay, we are going to come here and select the center option, because I would want this pop up to stay at the center of the screen here.

So over here, I would keep this selected, which is closed when clicking outside and out.

Also keep this add background behind overlay options selected, then for the opacity of the background overlay out, keep it set to 25%.

Now for the animation, you can still keep it set instance or come here and select any other option of your choice.

So that's okay.

And we are okay with that.

Now, if a user selects bank transfer or debit card, they will be taken to another page where they would have to process that transaction method.

So you can also come here, if you don't mind, let's click on Design, you can come here and duplicate this page and and create a low fidelity screen for that you can call these bank transfer.

And you can have whichever element you want to have here.

And you can go ahead to have the debit card page also that the user will go to when they select the debit card option here.

But that's not the point here.

So I'll take this out.

Now we are done with the fund wallet task.

So the next task is the Invest task.

And this task will happen from the homepage.

It is when the users go to the homepage, that they would click on this invest option here for them to go to the InVEST page so that they can invest in stocks.

So from this homepage here, outcome held click on prototype.

From this homepage here, I would select this invest button here.

And I'll create a connection to this page.

And that's okay.

So when a user clicks on that invest button at the navigation section there on the homepage, that user will be taken to this page here, which is the Invest page where the user will see the list of stocks that they can invest in and their stock portfolio.

So if a user comes to this invest page, the task we want them to complete is to invest So let's say the user is cool with this stock here and the user wishes to invest in this stock, I would select it, then I would create a connection like this.

This means that when the user clicks on this stock, the user will go to the stock details page for that stock.

And when the user is okay with that stock details that the user sees here, the user will click on the InVEST button here.

And the user will go here to this other page, where the user will have to enter the amount that they wish to invest in that stocks with.

And when the user enters the amount they wish to invest with, the user will click on the Next button, which will take the user to this page here where the user will see a summary of the investment the user is about to make.

And when the user is okay with all the user sees here, the user will click on proceed and the investment, which is the task will be completed.

So what we have here is we are done creating a low fidelity screens.

And we can present a low fidelity screens for testing now.

So how do we do that, I would come here, I would select the splash screen, because that's where the whole journey starts from right? When I select it, I would come here, and I would click on this presents button here to have that presented, a new tab will be launched for that.

So I would come here, and I would click on the Enter full screen option here you can see where my mouse cursor is on.

Now, this is the presentation, I would present to the stakeholders, which are my employers or the owners of the app.

So I will take this presentation to them to demonstrate the user experience that I have come up with that will enable the users to accomplish their task on this app.

So I would go from here, I would click on this screen.

And I'll explain to the stakeholders at this point that existing users can click on login.

And new users can click on sign up.

So I would demonstrate these as a new user, I would say okay, when they click on sign up, they would come here enter their email, phone number and password.

When they click on the Sign up button, they would have to enter a verification code.

And when they are verified, they would go to the homepage.

Now, if they want to invest, it means they have to fund the account.

So I would click on the fund account button to demonstrate to them that in this case, now we have a bank transfer method and debit card method, I would say okay, if the users go ahead to fund to fund the accounts, then it means the users are ready to invest.

So for them to invest, they would come down here and click on the InVEST button there.

When we use that those that the user will see list of stocks that they can invest in.

And if the user chooses to invest in any of the stock, let's use this, for example, they would click on it, when they click on it, the user will be taken to the stock details page for that stock.

And when the user is satisfied with the details of the stock, the user will click on the InVEST button here, then the user will be required to enter the amount they wish to invest in that stocks with when the user does that, the user will click on the Next button here.

And when the user clicks on that next button, the user will see a summary of the investment they are about to make.

And if the user is satisfied, the user clicks on the Proceed button here and the investment will be successful.

And when the user is done, the user clicks on back to home, and the user will be taken back to the homepage.

So a presentation like this will really reveal the experience that the user will have using this product.

So if your low fidelity prototype has been accepted by the stakeholders, it means that it is now time for you to go ahead and start the process of designing your high fidelity prototype, which is going to be like the real design version of your app, or the final design version of your app.

And it is at that stage that you'd focus on themes like colors, typography, effects, components, library style library, and all of that.

So in this course, let's assume that our stakeholders gave us a pass for these low fidelity screams and they are okay with it.

Let's assume that our stakeholders now want us to go ahead to design the real version of the app.

So what do we do? Let's click on Design.

Come here.

Create a new page and call this Hi Fi deleting.

So at this stage, I'd like to welcome everyone to the most interesting part, which is the part where we start building our designs from scratch.

So first things first, I'll go ahead to create my style library.

And I will start by creating my typography styles.

So I will do that using the Material Design version to guide.

So I would come over here, I would go to material.io.

And when I come here out, click on Design.

When I click on Design out, come here on the left side, and I'll click on typography, then I would select the type system.

And when I do that, I would come here.

So the first thing that I would have set is the typeface or font family that I want to use for this project.

For this project, I would love to use the rubric font family.

So I would come here, and I would select it here for headlines and subtitles, then I would go ahead to select it here for body and captions, just like that.

Now I'll use the data here in this type scale to create my typography styles.

Now let's start with creating headline textiles for this project.

Now since this is a mobile app project, I won't see the need to have a headline one text, same for the headline to text.

So I would go with the headline for textile as my own headline one textile just because this is a mobile app design and this size of text is going to look too big for a mobile app.

So I would come here out click on headline for and I would use these details here.

So I would come here I'll create a frame here where my textiles are going to stay in so I would say headline one a duplicate this out say headline one bold.

So outloud say headline two now this is me getting everything set before I start applying the details that out get here from the type scale generator.

So outcome here out, duplicate this and out see headline to bold and out come here out have this out see a headline three.

And this is going to be headline three bold, and that's going to be that for my headline textiles for this project.

Now I'll go ahead to have my body textiles.

So I would come here out, prepare this for body large.

And I'd have this be a body large bold textile, then I would go with body small here.

And I'd have this as Bodhi small bald.

Now this is my own style.

And this is my own pattern.

I am not saying this is the standard out there.

I'm just doing this because this is what I feel will give me the best design.

Now come here.

This will be for my button text and I'll have a caption text.

So after having all of this set out, come here out select the headline one text here.

And I will use the headline for textile here in material design.

Just like I said I would use this for my headline one textile.

So the font family sets Rubik, the width is set to Normal, which is regular, the size is set to 35.

And the letter spacing is set to 0.25 px.

So I would go ahead and I would have all of these sets.

So I would come here keep this selected, how to set this to Rubik and how to set this to regular and for the letter spacing out come here and out set this to 0.25 px, and for the size out set it to 35 px.

Now I'll use these same settings for this headline one text for the headline, one bold text, the only difference will be that this is going to be a bold text and this is going to be a regular text.

So I would select this.

Now to set this to 35.

I would set this to beak and I'll keep it set to bold like I said, and I'll make this 0.25 px and that's okay, so I'll go ahead and now do same for headline to headline three body large body large bowed down to the caption text.

Now for the headline to text here, I would come here in material design and I would use the headline five textile for my own headline to textile.

So the font families Rubik, the weight is normal, the size is 24.

So I would set the size to 24.

And for the weights out, keep it set regular and for the font family.

I'll keep it set to Rubik.

Now the letters business zero px, so I can just keep it set at 0% or just come in here and type in zero px, and that's fine.

I would use the same setting for the headline to bold, but the difference will be that this is going to be a bold text So I would come here, I would set this to 24.

Send this to Rubik.

Keep this set to zero, keep the letter spacing set to zero, and then keep this sets bold.

So I can have that.

Now for my headline three text.

If I come here, I'll use the headline six textile here for my own headline pre text.

So I would keep this set Rubik, this set to medium size set to 20.

So I'll keep the size set to 20.

And for this, I'll keep it set to medium and outside this to Rubik.

Then for the letter spacing, it sets 0.15 px.

So I would come here, I would say 0.15 px.

And that's going to be cool.

Then for the headline three bold, I would have the same sentence there.

But the only difference as usual will be that this is going to be a bold text.

So I would come in here, outside this to rubik cube assets board.

And for the size, I think it's 20 px, and for the letter spacing is 0.15 px.

So I'll type that in.

And I'll keep this set to 20 Just like this.

And that's okay.

So for the body large text, come here and use the body one textile here, you can see that the size is 16 px, the width is normal, and the letter spacing is 0.5 px.

So I'd come here, keep this here, I would set the letter spacing to 0.5 px outsets, the weights to regular and outset these to 16.

And out set this to Rubik and that's okay, for the body large board, you know what to do already, how to set this to 16, set these to 0.5 px, set this to bold, then set this to Rubik.

And that's it.

So I'll go ahead and out, have my body small text here.

And if I come here and material design out, use the body to textile here material design for that.

So I'll keep it set to normal set the size to 14 and the letter spacing to 0.25 px.

So I would have this set to 0.25 px, I'd set this to 14, out set this to Rubik, and I'd set this to regular.

So I'd have this here.

And this is going to be 14 0.25.

And this is going to be Rubik.

And that's sorted.

Now for the button text.

I'll keep this here.

If you come here, you'd see that the button text here has a size of 14 px and a letter spacing value of 1.25 px with a weight that is set to medium.

Now, over here, material design to the button text is all in uppercase.

But in my case, I won't have my text stay in uppercase.

And I think in material design version three, the button text is not represented in uppercase.

So I would go ahead and I'd have this set of 14.

And the letter spacing is pretty big.

So I would have that set to 1.25 px.

And this will be set to medium with the font family sets to Rubik.

And that's what we have here.

Now for the caption text, it's going to be set to 12 px with a letter spacing value of zero points for PX and a normal weight.

So I would come here, I'll keep this here.

And now I have this sets regular, this will be 0.4 px.

And this will be set to 12 Just like this.

And the font family will be set Rubik.

So this is going to be a caption text.

So at this stage, what I'll do is I'll go ahead to save all of these styles that I have created to my style library.

And I think we all know how to do that by now.

So I would speed this process up, I would select this column here, and I would call this headline one out go ahead fast forward this part of the course and come back.

So this is it, I have created and saved the textile that I would need for this project.

So I would come here and I would rename this frame typography styles, just for better documentation, you know, now when I click on my empty canvas, you would see that I have all of my saved textiles over here.

Now let's go ahead and let's create a color styles out.

We'll name this frame to color styles.

I'd save that now out create my color styles based on my meat.

I want to make use of the Material Design Guide to create my color styles.

And that's because you can actually do that.

You can create your color styles your textiles you can create any of your styles without using the Material Design Guide And you can actually mix it, you can create your textiles with the Material Design Guide and have your color styles created from your own inspiration.

So outcome here, I'd like to have a background color here.

So I'll use this my background color, or have a text stay at the top here to indicate that this is for my background color, I would select this text and I would make use of one of my saved textiles.

So I'll go with the body large text there.

So for my background color style, I'd like to use this color.

And that's good.

Let's zoom into this point.

So we can see clearly, and after having a background color, I'll duplicate this use this here, I would love to have a surface color.

And for my surface color, I'd like it to be this color here, you can use any color of your choice, this is my own choice.

So I'll duplicate this, and have this day here.

And this time, I'd like to have a surface text column, you can call this an on surface color, actually.

So I'd like to have a surface text color, which is going to be the color that I'll use to write text on the surface color.

So I'd like this to be white.

Actually, I know this may not be visible.

But I'd like that to be whites just like that.

So I would duplicate this.

Now for us to make this visible out, select it and add a shadow effect.

The next color that out heavier, we called the off text column.

And that's my own choice, I'd like to have another color for my text.

So I would use this shade for my off text color.

And duplicate this.

And I'd have another color here, which is going to be my error column.

And obviously, this is going to be a red color.

So I'll use this shade of red for that, then I'd have this here.

And I'd like to have a second surface color.

And I'd like that color to be just like this.

And that's fine.

So I have selected all of the color styles that I would want for this project.

So I would go ahead and I would save all of these styles to my style library.

And I think we all know how to do that.

So I would select this column here.

And I'd call that background color, I would speed up this process and I would come back to it.

So as you can see, I am done creating and saving my color styles.

And these are my color styles here.

So that's sorted.

The next thing I'd like us to do is to go ahead and create the grid style that we are going to use for this project.

So to do that, I would use a mobile layout, I would use the iPhone pattern Promax layout, so I would have the iPhone 10 Promax layout here, I would rename it to mobile grid style out zooming to this point, I'll keep it selected, then I'll add a layout grid property to it, just like that, then I'd have this big column grid.

Now I have the count before I would have the margin be 16 out have the gotta be 16.

And for the color out go with something like this.

Now, we are sorted for the column grid.

So I would go ahead and add a row grid property to it.

I'll keep it selected still come here.

Now to add another grid property that outset, as a row grid property, just like this out, set the count to 800.

And out set the stretch to center out set the gutter property to zero out come here, I will set the height property to eight.

And that's because I want the space between the row lines to be eight px, then outcome here now change the color something like this.

And that's going to be okay for me.

So I would keep this selected.

Come here.

And I'll save this grid style as my grid style for this project.

So I'll click on style there.

And I'll call this mobile grid style.

You can call it whatever you want to call it.

Now we have three styles saved to our style library, we have our textiles, we have our color styles, and we have agreed styles.

So I would like for us to go ahead and create shadow styles for this project.

To do that, I would come here out have a frame here.

Then I would rename this to shadow styles, when I renamed that to shadow Stiles out have some rectangles right inside that frame.

And the rectangle is just to display the shadow effects and how it's going to look like.

So I'll keep that selected.

I'll make the corner radius to have a value of eight.

I'll give it this column.

And I'll duplicate this and have this here.

I'll just have three shadow effect styles.

So I'll keep that there and outcome here in material design.

Now, go to the homepage out, click on the Search icon there and I'll type in shadow.

When I press the enter key out, have these results show up.

So I would come here, I would click on this link here, that's going to take me to material design version one, bear out make use of the recommendations that they have there for creating shadow styles.

So I would click on that link.

Now come here, and I would use this shadow recommendations that's under the sketch section.

So I want to go with the one DP elevation table here, I'll scroll down, and I'll make use of the 16 DP elevation table.

So I'll use these values here to create my shadow styles.

So I'll create a key shadow and an ambient shadow.

Now on that key shadow, you can see that we have two types of key shadow styles.

We have the Umbra key shadow style and the penumbra key shadow style.

So I'll create an ombre key shadow style first, and for that the Opacity value is set to 14.

So I would come out keep this selected, I would add an effect property, and I would set the Opacity value here to 14, and the X property is set to zero with the Y property set to 16.

So outcome here for the Y property out set this to 16, the X property has already set to zero.

Now the block properties 24, and the spread properties too.

So for the block property out, set it to 24.

And for the spread property out set it to.

And here we have our umbrella key shadow effect.

So I would go ahead and create for the panel, Brad key shadow effect and the MPs shadow effects.

So I would speed up this process also, and I'll come back when I'm done.

So these are the shadow styles that I have created.

So I'll go ahead and out, save them to my style library, the way to do that is pretty easy.

Select this rectangle there, then come here in the Effects section, click on that style icon there.

And you can call this whatever you want to call it out call this light shadow out cold this other one here, mid shadow, and out cold this peak shadow and that's okay.

So far, I have my textiles created, I have my color styles created, I have my effects styles created and I have my grid styles created.

Now at this stage, we are ready to start designing the components for our app.

So I would like us to go ahead and start that.

So the method I would like to use in the designing of our components will go like this, I'd like for us to design our components based on the user task of this app.

Now the first task I'd like us to look at is the authentication task.

So for this task, I'd like us to design all of the components that will be needed to complete this task.

So let's come up here, let's have a text here, I would zoom in to 200.

And I would have a text here, this is going to be the section where I would have all of my authentication components.

So I would come here, I would select this textile to have that there.

So for the authentication task, we have the login form and the signup form.

So for the login form, which components do we have there, we have the input field, and we have the button.

So I would go ahead to design the input field.

So I would come here, I'll just say, inputs.

Now this is going to be my placeholder.

So I would come here and I'll use the body small text for that.

And I would keep it selected, then create an auto layout on it.

Now when I create an auto layout, and it out, add the fill color, like this, then I'll just stretch it to this point.

Now I'll still keep this auto layout selected, come here and make sure that the content of the auto layout is aligned to the left.

And that's fine.

Now for the corner radius property, I would give it a corner radius value of eight to have that now outcome here and I would rename this to impute field.

Now while this is here, I'll select the background color for the input field itself, then the text here, I'll give it this off text color here.

And I'd like this input field to have a stroke color, which is going to be the color of the off text also.

So I can have this.

Now this is sorted, we are done with creating a imputes field.

This impute field is what we are going to reuse for the collection of emails, passwords, phone numbers, so I'll go ahead keep it selected and out, come here and click on Create components.

Now the next thing to create will be our button components.

So I would come here and I would have this text here and for that text outcome here now to select the button text for that Now I'll keep the text selected and I'll create an auto layout on the text.

Now outcome here, for the Button Auto Layout out, make sure the padding around items value is set to 16.

Now, same happened for this, the padding around items value for this input field is also 16.

So take note of that.

Now for this button components outcome here now give it this color, which is the surface color.

Now for the text, their outcome here, and I'll give it the surface text color, which is white.

Now outcome here, I would select the button auto layout, come here, now align the content of that auto layout to stay at the center.

Still keep it selected, come here and give it a corner radius of eight.

And there we have our button components created.

So I would come here out, rename this to button, then come here and click on Create components.

And there we have created our button components.

Now the next component I'd like for us to create here under the authentication task will be the input field, but the users will have to impute their verification code in now that input field will not look like this, it's going to look different.

So I'd like for us to go ahead and do that.

So I would come here, out of habit text here, let's just say zero.

And I'll keep the number selected, then go ahead and create an auto layout on that number.

Now I'll keep the auto layout I just created selected, come here and align the content of the auto layout to stay at the center of the auto layout, then I'd come here and add the fill color to that auto layout.

Now I'd come here, I would select the pencil.

And I'll just draw a line horizontally, then I'd click on Done.

And this line I just created here will be grabbed and taken into that auto layout that has that number zero.

And you can see that the line is placed here.

Now what I'll do is this outcome here, inside this auto layout, now I would select this straight line that I created, which is called vector one here, when I select it, I would come here and now change its horizontal resizing value from fixed width to fill container.

So that I can have that now I have a problem here, the padding around value for this auto layout is really big.

So I would select the auto layout outcome here and I would set it eight.

When I set it to eight, it's going to look like this.

Now I'd like it to be like this, because if I am placing these components on my screen, I would most likely increase the width.

And as you can see, when I increase the width, the number zero just stays the way it is.

But the line itself stretches across the container, which is actually what I want.

So this is okay, now, now seems the verification code will be a four digit verification code, I like to have this component go into four places.

I'll go ahead and do that.

So I'll keep this component selected.

And I'll create another auto layout on top of it like this.

Now this auto layout that I just created is called prim to out, keep it selected, come here and now it sets its direction property to horizontal direction.

When I set that to horizontal direction, I would come here and I would set the padding around items value to zero, just like that.

Now outcome here now expand the frame to auto layout.

Now just so that I can access the frame one Auto Layout inside of it.

Now when I select that frame one Auto Layout inside of it, I'll duplicate it.

And you can see that I have duplicated this into four places.

Now I'll come back here how to select the frame to auto layout, and how to set the spacing between items value to zero, just to have this now let's check to see if this auto layout itself is a responsive auto layout.

So I'll keep it selected still an outcome here and I'll try to expand it.

And as you can see if I expanded horizontally, the layout itself is not responding to that expansion.

So I would Ctrl Z to go back to how we were before.

And at this stage, what I'm going to do is this out, select the individual sub Auto Layout inside this main Auto Layout out select this one, which is frame one outcome here now to set its horizontal resizing value to pill container.

And I'll do that for all of them just like that.

Now when I select the frame to auto layout now and I increase the size horizontally, you will see that it's all responsive.

And that's what I want.

So I would keep this here, I would rename these two, verification imputes keep it selected, come here and click on Create component and that's sorted.

So at this stage, I'd like for us to go ahead and create our authentication screams.

So let's create a section for that.

Not a page actually.

I'd say authentication screams authentication Hi Fi screens just like this.

So I would come here, I'd have an iPhone that in Promax screen here, and I would rename this, make sure you rename your layout at this stage.

So I would rename this to splash.

And we all know what the splash screen is.

Yeah, that's the screen you see, when you launch an app for outcome here, I'll change the color of the splash screen to this.

And on the splash screen, I'd like for us to have the logo of the brand.

And the logo of this brand is really easy.

It's just VXS t, just like that.

So I would keep the text selected outcome here, now go with the headline to bold, and I'd work with this.

So I'll keep that text selected, come here and align it horizontally and align it vertically.

And that's okay.

So this is our splash screen.

So after the splash screen, the next screen to create will be the screen where the user will have to select the authentication action.

So I will duplicate the splash screen, I'll take this out.

And I'll change the color of this screen now to this, then come here and rename it of selection.

You can call it whatever you want to call it.

Now over here, out, bring in the button components out, go to my Assets panel out, bring this in and out, align it to the center horizontally, now expand it to this point.

Now for me to expand it properly, I would need to apply my grid style on this layout.

So I would come here and now apply my mobile grid style here.

So that I can use this as my guide to properly expand these buttons.

So I'd like the button to take up two column grids.

And that's what I have here.

So I would come here, I'll change the text to login.

And I would bring in another button components here.

And I'll change these to get started.

Now outcome here, select this button components and change its color to this just to make a difference.

So I would keep this here.

And I'll keep this here.

And that's fine.

So I would select this, and now align it to the center vertically.

And I'd bring this in place this Get Started button right under this login button.

But I'll use the row grid to ascertain the space value out give to that.

So I have 1234 rows here, and it's into four places is 32.

So I have a 32 px bottom margin space between this login button and the get started button.

Now I think the row grid is not really visible.

So I would come here, I'd go to my row grid saved style, I'd click on Edit style out, select rows and out, increase the opacity of that color to 20.

So this is sorted, this cream is sorted.

Now if the user goes ahead to click on the login button here, it means the user will go to the login page, right.

So I'll create that now.

So let's zoom in.

Let's take this out.

And let's click on layers and change the name of this frame to log in page.

And what I'll do is this when I zoom in, I'll bring this here.

So what I'll do is I'll just have logo stay here, out, come here now to select headline to bold, that's too big out GUI headline three board, that's okay.

So out align it to stay at the center horizontally, and I'll bring it down to this point, then I'll change the color to this.

Now what I'll do next is to have my login form created.

And I'll do that with my input field here, which is this.

Now I'd like this input field to stretch from here to here, just like that.

Now, this input field would have a label here.

So I'll just give it a label here that says enter email address.

I'll keep label here.

Now the space between this liberal and this input field is 16 px have two row spaces between this label text and this input field.

Now for the input field, I'll change the placeholder text from inputs to enter email address.

That's okay.

So I would come here, I'd have another input field here, which is going to be used for the password.

So I'll change the placeholder here to enter password.

And I'll give this input field its own label or duplicate this.

And first of all, I would say okay, the space between this input field and this liberal text should be 1234568 times six is 48.

So I'd like a 48 px margin space between this input field and this liberal text.

So that's sorted.

Now I'd like a 16 px space between this liberal text and this impeach field.

So I would come here and I'll edit this from enter email address and password.

That's okay.

let's align this properly.

So the next thing I'd have here is the login button.

So I'll bring a button component here.

And for this button components, I'd like to have your margin space here of that two px.

So it's going to be 1234.

So I'll bring this here, place this there.

And let's zoom out, let's stretch this to this point and stretch this to this point, then I'll change the text of the button to login.

Let's see how it looks.

Okay, this doesn't look really good, the spacing is not really consistent.

So I'll zoom out.

And I'd have the space between this label text and this input field to be 32 px, actually, so it's going to be 1234.

So I'd have that stay there.

And I'd have this stay here.

Then I'd have 123456, which is 48 px.

So let's see.

Hi, looks.

So this looks okay.

Now, I like us to have a text here, which is going to be the forgot password.

txt, forgot password.

So let's keep this here.

And let's have that stay 16 px away from this input field and 16 px away from this button component.

So I would select the text, and I would make sure it is a body small text.

And that's okay.

So I'll just zoom out, you can see that we have that.

So I would go ahead and create the signup page for our authentication task.

So I would come here, I'll click on layers, and I would rename this to sign up page.

And if you come here, the only difference we are going to have here is the fact that we are going to have an additional input field to collect the user's phone number.

So this means that I'll take this out for now, take this out for now.

And I'd have another placeholder here, which is going to have a margin top space of 32 px, which is 1234.

I'll bring this here and out, bring in an input field, which is going to stay here, then out, stretch the input field to this point.

Now I'll use this second input field to collect the user's phone number.

And I'll change the placeholder here to phone number, then I'll use this thought imputes field to collect the user's password, just like that.

Now I'll go ahead and I'll bring in a button here.

And this button is going to have a 48 px margin top space, it's going to be 123456.

I'll bring this here.

And I'll change the text here to sign up.

So I'll zoom out, I'll keep this selected out, stretch this to this point and out, stretch these to this point.

And that sorted, so we have created a login screen and our signup screen.

Now when the users click on the Sign Up button here, the users will be taken to that page where they would have to enter the verification code that was sent to their phone number.

So we are going to go ahead to create that page.

So I would come here and out rename this verification page.

And I'll take all of this out over here.

After the logo, I would have a rectangle that's going to be that's going to be this big.

I like the rectangle to be 48 px tall rectangle, just like this out, zoom out, or have this here and out, stretch the rectangle to this point.

And I'd have the rectangle have this background color.

Now on this rectangle, I would have a text that says a verification code has been sent to just like that.

So I'll keep this text here.

And I'll use a body small text for that, then out align the text to the center horizontally, then I'll keep this text aligned to the horizontal center of the page, just as the like this.

And that's okay.

And that's okay.

So I'll go ahead and bring in that input components for the verification code.

But before I do that, let's change the color of this text.

So I would come here, and I'll give you this color.

Then I'll click on the Assets panel now and I'll bring in this component.

Now for this component, I'll keep it selected First things first, I'll change the color of that components out, select the individual items inside the components.

And now change these to the background color that we have.

Just like this.

And that's okay.

Now for the lines that we have, I'll change the color of all those lines to this.

And for the numbers.

I'll change the color of the numbers to this.

And that's okay.

So I would keep this selected.

Now increase the width to this point.

So let's zoom in.

So now we can organize this properly.

So I will keep this here and how to snap the heights.

This points just like this.

So I'd have a placeholder text there.

That's going to say enter very occasion code, just like this.

And now change the color of that text to this.

So let's go ahead, and let's change the color of this label text that we have here to this, change this to this, come here, change this to this and change this to this.

Now for the Enter password text here, I'll change this also.

And for the Forgot Password text, I'll change this.

And that's okay.

Now, let's go back to our verification code page.

And let's have this button come up to this point.

So it's going to be 123456.

Out keep this here, and I just have a verified text, just like that.

So at this stage, we have created a verification page for our authentication task.

Now when the users click on the Verify button, we are going to need a pop up that would show up on the screen to let the users know that their verification has been successful.

Now, how do we create that pop it simple outcome here, I would select the frame to now creates a pop up just like this.

Now the reason I'm creating this here is so that I can use the width of this layout to set the width of this pop up.

Now the definite way to do this is this, if you come here, and you select this page, you will see that the width is 428.

Now the margin space on this layout is 16.

Here, and 16 here, which is 32, right, so to get the container space here, and use the width of the container space for this, my pop would be me subtracting 32 from 428.

So I would just select this outcome here, I would say four to eight minus 32.

And that's going to be the width for my pop.

And this is it as easy as that.

So I would come here and I'll give it a corner radius of eight, then I would go ahead and I'll give it this background color, when I give it this background color, then I'll have a text right inside that layout that's going to say, pull number verified, or whatever you want to say.

So I would come here and I would select a better textile.

For that, I would go with the body large textile just like this out, align it to the center horizontally, now out bring in the button components here and out have a Proceed button here that the user will click on to go to the homepage.

And we are done creating this.

So I would select this, go to the Layers tab and out, call this verify popup just like that.

So that pop up is going to show up when the user enters their verification code here and click on the Verify button.

So I'll grab this now.

And I'll place it here.

And that's fine.

So at this stage, I'd like to say that we are done with creating all of the screens that we need for our authentication task.

So this is going to take us to the next task of our app.

And that task is actually the fund task where users will have to fund their wallets or their accounts so that they can invest.

So I would come here, and I'd have this here.

I'll change this to fund accounts.

So all of the components that are heavier will be the components that will aid the user to fund their accounts on this app.

So let's go ahead and let's do that.

Now what you need to take note of is this, for a user to fund the account, the user will have to go to the homepage of the app first, right? Because it is from the homepage, that dude see the fund account button.

So what does this mean? This means that we need to create components for the homepage and have our homepage sorted first, before we handle different account routes.

So let's go ahead and let's do that.

On the homepage, the first component that we are going to have will be a card components that will display the balance that we have in our account.

And it is still on that card components that we are going to have the one account button.

So let's go ahead and let's create that.

So I would have a text here is going to say primary accounts, I would keep that text selected.

And I would set the typography style to body small boat.

Now let's zoom in to 200.

So this is it.

Now outcome here and I'll create another text, which is going to be like the account number or the account ID I would say this and I'll keep that selected also.

Now I would set this to body small.

So now I would select both of these, and I'll create an auto layout on the both of them.

Now when that auto layout is created out make sure that the padding around items value is set to zero for now.

Now outcome here How to select this text and how to set its horizontal resizing value to fill container out, select this here, and how to set its horizontal resizing value to fill container.

And for the height outcome here and out sets the height property here to auto height to make it balanced.

Now we have this created to outcome here, I'll add a fill color to this.

Now, I'll duplicate this, I'll bring this here.

And I'll change this text to account balance, or let's just say available balance.

Actually, that's not the account balance, I would say available balance, and here I'll write down the available balance, that's fine.

So I'll keep this here also.

Now, what I'll do is I would select these two auto layouts, and now add an auto layout on the both of them for this new auto layout that I have created, I would come here and I would set the spacing between items value to 24.

And out select this auto layout that inside this new auto layout, and how to set its horizontal resizing value to fill container.

And I'll do that for this also.

Now I would select this new auto layout and add a fill color of white to it to have this now you can see that this is actually responsive.

And that's okay.

Now, I'd like to bring in a button component and place it inside this auto layout so that that button will be used for the font accounts action.

So I would come here and bring in a button component here, then how to select that button component in the in the design tree here, hold it and grab it into this frame seven auto layout, which is our auto layout.

And you can see that the button component is placed inside this auto layout.

Now I'd like this button component to look different.

So I would keep it selected.

Come here and I would set its top padding value to eight and its bottom padding value to eight.

So I can have this now change this text to font accounts, just like this.

And that's okay.

Now I'll go to the feather icons plugin.

And I look for an icon that out place on the right side to make the components just look better.

Let's come in here, let's just type in home.

I'll bring this in actually bring this here and replace it here.

Now I would select all of these and I'll create an auto layout on all of them.

Now a new auto layout called frame eight has been created.

Now inside this frame eight auto layout, we have this auto layout here and this icon.

So I would select this auto layout now that's inside the frame.

It's auto layout.

And now to set the value for its horizontal resizing property to fill container.

And I'll leave this set to fixed we know how to select the frame.

It's Auto Layout now, which is a main Auto Layout now, and I would come here and I would set the spacing between items value to 24.

When I do that, I would come here and add a fill color to this.

Now add the fill color to the auto layout to have this.

And the final thing I'll do here is to come here and set the padding around items value to 16.

When that's done, I'll give it a corner radius of eight.

To have this now I can expand this to this point like this.

And you can see that this component is responsive.

And that's that.

So let's go ahead and let's play around with the colors of the elements on this component.

So I would select this text here, and I'll give it this color, I would select this now give it this color do same for this and do same for this then for this out select the icon itself, and that's fine.

So I would rename this to balance card, or whatever you want to call it.

I will keep it selected and now click on Create components.

And here we have our components created.

So on the home page Still, I'd like to display a list of recent transactions that's been carried out on the app.

So let's go ahead and let's create a component that's going to serve that purpose.

So I'd come here out create a text out call that deposit come here now to select the body large bold text then I'd come here now create another text and I'd have this which is going to be a dates that deposit happened.

So how to select these two text and how to create an auto layout on the both of them.

Now how to select this text inside the auto layout and how to set its horizontal resizing value to fuel container.

Now do that for this also.

Now out select the auto layout and how to set it spacing between items value to four.

And that's okay.

Now for this deposit text.

I'll change the color to this.

And for the date here.

I'll change its color To this, and that's okay.

So I'll keep this here.

And the next thing I'll do is to have a frame here, that's going to be 48 by 48.

I'll keep it selected and out, give it a corner radius of 100.

To make it round, then I'll go to the feather icons plug in and out have an icon there, that signifies incoming, which is this, I would select this icon now, and I'll place it on top of this 48 by 48 px frame that I created.

When I placed it there, I would come here now to set its constraints value two center for the horizontal axis and center for the vertical axis.

And that's okay.

Now select this frame, which is now a circle and out set its color, let's set it to green like this.

And for the icon, outset, it's colored this and that's okay.

Now for this frame, now that I have created, I'll bring you to our PC here, and how to select all of this and out create an auto layout on the both of them.

Now for this new auto layout, I would come here and I would set it spacing between items value to 16.

And I would come here now to set its alignments value to the center just like this.

Now out keep it selected to come here and add a fill color to it just like this.

Now I would come here now and I would create this text.

And this text is going to be a body large bold text, I would come here and create another text, which is going to just like display the balance out keep that selected and out make it a caption text, just like this.

Now to select both of them, create an auto layout on the both of them and sets the spacing between items value to for now to select the text inside the auto layout now and how to set its horizontal resizing value to feel container to have that and that's sorted.

So I'll select this now and I'll give it a fill color of white.

Now for the color of the text out set this to something lights like this.

And this will be something like that.

Now what I'll do is I'll select all of these and I'll create an auto layout on all of them.

First things first out align the content of the auto layout to stay at the center, then I'll add a fill color to the auto layout to have this now for the spacing between items value of this new auto layout.

Now, I like to set it to 76.

And that's okay.

Now for the padding around items value, I'd like to set this to eight.

And that's okay.

Now let's check to see if this auto layout is responsive.

As you can see, it's not.

So let's sort that out.

And to sort it out is really easy.

I would select this frame here, this auto layout here, I would select this auto layout here.

And I'll set its horizontal resizing value to fill container.

Now when I set this to fill container out, select the auto layout that's inside it, which is frame eight and out set its horizontal resizing value to fill container also, now I'll make sure all of these sets of field container so I'll select the items to be sure that they are also set to feel container.

Now when I select the frame 12 Now, which is our major frame, you would see that this is now responsive.

And that's okay, so I'll keep it selected, come here and now set the corner radius value to eight.

And I have this I'd like to duplicate this to have a withdrawal component where the circle is going to be red and the icon is going to be different.

So I would set the position of this icon to let's set it to 180.

That's the angle position.

That's what I'm setting here.

Or you can call it the rotation property of that icon.

So I'm setting it to 180 degrees.

And I'll change this with roll.

Then you can change all of these details.

If you want to change them out, select the circle itself, which is this frame, and I'll change the color to this and that's okay.

So outcome here out, select this out, rename this to withdraw our card, keep it selected, make it a component, okay, that's supposed to be deposit card.

So out select this column here and out, rename this to deposits card.

Keep it selected.

Come here and click on Create components.

Then select this.

Rename this to weave Travel Card, keep it selected and make it a component and that's sorted.

Still on the homepage.

We are going to have a banner that will be used to copy referral links.

So I would go ahead and out creates that.

So I'd have this text here.

that's going to see invites your friends out, keep that selected.

And I would go with this textile here, which is the body large bold textile.

And I'd have another text here, that's going to be invite your friends with this pack code.

And I'll go with the caption textile here.

And that's cool.

So I would select this, when I select it, I would create an auto layout, and outcome out sets the spacing between items value to eight, then out, select the text items inside this auto layout and how to set these to fill container.

And I'll do that for this also.

Now the next thing I'd like to do is to have a frame layout here, that's going to be 48 by 48.

And I'll keep it selected still out, give it a corner, reduce value of 100, then come here and give it that color.

Now I would go over to the feather icons plugin and Outlook one and I would look for an icon I can use on that.

So I like to use this icon here, I would select it, or bring it here and place it on this frame layout.

Now when I placed there, I would make sure it's at the center, then I'd come here now to set its horizontal constraints value to center and its vertical constraints value to center.

And that's okay, now select that icon, then I'll set its color to this.

And that's okay now to select all of this creates an auto layout on it.

So I would come here and I would align the contents of that auto layout to always stay at the center.

Now I'll keep this auto layout selected, and I'll give it a fill color which is going to be the background color like this.

Now, I would select this auto layout that is inside this main auto layout.

Now as you can see, it's the brim 12 auto layout that has this text, when I select it out, come here, and I'll set this to fill container.

And when I select the main auto layout, now you'd see that this is a responsive auto layout, which means we are good to go.

Now for the spacing between items value of this auto layout, I like to set it to 24.

And for the padding around items value, I'd like to set it to 16.

To have that, then come here and set the corner reduce value to eight.

And here we have a component.

So I would keep this selected.

Now rename this to refer our banner, then come here and click on Create component to make it a component.

And that's okay.

Now on our homepage, we have one final component, which is going to be a very interesting components to create.

And that's going to be the navigation components on our homepage, which is going to be at the bottom.

So let's see how we can create that components before we put our homepage screen together.

So I would come here and I would get the home icon from the feather icons plugin.

I'll type in home there, I'll bring this in.

Now I'd like to zoom in at this point so that you can see clearly, when I placed this icon here, I would come here and I would create a text.

And I'll call that home.

Now for this home text, I would create an auto layout on it.

And I would set the padding around items value for that auto layout zero, then set its alignment position to the center.

Now select the Home text that is inside this auto layout.

And now to set its horizontal resizing value to fill container.

Now out keep this text auto layout here, then I would select the Home icon and that text auto layout.

And I will create an auto layout on the both of them.

Now this auto layout is frame 15.

What I'll do now is I would come here and I would set the spacing between items value for this auto layout to for when I do that, I would come here now to set the alignments of the contents in that auto layout to always be at the center.

Now outcome here and how to select the Home auto layout and how to set its horizontally resizing value to fill container.

And that's okay, just stretch this and it's going to be sorted.

Now at this stage.

What I'll do is this out have a frame layout here.

That's going to be 48 by 48.

And I'll grab this pre empting Auto Layout now and I'll place it on this 48 by 48 px frame layout, make sure it's at the center.

When I place it at the center, I would select the frame 16 frame layouts, which is our 48 by 40.

It's layouts now and I would make it an auto layout.

Now when I make it an auto layout, I'll bring it here and I'll rename this to Home link.

Now after I rename it to HomeLink outcome here and now set its alignment to the center so that the content of that auto layout will always be at the center.

Now the padding top value is set to three out, set it to four, just so that we are going to have even numbers all around, I would set this to four also, and this outset four, and this outsets.

Four, just to have this.

So at this stage, what I'd like to do now is to have other navigation links.

So I'll keep this home link Auto Layout selected, and I'll create another auto layout on top of it.

Now this auto layout that I just created has a padding around items value of 16.

Yeah, I'll leave it set to 16.

Because actually, that's what it's supposed to be now outcome here out, expand this new auto layout, and how to select the Home link or to layout and I'll duplicate it like this into three places.

And that's because I want to have just three items there.

Now outcome here, I'll change this from home to invest.

And I'll change this from home to transact.

Let's select our frame 16.

And let's add the fill color to it to have this.

So if I expand the frame 16, you'd see that the icon and the text is just that it's not responsive.

So I'd like to change that.

So to change that out, select this home link sets these to fill container, select this, do that also select this and do that also.

Now when I select frame 16, and I increase the width horizontally, you would see that this text wrap into the next line is actually fixed.

So for this icons, let's go ahead and let's change this icon to a better icon and these two are better icon.

So I would come here, I would go to the feather icons plugin.

And I would like to have this icon.

So I'll bring this here.

And I would come in here and I will trace the auto layout that has that you can see it's still called Home link, I'll change that to invest link, when I change it to invest link, you'd see that to have the home icon inside here.

So I would come here now, I would select this bar chart icon now.

And I'll take it inside the InVEST link auto layout.

Now place it right inside here.

And you can see that it is here at the bottom.

So I would select the Home icon and out, delete it with the delete key on my keyboard, then come here, grab this invest icon, hold it and take it upwards like this.

So I'll go ahead and I'll do same for the transact link here.

So I'll keep this selected.

Come here out, rename this to bottom navigation, keep it selected and click on Create components and that components has been created.

So at this stage, we can go ahead to make use of all of these components in designing our homepage.

So to design our homepage, out, come here out, select the frame to and I'll bring in an iPhone fatin Promax frame here.

Now zooming to this point, now I would select this iPhone 13 Pro Max frame, rename this to home.

When I do that, I would come here and how to apply the grid style on it.

And when I do that, let's zoom in to 200.

out go ahead and I would bring in the menu icon using the feather icons plugin.

So I'll use that one there.

Now whenever you bring in an icon and you want to place it into a layout, make sure the icon is inside that layout here in the design tree.

As you can see, currently, this icon which is aligned justified is not placed inside this layout, which is our homepage.

So what I'll do is I would come here in the design tree, click on it to select it, hold it and drag it into the home layout.

And as you can see it is now inside the home layout.

So I would come here, and I'll place this here.

So I would count it row spaces from the top 1234567 and eight.

And that's okay.

So I'll have a text here.

So I can come here and I can say hi and for laka.

Now I'd like to call your attention to something important.

And that is the fact that as you can see here, I have the name of the user written here, which is N for lucky.

Now the question you should ask is this, how did I arrive at displaying the name of the user here when in the signup form, I did not collect the name of the user.

If you remember, in my signup form, I only collected the email address the phone number and the password of the user, which means that the app itself does not have a record of the name of the user.

So the question you'd ask, which is no malice.

How did I arrive at displaying the name of the user here? Now this is going to be your first assignment in this course, because I'd like you to come here in the authentication section here and refactor the authentication flow here.

To collect the name of any user that's signing up to this app.

Now I'll leave this open without giving you a guide on how to do that.

I'd like to see your thoughts process on how to refactor this authentication process with the best experience.

And also with the fact that you would collect the name of any user signing up to this application.

If you think coming here and adding another field for the name collection is fine, go ahead and do that.

If you have another idea that can make the experience better, go ahead and implement that.

Now when you implement the name collection in the authentication task here, go ahead tagged me on social media for my comments.

That's your first assignment in this course, then I can have another text here.

I'll bring this here.

Now the next thing I'd like to have here is the balance card.

So I would come here in the Assets panel, and I'll bring this component in like this.

Now, I'd like to have four row spaces between this text and the balance card.

But before I do that, I like to keep this balance card selected, then come here and apply my shadow style that I saved.

So it so I would go with image shadow like this.

Now let's zoom into this point.

And let's make sure we have four row spaces.

And that's okay, let's zoom out.

Now what we are going to do is to stretch this to this point.

And that's going to be successful because our components is a responsive component.

So nothing is going to break.

And this is okay.

So I would come here at the bottom here, out, snap this to this roll line.

And that's sorted.

So the next thing I'm going to have here is a text that's going to say recent transactions out, keep that selected and out go with a body large bold text.

So I'll make sure I have 1234 Group spaces there.

And that's sorted.

So I'd have that there.

And I would select a different color for that.

I'll go with this.

Now for this also out have this color set this now just in case I forget to set the color of the text as I proceed, you go ahead and do that.

So I would select this icon also now change the color to this, that's okay.

Now right on that this will be sent transactions text out have those transaction cards there.

So I'll bring this in, which is the opposite cut out, give me the shadow style outcome here.

I'll give it a meet shadow style there.

Let's zoom out to this point.

And I'll just stretch this to this end here.

And I'll make sure this snaps properly too.

And that's not going to be a problem because a component is responsive.

So let's look at the space in between this card and this text out zooming, you can see we have 123 I'll make this four.

Let's zoom out.

Okay, that's actually too far away.

So I'll bring this here, I'll have two row spaces.

Okay.

So I would have this one here.

So I'd have two spaces from this text to this card.

And if I select the text, you'd see that I have one row space and two space before this card.

And that's okay.

So what I'll do now is I would go ahead, I'll duplicate this.

And when I duplicated, I'd make sure I have just one row space, which is SPX, I'll bring in this other one, which is four, which is for a withdrawal event.

Outcome.

Yeah, I'll give it a meet shadow out, zoom out and out, snap this to this points.

And I'll make sure it's just eight px space.

So I'll bring this here and that's okay.

Now I'll have just three recent transactions here.

So I'll go ahead and bring in this referral banner and upload it here.

So I'll make this snap to the end also, just the other point, now zooming, and I'll make sure I have a consistent space in here.

So I'll have a 48 px margin space over here, which is going to be six row spaces, right.

So I'd have 123456.

So I'll bring this in place here.

So I'll zoom out, and at this point, what I'll bring in will be a bottom navigation components.

I bring it up let's see here.

Let's zoom in and let's make sure this is properly placed.

As you can see I have properly placed this so I would keep it selected.

Come here and I'll change the fill color to this out select this, change the fill color to do this, select this select this I'll change the fill color to this now select the icon itself now change the fill color to this or do that for this also.

And I'll do that for this also.

Now for the text out select the text and I'll change the fill color to this and that's okay.

Now for the text color of this navigation link.

I like the text color actually to be pure white so that it can be really present there.

And I think this is better.

And that's it.

So we have just designed our homepage now using the components that we created.

So I would also advise that while designing, it's also good most times to test what you're designing, so I would select this column here, and I would click on present to see how this is going to look like actually.

So this doesn't look good like this, I like to present this inside an iPhone device.

So outcome here, click on prototype, click on prototype Settings and select a device here, which is iPhone 13 products.

When I do that outcome, help select this layout once more, and I'll click on present again, that's going to sort it.

And this is what we have, this looks good, you can come here and present this in full screen just like this, to see it better.

So let's go ahead and let's keep designing our application.

So I'll press the Escape key on my keyboard to go out of that full screen display and not come back here.

So the next action I'd like to design for will be the action of the user clicking on different accounts button.

So when the user clicks on the fund accounts button, I'd like to display a pop up that will allow the user choose the method in which they would like to fund the account with and that's easy, because we have actually created a pop up before.

So I would come here, I'll duplicate this pop pop, and I'd have the Pop Pop stay here.

And right inside this pop up here, I would have one button here, which is going to say bank transfer.

And I'd have another button here that's going to present the option to fund the account with a debit card.

So I'd have this the here and now expand this to this point.

Now expand this to this point.

I'd also keep this here and expand this to this point.

Now to expand this to this point, I'll keep it selected and how to center it horizontally.

So outcome here, I'll bring this downwards.

And I'd have it textured that's going to say select method.

So I'll change the color of that text to this.

And that's going to be cool.

So I would select this pop now, and I would rename it from verify pop to bond method pop up, keep it selected, and I would make it a component.

And that's going to be it.

So when the users click on bond account here, they would have this pop pop show up asking them to choose the method in which they would like to fund their account with now let's say the select the bank transfer method, they will be taken to the page where they would have that happen.

So for that out creates that page now.

So I would come here, I'll duplicate this, and I would rename it bank transfer, when I rename it to bank transfer, I would come here and I would take all of these outs.

And I would also take the bottom navigation out also.

So what I'd have here is an icon that will direct the users back to the previous page.

So I would go to further icons.

When I come here, I would scroll down, and I would select this icon for that.

So I'll take this out.

And I'll bring this here.

And as you can see, this icon is not inside this layout.

That's why this smart guy is not active.

So I would come here, I would select this icon and I'll take it into these layouts, just like this.

Now when I select it, and I move it around, you'd see that the smart guide is active.

So I'll make sure that I have it spaces from the top 12345678.

And that's correct.

So I will keep that icon select and I'll change the color of the icon vector to this.

And that's okay.

The next thing I'd have here is a title for this page.

That's going to say bank transfer, you can call it whatever you want to call it.

So I'll use the headline three bold text for that.

I'll keep that there how to center this horizontally actually, to be sure it's at the center horizontally.

And that's fine.

Now I'd come here, and I'd have bits here.

So I would have these details here.

So what I'll do is I'd make sure I have 1234.

Okay, I'd have it's row spaces there, I'd have 12345678.

So what we are going to have here is the destination account details where the user should make the bank transfer to so here's the account number.

Here's the account name and here is the bank name.

And that's it.

So I would come here and I'd have a button component here, out align it to the center and I would stretch it to this point and stretch it to this point also, I would have 123 456.

So I have seven, and eight.

So I'd have a two row spaces there.

Now what I'd have on this button will be copy account number.

So the user can just click on this button to copy the account number here.

So I have sorted the routes for funding the account on this app with bank transfer.

So let's go ahead and let's create the page where the user will use to fund the account with their debit card.

So outcome here, so I will change this debit debit card, or align this to the center, that's okay, I'll take this out, then I'd come here, I'll take this out also, then I'd have all of this here.

So I would have it row spaces from this icon also.

So let's zoom in so that we can count better.

So I would have 12345678.

I'll keep this here.

And I'd have one two, I'll have that there.

out, zoom out.

So this is going to be the page that will enable the user fund their accounts on this app with a debit card.

So what we have here is, the user will enter the amount and have the option to select that they want to use the existing card that they have on this app, or they would like to add another card.

So let's fix some alignment issues here.

Let's keep this there, come here and keep this here also, then come here, balance that's there.

And keep that there.

Also, I would also come here and make sure that this is sorted also here.

So for the action of adding another card, we are going to see how to do that as we proceed for now let's go ahead and let's have a button component here, align that to the center horizontally, keep that there, keep that there, then for the text out, say font accounts.

And that's that.

So if the users click on the font accounts button, they would have this pop up show up for them to choose the method they want to use, when they select the bank transfer method, they would have this page show up, if they select the debit card method, they would have this page show up also, they would have this page show up.

Now, if the user clicks on this fund accounts button, when they want to fund the account with a debit card, the user will be taken to another page, which is going to indicate that the account has been successfully funded.

So I'll duplicate this to have that there.

Now, before we work on that page, I'd like to change the name of this page from bank transfer to debit card transfer.

Now for this page here, out, rename it to transfer successful.

Come here, I'll take all of these outs.

I'll take this out also.

And I'd have a frame here, which is going to be 100 by 100 frame, that's how it's going to look like that's quite small.

So I'll make this 240 by 240.

And I'll just work with this.

So I'll give it this color.

And I'll give it a corner radius of 200 to make it a circle.

And I'll go over to the feather icons plugin.

And over here in the feather icons plug in out bring in this icon, and that icon will be placed on top of this frame.

Now go ahead and use the Scale tool to scale that icon to this point, just like this.

Now, when you scale the icon, make sure that the constraints of that icon is set to the center horizontally and the center vertically.

So I would come here now I would select this icon and I'll change the color of that icon to this when our habit text here that would say count funded successfully, or you can have whichever text you want to have they that's fine.

So I would come here and I'll change the color of this to that.

So after that, I would have a button component here, that will redirect the user to the InVEST page.

So I would say invest.

Now when they get this page, they would have the option to click on the InVEST button here to go straight to the InVEST page where they can invest.

So that's the next page we are going to look at we are going to look at creating the InVEST page where users can invest in stocks.

So to create that page, it means that we need to create the components that the page will need.

So let's go ahead and let's see how to create the components for that page.

So for the InVEST page, the first component I would have there will be a little card component that will be used to display the cash amount that the user has.

So I would come here and I would create that.

This is the fund accounts component section here.

So I would have the invest component section here.

And to create that card, I would have this here, I would say cash.

And I'll use the body small textile for that.

And I'd have an amount here, just any amounts.

Okay, so I would use body large bold here, then I'll just select the both of them, I would create an auto layout on the both of them, make sure the padding around items value is set to zero, then I'll come here and I'll add the fill color to it.

To have that now select the cache text and set the horizontal resizing value to fill container and do that for this or that text on the here, which is the amount of cash that the user has.

Now when that's sorted, select the auto layout, and then come here and set the space in between items value to for now, I'll go over to the feather icons plug in, and I'd look for an icon that I can use to represent cash there.

So I would scroll down and I'll look for one of the icons here.

So I am going to make use of this icon here, I would select it, I'll bring it here, then I would select both of these and out create an auto layout on the both of them the outcome here.

And I would make sure that the alignment value for this auto layout is set to be top left corner of the auto layout.

So I would keep this auto layout selected, I would add a fill color to it.

And I would set the spacing between items value to eight, then set the padding around items value to eight, then come here and I'd have the corner radius value set it also.

So over here, I would select this auto layout inside the main Auto Layout now.

And I would set its horizontal resizing value to feel container.

And when I do that, you will see that this component will be irresponsive components just the way I want it to be.

Now let's go ahead and let's set the colors for this.

So I will set the color of this to that now set this to this now for this icon out set the color of this icon to this.

So I'll keep this here, I'll duplicate it, when I duplicate it out, go ahead, change these two assets, then I'll leave the value here just like this, or you can change it if you want to change it.

Now the next thing I'd like to do is to take out that icon and have another icon there.

So I would go to further icons.

And I would have this selected for that.

So I'll bring this here, let's go to the Layers tab here.

And I would select the briefcase icon here, which is this, I would select it here.

And I'll take it into the frame 19 Auto Layout, just like this.

And you can see that it is staying here on the right side of the auto layout, I would grab it and I'll take it to the left side.

Now I'll select this one, and I'll delete it.

And I have that.

So I would select this icon now and I'll change the color of this icon.

And this is sorted.

So I would rename this to cash card, whatever you want to call it is okay.

And I would rename this to assets card.

And that's okay.

So I would select this, make it a component, select this, make it a component.

So let's go ahead and let's create the other components that we are going to need on the InVEST page.

So the next component, our need on the InVEST page will be an input field component that the user can use to search for top stocks that they would like to invest in.

So we have an input field here already created, it's already a component.

So what I'm going to do is out duplicate it, I'll bring it down here.

And I'll keep this here.

Now when you duplicate the components like this, the duplicates will be a child components.

Now, I wouldn't love to work with this as a child components.

So what I'm going to do is out out keep the components selected, right click on it and out select detach instance.

Now when I select detach instance, you would see that this is back to a regular auto layout.

So I would come here, and I would change the name to such impute field, then what I'm going to do is I would go to further icons now bring in a search icon, which is this out, grab it and drop it inside this auto layout, which is the search input field auto layout.

Now the issue is this.

I want this search icon to be smaller than this, because it's quite too big.

And as you can see it has increased the height of the impute field.

So I'll keep the icon selected.

Come here, and I'll set this to 12.

And I'll set this to 12.

And that I have that now I think 12 is too small outside this to 16.

And out set this to 16.

And that's sorted.

So the next thing is this, I'd like this icon to stay on the right side of this impute field.

So how do we do that? Just select the search input field auto layout.

Come here.

Click on the alignment and padding property.

then change this property from packed to space between, and that's going to be sorted.

Now let's change the color of that icon.

I'll change it from black to this.

Now I can select it now and make it a component.

And as you can see, it can be used just the way you'd like it to be used.

So let's go ahead and let's create the next component that we are going to have on our invest page.

So the next components will be the components that will display the list of stocks that are available to invest in, in this app.

So let's come here, let's have some space here, I'll use the brand fetch plugin.

To pull up the logo of a brand, I'd have this Come here, I'll type in dangoty, or press the Enter key on my keyboard.

And I'd have this here.

So I would select this out, click on it to select it, and I'd have it there in my canvas.

So I'll bring this here, and I'll make it a 24 by 24 frame logo just like this.

Now when I make it 24 by 24.

The next thing I'd love to have is the price of this stock, I would have that out select the caption text for that, then I would have this, then I would have this, make sure I use the caption text for that also, then I'll create an auto layout on this and I'll set the padding around items value to zero.

Now out select the text inside this auto layout and set its horizontal resizing value to fuel container.

Now, I'd like to have an icon here that will indicate decline or increase.

So I would go to the feather icons plugin.

And I would bring this icon in, and I place it here.

Now I'll make this icon a 16 by 16 icon just like this, when I plus here, how to select both of them.

Now create an auto layout on the both of them.

Now for the spacing between the auto layout, it's going to be set to four.

Now to select this auto layout that's inside this framlington Auto Layout, I am talking about the auto layout that has this number here, I would select it, when I select it, outset its horizontal resizing value to fill container, then out select the frame 19 Auto Layout now, and now add a fill color to it.

Now let's go ahead and let's select this icon.

And let's make the color to be green just indicates progress.

Yeah, so I would come here now, I would select both of these and create an auto layout on the both of them.

Now for this auto layout here, I would set the spacing between items value to eight, it's already set it for me.

So I'll just leave it set to eight.

Then I'll come here and I'll add if fill color.

To have this outcome here.

Out select this text now, which is inside this new auto layout and outset it's horizontal resizing value to fill container.

And for this outset, it's horizontal resizing values fill container.

Now when I select this frame 20 Auto Layout, as you can see here, it's a frame 20 Auto Layout, when I select it, and I resize it, you would see that it's a responsive auto layout, just like this.

And that's what I want, actually.

So I'll bring this here.

Now I'll go ahead to create a text that will signify the title of that stock, I'll just call it dang.

Now I'd come out set this to body large bold, and I'd have this day here with this text.

Now what I'll do is I would select this and this text, and I'll create an auto layout on both of them.

Now outcome here now add the fill color to this auto layout first, then come here and align the contents of that auto layout to the center.

After that, I would set the spacing between items value of that auto layout to eight to have this now bring this here and I'd have this here.

The next thing to do is to have all of these selected, then out add an auto layout on all of them.

Now for this new auto layout.

Now, I would set the spacing between items value to eight, then come here, select this auto layout and set its horizontal resizing value to fill container, then how to select the auto layout now and now add a fill color to it to have this now for the padding around items value, I would set it to eight and set the corner radius value to eight, just like this.

Now if I expand this, you'd see that I have this component looking just like this.

And this is okay.

So I want to select it out, name this stock list and out make it a component.

That's fine.

Now the next component I'd like to have there on the InVEST page will be a component that will be used to display the list of stocks that the user have invested literally the stock portfolio of the user.

So I would come here let's zoom in one small out have a 48 by 48 px frim going out, give it a corner radius of 100 to make it around, then I'll give it this color.

Now out, go to the brand fetch plugins, and out, look for the paystack logo, which is this.

Now outcome here, I would right click on this paystack logo, I like to pick out the background color.

So I'll use the Remove BG plugin.

for that.

I'll keep the logo selected, and I'll make it a 24 by 24 px logo, just like this, and I'll place it right at the center of this circular frame that we have created.

Now when you place that on top of that circular frame, make sure to set the constraints value for the horizontal axis to the center and for the vertical axis to the center.

So the next thing to do is to go ahead and I'd say pay stack, I'll keep it selected, come here.

And I'll use the body large bold text for that.

And right under this, paste that text out have plus 345, just to represent the appreciation value of that stock.

So I'll keep it selected and outcome here.

And I'll go with the body small text.

Now I'd make this to have a green color, just like this and for the paste that text and make it to have this color.

So I would select both of these, first of all, create an auto layout, make this space in between items value to be set to four, then out select this text, set it to fill container.

And for this outset to fill container also now out expand this, and that's fine.

Now the next thing to do is to select all of this, create an auto layout on all of them.

When I create an auto layout on this outcome, how to set the spacing between items value to eight, and out add the fill color to that to have this now when I set this to eight outcome here and out set the pattern around items value to eight.

Now I'd like for us to check to see if this is a responsive auto layout.

And as you can see, it's not and that's because I have not set the horizontal resizing value for this auto layout inside of it to feel container.

So when I set this to fill container, and I come here now you'll see that we have a responsive layout.

So I'll keep it selected outcome here.

Now it sets the corner radius value to eight.

And then we have our portfolio listing component.

So I would say portfolio portfolio list.

And I'll click on Create components.

So I think we have created all of the components that we are going to need on our invest page.

So at this stage, I'd like for us to go ahead and create our invest page.

So I would come here now out, select this out, duplicate it out, rename this to invest.

And I'd come here and take all of this out.

And now leave the bottom navigation components, this time around outcome here, what I'd have first will be that cash card.

So I'd have 1234 space before that.

But to see cash card, I'll bring the cash card in here.

And for this cash card, I'll change the fill color of this cash card to this out, select this and I'll change this also to this, I'll change the text color here to this.

And for this, I'll change this to that.

So I'll go ahead now.

And I'll bring in the Assets card.

And I'll do the same to that also come here, I'll change the color of that to this.

And this will be changed to this, change this to this and this to this.

And that's okay.

So what I'll do now is out arrange all of this to stay organized.

So I'd like this to take up two columns.

And I'd like this to come here and take up two columns.

So let's zoom in to be sure that this is properly organized.

So this is not properly organized.

And that's because I want four row spaces before this.

So I will bring this down here.

When I select this, I'd have 1234 And this is okay.

So I'll bring this here.

And I'll bring this down here.

So this is sorted, we have this section sorted.

So the next section of this page will be the section where I would write a text that's going to say top stocks to invest in.

So I would have eight row spaces before this.

So I would say 12345678.

I don't have this to hear.

Now for the text here.

I'd like this text to be a body large text, not a body large bold text.

Now after this text, I'd like to have that search field.

So I would snap this to this point.

And I would go ahead to bring in that search impute field which is this and I'll just have only an eight px space between this text here and the input field.

So out come here stretch these to this point.

And I'll change the placeholder fetch.

So let's change this from stock to stocks.

And that's fine.

So the next component I'd like to have is the stock list components.

So I'll keep this here, and actually give it a shadow effect so that we can see that clearly.

So let's zoom in.

So I would give it two spaces, one, two, and that's fine.

So out, snap this perfectly.

And I would like this stop here.

And I would like this also, to stop here.

Let's zoom out.

So I would duplicate this and have this house.

And let's duplicate this here.

Let's duplicate this hair also.

So let's zoom in to confirm that all our components are aligned perfectly.

So you can see this is okay, this is okay.

This is okay.

And this is okay.

So that looks okay, now on have a stock portfolio section.

Now, to differentiate the two sections out, bring in the button components, and I would use it for something different this time around.

So I would have 1-234-567-8910 1112 spaces.

So I'd have 12 Row spaces here, I would zoom out, out stretch this to the end like this, I would come here and align the content of this button now to the left, then I would set its top padding value to eight and the bottom padding value to eight.

Now what I have here will be stock portfolio.

Now to make this look different, I'll keep this selected, come here now to set the corner reduce value to zero, just like this.

Now what are we going to have here, we are going to have the paste back component here.

So let's zoom in.

And let's make sure this is properly organized.

So I'd have 1234 space before this.

And that's okay, outcome here.

Now give it a shadow effect, just like this now out, keep this selected, come here, now change the color.

So I would come here, I'll change the color to this.

So the green color here needs to actually be thicker than it is now, just like this.

So I would make this to have two columns, then I'll duplicate it and have this they have also taken up two columns also.

Now you can go ahead and have other stocks listed here.

That if you want to have that, and here we are, we are done with our invest page.

Now since we won't be able to display all of the stock portfolio here, I would like to have a see all text here.

So this see all text will be brought in text out copy here.

And I'll duplicate this see all text.

And I keep you here also, and I'll change the color of this, see all text or change this and that's fine.

Now the next flow will be this.

Now let's assume a user likes this talk here and the user wants to invest in this talk means the user will click on the stock and the user will be taken to the stock Details page.

Right.

So let's make that happen.

I'd come here, select this page, and I'll duplicate it, come here and change this to stock details.

And that's fine.

So for the stock Details page, I'll take all of this out and out zoom in, then go to the feather icons plugin to get that icon that signifies going back to the previous page.

And this is it.

I'll get it.

I'll bring it here.

And I'll make sure that this icon is actually inside the stock Details page.

And I'll take this to this point.

And that's sorted out, select the icon vector and I'll change its color to this.

So what do we have here, I like for us to have a title here that's going to say stock details.

And this text should have a headline three bold textile for it.

So I would align it to the center horizontally.

And that's okay, now let's change the color this and that's fine.

So what I'd have here will be a component that I would create, I would just come here, I would have this frame to select it and out create a frame with it like this out set this eight, then out sets the colored this van out sets the color to this than out go to brand fetch to get that logo and out place the logo right on that frame layouts that I just created.

I'll grab it and upload it here.

Now I'd keep it selected and outset the horizontal constraints to center and the vertical constraints to send that and that's okay, so what I'll do now is out keep this frame selected, rename this to stock detail.

And then I'll come here and I'd make it a component.

So I'll go to that page now.

And over here I'd have that stock detailed banner components placed.

This is it here.

I'd have it stay here out stretch it to this point.

and are stretched this this point, that's okay.

So I would come here now, let's snap that in.

And let's also make sure that this is snapped in perfectly, just like this.

So over here I have 123.

Let's make it four.

So over there have four row spaces between this stock details, text, and this stock detail banner components.

And that's fine.

So let's zoom out.

The next thing I'd have here will be the stock price.

And the appreciation value, I'll make sure I have 1234 spaces.

That's okay.

Now I'll go ahead to create a component that outplays here and and that component will go into more details about the stock.

So let's go ahead and let's create that component.

So to create that component outcome here, and now to select the frame to now create a frame that's 42 px tall, just like this.

Let's zoom in to this point.

When I create this frame here, I'll come over here and I'll create a text on this frame, I'd say my position, I'll keep this text here, just like that.

And that's fine.

Now for this text, I'll use the body small textile that I have here, which is this.

And that's okay.

Now I'll go ahead, I'll create another text here, I'll actually make this text box to be this Why'd not come here, now just type in 35.

Now, I'll keep this text box selected now and align the content of that text box to stay at the right select this frame layout now, and then make it an auto layout.

Now I would come here and I'll click on the alignment and padding value, and out sets the left padding to 16 and sets the right padding to 16.

Then out set the top padding to 12 and the bottom padding to 12.

Now I'd like this text to always stay here and this text to always stay here.

So I would come here and now change this from pact to space between.

And that's okay.

So if I come here now, you'd see that if I take this in, this is always staying here.

And this is always staying here.

Same thing happens if I resize the left side here, just like this.

And that's what I want actually.

So I'll keep that selected, then come here.

Now I'm select this text here to make sure this is set to hog content, then come here and select this text to make sure this is set to fixed width.

And that's okay.

So out select this, and out creates an auto layout on this auto layout now, just like this, now this new auto layout is called brim 25.

Yeah.

So inside this new auto layout that I just created, we have this auto layout here, which is frame 24.

Out select it and not duplicate it vertically just like this.

Now select the frame 25 Auto Layout, then I'll set the space between the items inside the auto layout for when I do that, I would come here and now change the padding around items value to zero just to have that now I would come here and I would set the color for this frame 25 auto layout to this.

Now what I'll do is I would set the corner radius value for this auto layout to eight.

Now the corner radius won't be visible.

And that's because this auto layout here is staying on top of that auto layout.

So I would select this auto layout here which is at the top, and I'll come here, I would click on independent corners here.

And I'll set the top left corner reduced value to eight.

And now set the top right corner reduce value to eight, just like this outcome here out select this, click on Independence corners and outset the bottom right corner reduce value to eight and I'll set the bottom left corner reduce value to eight.

And that's sorted.

Now for each of these rows here out select this, then come here and I'll change it horizontal resizing value to fill container.

I'll do that for this also.

Do that for this also.

And do that for this.

And that's okay.

Now let's see if this responding how we actually wanted to respond.

And it is actually now let's edit these values that we have here.

So I would come here and how to set this open and how to set this to previous close and out set this to market cap.

Now for this I'll change the value to So out, come here, previous close out, say that plus this and open, just any value there, actually, just any value, there will be fine, actually.

So with this, I have successfully created these components that allow us to show more details about that stock.

So I would come here and not call this detail table.

Actually, I would call it stock detail table.

And I'll save that, then come here and make it a component.

And here we have that.

So I would zoom out, and I'll go over to this page, and out, bring that component.

So let's come here, click on the Assets tab, come here, grab this and place it here.

So out, keep it selected, and I'll add a shadow effect, just like this, then zoom in so that I can calculate the row spaces better.

So from this item here, I would like to have 123 and four row spaces people this, let's zoom out, and let's stretch this to this point.

And that's fine.

So I can go ahead, select this text, so that I'll be able to change the colors out, select all of this, come here and change this.

To that good, this was not selected.

So I would change that.

For this also out, change it.

Now the next component I'd like to have here will serve as links just in case the user wishes to read more about the stock and the company that owns the stock.

So I'll go ahead, and I'll have that it's going to be similar to what we have here.

Now this is me creating this just the same way I created this stock portfolio components here.

The only difference here is that I just changed the color from what I have here to this.

So let's zoom in to be sure that we are placing our items properly.

So outcome here, I would have 1234 Row spaces before this.

And that's okay.

So at the bottom here, I'd have a button component just for a user who is satisfied with what they see here on this stock Details page.

And this button is going to be an invest button.

So out zooming to calculate the space better.

So I have 123456 Row spaces here.

And I would like to stop at the sixth rule space.

And that's it.

So if a user likes what they see here, on the stock Details page, the user can go ahead and click on the InVEST button.

If the user is not satisfied, the user can come here and click on this button to go back to the previous page where the user will still have to see all the stocks listed here.

So that's it.

So the next page here will be the page that the user will go to, when the user clicks on this invest button here, I'd like us to go ahead and create that page.

So I would duplicate this.

So outcome here, I would rename this to enter stock, amount, whatever you want to call it is okay.

So outcome here, I'll change this to enter amount.

And that's cool.

So I'll go ahead and I'll have this here.

Now this is me using an input field and a button as simple as that.

So I will zoom in to this point and out calculate the space better, I would select this item and out calculates the space from that item, I would say 123456.

So I'd like six rule spaces there.

So I would select this.

And I'll make sure that snaps perfectly.

And that's it.

Now the space between this input field and this button is 1234.

And that's fine.

How to come here.

Now check out this invest button.

And this page is sorted.

Now when the user enters the amount that the user wishes to invest in the stock with, the user will go ahead and click on this Proceed button.

Now when the user clicks on this Proceed button, the user will be taken to another page.

Now that page will be where the user will be presented with a summary of the investment that the user is about make.

Now outcome here.

I would select this and out duplicate it and out.

Rename this to investments summary.

Now I'll zoom in outcome here.

And now take all of these out.

And I'd have this here.

Now this is going to be a summary of the investment that the user is about to make.

And if the user is okay with the summary that the user sees here, then the user would go ahead and enter their secrets been here, before they click on the InVEST button to finally make the investment.

So outcome here out, select all of these, and out calculate the row space is better.

So I would come here, I would keep this here, I would make sure that I have lead zoomin, I'd make sure that I have 123456 Row spaces there.

And that's cool.

So out, zoom out to this point, and this page is sorted.

So this is the flow so far.

Now when the user is on the homepage here, and the user wants to invest, the user will click on this invest link at the bottom navigation here.

This is it here at the bottom navigation here.

When the user clicks on this link, the user will be taken to the InVEST page, which is this.

And if the user goes through the list of stocks that we have here, and the user is interested in investing in one of these stocks, let's say this one here, the user will go ahead to click on it.

And when the user clicks on it, the user will be taken to the stock Details page here, which is this.

Now when the user is taken to this page, the user will read about the stock.

If the user likes what the user sees here, the user will go ahead and click on the InVEST button here.

When the user does that, the user will be taken to this page, where the user will have to enter the amount that the user wishes to invest in that stock with.

Now, when the user enters the amount here, the user will click on the Proceed button here.

When the user does that, then the user will be taken to this page where the user will see a summary of the investments that the user is about to make.

Then if the user is okay with this, the user will go ahead to enter their secrets pin here.

When the user does that, the user will click on the InVEST button here for the investments to be made successfully.

So before we proceed further, I'd like to come here and change this to summary.

So I would keep that selected and align it to the center horizontally, I'd also come here, select these and make sure it's aligned to the center horizontally.

Now, I'll come to this page, which is the Invest page.

And I'd like to have a title here, I'll change this to invest an hour, align it to the center horizontally, just like that.

Now, when the user clicks on this invest button here, the user will see a page that says investment successfully made or investment made or whatever, whatever just a success message.

So I would come here, I would select this, and I'll duplicate it, and I would rename this successful investments.

And I'd save that.

So what I'm going to have here will be similar to what I have here.

So what I'll do is out, take out all that I have here on this page, I'll take this out.

Also, I was supposed to take this out also this debit card title here, I'll take that out.

Also, I'll just select all of this out, duplicate it.

And I bring this in here, just like this.

And I'll zoom in.

And I'll just change this to success.

I'll keep it selected and out, align it to the center horizontally.

Now I'd come here, I'd say go back home.

And that's it.

That's sorted.

So so far.

So so far, we have achieved the authentication task, we have achieved the funding task, and we have achieved the investment task.

Now we are going to go ahead to create more screens that will actually make the user experience on this app to be better.

So one of those screens will be the Transaction Details page.

And that's the page that the user will go to when the user clicks on any of this card here under the recent transactions section.

So if the user clicks on this card, for example, the user will be taken to a page where the user will see the full details of this transaction.

So let's go ahead and let's create that page.

So outcome here out select this one here, and I'll duplicate it.

And I have that.

So let's keep it selected, come here.

And let's call this transaction details.

And for the Transaction Details page, I'll take this out.

And I'll take this out.

Now this is what I would have on this transaction details page.

This is it's as simple as this.

So first things, first, let's calculate our row space to be sure that it's perfectly set.

So I'll have this here and out Count 123456.

So I like this to start here 123456 Out, snap this correctly, and out snap this correctly.

And that's okay.

So this here is to display the transaction date that that transaction happened.

So this is not complete, actually, I can give some space here and say 1603, just like that, so that we will depict the date and time of the transaction.

And that's cool.

Now, what we have here is the transaction amount.

And here we have the amount in words, here we have the transaction type, which is a withdrawal, here we have the transaction remark, which is for Netflix, and the status of that transaction is successful.

So I would select all of this zoom in.

And I would make sure I have 1234 photo spaces there.

Now for the button components here, how to select this, and I'll make sure I have 123456, I'll make sure I have six row spaces there.

And that's fine.

So if a user comes here, and the user clicks on one of these transactions, the user will go to a transaction details page, where the user will see more details about that transaction.

So I'll go ahead and out create other pages, that's going to make the experience on this app to be better.

Now, before we do that, I'd like to give this transaction details page, a page title.

So out, duplicate this, and I'll bring you here a lot call that transaction details out, align it to the center horizontally, just like this.

And that's fine.

So the next flow that I'd like to design will be the flow that the user will go to when the user clicks on this menu icon here.

Now when the user clicks on this menu icon, I'd like for a menu bar to slide in with other options that the user can use to improve their experience on this app.

So how do we make that happen? It simply, so outcome here, I'd have an iPhone 13 Promax, here, out, rename this to manage slide bar, and out, keep it selected, come here, and I would divide the width by two, just like this.

And I'd have this.

So I might decide to go ahead and increase this further.

And what I'll do is this outcome here, I'll just have the logo here.

And I would go ahead to have list items of menu links.

So the first menu link, I would have here will be recent transactions.

I'll keep that selected here.

And I'll change this to a body small text just like this.

Now let's zoom in.

Let's keep this here.

I'll keep it selected, and I would create an auto layout on that text.

Now this auto layout, I would like the auto layout to have a padding around items value of 16.

And I'd also like the alignment value to be set to the left.

So I would come here now I would keep this then creates another auto layout on top of it.

Now this new auto layout that I have created will have a padding around items value of zero, just like this.

Now outcome here out expand this new auto layout here in the design tree.

When I do that out, select the recent transactions auto layout, and I'll duplicate it just like this.

Now go ahead to edit all of these two other links.

Before I do that, let's select the main Auto Layout now, which is frame 34.

Here, and let's set the spacing between items value two, four, just to have that.

So the next link here will be card management, I'd have this be investment portfolio.

I would have this be request statement.

And I'd have this be settings and that's fine.

But I would come here I would select all of these text.

And I'll change the color to this.

And that's what we have.

So whenever the user clicks on On this menu icon, this is going to slide out from the left.

And that's okay.

So let's go ahead to create the routes that the users will go to when the users click on this transact link here at the bottom navigation section.

So to do that, I would come here, I would select this here, and I will duplicate it.

I would rename that to transact, without zooming out, come here.

And I would say, transact.

Keep that selected and out, align that to the center horizontally, then I'll take all of these outs.

Now, I'd like to have two card components here, one for withdrawal action, and one for a deposit action, as simple as that.

So let's go ahead and let's create those card components.

So outcome here out, create a text here, I'll just say deposits.

And I'll keep this text selected.

Come here, and I'll go with the headline three bold text, just like this.

Now, I'd come here and I'd have a 48 by 48 px frame layout, with a corner reduce of 100, then I'd come here and I'll give it a color, that's green, then go to be further icon slogan.

And I'll get an incoming icon there, which is this, this is our incoming arrow icon out, place this here, then come here and set the constraints value to center and center.

Now out, select the icon vector, and now change the color to this.

So I would bring this here, select this, and then create an auto layout on it.

Now for this auto layout, I would come here and I'd set the alignment property to center.

When I do that, I'd come here and outset the space in between items value to 16, then go ahead to add a fill color.

When I add the fill color out, come here and I'll set the padding around items value to eight.

To have that then I would go ahead to set the corner reduce value to eight.

Now outcome here now select the deposit text and change the horizontal resizing value from hog content to fill container.

So this is the deposit action card that I would have on that page.

outcome here, I would rename this to deposit action, save that, and then come here and click on Create components.

Now select this text and I'll change the color to this.

Now I would come here now I would go to this page.

And I would bring in VAT components.

This is it.

I'll keep it selected.

And I'll give it a shadow effect out zoom into this point.

I'll bring this here.

And I'd make sure I have 123456 Row spaces.

And that's okay.

So out stretch this to this point like this.

And I'll create a component or withdrawal.

I'll duplicate this component, which is the master component, take notes.

And I would detach instance, when I detach instance out, select the circular frame there out, make this red out, select the arrow frame there, and I would set the rotation value to 180 degrees.

And that's sorted, as easy as that.

So I would come here select it's come here and go to the design three and rename this to withdraw action.

When I do that, I'll keep it selected.

And I'll click on Create components here.

And that's okay.

So outcome here now, I'll bring this in give it a shadow effect, like this, I would have this day here.

And I would spread this to this point.

And that's okay.

So finally, on this page, I would love to have a button here that can be used to perform the adding of card action.

So I would keep this here I'd have 16 px margin space here, which is to row spaces.

One and two are keep the bottom selected.

out, set the top padding value to eight and the bottom padding value to eight.

Then I'll change the text contents there to add card just like that.

And that's sorted.

So this is the page that the users will go to when the users click on this transact link here at the bottom Navigation component.

So this is where I would stop for this project in regards to creating screens and outs stop here because we have achieved the actual user task for this app.

Now I'd like you to take this as your own assignments and and when you are done.

You can Tagami tweets on Twitter, my Twitter handle is you can go ahead and tag me to your assignment on Twitter.

Now, the assignment is this, I'd like you to have a notifications icon here.

And the notification icon should take users to a page of notifications when they click on it.

And the notifications can be anything.

It can be newsletters, it can be transaction notifications, it can be anything at all.

Now place the notification icon here and create a Notifications page that users will go to when the user clicks on the notification icon.

Now, after that, come here and create a route or create a page that the user will go to when the user select add another card, create a page that the user can use to add their debit card details to this app.

The third assignment will be this, come here and create a page that the user can use to request for their statement.

After that, create a settings page now on this settings page, lets the user be able to set their secrets been there.

Now over here, which is the card management link, the user should be able to delete a card that they have added to this app, or add another card that they want to add to this app.

So that should be possible when the user clicks on card management here.

This should take the user to a page where they will be able to see all the cards that they have on this app.

And and also, they should have the ability on that page to add and delete cards.

Now take notes, this Add Card button here should take the user to the same page that you would create for this add another card here, just like that.

And also, this recent transactions link here should take the users to a dedicated page for the list of all recent transactions.

This investment portfolio link here should take the user to a dedicated page of all the investments that the user has made on this app.

So go ahead to build all of those pages, so that you can have a full and complete user experience.

Now, finally, for the assignment, just before I forget, come here and create a Forgot Password page, create a page here that the user can use to reset their password just in case the user forgets their password.

And that's going to be it.

So at this stage, what we are going to do is to create a prototype of all of these designs that we have created, we are going to link this perfectly and see how it's going to work.

So to do that, let's zoom in out come here, I will start from the splash screen.

So I would select it.

Come here click on prototype.

When I click on prototype, I would come here and I would connect the splash screen to this page.

Now the action will be an on tap action.

And that's because this is a mobile app actually.

So we are actually supposed to tap this screen with our fingers.

Now when the user taps on the screen, the user should move to or should navigate to, you can see the action here should navigate to the author selection page, which is this.

Now the transition animation or the navigation animation should be a smart animation.

So it's going to be an ease in animation.

And I would like this ease in animation to be for 800 milliseconds.

Actually, I'd like this to be an ease in and out animation, just like this.

Yeah, that's better for me.

So outcome here now.

And I will say okay, when the user clicks on the login button here, the user should go to the login page.

And I'll keep all of the sets the way it is.

Now when the user clicks on the get started button here, the user should go to the signup page.

So I would come here, click on this login button here.

And I would say when the user clicks on that login button after after passing in their email address and password, the user should go to the homepage, which is this over here.

When the user clicks on the signup button, the user should go to the verification page where the user will have to enter the verification code sent to their phone numbers.

Now when the user types in the verification code here, the user should click on the Verify button.

And when the user clicks on the Verify button, this should show like a pop up so I would connect it to this.

So out connect this And I'd keep it as on top, then for the action out habit set to open overlay, then come here and I'll keep it sets a centered actually, after setting these two Centered Outcome here, and I won't select this option.

And that's because I don't want the user to close the pop up.

If they mistakenly click outside the pop, I'd like the user to click on proceed here.

So this other option here out selected, this is the add background behind overlay property or the add background behind overlay option.

When I select it, it means that when the popup shows up, the background will be faded.

So I would set the Opacity value to 35%.

And I would like the animation to be an instant animation.

And that's going to be okay.

Now, when the user clicks on this Proceed button, the user should be taken to the homepage.

Now, when you are creating a prototype like this, you can just take the connection here to any page at all, then come here and set it to the page you want to set it to.

So I would come here and I would select Home.

And you can see that the connection has gone to the homepage, just like this.

So the authentication is set.

Now when the users come to the homepage, and the users click on this menu icon, the user should be taken to the menu, slide bar them here, this is what should show up when the user clicks on that menu icon.

Now, I would want that menu slide bar or that slide bar menu to actually slide in from the left.

So I'll click on this connection here to have the Interaction Details page show up.

Now for the action here, I would set these to open overlay outcome here and I'll set it to manual.

When I set it to manual, it means I'll be the one to set how the interaction is going to happen.

So I'll grab this, and I'll place this here, just like this.

This is how it's going to look like when you click on that menu icon.

Now outcome here.

And I would say close this slide by menu, when the user clicks outside of it, I would select that and over here out have a background behind overlay properties selected, also an out have the Opacity value set to 35%.

Now for the animation, I'll change this from instance, to move in just like this.

And for the moving action out habits moving from the left and out have the speed of that animation set to 800 milliseconds.

Now outcome here, I'll click on this font Account button here.

And I'd say okay, when a user clicks on this button, this should show us a pop up.

So we all know how to set a pop up, right.

So I'll change this to open overlay.

Keep it set centered, and out add a background behind overlay action.

And also, if the user chooses not to fund the account anymore, the user can just click outside the pop up and go back to the homepage.

So I would select that.

I'll keep this set to 35%.

And for the animation here, I'll keep it set instance.

So I'll close this.

Now if the user selects the bank transfer option, the user should come here, as easy as that.

And if the user clicks on copy account number, this account number will be copied to the user's clipboard.

And when that happens, the user will come here and click on this arrow here to go back to the homepage out sets this from instant to smart animates.

And that's okay.

So if the user clicks on the debit card option here, the user would be taken to this page.

If the user is taken to this page, and the user types in the amounts that they are trying to actually fund the account with, then the user will go ahead to tap or to click on the fund account button here.

And when the user does that, the user would come to this page where the user will have a message that says account funded successfully.

Now, at this stage, we are going to want the user to go directly to the InVEST page.

So I'll select this button now.

And I'll take this flow to the InVEST page, which is this.

So when the user gets here, I'll take this menu icon out here actually, when the user gets here, and the user wants to invest in one of these listed stocks, let's say this one, the user will click on it and the user will be taken to the stock Details page.

When the user gets to the stock Details page and the user is okay with all of these details here.

The user will click On the InVEST button here.

And when the user does that, the user will come here and be required to enter the amounts that they wish to invest in that stocks with.

When the user enters the amount and the user clicks on the Proceed button, the user will be taken to this page, which is where the user will see a summary of the investment that the user is about to make.

Now, if the user is satisfied with this summary, the user will go ahead to type in their secrets pin here, and then click on this invest button.

And when the user does that, the user will be taken to this page, which is a success page, that's going to let the user know that, hey, you have successfully invested in that stock.

So the user will come here and click on the Go back home button, and out, take this back to the homepage, how to select home here.

So let's come here, let's see the other links that we have not created.

So let's say the US is trying to see the transaction detail of any of this recent transaction.

Yeah, let's see the withdrawal transaction here, I would click on it to select it.

And I would link this to the Transaction Details page, which is this.

So if the user clicks on that transaction card, there, the user will be taken to this page.

And if the user goes through the whole detail, and the user is satisfied, when the user clicks on done, the user will go back to the homepage, outcome here and select home here.

Same will happen if the user comes here, clicks on that arrow, the user will go back to the home page.

So you can see that we are creating lots of connections and flows here.

Lots of connections and flows here.

So let's go back to the homepage, and let's see the flow that we have not created.

So this is the home page here.

So this home link here is safe to be there.

Now let's say the user clicks on this invest link here, which is in the bottom navigation components, the user should be taken to the InVEST page.

If the user clicks on this transact link here, the user should be taken to the transact page.

So if I come here, now out still connect this, this should go to the homepage.

And since this is the Invest page here, it means we are here.

So this should go to the transact page.

I'll do that for this also.

So let's come here.

Let's see, let's see what we have not connected yet.

So if the user comes to the transact page, and the user clicks on the deposits card here, the user should have that pop up, show up, that would require them to select if they want to deposit with bank transfer or their debit card, it should be the same flow.

Now over here, I should actually change this to withdraw.

If the user clicks on this withdraw card here, the user should be taken to a page where they would have to enter the amount and the destination bank that they are trying to withdraw their funds to.

So this is also going to be a part of your assignment.

Go ahead and create that flow.

When you create it.

Go ahead and tag me on Twitter for my comment.

So let's go ahead and let's present this flow.

And let's see how it's going to look like.

So I would come here, I would select the splash screen.

And I'd come here and click on present.

So when I click on present, I would have the splash screen show up here.

When I click on it, I would have the option to either login or get started.

So I'll click on get started.

And here we are on the signup form page.

So if the user enters their email address, phone number and password when the user clicks on the signup button, the user will be required to enter the verification code.

When the user enters that the user will click on the Verify button here.

And a pop up will show up here saying phone number verified.

Now you'll see that when I click outside the pop up, the pop up won't go away until I come here and I click on the Proceed button.

When I do that, I'll be taken to the homepage.

Now here we are in the homepage.

Now if I come here and I click on this menu icon here, you will see that this menu slide bar or this slide bar menu and how you call it is fine.

This slide by menu slides in from the left.

When I click outside of it, it goes back in.

Now let's check the font accounts flow.

When I click on it, I would have this pop up show up here that says Select method.

Now let's say I choose to select the bank transfer method, I would have this show up here, I'd be able to copy the account number.

And when I'm done, I would come here and I would click on this arrow icon here.

To go back to the homepage.

Now let's click on the bond Account button once more, and let's select the debit card method, you can see that I'll be taken to this page where I would have to enter the amount that I'm trying to fund this account with.

Now, let's say I type in the amount, I would come here and I'll click on the fund account button, just like this.

And I'd have this message that says accounts funded successfully.

Now if I go ahead and click on this invest button, I'll be taken to the InVEST page, which is this.

And over here, I would see a list of stocks.

Now I'd like to present this in full screen actually, so that we can see better.

So over here, I would see a list of stocks that I can invest in.

Now let's say I'd like to invest in this one here, I would click on it.

And I would see full details about this stock here.

Now, I don't have some of my components showing here.

So I would go back to my design outcome here.

So this is the stock Details page.

So this three buttons actually not inside that layout.

So I would select the three of them.

And I'll take them inside that layout.

And that sorted.

Now when I come back here, you will see that I have that here.

So let's go back to our full screen presentation.

So if the user likes what they see here in the stock Details page, the user will go ahead to click on the InVEST button here.

And when the user does that, the user will enter the amount that they would like to invest in that stocks with.

When the user does that, the user will go ahead to click on the Proceed button here.

Now that flow is not created.

So I would come back to our design here, I would click on this Proceed button here, click on prototype.

And now let's see what the problem is.

So I came here and I clicked on this connection link here.

And I changed this from on drag to on top.

Now when I come back here, and I click on the Proceed button here, you will see that we are taken to the Summary page.

Now this page will be the page where the user will see a summary of the investments that the user is about to make.

And if the user is OK with this, the user will go ahead to enter their secrets pin here and then click on the InVEST button.

Now the InVEST button is not active also outcome here and out see the problem for that.

So I would click on invest here.

And I would select the connection flow here.

And as you can see here, there is an undo drag event here, outcome here.

And I'll delete that on drag event here.

And I'll just leave this set to tap now.

But the tap event, there is no navigation destination.

So I would set this.

First of all out to take note of the screen here.

This is the successful investment page.

So I would come here and I would go to the successful investment page.

And that's sorted.

Now when I come here, and I click on invest, I'd be taken to the success page.

Now when I click on Go back home, I'll be taken back to the homepage.

Now that is after I have successfully invested in a stock.

Now, what happens if I come here, and I click on one of the recent transactions here, let's say the withdrawal transaction here, you would see that I'll be taken to the transaction details page for that transaction.

When I'm done going through it out, click on Done.

And I'll be taken back to the homepage.

Now what's going to happen if I come here and I click on this invest link at the bottom navigation components.

I'll be taken to the InVEST page still.

And I'd be able to still invest in a stock just like this.

Now what happens if I come here and I click on the transact link here or be taken to this page where I'd have the option to deposit funds or withdraw funds.

And I'd also have the option to Add Card.

Now if I am okay with this outcome here, and I'll click on this arrow to go back to the homepage and that arrow is not active.

So I would have that sorted out come here and connect that arrow to be homepage and it's going to be an on tap event.

So when I come back here, when I click on that arrow now, you will see that I'm taken back to the homepage.

So go ahead, create the order pitches and the other route as your assignment, then tag me to it on Twitter.

So that's that for this course.

If you found this cost to be helpful, go ahead, click on the subscribe button, leave a comment in the comment section.

And stay tuned for more content.

Thank you and see you in another course.

We just published a 10-hour Figma course that will teach you how to use the tool for UI design.

Joseph Brendan developed this course. Joseph is a great instructor who has taught thousands of people on his YouTube channel.

Figma looks like this.

Here are all the sections covered in this comprehensive course:

• Creating a Figma Account
• Creating & Naming a Figma Design File
• Creating Shapes in Figma
• Selection in Figma
• Editing Shapes in Figma
• Introduction to Typography in Figma
• Design Tree in Figma
• First Design Task
• Colors in Figma
• Drawing Tools in Figma
• Margin and Padding in UI UX Design
• Figma AutoLayout
• Formatting Principles in Figma
• Figma Constraints and Resizing
• Website Design in Figma
• Jakob's Principle Of Design
• Introduction to Styles and components
• Figma Component Variants
• Layout Design & Configuration For Websites in Figma
• Layout Grids in Figma
• Introduction to Responsive Design
• Material Design Guide
• Introduction to Tailwind UI
• Tailwind UI Design Project
• Responsive Landing Page Design Project
• Designing Mobile Apps
• Iconography in Figma
• Boolean Groups
• Figma Tokens
• Animation in Figma With Figmotion
• Mobile Design Project

Watch the full course below or on the freeCodeCamp.org YouTube channel (10-hour watch).

We just released a Figma course on the freeCodeCmap.org YouTube channel that will teach you how to use the tool to design websites.

Joy Shaheb developed the course. Joy is a prolific tutorial creator and excellent teacher.

Here are the topics covered in this course:

• Figma Setup
• Left Panel
• Top + right Panel
• Text Tool
• prototype test
• Auto Layout
• Layout Grid
• Constraints
• Components
• Desktop Design
• Mobile Design

Watch the full course below or on the freeCodeCamp.org YouTube channel (3-hour watch).

Transcript

(autogenerated)

Figma is a vector graphics editor and prototyping tool that is great for designing websites.

And this course joy will show you how to use it.

Joy is a prolific and excellent tutorial creator.

Hey guys, you're here.

This is a big material for complete beginners.

And today, you and me together, we're going to make a complete responsive web design, both for the desktop version, and another one for the mobile version.

So this is the homepage of our desktop version.

So do you see this nav items over here, home teachers contact us signing according to this nav items, we have four pages, okay, let me walk you through all the pages and sections.

Okay, so this is the home page, I mean, the landing page over here, and then if I scroll down, then we're going to find this section over here.

And then this section over here are offered courses.

This is the Education website, okay.

And then if I scroll down, then you're going to find this over here.

And then lastly, we have this footer over here.

All right, let me zoom out a little bit.

And this is the teacher section over here, you can see that.

So this is the teacher section over here, we're going to make some cards over here along with some buttons.

And we're going to also work with svgs.

This is the footer over here for this page.

And then we have this contact us page over here, you can see that so we're going to also work with icons, you see these icons over here, we're going to work with them, and also make some forms over here as well, you can check out the sign up page over here as well.

This is the last page, you can download this entire figma file through the link in the description down below.

So once you download the figma file, you're going to find all of these pages over here.

So this carries the next design.

I mean, this one over here, and this one carries the mobile design.

Look at that we have the mobile design over here.

Okay, so this is our homepage, let me walk you through this.

Okay, so this is the homepage over here.

And these are the style guides, I'm in the typographic guides that we're going to follow, okay, what will be the font size of the logo, font size of the large text, font size of the button, text, etc.

Every design carries the style guide.

Okay, let me show you.

The mobile carry the style guide laptop, the cabinet design carries the style guide as well.

The laptop design also carries this style going over here and the next version, this one is at the very top, we're going to find this style guide over here.

So once you download the finger file, you're going to find all of these pages over here you see this, the next step carries the design for the next version.

And the mobile page carries the design for the mobile version.

Okay, so I'm going to click over here also, you're gonna find design for the laptop and the tablet version as well over here.

So this is a web design for the mobile version.

Okay, let me actually zoom in a little bit like that, look at that.

This is our homepage over here.

And then this is the next section, third section, fourth section, and this is our footer over here.

Okay, let me zoom in a little bit.

There we go.

And then we have our social media icons over here as well.

And then look at this teacher section over here.

And this is the rest of the design.

So today, you and me together, we're going to design the Dexter version.

Okay, this one, and the mobile version will see this laptop and tablet.

This is your homework.

After this tutorial, you're going to practice over here, okay, you're going to make this web design for the tablet version.

And also you're going to make the web design for the left version as well.

Okay, so these two are your homeworks.

This entire video is divided according to these chapters over here, there is one over here, you're going to find the timestamps on the description down below.

So first of all, we're going to look at all the tools figma carries.

So once we have covered all the tools figma carries, then we're going to start making a responsive web design for the next version first, and then we're going to start making the web design for the mobile version.

By the way, this entire video is made for beginners who doesn't know anything about figma.

So we're going to start from scratch, I will not use any plugins, libraries or design systems just plainly from scratch, we're going to use all the tools that FEMA provided and we're going to make the design using the tools only.

If this video gets at least 2000 likes then I'm going to make another video at once level figma tutorial, where I'll be covering how to make a web design using the design system plugins, libraries, prototypes, and also how to save time as well.

So hit the like button and also hit the subscribe button so the gear brother can afford them.

Ah, this is Luke 800.

This one.

Also note that these are our breakpoints, okay, for the extra version, it is 1400 40 pixels, okay.

And for the laptop version, it is 1024 pixels.

And for the tablet version, this is 768 pixels.

And for the mobile version, I have picked the 414 pixels, which is the width of the iPhone 11 Pro max alert In this video, we'll start according to these chapters over here.

First of all, you're going to open any web browser, okay, and you're gonna type figma.com fig ma.com like that, hit enter.

You're gonna find this interface over here and then you can log in or you can sign up don't have an account.

Okay, so I have an account.

And I'm going to log in over here, like that.

I'm going to use Google over here.

So once you have signed up, you're going to find this interface over here.

Okay, let me explain this insured.

Okay, so all of these are your draft, the projects that you're working on.

Okay, let me actually scroll down a little bit so that I can show you some of my projects over here.

Okay, like that.

And this one over here, do you see this, this is used to create a new draft file, I mean, a new project.

And over here on this section over here, you're gonna find some templates over here in order to save your time.

Okay, you can scroll down and see all of this templates over here as well.

If you want to download figma for the next version, you can do it as well, you're gonna click this over here, on your profile icon, okay, like that.

And then you're gonna click this get dekstop app, and then it's going to automatically download figma for you.

Alright, now I'm going to show you this community tab over here, okay, I'm gonna click this, or what you can do is you can come over here, and you can click this community over here, and it's gonna bring you over here.

So So this community tab contains works of other people, so that you can download and use for your own purposes.

Okay, let me scroll down a little bit.

So you're gonna find this.

So these are the trending files over here, you're gonna find various assets over here, various design systems, okay, so look at this over here.

These are various icons that you can download and use for all your projects.

So like that we have tons of resources published by other people for completely free.

Alright, so I'm gonna scroll down so that you can look more, okay.

And then at the very top over here, these, these are the filters, okay? If you want just plugins, if you want to just look at plugins, you can click over here, or perhaps you want to see some illustrations, okay, you're going to click illustrations over here.

And then you're going to find various illustrations, various digital assets, okay, like that.

For instance, let's say that, look at this illustration over here, if I click over here, if you want to use this for your project, what you're going to do is you're going to click this duplicate option, okay, like this.

And it's going to give you a copy to your figma file.

And you can navigate the designs, I mean, navigate the assets through this pages over here, okay? Like the components, look at all of these components over here.

So you got this for completely free.

Okay, let me zoom in a little bit, so that I can show you various design assets.

And if I want to change the background color, I can also do it by this, look at that, from purple to white like this.

Now look at my designs over here, okay? Look at this models over here that I can use for my projects, okay? Like this.

Okay, I can zoom in, I can zoom in and zoom out and various assets over here, like that, look at all of this assets.

Along with the people illustrations, I also get this over here, look at this.

In order to go back to your profile from the community tab, what you're going to do is you're going to click over here, okay, and then you're going to click on your profile like this.

And you're going to come back to your figma dashboard over here.

So this is our practice project, I have included a link in the description down below, you click that, and you're gonna come over here.

So once you come over here, you're gonna click this duplicate option.

Okay, so if you click on this duplicate, then it's going to duplicate your project on your profile like this.

First of all, let's inspect what we have on our left panel over here, you see this panel over here.

So you see this layers over here, this layers represents all of this layers that we have over here.

And this assets over here, I'm going to discuss in details about this one, when I am discussing about the components part, this one over here, part number nine.

All right, now I'm gonna come back layers over here.

And this one represents all my pages.

Okay, so these are all my pages over here, if I click this over here, it's going to hide my pages.

If you click it back, it's going to show me all the pages that I have.

If you want to create a new page, then you can click this plus sign over here, and you can name it whatever you want.

Like I'm going to name page one over here, like this, and I'm going to hit enter.

If you want to delete a page, then you can just right click over here and delete this like that.

Or perhaps if you want to rename it, then you can click this over here.

So I'm going to delete this, okay, I don't need it.

So all our designs are arranged into these pages over here.

First of all, you have the Start button over here, I mean start page over here, you can see this.

So you can see this thumbnail over here, the topics covered page over here, the breakpoints over here.

And if I come to this dekstop page, you're going to find the web design for the next version.

Okay, if I click this laptop over here, you're going to find the design for this laptop version.

Okay, similarly for the tablet as well.

This is the design for the tablet version.

This is the mobile version.

This one is the responsive test.

I'm going to discuss about this part when I'm discussing the constraints providing this one, Part Number eight, I have included a small sample on this page over here so that they can test how products work in figma.

So I'm going to discuss paradise in Part number five.

And this page, the assets page carries all our assets, all our illustrations and social media icons, we're going to make our web design easy, all of this assets over here and this section, the credit section carries all the links from where I have downloaded the illustrations.

Okay, so you can see this over here, if you double click over here like this, then you can copy this link, and you can go to that link and see the original source of the illustrations.

Alright, then I'm back to the start page over here.

And now we're here I'm going to create a new frame, okay, by the way, all our designs are arranged in two frames, okay, if I hit F, or if I click this over here, this frame button, don't worry, I'm going to discuss in details, I would all the tools on this top panel, and on this right panel over here, okay, if I select this frame over here, and if I drag it like this, like that, okay, by the way, regarding the basic movements, you can use your mouse scroll to go top to bottom like this, okay, if you hit Shift and throw your mouse wheel, you can go left to right like this.

Okay, if you hit Ctrl, and if you use a mouse scroll, then you can go zoom in and zoom out like this, look at that.

Alright.

Alright, so I'm back over here on this frame over here, all our design in all our elements are arranged into frames, okay, let's say that I have a circle, okay, I'm going to hit a ball.

And I'm going to draw a circle over here like this, that, and now I'm going to create a rectangle, okay, if I hit r on my keyboard, then I can draw a rectangle over here like this.

Let's say that I want some text, okay, if I hit t on my keyboard, and click over here, then I can write text, okay, like this.

Control a, and you increase the font size over here to 50.

Not 50, let's say 200.

Okay, like that, look at that, we have some text over here as well.

And so look over here, this is our frame, okay.

And this frame carries all our elements over here, this, this ellipse over here, you see this ellipse, it gets highlighted in blue, you can see this blue highlighted color, okay? If I highlight the rectangle, look at this, I'm selecting the rectangle, okay, if I select the text over here, like this, look, it gets highlighted over here.

And do you see these two buttons over here, if I click this, then it's going to hide me the frame like this, look at that.

Okay, now look at this, I can move this frame anywhere I want.

Okay, if I do it like this, look at that.

But if we want to lock the position of this frame, what you can do is you're gonna click this over here, the frame, or you can just click on the name over here, usually, you see this frame number 52, I'm going to click this on the name, and then I'm going to click this lock button over here, then it's going to lock me the position it is, it's not going to move from its position is going to stay fixed over here, including all the assets that is carried on the frame.

Now look, I can't select the text, I can't select this shapes over here as well is going to get locked over here.

In order to unlock that, I'm going to click this over here like this unlock.

Now I can move it and I can select all of these elements over here as well like that.

So I'm going to delete this frame over here like this.

Alright, now we're going to keep our content inside our frame as it is, or we can also arrange them into groups, we can group them directly, or we can also use the Auto Layout option.

So if so if I select all of them over here, and if I right click over here, and we're going to get this option over here, auto layout, add auto layout, I'm going to discuss in details about this tool on part number seven over here.

So if I right click over here, then I'm going to get this add Auto Layout option.

Along with that I have this option group selection, if I click on that is going to behave is going to behave like a group.

Okay, if I remove my mouse and click over here, outside this box, then look at this, it gets it removes the blue outline.

If I click over, if I hover over here, look, all the elements gets highlighted, which means that it acts like a group.

Okay.

So if I want to ungroup this, what I'm going to do is I'm going to click over here and Ctrl Shift g Ctrl, Shift g like this.

Now look, it will behave individually like that, look at that, this is behaving individually, there is one is behaving individually, there is one as well.

Same thing goes for the oral Layout option.

Okay, now I'm going to fill all of them again and I'm going to create a new group over here.

Okay, group selection.

Now look, it behaves like a group.

Okay, let's say that you want to move Okay, now let's say that you just want to select the rectangle and nothing else.

So in this cases, what you have to do is you can double click on the rectangle like this, there is just like just the rectangle over here, or what you can do is you can hit Ctrl on your keyboard control and click one time over here, then is to select only the rectangle.

If you want just only the text, you're going to select Ctrl on your keyboard and just select the text over here like this, or what you have to do is you're gonna select this whole thing, and then double click over here like this.

Look at that, it's going to select your text over here.

Now we're going to discuss in details I want all the tools that is listed on the top bar over here, this one over here, and all the tools that is listed on the right side over here.

So let's get started.

Alright, The very first thing that I want to talk about is a movement, how will you move back and forth in your figma file, okay, so if you hit shift, and then if you scroll your mouse wheel, then you can go left and right like this, look at that.

Okay, so if you release this shift and just use your mouse scroll, then what you can do is you can just scroll top to the bottom like this, look at that.

Okay, so in order to go top to bottom, you're going to use a mouse scroll like this, okay? Like that.

And if you want to go to left to right, then what you're going to do is you're going to hit shift, and then you're going to scroll your mouse like that, okay, that you're going left to right, if you want to zoom in and zoom out, what you're gonna do is you're gonna hit Ctrl, and then you're gonna use your mouse scroll like this, look at that, I'm zooming out.

And then I'm zooming in like that, look at that, okay, and you can also use this hand tool over here, okay? If you hover over here, or perhaps you can also use h, t on your keyboard like this.

And then you can pinch your left mouse button, or you can just click over here, and you can just move back and forth like this, look at that.

There we go.

Let's talk about this feature over here.

So if you click over here, you have two options, the move option and the scale option.

First of all, let's look at the move option.

Okay.

So if I click this move option, or shortcut V, okay, you can see all the shortcuts over here v for move and scale, it is key, okay, so I'm going to select that move option over here, V, okay, and then I'm gonna come over here, and then I'm going to select this frame, in order to like this frame, you're gonna select this name over here.

And then what you're going to do is you're gonna move it like this, look at that, you can move freely, independently, anywhere you want.

Okay, you can select any frame you wish, for instance, let's say that I want to select this frame over here, okay? And then I'm gonna move it anywhere I want like this, because that I can move it like that, not just frame, you can move any element, okay, if you want to move this image, then you can also move it like this, look at that, I have selected this and I'm going to move it like that.

I can move it anywhere I want, like that.

Okay, Ctrl zet.

In order to make you understand the scale feature, I mean, this one even better.

First of all, we need to look at the frame feature, this one and the rectangle feature over here.

So let's go.

Alright, now I'm going to come over here and let's discuss about the frame feature.

Okay, so I'm going to come over here and then I'm going to select this, or shortcut, I'm going to hit F, okay, f like this, then you're going to get all of this options over here.

Okay, who do you know what these are, these are your, these are the screen width of various devices.

Okay, so let's say that I want to work with mobile.

Okay, so I'm gonna click this phone over here and look at this, I have an iPhone 11 Pro max.

And then you see this one over here, this measurement, this is the width and the height of the screen.

Okay, I can also work with iPhone eight, iPhone as a Google Pixel two, etc.

We have a lot of options over here.

But if you don't want the phone, you can also go for the tablet, there we go.

And if we want to work with the desktop, boom, there we go.

And you can also you can even also work with watch, like Apple watch over here.

And then we have social media post dimensions over here as well.

But if we want to make something custom, what you are going to do is you're going to hit F like this, and then click over here like this and you can drag this little icon over here anywhere you want and you can just customize the width and height according to your needs.

Okay, so now the next thing that I want to talk about is this one over here Okay, so what is this this is a frame Okay, it is going to show me that it is a frame but if you want to change it if you want to change the frame to a custom frame, let's say that I want to work with iPhone 11 Pro Max, okay, I'm going to select this Now look, it's gonna change me the width and the height like that, look at that, but if we want to work with it, say we have Surface Pro for okay look at this predefined width and height Okay, if I select this, then it's gonna give me that width and height.

If I select this now look 1368 by 912 pixels, I mean 1368 is the width 912 is the height like that, look at that.

And also you can just drag like this according to your needs, okay, you can adjust the width and height, okay? So look at this x and y, these are the coordinates I mean, where is your frame located in your figma file, this x and y represents that if you drag it like this with that your frame is moving to the left, I mean to the right, okay, if you want to move it to the left like this, then you can also do it like that.

There we go.

If you want to move it vertically, then you can do it with the y axis over here like that.

And if you don't want that feature, then you can just drag your frame over here and I will click your frame over here and drag anywhere you want.

Like this, look at that.

Okay, let's say that I want to place it over Here, okay beside my offered courses, frame over here like that, okay that I have kept it over here, and it's gonna give me automatic calculations over here.

I didn't have to worry about that.

Now let's look at this feature over here, the width and the height.

Okay? You can guess it by the name.

This is used to set the width and height of your frame or perhaps your rectangles as well, or any shapes you want.

Okay? So I'm going to select this.

So I'm going to select this like this and look at this features over here.

Okay, I'm going to select this, and I can individually set the numbers, let's say that I want 800 pixels, Okay, I'm gonna write 800 pixels over here, there we go.

It is 800 pixels over here.

You can also do mathematical calculations over here as well.

Let's say that I want to add another 50 pixels, Okay, I'm gonna write 50 over here.

Now I'm gonna hit enter, look at that.

850 pixels, you can also do minus multiplications, etc, according to your needs.

Okay, I'm gonna, let's say I want to minus nine pixels from here it is 859 pixels.

So minus nine, enter, there we go.

858 50, which is a square.

Okay, I changed my mind, I'm going to set it to, let's say, 350 over here, like this.

Look at that.

Okay, so do you know what mode this is? This is the portrait mode over here.

And let's convert it to landscape mode.

Okay, I'm gonna click this over here like this.

And do you see this tool buttons over here? This is the portrait mode.

And this is the landscape mode.

Look at this.

I look at my first of all, look at my width and height, okay, the width is 350.

Height is 650 is gonna get shifted between these two.

Okay, let me show you.

Okay, I'm going to select this over here.

Now look.

So after selecting this button over here, now look very carefully.

The value of this two jumped, it was 650.

Before, and now it's 350.

Okay, it was 315 hours.

650.

Now look very carefully, I'm going to convert it back to portrayed Okay, like this, look at that, look at that these two values are jumping at the same time our frame is changing over here, look at this.

There we go.

Like that.

If you want to change the angle of a frame, you can just drag over here like this, look at this, I can change the angle of my frame.

Look at this, it is rotating.

Okay, um, let me actually zoom in a little bit.

Now look at this, it will rotate like this.

Okay, we have negative values, we have positive values.

So you can just manually do it as well like this.

I'm going to set to zero like this.

There we go.

Boom.

Now look at this over here.

This is the corner radius.

Okay? Look here very carefully.

I'm going to zoom in, you see this, this is pointy corners, okay? So if I select this, and if I drag like this on the right side, now look.

We can set curves on our shapes and frames, okay? So look at this.

Look very carefully.

Look at this, you see this? Okay, now, let me talk about this one.

Okay, the clip content what this is, okay, in order to make you understand this clip content, first of all, I'm going to set some text over here, okay? He or you can just select this option over here, but don't worry, I'm going to explain in details about this tool and all of these properties.

Okay, it is coming.

Wait a minute, okay.

I'm going to click over here and then click over here like this look, and I'm gonna select some text or it's very big.

Okay, so I'm gonna, what I'm going to do is I'm gonna select over here, okay.

180 pixels.

I'm going to set it to 60 over here like this.

Look at that.

ADF Okay.

Oh, sorry.

fidf.

Okay, just some random text.

Okay.

I just placed some random text over here like this.

Look at that.

ABC.

ABC.

makes more sense.

Okay, so now look what happens.

Okay, I'm gonna remove that clip content from here.

Okay.

Look, nothing is set over here.

Okay, now look, what I what happens is when I resize it like this, look at this.

Okay? The text is outside, the text is outside.

And the frame is getting resized like this, look at that.

Okay, you can clearly see the content.

Even if we resize our frame, you can see that you can clearly see the content, even if we resize our frame, even if the frame is smaller than the content.

But look very carefully.

What happens if I enable the clip content over here like this look like? It gets kicked like a scissor.

Okay.

Now if I resize it, now you can visibly see all the parts of our content over here.

Okay, like that.

Look at that.

Now, let me explain this feature over here.

You see this feature? Resize to Fit.

Now look, what happens if I click this? Okay, there we go.

It resizes I mean, it removes all the gaps and add just to our content.

There's one over here.

This is very useful when we're making buttons.

Let me give an example.

Okay, control Zed.

Let's say that I'm going to make a button Okay, V UTP.

Or like this, and I'm gonna make it a smaller, let's say 30 pixels, okay? And now look, and look, instead of doing this one like this manually like this, we have to do a lot of work over here and then center it over here.

Like this, and then it is called a button over here like that, instead of doing this hard work, what you can do is control Zed, Zed, Zed, Zed, it means I'm in going, I mean, I'm going back, okay, by doing control Zed, like this, look at that.

So what you can do is simply, you just click on your frame, and then you click this over here.

Resize to Fit, there we go, boom, we made ourselves a button.

This is just a sample on how to create a button.

But after a couple of minutes, I'm going to discuss in details how to make a button using auto layout.

I mean, there's one over here with appropriate calculations.

So wait a couple of minutes.

So once that's done, I can adjust the corners over here like this, look at that, there we go.

Like that, I can adjust the corners, and then I can rotate it over here like this, look at that, okay, on to exact.

And regarding the corner radius, look at this, I have this corner, I mean, I have set it to eight pixels, which means that it's gonna say eight pixel over here, eight pixels here, here, here.

Let's say that I didn't want the corner radius to be on the right side, I just want it to be on the left side, just one single side.

So what can we do in this scenario, I'm going to select this over here, and I'm going to click this little icon over here, okay? And then look at this, this is called independent corners, it is set to eight pixels for all the four corners.

Okay, so let's say that I didn't want the corner area on the right side, I just wanted on the left side.

So what I'm going to do is I'm going to do it like this, okay, this is the top, this is the top left.

Okay, this is a top right, I'm going to select this and I'm going to set it to zero like this, look at that.

Now look, the corner effect is removed.

Okay, I'm going to select this again.

And I'm going to select top left, top right, bottom left, bottom right, this one, okay, I'm gonna select this 00 actually, sorry, my bad, I chose the wrong corner over here, what you learn from mistakes, right? So I'm going to select this again, and I'm gonna say to eight pixels over here and zero over here, like this, and then enter.

Look at that.

I have corners over here on the left side, not on the right side.

There we go.

Now let's discuss about this feature, get the slice feature.

So what this is used is, let me actually come to my, let me actually delete this, okay? I'm going to come on to this frame over here, okay, let's say that I just want not the whole image, I just want the head, okay, I just want to download the head, I just want to work with the head.

Okay, so what I'm going to do is I'm going to click this over here, slice, okay? And then I'm gonna draw a rectangle over here on the head section, can you see this properly? Okay, there we go.

Now look, I have a little slice over here, you can see this, okay? Now what I'm going to do is I'm going to select this slice over here, either from here, or I can directly select it here, okay, and then I can adjust the width and height as well like this, look at that.

Alright, and I can also move it like this, look at that, there we go.

And then I'm going to click it over here.

And then can you see this Export button over here, I'm gonna click this export, who is downloading this, okay, I'm gonna click this plus sign over here.

And you can set the image quality as well, you can set it to PNG, jpg, SVG, I'm gonna do it in SVG.

Okay, I'm gonna select this, and then I'm going to export this one, look at this, I have downloaded a little file over here.

So what I'm going to do is I'm going to drag it over here like this, look at this, I just look at this over here, I just downloaded I mean, I just sliced the head, because I just only need to work with the height head.

Okay, now look, look at this.

This is equal to this one over here, this slice over here, I hope you understood the slice properly.

Now, regarding this Export button, you can download anything you want.

Okay, let me actually give you a demo.

Okay, I'm going to delete this home here.

And at the same time, I'm going to remove this slice from here as well.

And let's say that I want to download this single frame over here, okay, just single frame, or perhaps even just the drying, we're here I'm in the illustration, I just want to download the illustration and nothing else.

Or you can also download multiple files as well like tricky by clicking this one and then shift, then click like this, then click like this as well.

Now, let's say for keeping this simple, I'm going to download this image, okay, I'm going to click this over here, and then I'm going to scroll down at the button over here.

And then look at this, I have the Export button, I'm gonna click over here and then look at this.

You can change the size as well you can download it two times three times or four times the actual size, okay? And then we have the PNG, SVG, jpg, PDF, etc formats, okay, you can download anywhere you want, I mean, you can download, you can download in any format you want and then you're gonna hit this export frame button.

And yeah, this feature this preview option is given just to let you know that what you are downloading Okay, you can see this I have just selected this frame, I mean, this illustration over here, let's say that I want to see like this text over here, okay, I'm gonna select this text and I'm going to select this export like this.

And look at that.

It is giving it is giving me this preview that I have just downloaded in there.

text over here.

Now let's discuss the shape feature.

Okay, so I'm going to come over here, you see this shape, it looks like a square, Okay, I'm gonna select this like this, look at this, I have a lot of options.

I have rectangle, line, arrow, ellipse, polygon, etc.

Let's say that I want a polygon, sorry, I want an ellipse, okay, I'm going to click this, or I can select Oh, so I'm going to select all like this and look at this, I can make a circle over here.

But look, this circle looks distorted.

And it's going to be very hard for me to make a perfect circle.

So in this case, what I'm going to do is I'm going to select, I mean, I'm going to hit shift.

Now look, it instantly became a perfect circle.

And now while holding Shift, I can just move my mouse and look, it's gonna give me a perfect circle like this.

Look at that.

Okay, this is a perfect circle over here, I'm gonna delete this.

And I have more options like a rectangle, okay? And I'm gonna select rectangle like this, look at that.

Okay, I can do it anywhere I want.

I can move it anywhere I want.

And I can select the width and height accordingly.

Okay, look at this.

I'm moving this and I'm resizing this like this.

And do you see this little dot over here, this dot this dot, dot dot over here, it is used to set the radius, look at this corner radius, you can do it over here, or you can, you can do it over here directly like this.

Or what you can do is you can select this options over here, okay, like this, as I told you a little bit earlier, okay, you can do it like this as well.

And yeah, do you remember the scale button? I'm do remember this Scale tool over here.

This one, as I told you that I'm going to discuss in details after discussing this frame and this rectangle.

Now I'm going to discuss this.

Okay, so what were the scale button is used, let's say that you want to scale I mean, you want something, let's say that you want to make something bigger.

Okay? So in the case of this circle, do you remember this circle this distorted circle, okay, with this, you cannot make it a perfect circle.

Let's say that I have selected a shift.

Okay, shift.

Now look, it looks like a perfect circle.

Okay, I have released the chip, then let's say that you want to make it a little bigger.

Okay, what you normally do is, you're going to select this like this, look at this, okay, when you try to make it bigger, it is going to get distorted again.

So in this case, what you can do is you can just simply select the shift, and it's going to resize accordingly.

Or what you can do is you can select this scale function over here, you can select this over here directly or you can just select the K option on your keyboard, okay, okay.

And look at this, I have a different icon on my mouse, okay, I'm going to select V, which means move, okay, look at this icon on my mouse.

Okay, I'm gonna zoom in a little bit over this.

This is V, this is for the move, this is the default.

And if I want to resize this K, look at this scale, and this is move.

Okay, I'm gonna give K over here like this.

Now I'm gonna resize Look, it's gonna resize proportionately, and proportional measurements, okay, now look at this, okay? 788 by 788.

Okay, I'm gonna resize it again.

Now look at that, it's gonna give me accurate proportion measurements.

So I'm gonna remove this circle from here and I'm going to draw a perfect square, okay, shift, and then, oh, sorry, I'm gonna hit R, which means rectangle, or you can just select it from here as well, and shift and then drag like this.

Look at this.

This is a perfect square.

Okay, now let's talk about this feature this field feature Okay, this is used to color your rectangle, I mean, color your shapes like this.

To do that, you can color it anything you wish.

You can also put input the hex value, you can also change the opacity over here, you can also use this predefined colors.

Let's say that I want to use sky blue over here because that enable also uses dropper tool.

Okay, if you select this dropper tool, then you can select anything you wish.

Let's say that I want my box I'm in my square to be the color of this.

Okay, so I have this eyedropper on my hand.

And when I select this over here, like this, now look at my square over here, look, this is the same color as this one over here.

Now let's look at more features that we have no right panel over here.

Okay, this features Okay, I'm going to select it over here and I'm going to change it to the default color.

Okay, wait a minute, e4, e4 info like this.

Oh, sorry.

There we go.

It is c four c four, c four.

Alright, so the first thing that I want to discuss is the stroke.

So what this does is it gives a stroke around our box.

Okay, let me show you Okay, okay, I'm gonna select this like this.

We're gonna, it's gonna generate me a little stroke over here.

Okay, can you see this black colored outline over here? I'm gonna increase its width okay like this look 345678 910 so the stroke is 10 pixels.

Okay, can you see this black color tick stroke over here.

You can also change the various properties like the color the size, then should it be inside the box.

Should it be on the center or should it be outside the box like that, look at that, you can also hide the shadow, I mean, you can also hide the stroke like this.

If you select this eye button over here like that, look at that.

You can also click it over here again, and it's going to show me the stroke over here.

And if you want to remove this stroke permanently, you can also use the minus button over here like this, look at that, it went away.

Okay, now we're gonna look at this FX feature.

Okay, for that, I'm gonna just resize this a little bit like that.

Okay, now, if I select this effect button, look at this, I have this panel over here, okay, I have a lot of options.

Like if I want to make a drop shadow, or if I want some layer blur, or perhaps background blur, we have Inner Shadow as well.

For now I'm going to show you the drop shadow.

Okay, I'm going to select this over here.

And yes, you can experiment on your own.

And look at this, I have a little bit of shadow, you see this shadow at the back of this rectangle? Let me actually remove that child.

Okay, look at this.

You see that? Do you see the shadow over there? Okay, I am hiding the shadow.

Now let me bring that shadow back.

Look at this.

So this so this drop shadow is used to make shadows, draw shapes, frames, buttons, cards, etc.

Alright, so now look at this over here.

This is called the effect setting.

Okay, so I'm going to click over here and then I can adjust the shadow.

Okay, so this is the x, which means that my shadow will move left and right like this, look at that.

Okay, look at this, look, my shadow is moving left and right, if I want to, if I want to move the shadow, top to the bottom, like this, I'm going to use this wide button over here.

Okay, like that.

Look at that.

And then if I want the shadow to spread, I'm going to use the spread over here like that, look, look, the shadow is getting bigger, okay, and smaller as well.

And you can also change the color over here, opacity over here as well.

And if you want to change the blur, you can do it like this.

There we go.

We're increasing the blur.

So we're going to include this drop shadow when we are making buttons.

Okay, let me actually give you a demo.

Look at this, our buttons have a little bit of drop shadow over here, as well as this cards, look at these cards.

Okay, this has drop shadow.

So when we're making this layout, I mean, when we're doing this design, we're going to utilize this drop shadow.

Whatever I have discussed so far, this is the design section, okay, on the right panel.

So this is a prototype over here.

After a couple of minutes, I'm going to discuss about this for a live Okay, so don't worry, and look at this inspect over here.

Okay, so if I go to inspect, then is gonna generate me CSS code.

Let's say that I want the code of this one.

Okay, this section over here, then I'm going to select this over here and look at this.

It is generating the CSS over here like this, look at that.

If you're a developer, you can save time.

Look at this display, flex flex direction, column justify content center, align items, flicks start, so on and so forth, along with all of this look, pixel measurements over here along with the padding with height, etc.

So this inspect tool is very handy.

Alright, now I'm going to discuss in details about all of these tools over here.

These are the alignment tools.

Okay? So in order to discuss about that, I'm going to come over here and I'm going to draw a frame, okay, F and then I'm going to drag it like this, look at that.

Okay, so now I'm gonna write some text, okay, D, and then click over here, and then some text over here, okay, like that.

Okay, let me actually write ABCD.

Okay, ABCD like that on through a capital letter A, A, A, B, C, D, there we go.

Let's say that I want this text to be at the very center.

So what will we do? Okay, so if we come over here, look at this Align Horizontal center, if I click over here, like this, now look, our text is at the very center, horizontally, okay? If I wanted to be at the very center vertically, I mean, if I wanted to be at the very center over here, so what I'm gonna do, what am I gonna click, I'm gonna click over here, look at this.

This is the Align Vertical Centers like this, look at that, it is at the very center, both horizontally and vertically.

Let's say that I want to move it to the very left at the very left, okay, what I'm going to do is I'm going to click this over here, like this.

This is alignment left.

If you want alignment, right, you can also do it like this, this option over here like this.

So you can experiment with all of these values over here.

And regarding this, I'm going to delete this over here like this real quick.

And regarding this panel over here, I'm in this tool over here.

And regarding this text, this is the file name, okay, if you double click over here, then you can rename it Okay, so I'm going to keep it figma file over here, I'm in figma tutorial over here like that as it is and if you click over here like this, you can download this figma file, you can also duplicate it, you can rename it any goal to delete this as well.

So these are the options that you have.

You can also share it with their friends that what you created so far, like you created this frames over here if you want to share it with their friends or perhaps if you want to share it with your clients, then you can click the Share option over here and then you're going to find appropriate details.

Okay, so I'm gonna remove this night right now and Okay, now regarding this button over here, this is called a present button.

So if you click on here, then you can see your designs life at the same time.

If you're working with prototype, then you can also view your I mean, you can also test the interactivity of your prototypes live.

Don't worry, I'm going to discuss this product after a couple of minutes.

Okay? So let's say that I'm going to click on here, okay, after selecting this design over here, okay, I'm gonna click this, I can feel this over here.

Now look at this, this is the desktop type program.

Okay? And if I come over here, if I click this arrow over here, then it is going to go next like this.

Wait a minute, these are the sections.

Look at this.

This is my design over here.

Okay, I can view it over here.

No, no, this is very large.

Okay, I want to make it small.

So what I'm going to do is I'm going to come to this options, and then I'm gonna, I'm gonna select this fit, scaled down to fit, okay, like this.

There we go.

Now, now it looks much better.

Okay, so I'm gonna come over here, and I'm gonna go next.

Or perhaps you can also use an arrow right like this, look at that, he's gonna move to the next frame like this.

So by this way, you can preview your designs, what you create so far, okay, you can view it like this.

Look at that.

There we go.

Now we're going to discuss that what the text tool in details.

So this tool over here, the text tool is used to add text to all Web Designs.

So if you notice carefully that every design the desktop, tablet, laptop, mobile contains this chart over here, okay, this is the typography guide chart shows that what should be the font size of the logo, the font size of the nav items, font size of the large text, font size of the small text, the text of the button, etc, along with the line height over here.

So you can see that the line height of large should be 90 and line height of small should be 43.

Over here.

Same goes for the mobile design as well look at this over here, I have included the mobile typographic over here, the logo, this logo is 48 pixels, then large text 32 button is 24 pixels, so on and so forth.

It also this chart is also mentioned for the laptop as well.

So look at this over here, this is the laptop design over here.

And this one is the typography for the laptop design.

Okay, so the logo is 60 pixels, the button should be 30 pixels, so on and so forth.

So I'm going to come over here, and over here, I'm going to create either a rectangle or a frame, so you can so we can hit our like this, and it's going to create me a rectangle, what I'm going to use a frame over here, okay, control that.

So if if you hit F like this, it's going to create a frame like this, look at that.

Okay, I'm going to make the frame a little smaller, let's say 1000 by 500.

Okay, that will do for this tutorial like this, look at that.

Alright, then in order to use the text tool, you directly click over here like this, and it's going to highlight blue over here and you're going to get a plus sign on your mouse, can you see my mouse over here it is in plus sign, okay.

And if you want to do it in a shortcut way, you just hit t on your keyboard like this T and it is going to highlight that text over here on your mouse.

And if you click anywhere, then you can get this sign over here you see this then you can add text like this, look at that it is said 210 pixels, but by default, your text should be 12 pixels like this, which means that Wait a minute, it should be on curved pixels like this, which means that it's going to be very small.

So what you're going to do, you're going to click over here okay.

And you see this option over here this is used to set the font size so what is the font size of all dekstop let's say it is for the logo is 90 pixels, okay? So let's say to nine pixels, like this look, it is set to 12 I'm gonna set 90 over here like this, okay, pay that enter and then is the output mean this result Okay, so this is used to set the font size.

And this one you see this this is used to set the font family, it is kinda set to Roboto and if I click over here and I can change the font family as well like this, it should be let's say we're going to say to Poppins like this p o p p i ns Poppins, okay, now look, the font family changes.

Similarly, I can also write sans serif over here, sans.

Let's go for sensation.

Okay, I'm going to hit enter like this.

Look at that it changed.

And if you click this drop down icon over here like this, then you have tons of options of for fonts.

You can pick any font family you want, like this, look at that.

So I'm going to say to pop in like this p o p p i ns Poppins like that, and I'm going to name over here, a do.io like this, okay, because we're going to deal with this logo after all.

Okay, so now the next thing that I'm going to show you is this one, okay? This is the font weight, it is kind of set to red, it is currently set to regular.

You can also set extra light over here like this.

Look at that.

The font weight changes, okay? You can also say To set it to paint like this, look at that it became thin.

You can also say to this extra ball, look at that how bold this text is.

Okay, I hope you understood it so far.

And you see this over here.

So this is used to set the line height, look at that it is written highlighted over there line height, okay, so I'm going to insert it to let's say regular, okay, like this.

So um, this logo should be regular.

And in order text in, I'm in a retest this line height, you cannot just simply test with just a single line, you need multiple lines, okay, so I'm going to delete it over here like this, and I'm going to drag this one, just text, you see this text over here, I'm going to drag it to our test case.

So in order to drag it, so what you're going to do is you're gonna control you're going to hit control, okay, and then just pick this text over here like this.

And then I'm going to zoom out, and I'm going to click the old, I'm gonna select the alt text like this old, and you see my mouse is getting a little shadow on its back, like two months together.

Okay, so I'm gonna select the old text and I'm going to move my mouse like this, look at that, it is getting copied, Okay, I'm gonna come over here and don't move.

Okay, just First of all, just release your mouse click like this, okay, and then you're going to release the Alt key like this look.

Now we have successfully copied our text on here, okay? Now look at this.

Now, now we're gonna come over here, and we're gonna see like this, like this, and then we're gonna see this, okay? Look at here, line height is set to 43.

And if we want to change it, then you're gonna click over here, or you can directly you can directly put the number over here like this, let's say I want to say 210 pixels like this, okay? If I click enter, now, look, it has 112 110 pixels of gap over here.

Let's say that I want to set it to 20.

Okay, you can directly input it over here, like this 20 Look at that, it became very congested like this.

Okay, so if you click over here, you see this, I got a small icon, okay, arrow sign icon like this, I'm going to move my mouse like this.

Now, look, I can practice with this real time like this without worrying about, I mean, without directly inputting the value over there.

Okay, look at that I'm just playing out, I'm just playing around with a mouse so that I can find that sweet spot, which would be ideal, which will be the ideal line height.

Okay, so I'm going to change it to 43.

Like that, because it is actually given on the style guide over here.

Wait a minute, over here, look at that the small text, it should be 30 pixels.

And look at this, the line height should be 43 pixels, okay? I'm going to come over here like this.

And look at this, the, the font size is 30 over here, and it is set to Poppins and the line height is 43.

Over here.

Now, do you see this over here, this is called a ledger spacing.

So line height works like this, okay, but the letter spacing, legislating works like this is going to put cap between our little like this, okay, I'm going to show you Okay, I'm going to keep it over here like this.

And watch very carefully.

Oh, by the way, you can also input direct value over here like this, clearly over here like this, then it's going to be 30%.

Or perhaps you can also set this, I mean, you can also use this mouse over here, and you're going to get this little arrow sign, okay? So I'm going to drag like this look at that is going to change according to my mouse movement.

Okay, look at that, like this, it's working like that.

So this is used to set the ledger spacing, I hope you understood it so far.

I'm gonna set it to zero over here like this.

Now look at this one.

This is called the paragraph spacing, okay, in case if you have multiple paragraphs, then this is going to work.

Okay.

So if I drag like this over here, then you can see this behavior, it is working like a line height, but it should not work like a line height.

Because I have actually used some gap over here like this, it may actually show you wait a minute, I'm going to set it to default controls that control set again like that, okay.

So what is happening is I have given some line break over here and there so it is behaving like a parallel, but if I set it to it, or you know, state like this, wait a minute, just give me a second, okay? It is actually the ordinal state.

Look at this long text over here.

Okay.

Now, I'm going to shrink it like this.

Look at this.

Okay, I'm going to shrink it like this.

And it's going to behave like this.

Okay, let me actually zoom in.

There we go.

I hope you can see this.

I hope you can see my screen.

Okay.

I'm going to look at this.

This is behaving just like a single paragraph.

Okay, now look, now look what happens if I use it.

Okay.

Now, look, it is not working.

The paragraph spacing is not working.

This will only work when you have multiple paragraphs.

Okay, let me actually show you okay.

I'm going to copy this one over here like this.

Let's say two lines, okay.

Ctrl C, and then I'm going to paste it over here like this.

Ctrl V, there we go.

So how many parents do we have? We have two parents.

Now look at this paragraph height.

I mean, paragraph spacing, we said 23 pixels.

I'm going to drag my mouse like this.

Look at that.

I can see range that paragraph spacing but look, it's it's it is set to zero but there is some gap over here that is the gap of your line height.

Look at that.

Okay, you can also right over here, but if you remove that whitespace from here, then look, is it gonna work like that? Now look, it is set to zero, exact zoo.

Okay, I'm gonna drag it over here like this.

Now look, it is working perfectly fine.

There we go.

Let's do the next feature.

Okay, I'm going to click over here and look at this.

Do you see this? This is the text align left text align center text align, right.

Okay, let's experiment.

Okay, so I'm going to drag it, I'm going to drag the window like this, okay, over here like this.

Look at that.

Now look, the text is behaving on the left side, okay, text align left.

Now I'm gonna change the center.

Okay, you see this third line over here, look at that it is set to left.

Now he's gonna move to the middle like this, okay, if I click over here, like this text, align center.

Now look, it is changing the alignment, the text alignment is changing to center like this.

And I have also the option of right over here, look at that, right text align, right.

So if we want to, if we want the option of justify, you're going to click this little icon over here, okay, wait a minute, we're gonna click this little icon over here.

And then you're going to find this justify over here, which means that is gonna, appropriately, I may equally distribute the spaces in a way that it fills the whole box over here.

Okay, so let me actually make this para into a line like this.

Now look at that, you see this one, this line over here, and this line over here, look, the text are equally distributed inside the box so that it looks like text align justified.

Alright, so I hope you understood this alignment tools over here.

Now look at this tool over here, okay, or a width, or a height, and then fixed size.

So, so in order to discuss this tools over here, first of all, what you're going to do is you're gonna reduce the size of your font size, okay? So I'm going to set it to let's say, let's say 2020 pixels like this.

Okay, now, let's say I want to drag it like this, okay, I'm going to drag that box like that.

Now, look, this is behaving like a fixed height, which means that our pair over here will occupy What is this 912 pixels of weight into 286 pixels of height.

So it is going to occupy that much amount of space in on our web design or perhaps on our on our frame.

Okay, so I can drag it like this.

Now, look, it is gonna, I mean, those snapping guides.

Okay, you see, this orange Schiller's colored guide over here is going to work according to our box, I mean, the box which carries the text, okay, so this is how the fixed height, I mean, fixed size works, but if you snap it to or a width, which means that it's gonna hug the content inside the box, so that there is no additional spaces, look at this, you see this box over here, along with the blue colored guides, okay, so I'm gonna click over here, which is or a width, now look at that, it is going to work as if it is a single line, first of all, and the next thing is, is not going to keep any additional gaps.

Okay, so let's say that, I want to break the line, okay, I want to break the line over here like this.

So you can also do it, you can also break the line like that, there we go, it's gonna work like that.

And if I, let's say, for any instance, this changes to like this, okay, it's gonna, let's say that it changed to this.

So what you're gonna do is if you want to reduce those white spaces, normally, most of the people, what they do is they're gonna do it like this look.

They're gonna do it like this.

But this will not give you exact measurements.

I mean, it is not the ideal scenario.

So what you're going to use is you're going to use this little icon over here with auto auto Wait, okay, the auto hide, wait a minute, these auto hide works in a similar manner, okay, it just works with the height.

Okay, I'm gonna click over here.

And if I select this, then it's gonna automatically snap those height and remove those whitespace from my text like that.

Okay, now let's look at this tools over here, these three tools over here, okay, this is align top, align, and the middle and align and the bottom.

Okay, let's say that I have this text and I'm going to resize it like this.

Okay, now look, I have a lot of space inside my rectangle.

And where does my text where's my text aligned, it is aligned at the top, very top.

If I want to take it on the middle like this, okay, I can use this one over here like this, look at that, it's gonna come to the middle inside this box.

And let's say that I want to take my text at the very center.

Okay, what I'm going to use is I'm going to use this little icon over here, Li important.

I get like that, look at that.

It has aligned, it has aligned to the model.

So let's change it back like this at the top and then or a week like this.

There we go.

Now let's look at this tools over here.

Okay, you see these three dots.

So we're here, if you select this like this, then you're going to have more tools.

Okay, first of all, you're going to get this alignment tools over here, and then the decorations.

Okay? So if you hover over here, then you're going to get live preview what each every tool does, like this, look at this underline tool is going to underline my text, okay? If I select this like this, you're going to not only see the result over here, live, look at that, look at this little screen, okay, you can also see the result over here, okay, like that.

So I'm going to click it over here as well.

So if I want to remove the declaration, then I'm going to select this over here like this, none, then you can also strike through the text like this, you have a lot of options.

If you want to make two lists, look at this list option over here, okay, if I click this, then it's going to create me a list, okay? unordered list.

And if we want to make it an ordered list, then you can click this over here, an ordered list in 123, so on and so forth.

So if we want paragraph indentation, you're going to utilize this feature.

Okay, wait a minute, this paragraph indentation feature, okay.

So if you say it, let's say 30 pixels like this, okay? Oh, this is actually not working.

That's because we have multiple line breaks.

So I'm gonna make it just a single line, like this.

Wait a minute, just give me a second and then I'm gonna drag this inside my frame.

Okay.

Wait a second like that.

There we go.

And it is just working like a single paragraph and then oral height like this.

I mean, oral width like this.

Okay.

Oh, I did in the wrong way.

My bad.

Sorry.

Okay, now, looks good.

Now, look, I have some paragraph indentation at the very first of the text.

Okay, look at this.

We have 30 because we have 30 pixels of gap over here.

If we want to increase the gap, let's say 100.

Let's go 400.

Okay, 100 like this.

There we go.

We have 100 pesos of gap over here.

Let's look at more options that we have.

Okay, so we have the lowercase over here.

Okay, this is the default, I mean, the way you write it is going to be default.

Okay.

So if we want all the text to be capital sized, okay, you have this uppercase, okay? Now look at this text, okay? lorem ipsum dolor state, okay, it is in small text, lowercase letter, okay, I'm going to change it to uppercase letter.

Okay, I'm going to click over here and then I'm going to click this, okay? It is the preview, it is going to give me a preview over here as well.

Okay, so I'm going to click this over here.

Now look, all the text all later has changed to upper upper case letters, okay, like this, look at that.

You can also change it to lowercase letters, I by clicking this, again, look at that all the texts are I mean, all the letters are lowercase.

By the way, if you want to change the color of your text, what you have to do is you're going to select any text, okay, let's say that I want to see like this text over here, okay, so I'm going to what I'm going to do is I'm going to Ctrl and then click over here like this, okay? Or what you can do is you can double click over here like this, and it is going to get selected, okay, okay.

And then what you're going to do is you're gonna scroll down over here, and you see this fill option over here, you can change the color over here by inputting your hex value over here, or what you can do is you can just select this option over here, okay, you can get this eyedropper over here, which means that you can pick any color you want, like this look, I'm going to select this over here like this.

Let's say that I want to change it to this color over here.

Okay, so I'm going to select this ello the text gets colored according to this color over here.

Similarly, what you can do is you can drag this little small dot over here and you can play any way you want and the color changes accordingly.

Okay, I'm gonna move this ball over here, and you're gonna see the changes over here.

Okay, look at this, I'm going to change the black letter sound, I want to, I want to change it to black, let's say like this, okay, and let's say I want to change it to white.

Okay, I'm gonna go over here like this.

By the way, you can also move this over here to change the color.

Okay, let's say I want to go to red.

Okay, I'm going to come to red over here, and this palette over here turns to red, okay, and I can move it over here as well like this.

Okay? If you want to change the opacity, then you can change it over here like this look, I'm gonna look I'm gonna drag this slider over here and look at this effect over here.

Okay, it's gonna get changed.

Okay, look at this.

I'm going to drag it and look, the opacity changes, okay, if I turn it to zero, it's gonna be invisible.

Okay, effort.

If we go to absolute zero, like this, then is going to get invisible.

Okay, so ladies and gentlemen, we're done discussing the text tool along with all its properties.

As a beginner, you don't have to understand prototypes.

So this is a feature that I'm discussing right now, the paradigm over here, this one okay, but for the sake of this tutorial, and to make you understand how and where the product feature is used, I have created a small section over here on this page, okay, so you can see this for right sample, you're gonna come over here okay.

Now you can see two designs over here, okay, this is the mobile design.

Now, let me tell you where product is used.

prototype is used to make interactive web designs.

So I have kept an example over here on this section.

Okay.

Perfect.

sample.

So now what I'm going to do is I'm going to click over here, okay? For right like this.

Now look, I already created some frames over here, but I'm going to delete it.

Okay? So I'm going to click it over here like this.

And I'm going to delete, and then I'm going to click over here and then delete.

Okay, so I'm starting, I'm starting from scratch in order to make, sorry.

So I'm starting from scratch, in order to make you understand how the system works.

I mean, the product how prototype works.

So first of all, let's understand this model over here.

Okay, so this is our nav bar over here.

And this is the hamburger menu icon over here.

Okay, so the moment we click this menu icon over here, okay, is gonna get converted to this cross sign over here, and then this content over here will get vanished.

And then it's going to show us our menu items over here, like home teacher, so on and so forth, etc.

In order to create a portrait, right, what you're going to do is you're going to click over here, okay, this section for right like that, and you're going to get this instructions over here.

Okay, so the first thing that we're going to do is, I'm going to select this, okay, by double clicking over here, like that, look at that, I have selected this hamburger menu icon.

Okay, so look at this, do you see this plus sign over here? It means that the moment we click on here, or the moment we tap on here, where do we where will this lead us to? Okay? It's going to lead us to this frame over here.

I mean, this design over here, okay, so I'm gonna click and drag this one like this, look at this arrow on my hand.

Okay, I'm going to drag it like this over here.

There we go.

So this is getting linked to this one over here.

All right, and then it's going to give me this option over here.

So look at this interaction details that popped up.

Okay, so it's telling me it's asking me how this interaction should take place.

Okay, should it be on click or on drag, all while hovering while pressing, then we have mouse and we have a lot of options over here to pick from what what For this tutorial, I'm going to keep it very simple, okay? On click, which means that the moment we click this one over here, then it is going to choose this frame over here, okay.

And then we also need to click over here, so that we can go back to this main content over here.

So how do we do this, we're going to do the same thing.

Okay, we're going to double click over here on this cross site.

And then you see this little plus over here, let me zoom in, you see this little plus over here, we're going to select that and drag it back to this main frame over here like this.

Okay, that, there we go.

And there is also going to show me this interaction designs, I'm interaction details.

Okay, so what I'm going to do is, I'm going to keep it as it is, and then look at this animation over here.

So I'm going to click over here.

So instead of instead, I'm going to select dissolve over here like that.

So you have a bunch of, I mean, a lot of options to choose from, but I'm going to keep it very simple, just dissolve, okay, like that.

And I'm going to select this one as well.

And I'm gonna set the animation to dissolve as well like that, look at that.

Now look, in order to test this prototype, what you have to do is you're going to click this play button over here, do you see this play button over here.

And when I click it like this, now let's experiment, it's going to create a new window over here, okay? And there we go.

Look at this, our design is over here.

I mean, this is our prototype over here, okay? Now, look at this, look at my mouse over here, wherever, wherever I go, it is just a mouse, okay, but wherever, what whenever I come over here, look at this is gonna turn into a pointer, which means that this is clickable.

If I click over here, then it's going to give me some animations or interactions.

Okay, now look, I'm gonna test it over here like this.

Okay, I'm gonna click like this, look at that.

Look at that, we have our navigation menu items over here.

And we also have this cost center over here.

Okay, I'm going to click over here again, like that, we're gonna, it went back to our frame, main frame over here.

Let's experiment again.

Okay, click like this.

There we go.

And then in order to go back to that, you see this animation, this dissolve animation, look at that.