Webflow and SystemFlow - Speed up your Web Design

all right so let's get started and let's create a website with webflow and system flow first thing you go to this webflows dashboard and from here uh you're gonna duplicate the whatever newest version of system flow that you have you always duplicate this core project and this is because you want to keep it as backup and as a base for all of your future projects and if you mess around with some projects you always have the clean copy that you can copy your framework from so let's create a new project now and let's rename it to ebook and save those changes we're going to go straight to designer here and first task is just to create the base of our website with system flow elements enabled so basically what we're gonna do is just delete this section on the home page this welcome section and we're gonna leave this custom code because it enables us for example using material icons and a bit more so in in the body of the document we're gonna uh create a clean uh version of this ebook website that we're gonna make with system flow components there are two ways to approach a web design in web flow so first you can create a layout in sketch or figma or xd and then transfer to webflow or you can just start with webflow and from this empty canvas you can simply select the components from our library so if you go to system flow documentation uh you can go straight to like uh cda sections and then select the section that you want to use then click on the name of this section and then command e in webflow to search command v to paste and return to just put it in your canvas you can do it like this and then you can redesign then you can use our starting page so this customize page to set the overall look and feel so the colors and typography and things like that like this so you know you can start you can easily start with with webflow sometimes we do sometimes we start with webflow and if we start with webflow we usually have something to rely on even if those are really raw sketches on paper with pencil or maybe just a raw prototype made in figma you can see that this is not made with rui kit for figma this is just some rectangles and shapes and images that i kind of put on the canvas i've iterated a few times with these templates and that was enough to just give me a glimpse of what i want to create with webflow i didn't refine this layout in figma i didn't create a high fidelity version here i just you know create this raw prototype in 10 or 15 minutes and then i went straight to webflow and i started to use these elements from our framework to map all the things all the components so usually even if you create things from scratch we have something that will support it if you are using our library for figma we definitely have you definitely have all the components in place so you can start with the components that we already have so it's easier but then again uh we usually we have something that you just have to tweak a little bit or maybe use a ready-made component for example for cards here and for this hero section uh you'd want to go to documentation and then scroll for let's say this cda section and you're gonna find pretty similar thing in there or you want to use our card section and then search for the cards that will be appropriate for the design of this course cards and if you find something that you want to use you simply click on the name of this element then go to webflow command e and command v paste it with return and that's it this is how you can start all the components are super easy to customize and super easy to expand so if you unlink this from the master symbols instance and then if you go to the layout you'll see that this is usually agreed or maybe some columns that we have here you can edit this grid and from here you can add another one and if you accept it select this card copy and paste you have three cards instead of two in most cases this will just work out of the box or with some minor tweaks but if it doesn't it's still web flow so you can use all the webflow magic and all the power to create even new components like you did in the old days and uh it's not even from scratch because then you'll automatically use all the text classes and all the spacing classes and colors that we have in system flow so it's even faster now let's delete this and the other way around would be not to start in webflow with some simple prototypes but to start in a design tool where you have this refined layout for your website if you're using system flow for figma it's so much easier because then as base components here you have exactly the same components that we have in system flow so you start with base components like navbar and hero and feature and then you restyle it in figma you can obviously do whatever changes you need you can tweak the layout if you change things like colors and typography this will be one click in system flow and then everything will have the same typography that you did but if you make some other more complicated changes and for example remove something from here or add something it's also super easy to use our different components and classes to add this to the component base but the component base itself is here and you can simply copy the name of this component base you can go to webflow command e command v and to return paste it and this is the base of the component that i've used in figma later on it will inherit some styles from the base of the system and the rest of it especially the html structure i will tweak separately but this is not the thing we do uh at the beginning uh first we're to add some more components so depending on your knowledge of the component library and after a few iterations you'll basically remember or be able to search for most of the components it's fairly easy you now want to add those components if you have the designing thing you can copy and paste if you don't you can just uh use command e now let's search for hero left with image and i just put in a fraction of the name that i remember and web flow search is super cool it will let me find the right component and just return put it in place now we're gonna use a feature and that would be feature right with button so yeah i need feature right button like this i can place it in there next feature component would be three times two uh i need feature and then uh vertically aligned with some basic structure so that would be this guy let's put it in there and the next one would be cta from cta i'm going to search for some submit and horizontal with justified yeah this one then i'm going to use another feature that would be feature right uh with button this one okay next up would be testimonials with two columns this one and then we again gonna use feature but this time with the link and that will be featured left so yeah feature left with the link this one and last element we need is footer so let's search for the light footer version one is just fine let's place it in there and now we have the base structure so what i had is on the second display i just had the structure without names but i pretty much remember all the names of the components but i had this structure and thanks to this you can easily paste them in and now you might want to change the text and images and also some html structure so maybe get rid of some elements that you don't need or add elements that you really want here and then replace text images and restyle it so that it looks exactly like here i'm going to show you that in a second but first what i want to show you is how we at system flow also build some templates for you so that you have ready-made let's say an e-book template or a business template or a video university template that will launch very soon so we don't apply any other custom styles apart from the system of defaults but then you can take this template and you can tweak it and apply styles on top so for the templates that we create i'm going to show you how it's done let's first unlink all the symbols and this is pretty important so uh we after adding symbols we have to unlink them from instances and we do this for all the symbols i don't know uh why but this uh keyboard shortcut doesn't really work for me shift command a so i have to unlink them manually like this and this is pretty important because we don't want to to tweak master instances of those symbols we want to have local copies for this page and still if you make some adjustments we mostly work on different classes so this will be a system system flow system-wide change but uh you won't necessarily modify the master component so this is uh as we usually do it we unlink all the instances uh treat it as a rule sometimes you don't really need to do it uh we also included some overrides for some symbols especially atoms for example if you search for a button and you use this simple button here well you have overrides in there so you can type in the url or you can change the button text you don't really need to unlink it and then tweak it and most of the time for buttons you you probably want to just use overwrite so for simple elements and atoms like this we have some simple overrides but for bigger structures like like layouts uh you'd want to first unlink it and then you can easily make changes straight on the canvas you don't really need to go to the definition of the component so it's so much easier and yeah this is how it works so right now what i'd like to do when i have everything unlinked let me start from replacing the text and i won't show you everything here but uh just something so that you can get the idea for example here instead of home we're gonna put chapters overview this drop down i don't really need it i don't need i really want drop down here but i need some extra sections so here we'll have author and then we're gonna have reviews i also want to include a free chapter link so let's copy this now link and paste it and then copy and paste the text i have it in my in the doc and for the button text uh we're just going to use get the book here also there's one change i want to include in the nav bar and now it's not sticky i want to have this stick to the top of my page so let's select the nav bar let's select sticky and i'm going to use 0 for top position and now it sticks well i need maybe a little bit of border so i'm going to include one pixel select the nut bar once again and let's use one or maybe two a pixel border and i'm going to use very light color from my palette from the style guide and now it's fixed it looks pretty cool then i want to restyle the other element so next one i want to paste some ready-made copy that i have and let's paste some text here as well now if you want to uh change this uh the color of this text it's as easy as selecting a portion of text and wrapping it with a span and now you can do it basically two ways there are two ways to do it so first is if you use our color classes if you go to color you have different classes and for example for this text i'd like to use this primary 60 color so that's one way the other way around would be just going to text color here and this set the very same classes in typography when you select color so we have the very same classes used as swatches so you can simply select this primary 60 as a swatch that would obviously create a new class for this span so maybe in this case it would be just easier to search for c t and primary and use the city primary 60 ready-made class either way is fine for system flow and remember that this class is also linked to this color so if you change this color definition in the library if you edit this color and then you change it to some other it will automatically be applied across all the elements with this class applied and all the elements that has this color text color applied as well as a swatch right okay for further text changes i'm going to leave them out of this tutorial it's as easy as copying and pasting the text for the structural changes if you want to get rid of anything it's as easy as selecting and deleting it and then if you want to replace images let me first import images that i've created i've already exported some images so i can go to assets and uh in here in assets panel uh you have this system flow folder with all the system phone system flow images you can go to custom uh so it's a little bit more less messy than the one we have and then i just import some images that i've exported from figma now you can double click on the image and as you do in webflow let's replace it we're going to use this one and it's a bit too big i guess let's first pin it to the bottom and to the center uh let's also apply some marking i'm gonna add a 38 pixel margin here you can add margins like this if you want it it's very custom component it's very custom element that you can easily add margin from here if you want to add margin from our marking classes you can also do it we have plenty of this different margins classes in spacing and layout section and for example if you want to add 48 pixel margin that would be using spacing and then this is padding margins is m so you use spacing margins and then if you want to apply to all of the values then you use just a number but if you want to apply to just top you're going to use top here or you have right bottom left and also x and y axis that will give you uh padding across y axis so to top and bottom and across the x-axis would be to left and right so what we're going to use here we probably just going to leave the margin like so if you'd like to apply this combo class you'd go to spacing margin then top and use this 48 marking top and that's pretty much the same let's undo it let's leave this as it is what i want to add here also is maybe let's change the width of this element to 90 and let's create a bit of box shadow so i'm going to add a box shadow with our dark color but let's change the opacity of this shadow and also let's change its preferences so that it's we're going to use uh 10 for the distance and let's use let's say 40 and this looks pretty good now let's now change overflow to hidden so that this part of the shadow is hidden and here we have our next section let's move to the next section and sometimes in system flow you just don't have a component that exactly matches what you've created in design and you need to tweak html structure a bit more using uh webflows elements or using some other components that we have in system flow it's fairly easy let me change the structure so that we have video instead of the image here so we don't have such component in the library just yet but what you can do is is the let me pin navigator here is easily replace the structure of the feature grid and inside the feature grid let me create and add another element that would be native lightbox from webflow and for this lightbox i'm going to select an image i think that we have for system flow uh some default image that i can use in here this is this video image and the slidebox link would need to go here here we have the image i can get rid of it and inside of the link box lightbox link what i can do is we now have this image only but i can create a simple structure with a div block let's command to return and give it a name of video background or video bg so now i've created a new class and every time you want to add some custom styling on top of system flow you're just going to create a new class whether it's a combo class or just a class for this particular element so for the video bg i'm going to put this image inside and as a background i'm going to use this image that i have in my assets panel let's choose image and this is the ellipse that i want to use let's restyle it a little bit don't tile it contain and put it in the center now if i change uh paddings for this video background i'm pressing hold option so that i can change top and bottom margins padding sorry i can have it like so okay now let's say i don't want to have this button as well i'm going to delete it and in this cds wrapper i'd like to add a list so let's command e and let's search for list with icons return and here is the list and we also have some overrides so as long as you want to go with three list items you are safe with overwrites but what's most important here is that we have an icon override so if you go to material design icons library and you want to select whatever else icon from here so for example this code icon it's as easy as remembering or copying the name of the icon and if you want to replace check with code you simply do it and you have this new icon now you can replace the text but usually you will have like more or less than three items so then still you'd have to right click and unlink the instance and now you can easily uh even with uh navigator you can go to the list items you can select and maybe copy and add to more paste them and you're ready to go okay for this next component if you want to delete icons and instead of them create captions here you just delete the icon and let me check the structure here where am i it's important that you are in the very element that you want to paste into so for example in this first feature block now you'd want to search for tagline and use this tag line and position it here for the tagline we might have an override so you can change the text here and if you want to apply this change to all of the elements uh what i recommend is just going to navigator and you can delete all the feature blocks that we have here and last one and you can select this one and copy and paste five times and here you have icons replaced with taglines now let's go to the other section and here we have something that i want to completely restyle let's select cda section and in the styles pane let me select different background colors so in system flow if you go to color section we have the same colors that you can apply to both text and to backgrounds those are basically the same swatches but you'll use different classes so for background colors you you'll use a color background and for text you use color text ct okay so for background color here what i can do is apply a combo class of color then background and select my primary i guess 100 color or i can do the same with the swatch so in background i can simply select this uh color swatch so that's basically the same this is done with different class in this case you'd have to be careful because if you apply a different background color from here to the entire cta section class you'll change all the ca sections so instead it's better to just use this class or if you want to change the color of this particular section you'd want to apply another combo class such as my custom section and then you can change the color easily from here same applies to headings and body texts and in here it's so much easier to simply add this combo class that would be color text and then i'm going to use neutral 10 for both heading as well as this body text so let's add this color text and neutral 10. this is easier than applying some other combo classes such as my heading for newsletter and then changing the color swatch you just have the class that's applied on top and here we have for this guy i think that i need to use a bit different color than a ct primary 60 to have better contrast i can easily get rid of this class and use city primary 40 and it looks even better now for the next section i need to replace this image let's double click replace the image i'm going to select this one okay now let's get rid of this button maybe entire cta wrapper i don't really need it here here i'm gonna command e use a tagline so let's put a tagline symbol in here we might be able to drag and drop it like that and now let's just paste some more text in here for this testimonial section i'm going to leave it as is maybe just replace the images with stars that i already have here and for the latter section what i'd like to do is a bit more tweaking so i'm gonna have this image to be a big version of our book but i want it to be smaller if you want to have a precise uh width of the book set to let's say 360 pixels you can obviously do it and then later on you're going to tweak it in the responsive versions now let's go to navigator and let's maybe pin it for a second so that i can create a structure with the background so i'm going to do the same thing as i did with video create a d block here put an image inside this div block that would be command to return a book background bg and for the book background i'd like to use alignment to center and justify to center as well and for background let me add an image here we're going to use the image that we have with ellipse and note this one exactly so let's select ellipse here now let's select contain let's put it in the center don't repeat it and for the book background padding here we need left and right padding so that we can see the circle for example like this and also for the entire section i'd like to apply a background color so this is the name of feature section it's pretty unique but here we have feature section as well so in this case what i really recommend you doing is adding one class on top of this or for this base elements you can as well change the name right here because in system flow we try not to apply any custom properties to this root section so that you can easily rename them so for example here if you want to give it the name of book cta for example you can do it and now you can for example change the background color for the entire section let's go to background and select one of our light blue colors for example this guy or maybe a bit lighter and here we have it one more thing i'd like to replace is this text link so let me delete this text link an icon and instead i'm going to use a button with an image so i'm going to search for button primary with icon and icon should be to the left hand side of the button like this here you have the overwrite with the button name so here is face and let's change it to verified and here we have different icon so there we have another section and i'm going to leave the footer as is now let's check the responsive version of what we've created here and all of our components are responsive by default so usually they look really really good in mobile view like this ones however sometimes you'll have for example the component with small image and we've replaced it with really huge image and you want to tweak it but it's fairly easy to do i mean it's as easy as editing the grid if you still want to end up with two columns here you can obviously add columns it will work if you want to change this picture so that it's slightly smaller you can obviously change its size here so it's really easy and for some version of components if you let's say want to change the positioning of the elements we also have some special classes for example for text if you go to our typography section here you'll find some classes that will let you change the alignment of the text to left center or right so if for example you want to change the positioning of this body text here what you could do is press command return and use text alignment center and this is adding a new class to that so if i add this class and by the way it's always safer to select it with your mouse or keyboard arrows and then press return it looks good here and in other breakpoints but unfortunately this is a new class that i've added so in desktop version i'd have this centered as well so this is not exactly what i'm looking for i need to get rid of this class and in this case if you want to change something really specific for tablet or other responsive versions our recommendation is to simply add another class on top of it so you have this extra class here and then in this extra class you can simply create this alignment and now it will be aligned to the center in all of the responsive versions so sometimes on top of system flow you just want to add these extra classes and this is totally fine and also if we if you look at our spacing and layout section we have this special spacing classes for different breakpoints it means that if you want to apply margins or padding but only for tablet and below you can do it with a class for example using this spacing tablet and then you apply 32 pixel padding to each side of the element but only on tablet version and below this is a bit more advanced and i'm going to explain it in some other tutorials but you can easily do it and it's super helpful so right now we have the base layout for our framework website like i said for system flow we want to create some starter templates like this so that you don't have to start with the blank canvas if you want to quickly create a landing page for an ebook you can just use this starter template and here i haven't messed around with styling and that's pretty cool because on top of that you can apply your own styling and as you'll see this is super straightforward so for example if we want to transform a website like this our starter template into something that we have designed in figma we only need to change some images and text and a bit of styling so what we want to do first is go to project settings to add some specific fonts for our project so let's go to fonts and from here i want to add google fonts i'm going to delete enter let's search for laura and we'll use 600 and also i'd like to use epilogue that would be our body text so i'd like to use 500 and 600 for both i guess so let's add epilogue i'm gonna go back to designer this is it and for restyling you basically have two ways you can either work directly on your layout so you can select the heading and then apply a specific font for the heading or you can start with our style guide pages so for example if you go to this customize page first you have very basic settings that you can adjust for example you can change global font and there is an instruction here so let's click on body then let's select body all pages and we want to change typography for the entire page to here we had epilogue i guess and there we have default would be i guess 400 normal yeah so now we've changed entire typography we can go to headings and change them directly here in the customize page but sometimes for simple pages like this it's easier to work directly on the canvas so for example if i want to change headings right now i go ahead and select headings and i can change headings having xl right now i can change it to laura but if i delete just for a second this combo class xl now i'm editing the class for all the headings so if i want to change the font for all the headings to laura i'm going to do it like so and now i can reapply this xl so that i have sizes inherited from this xl class combo class but all of the headings these h2 headings and h1 and h3s are now lora so this is pretty cool if you want to adjust more settings to the specific headings for example change some margins or spacing for the biggest headings according to your layout you can easily do it with this class selected and it's just as easy as changing this margin i guess that tweaking things on this specific layout is a bit easier than using the style guide because you simply change what you see on the canvas but this again requires that you have the starter template or you recreated the component structure first in webflow then you can click and change all the elements but again as i said you can use this customize page or you can go even deeper in our framework and for example if you're start starting with some ready-made style guide or a design system that you want to map onto your version of system flow you can go to typography or color and from here you can select all the elements and let's say you want to reapply readjust all the colors you have all the colors here and you can select and change all the color values okay for colors again there are two ways for example you can go to the home page and directly on the home page you can change those colors so for example if you select this city primary 60 class there is a primary color and now it's blue so let's say you want to change it to this green color let me sample it and copy the color value from figma and now i want to change this primary 60 everywhere across the framework what i do and this is this is super important what you have to do is select the swatch but don't change the color right now first you need to click on this little edit swatch button and now you can paste the hex value here now let me save it and everything throughout the entire system flow was now has now been changed to this green color so you can see tag lines as well as buttons and some other colors however if you hover over a button you can see that on hover you have a bit different color and this is why you need to tweak some more colors obviously you can select it you can go to this hover state and now you can change this color to a bit lighter green that you copy from figma but i think it's a bit easier to go on straight to color and here we made it pretty easy to copy entire color swatches from figma to webflow uh you're going to be using this little swatch component that we've created so if you're using system flow for figma then you have all the colors saved as swatches in figma as well and what you do if you decide to use green instead of blue you simply change the swatch if you change this watch it will automatically update on this palette and then you simply export this watch palette as a png file now if i go back to webflow what i want to do is replace this image to the one that i've exported from figma and i don't have it here yet so let me import swatches and let's okay let's have it here now uh you need to select uh each of the color individually and for example if you want to change this primary tan color to this light green what you want to do is select this swatch now go to its color definition edit the swatch now you can use the color picker and pick the color from here for now this is the easiest way to change colors i think it's pretty fast usually for projects you'll have up to 20 maybe 30 colors you're not going to have 100 colors but yeah this is how it works sometimes it's a bit pain especially if i click outside and i didn't say this color now so what you want to do is go back to this primary 10 and make sure you edit it make sure you copy and then make sure that you hit save and now that i've changed this primary 10 color if i go back to my home page and in here you'll notice that for example for book cda i have this uh color a primary tense set as a background color what i want to do is uh simply get rid of it here but for this hero section i want to set this color i'm gonna delete the linear gradient and make it our primary 10 color as a background for uh navbar i'm going to do the same let's change the color to primary 10. and also i don't want navbar to be sticky here so let me just undo this change and change it back to relative also i don't want this border so let me select the bottom border and let's delete it now let's preview looks better now all i need to do is replace some images for example logo let's replace logo and we need to import images that i've exported from figma so let's do it okay here we have the logo uh it's a bit small so let's change the height to let's say 36. it's no better let's replace this image double click replace image we need this book cover right there and maybe it's a little bit too big so let's change it to maybe 60 width and now it's pretty much okay now for this image i also want to replace it and i already have this one exported there you go i can also make it a little bit smaller now for this background image that i have i've unfortunately i've exported this blue blue circle so i won't fix it right now but for the list items i guess i can do it so we have this check marks and also the button below them for the check marks i think that in material we have this check circle and what i'm going to do is delete all the list items apart from one i'm going to make changes to this one and let me select this guy what you can do is just select it delete and check circle i'm using my keyboard to just type it in now let's select it this is material icons class icon list item i can change the color by adding a class that would be ct primary 60 and now it's green now i can select uh entire item and paste it as many times as i want also for this cta's wrapper i'd like to add a button so let's command e let's find a button that would be our primary button and text only we don't need any icon here it is i can change the text to the proper cta now i also wonder what's the color for hover for these buttons let me go to hover state and check which one should i replace that would be primary 50 so let's go ahead and navigate to colors once more and from the palette let's select primary 50. now i'm going to change this color edit and use the one that i've imported from figma save that should be it and now if i go back to my home page all of the buttons should have the proper hover state and and it seems i'm good to go so now if i want to change let's say all the knob links and make them bolder i can do so i can change the weight for this font to let's say medium if i want to change a specific novel link like this one and apply a color to this nav link i can either add my custom class or use ready-made class for color that i have so for example c t primary 60 for this element and i've added it with a class if i want to change spacings because across different projects you'll have different margins and paddings it really depends what i want to do so if for all body text i want to change the spacing i can find the instance of body text in my document then select it i don't want to change only the large body text so let's remove this class for a second and now if you want to apply some i don't know maybe extra margin for from top and have it set to eight pixels let's do it and now let's reapply this class large for this particular text so this way i changed entire frameworks body text margin and set it to 8. if you want to make a change to a specific this text only you can either add an extra combo class or you can use the combo class that we already have in the system so for example let me select this button and i want to add an extra margin top i'm going to press command return to add another class that would be spacing margin and i'm going to use top and let's say at another 128 pixels obviously this is uh not really good change so i'm going to undo it but this is how you can uh apply these changes one thing to remem remember is that you have different combo classes added to different elements in system flow the components that we have so remember not to change uh properties before you think of classes first so think of what class you're changing you're changing the selector that's already here so sometimes you want to remove part of the selector change the class change the properties and then re-add this part of the selector sometimes you want to create another combo class that's basically your own class and this way you make sure that you don't change anything else in the system this is really up to you and i think with a couple of projects made with system flow you'll totally get it and that would be natural you have to drain this muscle though and just create some projects i think for now that's it because uh all the other things like replacing text and changing the colors it's just repeating myself in this project so i'm gonna leave it here and i hope that you understand the process the idea behind it and now you can start working on your own designs and ideas with system flow

Channel: Learn UX

Views: 4,085

Keywords:

Id: cKTtnGLCo9U

Length: 40min 3sec (2403 seconds)

Published: Thu Nov 19 2020