OK, now we learned a bunch of different concepts, we've learned about different tools, we learned
about different panels, and you're probably thinking, Daniel, I just want to kind of get started.
I want to jump in and trust me.
I truly believe you.
And that's what we're going to do right now.
We're going to build a very, very quick Lanying hero section just to test out what we just learned.
Now, I have a couple of images that I dropped into here.
The easiest way to drop in an image is to either if you go in here, you can place an image which is
like literally is uploading an image from your desktop or a file folder over here.
You can even get these images through a plug in.
And we're going to learn about how to use that in different lessons in the future.
But I have these images here and I make them available for you and you'll be able to use them in your
file.
I really encourage you either to follow along and try to recreate what I'm doing or just try and do
your own thing.
I mean, it's just for fun.
It's just to get used to the program before we actually jump in and start doing some more complex things.
So let's do it.
So one thing that we didn't necessarily go over really quickly was the create an auto layout.
So the layout grid is really important for laying out things on your frame.
And so if I select the frame, I'm noticing the design properties panel.
I'm just going to click layout grid and this little grid comes up and that's not where we're going to
use it.
That's more for creating icons.
But if I click on that grid and I click columns, that's what we want.
So just follow along and I'll teach you how to create better grids in the future.
We're just going to set the count to 12.
We're going to set the margin to one hundred, your margin is your side on the left and right, and
we're going to set our gutta to thirty two, so let's just stick with that for now.
But this is going to be our guide.
Now, this isn't going to show up in the final designs, you can toggle these on and off if you go to
your view section here.
You can show your grids, you have your pixel grid, which we have showing, but your layout grid.
Now, this is my shortcut, which is control.
So if I click control, it's going to toggle it on and off.
And that's just there for you to use for your guide.
It's not going to show up in your phone lines, like I said.
But we're going to do that and it's going to place this here and we can scale this image any which way
we want.
So we'll just place that there for now.
Now we're going to we're going to create like a company page.
We're going to create some shapes.
So I'm going to select my rectangle tool and go up here.
I'm going to select my rectangle to like that.
The zoom in.
And let's give it a feel of say, like.
I can read like that, and now what I'm going to do is I'm going to maybe create another shape so of
Polygon.
It's a triangle.
And let's give that another color.
We like yellow, bring that over here and I'm going to select my circle shape.
And make a circle.
And make this one maybe like blue.
And there we go, so we kind of have, like, these shapes, I'm going to actually use them as my logo,
so I'm going to just like rotate this any which way I want circles, obviously.
Fine.
We'll just keep these together.
So we have our little logo here, and if he wanted to, we can group these.
So if I.
Right.
Click.
I can go in here and group this election so I can easily move that any which way I want, it's going
to be on my grid.
It's going to be at the top.
Perfect.
So I'm going to create like a consultancy website hero page.
Look at these people.
They're talking about something really important.
Let's get some text.
So I'm going to write.
I'm just going to drag.
And so I have some text.
So let's write Transforming the Way or organizations
define design and build software.
And if I selected all, I can go over here and change the font now, really nice I like is Merriwether.
I'm going to change the font weight.
And keep it to regular, we can even change the font size that's going to be fine, these different
options here.
So I like to do is I'll just do an alternate.
So that's based off of how many lines of text you have.
So I'm going to do that.
And I'm going to let that go all the way, or we can just decide.
There we go.
So it's going to take up five columns and my image is going to take up.
Seven, so that's looking really good, what else I'm going to do is I'm going to make another text.
And we're going to write some more copy, we connect strategy.
Now, I have all this text prepared.
And.
You can either just, like, redesign somebody's landing page for this and we'll test.
That's what I'm kind of doing.
So data services, what else do we have to bring your organization's
most valuable software driven experiences to life?
OK, now going to select US song with Kamandi and I'm going to make this a different font.
Let's do something like Open Sans.
That's nice.
And we are going to bring that down.
14 a little too small.
We can go up a little bit.
Eighteen is fine and we'll keep it on regular.
And once again, I'm just going to make it autosite and it's going to be the same with if we wanted
to.
We can even bring that in a little bit more.
And what we're gonna do next is we are going to make a button.
No, the way I like making buttons is I like making them within a frame so you can put frames within
frames, like I have a frame to select it right now and I can make a frame and I can make another frame
if I wanted to.
So this is my button.
You can't really see it right now.
And I'm just going to put it right here.
But I'm going to fill it.
I'm going to fill the frame with my team colors.
So say black.
No, let's do blue.
There's my button and inside of my button, I'm going to select a textile and I'm going to select inside
the frame.
And if you notice inside my layers, my text will go underneath my frame.
So now we have kind of this layer within a layer here.
So I'm going to say let's do learn more.
So I'm going to select all of that.
I'm going to select the fill.
And let's do like I'm also going to set that to Senate and I'm going to make sure that it's auto with.
So that means it's going to grow with the actual width of the copy inside.
So I'm going to select that text again, I'm just going to center it within this frame.
Now, this is where things get a little bit interesting.
Nonetheless, like this frame and what you can do is you can do this in two ways.
But we're going to rename this to Button first.
You can do this in two ways.
You can select your text and you can go to your constraints.
Remember what I said about having something within a frame resize easily, you can send it to the center
and center and every time you move your frame, it's just going to move.
If you said it to left and right, what's going to happen is it's going to shrink because it's only
the size of a text.
So that means you would need to expand the text.
Now, I'm holding option here while I'm expanding it all the way to each side.
Now, if I go back and I said it back to center, that's one way to make a big button and we can round
the corner is on that.
So I said it's a five and clicked enter to confirm that.
And I'm going to hide my grid.
It's controlled for me.
So I have a nice button, but if I wanted to do, say, an auto layout.
I can click through this little Ottilia line, selecting the button frain.
Click that and what it's going to do is five, two or more items within this frame, it's going to automatically
lay it out in a horizontal direction.
So if I say copy this and paste it, it will be automatically added and it will grow the entire frame.
You'll see that the space between is ten.
If I make it like say something like twenty four, it's going to grow.
If I make the space around, you can make that over here.
So this is your top and your bottom, your left and your right and where it is with in this actual frame.
So everything is to the left and the right.
So your auto layout right now is these are kind of like your constraints.
If you're not allowed all the content, I want them to be centered to the middle in this case.
Right now, they're packed together, but you can also have space between so if I select this frame
and I scale it, they're going to be to the left and the right in this case or top to the bottom if
there's positioned vertically.
So let's remove all this.
I'm going to command all the way back, but we're going to keep the Ottilia.
And what we're going to do is we're going to set this can be set to zero because we only have one thing
in here.
We're going to go in here.
We're going to set this to the center.
We're going to do 16 for the top, 16 for the bottom.
We're going to have space of 40 on the left in space of 40, right, and that's perfect.
It's packed in there and we are going to set the constraints.
So if it's hug contents, that means it's going to not grow when I move it left or right.
So if I select this frame.
And move it left or right.
Those things are not going to grow.
So let's make this a little bit smaller.
OK?
So I don't want that to grow, I just want to stick it to the left and the right, perfect.
But I want all these to be in their own frame as well so we can do that.
So I'm going to select them all and I'm going to put them in a frame.
Now, there's a couple of ways we can do this.
If I right click, I can go to frame selection.
And the the shorthand for that is option command.
So now they're all in their own frame.
So I'm going to rename that content.
And here I'm going to go to Ortolan again.
And I'm going to position them apart 16.
Let's make it 20 for a little more space, maybe 20 for OK.
And what I'm going to do is.
I'm going to leave everything like that.
That's perfect, the constraints I'm going to put fixed and I'm going to make sure that it's going to
scale left and right.
We can leave it to hugging content, because if I add, say more, text the bottom, I'm going to comment.
See Kamandi, this frame's going to grow.
And this is great for adding content.
Like if you have lists and you want to constantly add new items to your list, you can do that with
something like auto layout.
It's really great for growing lists or shrinking things.
Awesome, especially for content like this.
If I wanted to to add more content, everything is going to grow the more I type.
OK, so now that we have that set up, it can be left and right.
And if we go back to our frame.
Now, that is going to shrink once we set the content within, so the content within is right now is
at fixed width.
But if I do filter to container and this one is filled to containers, it's going to go all the way
to the edge.
Let's see how everything moves, so now it's automatically responsive.
Now, that is pretty wild for me.
I love that that about Fatemah.
Perfect.
So we have that built out.
The image is very similar.
I'm going to do is I'm just going to select that.
I'm going to do left and right.
We're actually going to bring this image in.
Let's overlay it.
And we can do something like this.
And we can make the image left and right, we'll make this left and right, and you can start seeing
how this plays nicely together.
So we kind of have like our own responses.
Well, design, really cool stuff.
OK, next we're going to I'm going to select the text layer again.
And I'm going to have some navigation options, I'm going home on a command C, Command V.
I have about.
I have services.
I have case studies and the last one I have contact.
So these are all my options and I can do that same thing I can.
Right, click in while I select all them.
Frame that selection.
We commit to an ideal layout and we can space than any which way we want.
And I'm just going to put them all way onto the right for now.
And center at.
If I select all these, I'm going to go up here and I'm just going to center them.
On that vertical axis, and now we kind of have our header, really cool stuff here.
So this Budden, let's talk about quickly components.
So now we have this button that I want to reuse, say, through the website as our primary.
What I can do is I can create a component out of it by clicking that button up there and I can rename
this component to primary.
Now, I'm going to go into my prototypes and I'm going to want to use that primary.
So I'm going to buy assets, tap it on desktop right now, and I can reuse that primary button that
we just created.
I'm holding an option while I'm driving it, option and shift is going to let me drag it while keeping
it on the on the same vertical axis.
You can space that and stop at the crib and we can modify this and create different variations of that
primary button if we wanted to, but this primary button.
Is reuseable now, so I'm going to delete those and go back, so as you can see with what we learned,
we could easily create a little Web page.
We created some shapes here.
We learned how to use our text layers.
We learned how to create components with buttons.
We had images, constraints, creating a responsive website, using frames and using the new audio feature
that Sigma had just released.
And we were easily able to create something that looks really great.
Let's toggle that grid so I have control.
Let's toggle that.
And that looks really, really nice.
It looks really professional.
And now you're ready to go.
If you have any questions, don't hesitate to reach out to me and I'll get back to you really quickly.