Preview
Video Player
00:00
00:00
Generating Code from the Design
12:21Welcome to the final video in our UXPin Merge workshop, where we'll explore Spec mode to seamlessly transition from design to development. Learn how to access detailed information about your design, export your UXPin project to React, and run the app. Watch as we turn a UXPin prototype into a fully functional React app using MUI components. Join us for this final step in bringing your designs to life!
Welcome to video five, the last video
in this series of using UXPin and
0:00
UXPin merge to design a simple
app using all MUI components.
0:07
In the last video,
we used real MUI React components to
0:13
build out a design on the UXPin Canvas.
0:18
We even added some interactions so
that our prototype really showcased
0:21
how the elements and
components work with each other.
0:26
In the last video, we left off here in
the prototype view on the simulate panel.
0:31
Now we'll explore this, the spec mode.
0:38
When it comes to implementing designs,
0:40
collaboration with developers
is super important.
0:43
Or if you're a designer and
developer like myself,
0:48
you'll want the transition to
be as seamless as possible.
0:51
Spec mode is where we'll find all
the developer-related information,
0:55
about this design.
0:59
Anything that we do or
1:01
change in our design in UXPin
will be reflected in spec mode.
1:03
So if you are working with others,
1:08
they'll always be able to see
the latest design or update.
1:10
So to the left, up here, we have
the layers panel and we can click on it to
1:15
open it, and this is quite similar
to what we had with the designer.
1:20
We can see all the different components
and how they nest inside of each other.
1:25
Now, if this panel is missing for you,
it is just up here next to Actions.
1:30
And speaking of actions,
1:36
this drop down here gives you easy access
back to the prototype or the project.
1:38
The panel on the far right here gives us
some general information about the Canvas.
1:44
There is the width, the height and
the Canvas that we use, which was iPad.
1:50
Now this is great, but
as merge uses the exciting thing about
1:55
spec mode is when we select
one of our component layers.
1:59
So let's try it out by selecting our
parent container, the Container,
2:03
let's select that.
2:08
And now we can see information
specific to this layer.
2:12
We have the general information such
as the width, the height and position.
2:15
Now below that is a super familiar site.
2:21
It's information about the container
component from MUI and
2:24
the link to the docs.
2:28
But what's really exciting
is what lives below that.
2:29
These are the dependencies,
the functions and the entire JS code for
2:34
this particular layer,
which is the parent container.
2:40
And right at the bottom,
there are some additional export options,
2:45
such as copying everything to your
clipboard, opening it up in StackBlitz,
2:50
and downloading the entire
project as a React project.
2:56
Now since we've got the parent
container selected, these code blocks
3:00
contain absolutely everything that
you see in the prototype right now.
3:05
We don't see the alert and we don't see
the list because those were hidden.
3:10
So if we scroll through the dependencies,
we can see absolutely all
3:14
the MUI components that we use and
right here they're being imported.
3:19
And then further down, the functions code
block relates to all the tab components.
3:24
And we can see these visible,
these ones here, they relate to each tab.
3:30
And these checked states are actually for
the task, the checkboxes that we added.
3:35
And as you can see with these visible
states, they can also find and translate
3:43
any UXPin interactions that we've set,
and we can definitely see that there.
3:48
And finally, we have the JSX code.
3:54
We can see the container,
the stack, the typography,
3:56
the icon, we can essentially
grab this entire block of code,
4:00
pop it right into a React project, and it
will run and it would look just like this.
4:05
But of course,
let's not get ahead of ourselves.
4:11
As React developers we work
with smaller components, right?
4:14
So we wouldn't just grab
this entire block of code.
4:18
So if we come over here back to the Layers
panel and we select a different component,
4:21
let's do the Alert,
which is the smallest one that we have.
4:26
Over here in the Properties panel, we can
see that the dependencies is just for
4:30
the Alert component.
4:35
And the function again,
the set visible and invisible is just for
4:37
the Alert component.
4:41
And here in the JSX code we have
the props that we were selecting as well.
4:43
So severity equals warning or
something that we selected and
4:48
then the title and the typography
it is all here ready for copying.
4:52
So I don't know about you, but this
has been pretty magical for me so far.
4:58
I'm super ready to spin up
my own React project and
5:02
make sure that MUI is installed and
I grab this code and
5:06
then it will just magically
appear in my React project.
5:09
But there's more, so
I'm gonna select this Container,
5:13
the parent container, and I'm gonna
hide these and come down to Export.
5:17
Now, as we saw earlier,
all the way down here,
5:23
there are three types of export options.
5:26
The first is to Copy all to my clipboard,
which will be great if I'm just gonna open
5:29
up a React project and then grab all
this code and pop it over there.
5:34
Now, this second one here
will actually Open this UXPin
5:38
project as a React project in StackBlitz.
5:43
So we don't even need to spin up our
own React development environment.
5:47
To use this, you'll need to be working
in UXPin directly in your browser.
5:51
So to showcase this awesome feature, I'll
open up this project in a new browser tab.
5:57
I'll head to app.uxpin.com/dashboard and
6:03
click into my Employee Portal project.
6:08
And then I'll go straight to
the prototype view by clicking Preview.
6:14
We'll head on over to the next
over to Spec view and
6:20
we'll select the entire container.
6:22
Now if we scroll all the way to the bottom
and we click on Open in StackBlitz,
6:25
you'll see the magic happen.
6:30
As you can see, the entire project
is right here, ready to go and
6:35
we didn't even need to spin up our
own React development environment.
6:39
But since I don't use StackBlitz myself,
this third one right here,
6:45
Download is my personal favorite.
6:50
We can actually download this
entire project as a React
6:53
project with the package.json
ready to npm install.
6:57
Now, before we do that though,
7:02
let's make sure that our default list
is showing instead of that table.
7:04
And we'll make sure that this is
in fact working as we want, yes.
7:09
Okay, we'll come back to Spec and
we will select the container and
7:15
we'll come all the way down and
download this as a React project.
7:19
So I will be downloading this
as app.zip to the desktop, and
7:25
I'll open that up in Finder and
I will unzip app.
7:29
Now, I'll be using WebStorm
as my IDE of choice, but
7:34
please feel free to use whatever
you're most comfortable with.
7:37
So I'll drag app into
the welcome window and
7:42
then it will open up like so.
7:47
Now as you can see
the package.json is right there so
7:53
let's run npm install and
we'll let it do its thing.
7:57
Okay, once that is done,
8:08
we can run npm start to
have a look at our project.
8:11
Yes, we will do the default.
8:16
Okay, great, everything's a little big,
though, because we did design it for iPad.
8:21
So I will be using Chrome Dev Tools
device toolbar, so
8:26
I'll right-click > Inspect, and
then over here, we'll select that and
8:30
I've got it at iPad Mini,
and I will set it to 100%.
8:36
Okay, it's looking pretty good, except
there is this little bit of padding around
8:40
all of our content, and that is actually
because of Chrome's browser styles.
8:45
So we can overwrite that
by creating a stylesheet.
8:51
So here in Public we will create
a new file called styles.css.
8:57
We will target the body and
then we'll remove all margins.
9:03
And then over here in index.html
we will link that up,
9:08
link rel stylesheet href styles and
then we'll close that tag.
9:13
Now, when we had back,
we can see is all gone.
9:20
And we can actually click on these tabs
and the correct view will be rendered.
9:25
Just like we designed,
except this is in real React.
9:32
Now, how incredibly fast was that?
9:37
We went from prototype to a working
React app in literally minutes.
9:40
Now from here,
you may have a look at our JSX here.
9:46
And if you are a React developer,
you're probably itching to try and
9:51
separate these into components.
9:55
So you might want to split the code
into a header, maybe user section,
9:58
tabs, and then content
container like we did in UXPin.
10:03
But whatever you want to do all
the code is already here for
10:06
your happy refactoring.
10:11
And just like that,
10:13
we have ourselves a simple React
app that uses all MUI components.
10:14
We were able to first visually
design the whole thing using UXPin.
10:19
And thanks to Merge, we were able
to use the actual React components
10:24
from the MUI library down to
the specific props and visual behaviors.
10:29
We then created an interactive
prototypes with interactions,
10:35
which is great for
your reference if you're working solo or
10:39
a great asset for
larger design to development teams.
10:44
And then we were able to grab not just
the dependencies and functions and
10:48
JS code for each component, but
we were able to download the whole
10:53
project as a React project,
ready to install and run.
10:57
Remember though,
11:02
MUI is just one react component
library out there that you can use.
11:03
Like I said in the first video,
merge is a technology that syncs
11:08
React code components from
a repository to UXPins design editor.
11:13
So if MUI isn't your cup of tea,
you can use literally any other
11:19
component library out there,
like Ant Design, Bootstrap, etc.
11:23
In fact, if you or your team have
your own design system set up,
11:29
you can even add that into UXPin,
thanks to UXPin merge.
11:34
Now imagine everything that we just did
with MUI, but your own design system.
11:39
That's super exciting to me, and
I bet it's exciting to you too.
11:44
So I hope this video series gave you a
little insight into UXPin and UXPin merge.
11:49
Be sure to check out their
website over at uxpin.com/merge,
11:57
and dive into their
extensive documentation.
12:02
You're sure to find your answers.
12:06
So I hope you enjoyed joining me on this
journey to discover UXPin merge using MUI.
12:09
Thanks for watching and
I'll see you next time.
12:16