We’ll build out this website using figma’s new vs code plugin and spline but first let’s take a look at Mid Journey 5.2 which was just release so if we take a look at our settings you can see it’s currently enabled by default so let’s just try some things out
So got some interesting designs here and this is out without using any of the parameters so let’s it out now okay interesting so this is with stylized all the way up to 1000 um you can see it goes really heavy on like it’s the intricacies of the design so
Here you can see we can still generate a pretty good mobile UI interfaces so I feel like this is actually better than some of the more recent model versions seem to move away from good UI design more photo Centric another cool feature that they’ve introduced in this rollout
Is this shortened command where you can pass in the prompt and it gives you shortened versions of it but if you click show details you can actually see the weights and how much weight it’s providing each token within your prompt so this is a really good way to kind of
Understand how it’s seeing your prompt and if you want to tweak it and make adjustments to your prompt based on these values so I think this is a really powerful tool for refining prompts I also wanted to play around with Dev mode which was just released in figma so
They have this idea of a section and this is great for marking things as ready for development so that designers can hand off more easily then inside that we’re just going to create a frame the size of our web page then we can just draw some wrecks for
Our UI the way we would normally so here I’m just going to create a frame and adjust the stroke and border to match then we can just place our text within that element and group them then we create a frame around this and this is going to be our layout section
So we’re going to go ahead and add Auto layout and Center a line doing Auto layout will be reflected in CSS as flexbox so this means we can just add other content to it and automatically lay out correctly in this case we do want to make sure that the direction is horizontal
Then we just continue to populate the rest of the header content we can do the same thing with the rest of the text elements in the page then we’re going to create another layout frame for this footer section Because the structure of all these elements are the same I’m going to turn it into a component then I’m just going to draw an inner frame and we’re going to set it to Auto layout and make sure that it wraps its content then just duplicate the items
After that we can just play around with the padding and spacing between the items to make it look good so now we can go ahead and Mark this as ready for development so now we can hop over to vs code and open the new figma extension and then open our document
You’ll see it opens up this new pane where we can go in and inspect and actually copy the code for these elements into our code then we just go through and write all the markup and scaffold it the way that we want to with the element selected it’ll auto
Complete values right out of the design you can also copy and paste blocks of code right out of the inspector panel So we can just copy and paste all the styling we need to build out this site That’s looking pretty good so now we’re just going to go into spline and take a quick pass at the 3D portion of this site so we’re just going to place a cube right in the middle of our scene then we’re going to select the ground and add a gradient material
We’ll use the Color Picker to pick the colors out of the image then we’ll add a second gradient material and set its blend mode to multiply then we’ll switch its type to radial and reverse the colors so that it’s black on the outside you can move around the light and adjust
The gradient to your liking so that it matches the image select our Cube and press this button that says smooth and edit we’ll decrease the subdivision modifier because we want this to be low poly then click increase bass subdivision because we’re in edit mode we have a
Bunch of different tools up top we’re going to select the brush which is the sculpt tool these are some modeling tools we’re going to choose grab which is on the left and then you can just pull vertices and distort your mesh when you’re done you can just hit the x
Button in the toolbar to go back to the previous mode so we’re just going to scale it up a bit and then go back into edit mode select this tool with the line down the middle which is the loop cut tool and allows you to make subdivisions that
Loop around on a particular axis then we’re just gonna play around making subdivisions and then scaling them out then we’re going to pick this third button which is the vertex selection tool and just select random vertices and move them around the way that we want to from there we just continue to play
Around with these tools and manipulate the shape to get it looking how we want Now we’re going to add a material to our mesh that’s a noise material and we’re going to use the Color Picker tool to make the colors match those from the image then we can bump up the scale and set the type to Purl in Continue to tweak the lighting and the noise material to your liking so that it matches the image then to make these shards we’re going to add another smaller Cube and just go through the same process to make multiple instance of it we’re going to use cloner and then just
Manipulate these properties so you can adjust the position offset the scale and rotation of all the cloned elements then we just continue with this process until it looks the way we want finally with nothing selected we can set the background color to Black to have better control over the camera
Position you can just hit this plus button and then add a camera and by default your camera will be the camera that you just added so you can go in and position it exactly how you want you can also toggle the active camera in case you want to manipulate it separately
In code export and play settings we can adjust how we want the interactions to work like if we want pan and zoom enabled or even set limits on the orbit then we just click update code export and go back to overview where we can either copy the code we need or download
The project as a zip so back in vs code we can go ahead and just paste the code that we got out of spline and you can see it shows up right inside of our canvas element so I think I’m going to wrap it up here for now but obviously you can keep
Tweaking to your liking I’m curious what other tools and workflows you guys are interested in exploring so let me know in the comments below
#AI10 #Web #Workflow #Midjourney #Figma #Dev #Mode #Code #Spline
For More Interesting Article Visit : https://mycyberbase.com/
