This course on UI design is
perfect for anyone who wants to learn more about the field. It will take you from feeling
intimidated by a blank screen to confidently creating web app designs. You'll learn about UI patterns, color
choices, and typography, and get hands-on experience with design software. By the end of the course, you'll be
able to create a consistent design system and know how to solve design. It's an exciting opportunity. The Figma design system is a set of
elements, styles, and rules that ensure a product looks the same throughout. It makes designing easier and
helps designers work together and get feedback from stakeholders. Figma s design system includes shared
components, style guides, automatic arrangements and teamwork tools. With these features, teams can
create great designs quickly and. Chat, G P T is a helpful tool
for creating content and titles. It's designed to help you
make engaging content that keeps your readers interested. It has many features to make writing
easier, you can use chat G p T to create content for various purposes,
such as blog posts, articles, presentations, and social media. You can customize the
tool to suit your needs. With chat G P T, you can make your
content more informative and interesting. Often teams rely on pre-made
icons and illustrations to speed up the design process. As designers, it's essential
to start on the right foot and build on the expertise of others. It's also important to learn how to
customize icons and illustrations properly to fit your product. In this course, we'll be using SF
Symbols, which is free and included in the course's source files. This course teaches how to create great
visuals for your web apps using mid. , you'll learn the basics of
mid journey, including its available tools and features. Additionally, you'll discover how
to generate effective photos and illustrations that communicate
your message to your audience. By the end of the course, you'll be able
to create professional quality visuals that will make your web design stand out. Interactive components allow you to
quickly create and compare different design options by prototyping interactions
among variants in a component set. This helps you identify potential issues
or areas for improvement in your design, resulting in a more effective design. In short, interactive
components, streamline your workflow and create engaging. The design tool is a fast way to create
prototypes for app flows and interactions. By designing in this tool, you'll
have more functionality for your app before you start coding. One of the main benefits of using
this tool is the ability to avoid over complicating your design file. It's important to know that by using
this tool, you'll have a clearer vision of your app's design and function. Saving you time and
effort in the long run. To capture your audience's
attention, showcase your app in action with screenshots. Use these for landing pages,
app store submissions, presentations, and promotions. High quality, visually appealing
screenshots can convert potential users. This section covers UI patterns and
wire framing for creating designs. It includes tips for finding inspiration
following iOS design guidelines, and using established UI patterns. The document also provides step-by-step
instructions for creating a web app wire frame using Figma, including creating
frames for different elements, adding buttons and menus, and creating cards. If you're looking for UI inspiration,
you might want to explore Hans and. . These websites showcase designs
from top designers around the world. You can also find design patterns and
wireframe templates on sites such as UI eight and Figma Community, which can help
you save time and get started quickly. To create an iOS app, it's
important to follow the design guidelines provided by Apple. These guidelines cover everything
from color and typography to layout and interaction. Adhering to these guidelines will
help ensure that your app looks and feels like a native iOS app and
provides a consistent user experience. To begin this course, it's essential
to start with my Figma file, create a new page from the left menu, and ensure
that the pages section is expanded. All color styles gradients, textiles,
icons and components are already. Making them useful. For the rest of the course,
we'll create a web app. It's a program that runs in a web
browser so you don't have to download it. Plus it works on any device with
a web browser such as desktops, laptops, tablets, and smartphones. To create a new file, open Figma in your
web browser and sign into your account, or use the desktop app from my file. You can work on a new
page called Practice. Click on the canvas and
change the color to 74 6 0 9. Press A to create a new frame, then
select the format, MacBook Pro 14 on the right panel set the background color
of the desktop frame to zero C 1 0 3 3. Let's add a layout grid. A layout grid is a helpful tool that
aligns elements on a page or screen using horizontal and vertical lines. It creates a balanced and visually
appealing design while keeping elements the same size and distance from each. In the inspector panel, click on
the plus icon next to layout grid. Set the grid size to eight, and since
we're following the eight point grid system, we'll make sure that every element
has a size that is divisible by eight. Let's add a wire frame. A wire frame is a basic outline of
a design that shows its structure and layout without detailed
design elements such as colors or. Let's start with the sidebar. Add a rectangle of 248 by
982 with the fill color. Two E 3 3 5 A. Align it as follows. Next, add a search bar of 1264
by 56 with the fill color. 4 5, 4 bk seven nine. For the segmented control. Duplicate the previous one and
fill it with one D 2 3 4 D. For the main content section,
add a rectangle of 1264 by 870 and fill it with zero C 1 0 3 3. Rename the four layers
properly to be organized. Let's add the browser controls for Mac. Design the elements inside
the side menu frame. Press O to create an ellipse
of 12 by 12, and the fill color will be 4 5, 4 B seven, nine. Duplicate it two more times. Group the three ellipses and
set the spacing to eight. Align the group to 24
from the top and left. You can also set the spacing
with a keyboard shortcut. Select the group and
press on the option key. The guides will appear so you can align
it with the arrows from your keyboard. Rename the group to browser control. Let's design the side menu elements. Add a frame of 248 by
56 and remove the fill. Place it at X zero and Y 50. Add a rectangle of 248 by one and
fill it with 4 5 4 B seven nine. Drag the rectangle inside the
menu frame and the X and Y position will be zero and 55. Rename it to separator. Press O and draw a circle of 24 by 24. Align element 24 pixels to
the left and 16 from the top. Press R and draw a rectangle
next to the circle. Set its size to 104 by 16. The X and Y position will be 64. And. Set the corner radius value to
20 and rename this frame button. Duplicate the button frame. Place it under with a spacing of zero. Duplicate again, three times. Figma will automatically
align them for you. Duplicate five more times and set the
spacing to 48 pixels from the first group. Repeat the steps for the third section. Now let's design the elements
inside the search bar. , add a frame of 442 by 40 with color fill. One D, 2 3, 4 D set the
corner radius to 40. The X and Y position
will be 288 and eight. Add an ellipse of 32 by 32, align it. 16 pixel from the top
and 32 from the right. Duplicate it. So select the ellipse. Press the option key and drag to the left. Set the spacing to 24 and
duplicate it one more. Change the fill color to one D 2 3 4 D. Now let's design a card
inside the main content frame. Create a frame of 376 by 336 and
fill it with color one D 2 3 4 D. Set the corner radius to 12 and rename
the frame to card inside the card frame. Add a frame of 376 by 208 and
in fill color one D 2 3, 4. Align the frame to the top
and rename it to video. Add another frame of 376 by 128
and fill color two E 3 35 A. Align the frame to the
bottom and rename it content. Let's add some text elements
inside the content frame. Press O and draw a circle of
40 by 40 and color 4 54 B 79. Align the element 16 pixels to the left. , add a rectangle with same
color with a size of 280 by 24. Align the element 16 pixels from the
circle and 16 pixels from the top. Add another rectangle of 104 by 16. Align the element 72 pixels from
the left and 12 from the top. Select the last rectangle, then
duplicate it by pressing the option key and dragging under with a spacing of. In the inspector, set the corner radius
value to 20 to all the rectangles. Align the card frame 56 pixels
from the left and 32 from the top. Let's create two rows. Select the card frame, duplicate
it by pressing the option key with the spacing of 16. Duplicate the second card. Press command D, and this will
automatically set the spacing. Next, select the three cards, then
press the option key while dragging it below with a spacing of 40. That concludes today's section. The next section will
cover color and gradient. Learn how to effectively use
color and design, including the color wheel, neutral tones,
monochromatic colors, and gradients. It also provides resources for
creating gradients and instructions for saving and applying colors in Figma. Additionally, use the start plugin to
verify contrast ratios and provides a tutorial for creating an animated
button prototype using Figma. This is the color palette
that we're going to use today. It is recommended to start with
a bold and bright primary or secondary color that is pastel in. colors should generally only
be used to draw attention to important elements or buttons. Perhaps the most important aspect
of colors are the neutral tones. These are the neutralizers,
and as such, these keep your designs from feeling too heavy. Most importantly, the neutral tones
are easy on the eye and defer the user's attention to the content. You can use these as backgrounds. Gradients can help your design leave
a better impression compared to solid. They are mainly used for buttons
and backgrounds, but you can also use them for text layers. Let's get started. First, let's copy the previous
wire frame and start working on it. Let's go to the browser controller
and apply the saved colors to the minimize, maximize, and close buttons. Select the first ellipse and click
on the four point infill section. Choose the red color style, select the
second ellipse and apply yellow color. Then the last ellipse
apply the green color. Let's start with the second button frame. To add a second separator, select
the separator and then press the option key while dragging it. To align it with the top,
make sure to align top. We're going to create a light reflections. Add a linear gradient that uses
three white stop colors in horizon. Take the first color,
adjust the opacity to 0%. The second is going to 100%,
and then the last is 0%. Now it's time to name the
layer by light reflections. Go to blend mode and choose overlay. Select the light reflection layer right
click and click on copy properties. Select all the separator
in the other button frame. Then pass the properties. Go to the fill panel and
set linear to 60% opacity. Select the second button frame. We're going to add a background for the
button when it's selected or hovered. Go to the fill panel and
choose radial gradient. Add two stops to the color gradient. The first color being 8,015
a seven, and the second color is the same with 0% opacity. To change the position, click
and drag the circular arrow icon to the top center of the button. To change the size of the gradient,
click and drag the scale handle to the top left corner of the button. Select the circle from the second button
frame, then change its size to 32 by 32. And click on a line vertical center. Go to the design panel
and remove the fill. Click on the plus icon to add stroke. Set the thickness to one and align. Let's use color system. Click on the icon, then choose gradient. We will be incorporating a plugin
named Stark, which assists in verifying the contrast ratio
between the text and the background. Create a rectangle with
the color of the button. Frame background with a white color text. Then select the two elements. Right click and click on plug in,
select Stark and click on contrast. You should see green check
marks, depending on whether you've passed the checks or not. Select the rectangle and set the
color to white with 20% opacity. Copy the properties, select
all the circle and the text element, then paste properties. Now let's work on the search bar first. Let's remove the fill
because we won't need it. Select the search bar, then go the
fill panel and change to linear. Set the first color to zero F 55 E eight, and the second color to nine D
D f three set to 100% opacity. Set the fill to 10% opacity. To change the Angle, move the handle
from the top left to the center right. Add a stroke with a white color at 50%
opacity overlay inside and a width of one. Copy the ellipse gradient
from the side menu, then paste it in the search bar frame. Align it at the right. Press on option to see the spacing. Place it at four. Spacing from the top right and bottom. Select the last circle
and then add the color. 22 D seven ff, and then set 100%. Click on the text tool or press on T. Type the letter A in uppercase. Choose the SF PRO with a medium weight. The size is 20 and the color is white. Select the text in the circle,
add them in a group and a name. The group by user. Next, let's work on the segmented control. First, let's remove the fill
because we won't need it. I want the same style as the button. When it's selected, select the
button frame and copy the properties. Then paste it to the
cemented control frame. Drag the Angle arrow icon
until you, you reach the card. Then drag the offset arrow icon
to the center bottom of the. Click and drag the scale handle
until it touches the side menu. Set the color, the top
color to 50% opacity. Let's copy the separator from the button
past in the segmented control frame. Change the width size to 1264. Align it to the left and the bottom. Select the side menu. Go to the fill panel. Click on the plus icon, select linear
first color is two E 335 A and the second color is one C one B 33. Place the color tool in diagonal. Let's continue with the desktop frame. Add linear. Set the first color to two B two F 53. And the second color to one D one C 34, add a first color stop on the
content frame of the card. Color number is one D one C 34. We only need three color stops, so we're
going to remove the last color stop. Let's work on the card and style it
with a light reflection and gradient. Select the card frame, then remove
the fill using the fill panel. Go to the stroke panel and click
on plus, then choose linear. Set the color of the first
and second item to white. The second color has a 0% opac. Add a third color stop at the top of
the content and set its opacity to 100%. Add an overlay for blending modes
by clicking on the droplet icon. Set the thickness to
one and align to inside. Continue with the content frame. Select the content frame and
navigate to the fill panel. Click on the color box and choose linear. Set the color of the first
and second item to 48,319 D. The second color has 0% opacity. Set the fill to 20%
opacity before proceeding. Select the card frame again. Set 70% opacity in the stroke section. Then copy the property, the content
frame, and pass it to the video frame. For the last result, I wanna replace
all the card, copy, the card frame, then select all the other card frame, right
click and click on paste to replace. This is not the result that I want. I forgot to delete the rectangle. I am going to delete it. Now we can see the result that I planned. So we're done with this section. Next we're going to learn
about fonts and textiles. Typography is the way of arranging words
to make them easy to read and look good. It's important because the fonts
you use can change the way your app looks and feels different. Fonts can change the mood or
feeling of your app and even affect how users read or use it. Figma offers a wide variety of
fonts to choose from, including both system fonts and Google fonts. These fonts can be accessed through the
font dropdown menu in the properties. Some of the good starting fonts
are San Francisco as Saner font designed by Apple for use on its
devices and operating systems. Inter is a popular open source font
family, and was specifically created to improve readability on screens, making
it an ideal choice for digital design. Robo is a modern sandsara font
designed by Google for use on Android devices and other Google. In Figma textiles are used to define the
various properties of text, such as font, family size, weight, color, and more. These textiles can be saved and reused
across different designs, making it easier to maintain consistency and
coherence throughout your project. Logos are often created using a
slightly modified typeface with custom kering to ensure the best
legibility they are typically. , if you start with text, you can use
convert to outlines to gain complete control over vector points and editing. A good exercise is to try different
type faces and compare them against each other to pick the one that
best fits the theme of your app. I just wanted to let you know that
for the font, I went with Playfair display in black and a size of 30. In case you don't have it already
installed in Figma, you can download it in Google Fonts. Let's add the logo at the first
button, so press on T to insert the word papaya using playfair
display in black and a size of 30. Set the spacing between the circle and the
text to 16, or set the exposition to 64. Set text to align vertically centered. To outline the stroke, select
the text, and then right click to choose outline stroke. Let's remove the decimal point
from the size and position value. Reset the spacing to 16 and
align vertically center. You can also set up your own
textiles in Figma, even if they are not preconfigured in the file. To create a textile, select the first row. Go to the text panel and click
on the style icon and plus. Name the style typography desktop, H
one 60, bold and click Create Style. I use the forward slash
to create a category. It is optional. If you want to add more detail to your
textile, repeat the same technique and name the remaining text in order. When you click on the canvas, the textiles
will appear in the panel to the right. You can also add textiles
by clicking on the. First, let's make a copy
of the previous exercise. Next, we can continue by adding a
side menu button and applying textile. Remove the rectangle to add text. Click on the T in the toolbar,
and then type home in the button. Use the SF protex font with a semi
bold weight and a font size of 17. Set the color to white. Set the spacing between 16
and vertically aligned center. Select the text home. Press the option key while
dragging it to the second button. Set the spacing and
alignment to be consistent. To apply a textile click on
style icon and select typography. Desktop medium. Text 17 regular in the text panel. Then to apply a color style, click on
style icon and select label slash dark slash secondary in the fill panel. Now let's apply this to all the buttons. Select the second button. Then press command plus C to copy. To complete this task, select
all remaining buttons and use command plus V to paste. To add an additional button to the
second section, use option key and drag. Then remove the first
button from section three. Set the spacing between
sections two and three to 48. Let's remove all the rectangles. Let's give a name to each button. Shorts subscriptions,
papaya music, and so on. I'm going to copy and
paste to make it fast. All right. Let's add a title for the
section, press the T key and type channel above the library button. Let's apply the textile and select
typography desktop small text 13 semi bold in the text panel. Then apply the color, style and
select label dark secondary. To move the text above the
Design+Code button, click and hold the option key while dragging it. Rename to subscriptions
and set the same spacing. Now let's do the card. So let's write the title, select
the content frame, and then press the T key and write how to use
AI Art generator on Mid Journey. Let's add the textile select
typography desktop headline, text 17 bold in the text panel. Let's make the text two lines instead. Set the spacing to 16 from
the left and 16 to the top. Let's remove the rectangles. Now. Add the channel name, for
example, mid journey art. Select the textile typography
desktop small text 13 semi bold. Set the top spacing to 16. Then set the color style to secondary. Let's copy the text and move
it to the bottom by pressing the option key while dragging. Change the text to seven
K views nine months ago. Select the two texts and set
the spacing between to four. Change the textile to typography. Desktop, small text 13 regular. Apply these steps to all cards. Select the card frame and
press command plus C to copy. Select the other cards. Frame and press command plus V to paste. The last step is to change
the text for all the cards. All right, let's continue with
a segmented control section. We are going to add text inside the frame. Press the T key to add a text field, then
type all set the textile to SF Protex with the semi bold option at size 15. Set the color style to
the dark secondary option. A line text to 32 from the
left and 12 from the bottom. To duplicate press command plus D, then
drag to the right, set the spacing to 48, then change the text to gaming. Let's repeat and write the
text in order, so I'm going to copy paste to make it fast. Thoughts, music, thrillers, mixes,
avatar, film criticism, Korean dramas, characters, and eating. I would like to introduce
chat, g p t Chat. G p t is a super helpful tool
for creating engaging content. It makes writing easier and
offers lots of cool features. You can use it for all sorts of
content, like blogs, articles, and social media posts, customize it
to your needs and make your content more interesting and informative. When I'm struggling to come up
with a title or content for my. I turn to chat g p t for assistance. It's a reliable tool that
saves me time and generates creative ideas for my writing. That concludes this section. In the next section, we will
explore icons and avatars In modern design, icons play a vital role
in conveying both function and emotion. They are widely used in UI
design, branding, and marketing materials to create a consistent
user experience and add visual. This tutorial covers creating an icon
and avatar library, as well as organizing assets for a streamlined workflow. You will receive step-by-step instructions
for using various icon sets and plugins, such as SF symbols and Unsplash. Additionally, you will learn how to
apply these icons to the sidebar design Icon sets are a collection of icons
that can be used to add visual interest and functionality to your designs in. icons can be used for a variety
of purposes, such as creating user interfaces, illustrating
concepts, or adding decorative elements to your designs. Here are some of the best
icons to get started with. SF Symbols four is a collection
of 3,100 symbols created by Apple, customizable in a Mac app. Material Design Icons is a set
of over 4,000 icons designed by Google for material design. Hero icons is a set of 292
handcrafted S V G icons by the makers of Tailwind c s s Feather icons. Over 280 icons in different categories,
including arrows and social media icons. Font awesome is a popular icon library
with free and paid versions offering various features and benefits. Let's search for icons suitable
for video browsers like YouTube. Personally, I prefer using the sf. Download the SF symbols here to
open the application First, ensure that it is installed on your device. To find the burger menu, navigate to
the text formatting section, choose list bullet, then press command plus C to copy. First, let's duplicate the
previous exercise and then continue with the new copy. To create a frame first, select
the circle of the logo, and then press option plus command plus. Set the size to 24 by 24. Name it icon. To ensure that you're using the SF
PRO font, you can follow these steps. Select the text box inside the icon
frame to insert the SF symbols. Change the textile to typography
desktop Caption 15 semi bold. Paste the SF symbols into the text box. Change the color style to secondary. Align the symbol to both the
horizontal and vertical center. Remove the circle. Now let's copy the icon frame and
replace it with all the other circles. Select the icon frame,
then press command plus C. Now select all the circles except for
the outline and the subscriber section. Then right click and
choose pace to replace. Next, let's replace the symbols. Return to the SF symbols app. Click on the selected symbol,
then press command plus C to copy. Click on the corresponding text
field to paste by pressing command plus V, align symbol Center. Center. Add the following symbols for
subscriptions, papaya music, library history, your videos, watch
later downloads, and show more. Let's continue on the
second row with the outline. Circle, select the outline,
then press option plus command plus G to create a frame. The size should be 32 by 32. Name it icon select. Let's copy the icon frame, then
select the icon selected frame. Align the icon frame to center
horizontally and vertically. Align the icon selected. Frame 20 to the left. Copy this frame by
pressing command plus C. Next, go to the search bar section. Select the circle with an
outline, and then right click and choose pace to replace. Return to the SF symbols app to
find the following symbols for. Copy the icon selected. Replace the symbol with the
mic symbol align to the center. Then to copy press
command plus C afterwards. Let's work on the action icon section. Select the two circles, then right
click and choose paste to replace. To modify the font, go to the text
panel and click on detach style icon. Change the size to 20 regular and align it
horizontally and vertically in the center. Go to the assets panel to
find the following symbols for video and notification. Delete the old one, then position
and align it horizontally and vertically centered. Let's hide the outline. Now let's talk about
avatar In digital design. An avatar represents a user online
and can be a logo, color, or image. It can be a personal photo or
abstract design chosen based on the project's purpose and context. Use the Unsplash plugin for avatar. It provides high quality images
that save time and improve engagement and user experience. It's easy to use and fit
seamlessly with your workflow. First, obtain a copy from the
Figma community by clicking on the Try it Out button. Once the plugin is installed, select the
frame or object in your design where you want to insert an image from Unsplash. Next, let's work on the card section. Select the circle in the content. To proceed, right click and
choose the plugin option. Then select Unsplash from the list. You can either click the abstract
button or enter a relevant keyword in the search field. Select the image desired. Repeat the same procedure for
all the circles in this section. You can use the logo provided on
the assets page or assets panel. To access resources, click the assets
panel in the top left corner of the. There you can find images, videos, and
icons to enhance your project, making it more interesting and visually appealing. The assets panel also helps
you organize and find your resources easily in the future. Use this useful tool to
improve your project. To add the logo to your design, click on
it and drag it to the desired location. Please start searching for the logos of
Figma Design+Code, sketch and spline. Replace the circle with the logo. This section covers the significance
of icons and avatars in modern design, using a Figma library and incorporating
them into designs with plugins. We also touch on adding
a logo for visual appeal. In the next section, we
will explore Mid Journey. Mid Journey is an AI platform
that simplifies the creation of high quality digital content. With its advanced technology artists,
designers, and creative professionals can easily bring their ideas to life with
stunning images and more the platform's. User friendly interface and powerful
AI algorithms make it quick and easy to create beautiful digital content. Experience the future of content
creation with Mid journey. Unlock the potential of the Mid
Journey bot on Discord by mastering the art of creating custom images
through the use of simple text prompts. Navigate to the website and click
on the Join the beta button, or go directly to the Mid Journey Discord. Log in using your Discord account
on the mid journey official server. Choose a newbies hash channel from the
list displayed on the left sidebar. Connect with the Mid journey
bot on Discord using commands. Commands allow you to create
images, modify default settings, track user information, and
carry out other useful actions. To generate a one of a kind image, use the
slash imagine command along with a concise text description referred to as a prompt. Access the slash commands pop-up
and select the slash imagine command or type slash imagine prompt. Write a description of the desired
image in the OR prompt field. Hit the enter or return
key to send the message. Generating an image with the Mid journey
bot triggers the start of the free trial. During the trial, users can
complete about 25 tasks or jobs. Jobs include using the slash Imagine
command to create images, upscaling images, or generating variations. To monitor your remaining trial
time, use the slash info command to check the fast time remaining. After the image grid has been
generated, two rows of buttons will be. U one U2 U three U four. The U buttons upscale the size of
an image, generating an enlarged version of the selected image
that includes additional details. V1 v2, V three V four. By clicking on the V buttons, you
can produce minor modifications of the selected grid. This action generates a fresh image
grid that maintains the overall style and composition of the original image. The re-roll button allows you to
rerun a job, which in this scenario would generate a new image grid
based on the original prompt. Once an image is upscaled, a fresh set
of options will surface, make variations. This option generates a new grid of four
choices by producing a variation of the upscaled image beta light Upscale Redo. This option lets you redo the upscaling
process using a different upscale or model web access the image from
your gallery on mid journey.com. You can rate any upscaled image
on the Mid Journey website or in discord by clicking on a smiley. by rating images you can compete
with other users to become one of the top 1000 image readers each day and
receive an hour of free fast mode time. When rating images, you can express
your personal style and opinion by evaluating factors such as appearance,
effort, colors, concept, or theme. If you love an image, you can show
your appreciation by giving it a love. To save an image from the Mid
Journey account, hover over the image and a window will appear. Click on the three dots,
then click on save image. The image will be downloaded
to your downloads folder. If you're using a mobile device,
long press on the image and tap the download icon located at the
top right corner of the screen. Let's create something stunning. We can explore and take inspiration. For example, I like this one. You can analyze the prompts
and see what style you like. You can type your own style. For example, full body mermaid portrait,
ethereal glacial, photorealistic, 32 K, super sharp details, cinematic, intricate
details, depth of field, insanely detailed and intricate soft lighting,
beautiful floral filigree, accents, underwater fashion, editorial photography
style, detailed photography, cinematic. R two three v4. For more details, you can check
their website for the user guide about the version, upscales commands,
parameters, and advanced prompts. Make sure to read the
community guidelines. Alright, let's get back to Figma. To apply the image to our file, let's
first copy the previous exercise. Then let's work on a new copy. Select the video frame, then go to the
fill panel and click on the color box. Select the image option
box instead of linear. Click on the choose image
button to insert an image. Select a file from your computer
and click the open button. Set the fill opacity to
100% in the fill panel. Now repeat the same step
for the other video frames. Let's take a closer look at
segmented controls to make the user experience even better. When using segmented controls, one idea
is to add some more light reflection. Select the segmented control
frame, then remove the fill. We won't need it. Then press R to create a rectangle
with dimensions 1440 x 56. Inside this frame, align the horizontal
center and bottom, select the rectangle. Then press on enter Key to edit the. Now hover over the left edge and you will
see a third dot, which is in the center. Click on the dot, and while
holding down the shift key, click the left arrow key 10 times. Next, let's perform the same
action on the right side. Name it background. Go to the fill panel, then select linear. Add the first color to
C 427 FB with 0% opac. Set the second color to C
427 FB with 100% opacity. Set the fill to 20% opacity. Now let's add in effects. Go to the effects panel, then
click on plus, select the layer blur option and set it to 40. Change position X to 40. Move the background behind the text. Next, let's add a
background with an ellipse. Press O to create an elli. Navigate to the resizing panel and adjust
the width to 1000 and the height to 20. Change the position of X and
Y to 132 and 56 respectively. Add color to C 427 FB with
20% opacity add effects. Select the layer blur
option and set it to 40. Move this layer above the background. Let's add light underneath the text mix. It will be a segmented
control that is selected. To add a line, press the L key and
drag a line to make a straight line. Hold down the shift key and click. Then drag. Set the width to 200. Position it at the horizontal center
and bottom name this layer, line two. Go to the stroke panel to a linear. Line linear horizontally. Then add three colors. Set the first and third color
to white with zero opacity. Set the second color to
white with 100% opacity. Move line two inches above the ellipse. Add an overlay blending mode after. Let's add a second line to duplicate line
two, select it and then press command. Plus. Change the width to 56. To change linear. Go to the fill panel and click on the box. Set the first and fifth color to
7,744 FA with an opacity of zero. Set the second and fourth color to
eight E 37 E six with an opacity of 100. Set the third color to DCC one
F nine with an opacity of 100%. Navigate to the stroke panel and
adjust the thickness to four. Apply a layer blur effect
with a strength of four. Name it line blur. Next step, we will create a
ball of light with blur effects. Press the O key to create an ellipse. Set the dimensions to 30 by. Align the content horizontally to the
center and adjust the Y position by 40. Add color to E six B
one FF with 30% opacity. Apply a layer blur effect
with a strength of 16. Name it blur. Move the layer above the line blur layer. Now let's group the light
reflection to group select line two, line, blur and blur. Then press command plus
G name it selected. Align all layers inside this
group's horizontal center. Move the selected group under
the text mixes exposition to 448. Move line blur to Y position 58. Set the text mixes to white. Congratulations, you have
successfully completed this design. That's it for today's course. If you want to learn more about
this design, we have another section that is only available to
100 X supporters on YouTube and our subscribers on the Design+Code website. In the next section, you will learn
how to organize your design elements, using components and how to generate
variants of those components quickly. Additionally, you will learn how to make
your components interactive and how to create a prototype to test your design. Finally, you will apply these skills to
design two pages for a video and channel.
