# ETHWarsaw Pre-Hack - Design like you hack - Joanna Szymendera

- Channel: [ETH Warsaw](https://streameth.org/eth-warsaw)
- Date: 2024-10-07
- Duration: 28:43
- Watch: https://streameth.org/watch/yt-GtLwqbA7-Ao
- YouTube: https://www.youtube.com/watch?v=GtLwqbA7-Ao

## Description

Do you want to participate in the ETHWarsaw Hackathon?
More info here: https://www.ethwarsaw.dev/hackathon

## Transcript

today I will show you how to use figma efficiently for your hackathon and you already saw this question in the note but I want to know uh if any of you actually used figma before to design something hey okay okay nice so you know something already uh nice so this presentation uh won't be you know like deep dive into the figma because nobody needs this for a haathon I just want to show you a set of very useful tools and libraries that you can use in order to produce a very high quality UI with a very little time so um yeah who am I yeah I'm Asha Yanna so I've been a product designer for seven years now and four of those years I've spent exclusively in web 3 I've build like all sorts of different uh different products and currently I work at Super fluid Finance where we build a really awesome stuff um and yeah why am I here and why it's me who's actually giving you this this presentation I also took part in a few web three hackathons and me and my team have been fortunate enough to win prizes in all of them so I just wanted to share you H tips from me from from the designer perspective how you can actually present your work that's the first part where to focus on so your depths are actually capable of developing it um and yeah and how to make it fast right right so the first slide is uh design design to win and right now I want to show you like just a set of very simple rules like the design rules not the figma rules but the design rules that it's very important to keep in mind when you actually try to design a simple UI so first one is first impression matter and I polish design can actually set your project apart from the others and I know that during the Kone we often want to cut corners but it doesn't have to take a lot of time or effort to actually produce a high quality UI um and also remember that you will be presenting this idea to to the judges so and they will see a TENS of different projects within the same day so it's always nice to put like this little extra effort when you have time to actually make sure that the design uh design design is polished uh and yeah you often Pere aesthetically pleasing design as design that's more usable so a bit like fake it till you make it right even if something doesn't work properly as long as it feels nice it looks nice it actually uh gives people the perception the impression that it's it's actually more more legit uh but yeah but design is not just Aesthetics and you all know this already like pretty U I want wiu uh nothing you the project is not well F through uh but it really doesn't matter if you code a very complex technically complex tooling for the developers or some fun retail oriented product in in web 3 um so having that said I want to share with you like three simple tips that I notice teams on on Hons often forget about or don't know about that actually can maximize your usability with very little effort so first one is be aware of the cognitive load the human brain is op not optimized for the abstract thinking and data memorization uh that web three products often demand interfaces should not contain information that is irrelevant or rarely needed when it comes to the abstract thinking humans have extremely limited uh brain power so try to provide only necessary information and make sure you put it in a proper context uh and um and yeah and in case of web three especially make sure that you actually reuse well-known patterns and language don't think about like you know new words or like completely new patterns because like web three is complicated as it is and you want to make sure that judges will understand right away what what your project is about and your hack idea might be very novel but your UI doesn't really have to be so uh hide whatever is is irrelevant for for your project One Step At A timeing break complex task into smaller steps in order to decrease cognitive flow so complexity we are dealing with [Music] money be careful not to simplify to the point of uh abstraction right so if you have a full page of different buttons different inputs bunch of information if you can divide it into a steps like progress bar a steper whatever when it's just one action per screen or like two three input Fields then you're golden try to not uh make like one huge big fager with one app because that's uh also very hard to present because you are staying you know on the same site all the time you're presenting it to the judges they are looking at it they don't know where to look at you're trying to point at it it's very hard so also for your presentation it's important to actually um divide your flows and last but not least this is more of a layout comment so proximity links content by adjusting the proximity of the elements you form groups of similar information or Trad this is very important uh you have to imagine your content as a group of friends right like you put those who share the same interest near each other and separate them from the other groups and that's exactly what you want to do with your content I notice that a lot of the teams during the hackathons they just leave the the spacing exactly the same everywhere which actually makes it very hard to read and understand what are my action points what are the groups what should I do now so it also affect your uh affects your ux as well yes oh yes you're fine cool uh last but not least speed versus Perfection yeah so if you want to win a hackathon CTIC already mentioned this but I would highly highly recommend you to build a project that's based around one core feature and you can add order decoratives if you have time for it you probably don't um extra points if you can make it funny but don't stress too much about things you know like Graphics animations gradients whatnot like be simple about it and um when it comes to scoping your uh scoping your uh product um make sure like you first draw a very simple diagrams very simple wireframes make sure like the all the scope for the core feature is there and leave the space for all the you know additional features just in case you actually have the time uh have the time to implement it so you can ask yourself a few questions when you are building a core feature and when you are adding those those elements and first one uh what is the full scope we want to build right so write down all the steps and interactions and make sure you didn't forget about anything um next is how end to end flow looks like and think from the very beginning to the very end before you start designing I know it sounds very simple but I noticed during the hackathon you know there's a lot of stress it's chaos in the teams like just remember to be be very consistent and start from the beginning to the very end because then it's easier to cut down the scope that you wrote down and develop whatever is is feasible rather than remembering that you forgot about one very important step and now we have to add the screen and oh my God it's chaos uh so make sure you plan everything accordingly uh how can we simplify uh user flow we already touched on it what info is irrelevant what can we hide or even remove from the from the UI is it readable so like you know put content into the blocks and can we divide longer flows into by size uh b side steps like so these are the things that actually can simplify your flow even if it's very complex tooling no matter what you're are building like make sure it's it actually reads well and uh last but not least what are the design blockers for the deaths so uh CTIC also said that you should start development from the hardest feature and this also touch touches on it because um your devs or whoever will be will be calling it it may be you uh you usually want to start designing your U also from the hardest part during the hackathon because when you do product design you start you know from the connect wallet whatever some some different some different states for for the for the transactions start designing from the core feature and then remembering that you actually might add something later on leave space for it and then you can start just uh slapping it in uh in case you actually can uh okay so that's the intro pigma Basics and now this is going to be tricky okay bear with me uh this one yes I need to do it like this because I cannot mirror my scen uh so this is figma uh even if you never used it you probably saw it maybe in adep mode if you never saw it this is this looks simple but it's actually a very powerful tool that can be used extremely simply to actually produce a good good quality UI right so like you can um just when you have time just look around like you can you know draw some shapes you can draw some parts at text here you have some plugins Etc so this is in the top bar what's important when you're building a UI make sure like you have this Chevron make sure like the snap to pixel goup is selected it will help you buy a lot and especially in the development uh so this is the top bar now we have sidebars on this sidebar you actually have your pages so for example one page can be dedicated to your final designs that actually are ready for the development and you can create another page for your Workshop so all the mess is hidden away from the devs and they don't come at you and ask you hey okay which screen is finalized or not so that's uh that's what I would recommend you doing here you can see your layers they are not very needed for anything and this is where pretty much all the designing happens so here you can you know align your align your elements um you can uh you can adjust the sizing outo layout you will touch on it this is magical tool that you will use I swear when you when you know this um yeah you can add your field stroke you can add different effects like Drop Shadows layer BL blurs whatnot and also you can export your uh designs for example if you want to put them into the slid so you just select a layer export and and you're golden you can just you can just add it to the uh to your slides but um you know looking for all the tools it's extremely annoying and it takes a lot of time and I think learning shortcuts is very easy because you use it one or two times and you already already know exactly how to use them especially that figma was made by designers for designer so everything is just ridiculously simple so pretty much all you will need on Mac is option command shift and I think it's control alt and shift on the uh on the windows and just play around with it so you know you can duplicate by contrl C contrl uh V or you can just uh hold the option or out and just drag it and there you go you have beautiful beautiful duplicate right I will give you the list of the shortcuts at the end so you can take a picture uh duplicate and move with shift the same I'm holding my option but when I actually hold the shift I can move the same element into X and Y AIS which actually is is also very very helpful especially when you are you know drawing like some inputs or cards or whatever you want to align them instead of doing this visually and then your Dev is like what the hell what should I do with this um everything everything looks very tidy check spacing this is something think I oh my God every designer uses it just thousand times a day you just hold option or alt and you can see in pixels what the distance between elements um this is very helpful right now it doesn't look that powerful but once you actually start designing and you start seeing like this you know different movements and uh pixel differences it's it's actually very very helpful uh mirrored scaling uh you can scale it like this and try to be you know somewhat precise but you can also just hold your alt or um option and just drag it and there you go you have you can just um scale the very um very proportionally and yeah this is the proportional scaling which is K so you can scale your images like this and it's fine with the images but for example it doesn't work with text right like it just changes The Binding box and you might also experience this with some like illustrations and whatnot and then you want to use K so this actually will scale my my text how big I I want it to be here I can Define you know the width and the height if I want to be Pixel Perfect with it's the hack so don't worry about it too much we will figure it out uh sample color very easy this should be yellow I and it's yellow and uh one thing I think this is something that actually helps a lot and you will notice that it it's extremely important which is bring to to to front and send to back because you know sometimes you're moving elements they are overlapping something is on top and you're like what the hell and now you're right clicking looking for it it's just bracket just use the bracket and you can you know move everything up and down uh this is this is extremely helpful and of course zoom in and zoom out with command or control with scroll and navigate uh hold space bar that's it and you can move very very easily throughout your uh your workspace so these are all the shortcuts that you will POS like you will let's go back okay uh so so I yeah so we are behind the interface let me here but now you want to hack your interface right you know the shortcuts you more or less accustomed to the figma uh but there are still a few tips that you need to remember about which is consistent color palette guys just just one color black white one primary color you're good to go Your Design will look super clean it will look super simple everything's readable beautiful um uh consistent spacing also important um find your vertical and horizontal Rhythm pretty much right so you can use whatever system you want but it's important to actually have one uh it's it not only uh speeds up the development but also makes youi way more readable making sure like the you know the margins are the same the um the distance between button or a text is also the same you just you can just copy and paste your um your components which which you probably will do but yeah that that's just something to to remember about and keep it tidy um yeah not mandatory would highly recommend it during the hackathon figma gets extremely chaotic and especially when you start designing for the first time for example this is extremely chaotic hard to find screens even you cannot find them uh if if asked for so just group them per future or user flow that's it just group them make it nice keep your playground on on other page and uh and believe me it will it will speed up your process by by a lot okay so this is the end of the rules um now I want to show you the core of your hackathon design okay so this is like the introduction to figma um because you will need to edit the components but there is figma community and guys everything you need will ever need for your hackathon and for your UI is inigma community um let me go to show you yeah so it's this little guy here if you cannot see it you just have like in the drop down you have FMA community and your profile everything you will ever need to create a UI is here so you have all the you have UI kits wireframes illustrations whatnot and even uh a completely finalized product so for example what do you want to build a bridge right and there you go you have a bridge and you just copy paste it you can change the font you can change the colors you can change the theme but like the main the main thing is already there so I really encourage you to use figma uh figma Community it will help you a lot and uh save you a lot of time Googling pretty much that that that that's what this will do save you a lot of time Googling so all the uh um all the all the assets are are there alongside with the PEX by the way you don't even need to use anything else other than figma but yeah let's say you want to draw something very simple uh and you know it will take you more time to look for it in the figma rather than just drawing it from the from the scratch uh so there is AO layout this is this is super uh helpful um designers use it all the time and I cannot imagine myself not using it during the hackathon uh because it speeds up process by a lot um let me show you here oh okay this is going to be this going to be challenging okay first of all I need to I cannot hold the microphone Mon oh okay now I have my personal microphone stand thank you uh okay so you can draw different components in two different ways right so one is very natural for our brain and usually I I can see almost nothing so you have to you know um excuse me but uh one is very natural for your brain so you think you want a model right so when you draw a model you have a rectangle you want to have some color you are adding some uh Corner radius you are adding some stroke right whatever St and then you are copy pasting it because you know you need the uh because you need you know you need the buttons and you also need the rectangle for it so you just copy it and now you take the icons and now you bring it to the front because you already know how to do it and then you take the Tex also bring front and yeah now you're are in a this very weird situation in which like you know just two very simple input Fields become problematic because like you have to align everything uh manually pretty much like okay I can do this right and I can do this but then I can see at the top is 11 at the bottom is 12 everything is not Al line I have to go ahead do it manually drag everything if if I don't notice this issue in one component then and I copied this already then I have to go you know all over again all over the components it works great um and it's just a huge mess it takes a lot of time and it might not look look like it right now because you know like I'm doing it very fast but once you have like few screens it actually starts becoming annoying and it's actually annoying in the development as well uh so what you want to do instead is actually do not start like from the uh big portions so do not think about the background and layering on top think more uh about like the actual content you want to have there first so I will copy um I will copy this the metamask right and now we have this amazing thing Auto layout you can click it here or just go shift a and in the outo layout what it actually can do is you can Define what the elements inside of it are doing exactly so you can say like it should be on auto which is like just stick to the to the sides of the uh ping box or like you want the pixels like to be like the elements to be six pixels apart and you can do it for all your assets very quickly without you know uh without doing it manually and wasting five hours of your time during the hackathon uh and now you can see we have a frame so what do we do do we draw a rectangle no we add a field to it we have a field and now oh yes we have the stroke of whatever color and we also want it to be of course maybe have a corner radius and now you can Define the margins for all of them so let's say here should be 12 and now you have a beautifully built component that's actually scaling with how you move it because imagine that you actually want to make it wider make it color make whatever with it uh for your for your project because you are designing you are not accustomed to it so you want to change it a lot and you can actually do it with the AO layout very easily instead of you know just um just messing around with the yeah with messing around with the manual uh adjustments so outo layout is something I would highly recommend using and actually you know when you try to draw it I I recommend you to just try drawing it like connect wallet uh just so you get the feel of uh of the of the feature because later on it will be needed to actually edit the components from the libraries all of the libraries I are built on top of the auto layouts so if you will want to edit something you need to more or less know how the how they behave uh but yeah um the libraries uh when it comes to the librar is there are actually uh figma has libraries that also uh have code so for example like you can find mui like you know some Tailwind whatever there is you want to use there are most probably libraries that uh that are already in pigma that you can reuse so it's ready to go you just copy paste it change the text change the color your golden UI is is done because someone else already Drew all the elements for you um but yeah a few not notable mentions of the libraries that I've used in the past but uh but you can use whatever you want so shaten it's not an uh npm package but it's beautiful nonetheless uh mui of course this is probably one of the most extensive libraries on on figma and design also very nice um radic steams built on you know things built on Tailwind what whatnot uh on the react everything is is in figma and Untitled you so let's say like you're a Dev you know you have a framework that works very well for you you can pretty much do any UI very fast so you don't really care if if a person uses are ready to uh ready to use uh elements from the from the library Untitled UI doesn't have a code but it's extremely beautiful way well thought out always updated so I also recommend this as a um as an option to go or just search for UI kids uh whatever you need and now last but not least how to use this library right uh we have to do something with it um so let's say I want to have a button in my component so let's go here UI kits let's go with the Nui because why not I want to open it in figma I always make a copy make a copy because only then you can actually edit it it's opening I'm finishing guys I promise I know it's very compact but I I swear it will be very helpful to you uh yeah so as you can see here can I grab it yes as you can see here you have all the components that you would ever dream of um cards I cannot see what it is checkboxes yeah and you have buttons but then you see like this huge amount of buttons and you will think oh yeah now I have to go and copy paste every button from the library right uh not really so let's copy this boy um this widget was already made in Auto layout so I will show it to you here so now I want to add a button at the bottom right so I paste it at the bottom of my uh of my wallet connection and in in this case you know I would have to go like this and manually adjust everything make sure the spacing is right is just a nightmare takes a lot of time and in this case you just grab a button you can change this to fi container or you can just drag it manually it doesn't matter do what you feel is right for for your usage you can just change the text to a connect and now actually because you already have a wellb built Library here on your uh right side you have all the state defined in the design system that you are using right so you can use the outline version you have use like the elevated version yeah the mui is over the top but you get the gist uh you can have a focus you can show icon oh yeah of course it doesn't work like it should uh you can show icon you can do whatever you want with it you can also you know uh change the margins inside of the button so you can pretty much do whatever you want um with the components and all of them are built with the auto layout so for you to know that there like out to layout options to use it's uh is is very important and also uh extremely extremely helpful questions sorry that was longish but um yeah I hope it it will actually help you to deliver some um some UI worth seeing no questions cool I design so guys if you want to asking questions it's a good moment to do so yeah I I will be around so if you will have any questions just yeah just ask or you can drop me a message later on um yeah but that's it thank you very much cool thank you so much