AsyncAPI Let's talk about contributing, 31 Aug 2023

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Let's talk about contributing: Design Renaissance

Description

https://github.com/asyncapi/community/issues/846

A

A

B

Okay, um we are live, hey everyone, hi, welcome to today's live stream, um yeah. So a quick introduction about me, um I'm Haze and yes, you might have sent me uh in a couple of um live streams. um Yes, I love, Austin, live streams, I use the hostess and kpi. Let's talk about contributing um the community meeting, um a lot of other live streams, and yes, so today's live stream is actually about.

B

Let's talk contributing to async API right so I mean you might actually go ahead and check out some of our previous um episodes of let's talk about contributing. um Yes, those are really interesting. um Live streams right, um but today is actually different right.

B

Today's live stream is different, uh which is also like a let's talk about contributing live stream, but it is not just contributing to code right, which is like I'm I'm super excited about um today's live stream honestly, so this live stream isn't about contributing to code, but instead we are actually going to be discussing talking about. Let's talk contributing to design right. So if you're a designer I mean this is going to be an interesting session for you, um you don't want to miss out on this um session.

B

um So it's me today, I have like a really amazing person. um She has been contributing to open source design um for a while. Now and yes, she is the perfect person for me to like invite for today's live right before I got it. um I just want you to know. If you find these um sessions um this session really interesting.

B

I would advise to like check out um other um past sessions of let's talk about contributing and yes, so you should also like make sure you subscribe um to our YouTube channel to stay tuned um for other upcoming episodes of let's talk about contributing yeah. So that's just it um so today, with me, I have an interesting fellow and a good friend of mine uh Maya.

B

um So Maya is actually a really interesting person, um a really good person to like work with um with a very vast um amount of knowledge when it comes to design right. So I'm not gonna into the introduction for her. So I'm gonna bring her up stage now and let's introduce myself. Okay, so I'm bringing my Yahoo.

B

B

How you doing I'm.

C

Fine, what about you, how are you doing.

B

I'm doing like I mean I'm, so so um happy. You know to have this session with you.

C

I'm happy to be here as well.

B

um So before we get started, do you mind telling us? Oh my eyes like who is Maya.

C

Definitely hello everyone, my name is, you can call me Maya as well: I am a user experienced researcher and designer at async, API and I've been contributing to the design uh for like a year now, I guess nice to meet you. Thank you.

B

Wow, that is actually interesting contribution to a Sync, API design, issues um for I think over again now, right and also I think he also participating in the Sync API mentorship program as a designer.

C

B

Oh yeah, one of the shoe designers we have is actually interesting.

C

B

um Do you do you mind telling us like about um your journey into um design and specifically into open source design.

C

Okay, my Journeys I had two years ago: I guess when I started, I didn't really have a laptop to work with so I used to like go from school, come back home to where my Dad's laptop to walk to design. So once I'm done, I'll go back to school again, if there's any hackathon or any design competition I do participate in it. So it was last year, I discovered async API on Twitter through the technical writing. I think this circles, detox I'm, not sure about that.

C

So they are recruiting technical writers and I wanted to participate as well so I applied, but unfortunately, I didn't get accepted. So I was like. Is there a way to contribute to the design here? Because I would love to do that and I said with the design and ever since then, as I said, designing the I said with the speaker cards for last year for the conference websites. Sorry for the conference for the using kpi visual conference.

C

So after that I've been doing some other design issues, design contribution, I'm presenting right now, I'm working on the Asin kpi design system and design audience.

B

Wow that is actually interesting. You actually went from not like having your own personal laptop to like um designing uh for instant kpi I mean that is one hell of a journey, but I mean like what's actually um made you think um open source is like the right. I mean like I, know a lot of designers, but I I've made a couple of designers that um I've tried talking them into like contributing to open source project, but I mean like I, never yeah, I never get anywhere um with that, but I mean like.

B

What's what made it different for you like? What why do you think open source is something you want to like contribute to.

C

Okay, so the first time I had about open source I was like was open source. What is it all about? Well, uh the point is the major motivation for me was that I wanted to contribute and give back to the community. As I said when I started, I didn't have a laptop or fortunately, I was able to want a laptop through.

C

She called Africa was just like in NG organization, yes, and one of my motivation was I wanted to contribute to open source I wanted to give back to the community, so that designers can also be in open source. It's not just about developers or technical writers and the likes.

B

I mean that is actually another motivation.

B

Contributes to also's um I think full time, which is actually interesting, uh yeah, but so before before I get like um diabetic, and so what are we doing today? Like I mean it's, it's all about open source, right um and design um so want to tell the audience like I would love the audience. You know um what it is we are doing today.

C

Okay, so for today, I'll be showing you how to start your first contribution. Oh sorry, our science first contribution as a designer I'll show you I'll, walk you through the process of finding issues, design issues on GitHub to bring in your figma assets, from your of removing your asset from figma to GitHub and showing the community what you are working on. So that's! Basically, what we'll be doing today.

B

Oh my I mean this is going to be an interesting session. I mean I, haven't like I've I've, seen a lot of um I. Think we've hosted a couple of let's talk about contributing, which is mostly about code related um I, think this is different right, so um hey folks, we are going to be going from zero to actually making an actual contribution uh design contribution right.

B

um So we are actually going to go from searching for your first design issue um to actually designing that particular issue which which basically resolves up the issue you picked um to actually opening a prequest like I. Don't know how it's gonna happen, but I mean like Maya, has experience. So how do you I mean like if it's?

B

If it's a code contribution we know you're gonna have to like open a pull requests and do stuff, but I mean I, don't know how that works when it comes to design contribution, um so Maya is going to walk us through all of that right. um So it's going to be an interesting session, so you better go grab that cup of coffee or you know that bottle of water uh and hang tight all right right. um So Maya. um How do we get started?

B

Do you start sharing your screen or you mean, or do you have something you want to tell the audience before we start.

C

It I'm going to start by sharing my screen.

B

Okay, I'm ready, I'm ready, yes, you're horrible.

C

Okay, so the first now I'll be going I'll be doing, is going to the top.

B

um So let me know if you are having trouble um with a screen. Maybe she's gonna like have to like zoom in a little bit um so yeah, but I can see your screen now. Can.

C

You see my screen: yes, okay, all right so top interface, user interface, so I'm going to start by checking out async API. Let's say you have already found a community you want to contribute to. So all you need to do is to search for the community.

C

B

C

So this is yeah a lot of they have different Repository I caught the repository, a branch. No, is that like because the branch has another meaning you know open source, sorry in GitHub, so what I mean by branch is like the main projects you want to contribute to asynque player is like a tree, so the branch is there I like we have websites, we have modeling. Now we have Guild. Those are like the bantries on that is in kpi.

C

So let's say you want to start contributing to design or research I'm going to start from here using kpi website. Then I'll go to issues here after the code you have to use.

C

And I'm going to search for design.

C

So yes, yeah you're, going to find all the design issues under the websites.

C

So you are going to just anyone you're interested in just like click on it and start working. So let's go back to the main async API, okay um yeah.

C

So we already prepared and issue for us to work on so I'm going to right.

B

Okay, so we we are actually looking into another project on the async API, okay, but Alina.

C

Okay, so this is madelina.

C

I'm going to go through that same process. Oh, you know another issue, yes and searching for a design issue.

C

C

Improved layout of improved layout of playground, redesigning modeling our websites, so this is interesting. Ui, yes in mind, so let's click on it. Please confirm if you can see so my screen is.

B

Yes, we can see a screen Maya.

C

So, yes, the issue wants to contribute to redesigning the modernized websites, well UI ux in mind. Okay, so let me show you the model in our website.

C

So here is the modeling our website and the EGA as a designer. Looking at this we'd have seen. There are a lot of issues there to work on looking at the uh the icon here, the logo, the Modena logo, is too small.

C

So let's go back to the issue and see what exactly they want us to do it so inside the current websites of Modena is not happening like the async API main website. Okay, so I want to see what the main website looks like. How is it that the modernized afternoon, okay,.

B

C

Oh I see so this is the AC K5 mini websites, nice.

C

It's not appealing and it's not mobile, responsive. We have two things now and doesn't have all the features and information that users need. What are the features and informations that you want the users to see. We are going to check that as well the one the one the website to be improved to be more user friendly and informative. Okay, also, the ducts of moderna, should be integrated while keeping ux in mind. I, don't know what that means. Dogs right.

C

So there are some few issues that we can improve. Okay, so, let's get to it here is the details of what they want: designing the figma mock-up for a complete website, including Docs I. Don't understand that building the UI for the design, okay, I think I get that integrating the docs all right.

C

So let's say this is an easy. You want to work on and you are interested in it I'm just going to make a comment below here.

C

C

Had okay, so let's check the name of the person.

C

C

I'm interested in working on this issue.

C

Foreign, so let's say the person has already accepted this. You can buy it. The first thing I want to do. Is you don't just want to go to figma start designing without understanding or seeing the fonts the typography, the colors they use here at a Singapore.

A

C

I'm still going to go back to GitHub and try and search for the design system. If I'm going to find it.

C

Can you see this spring.

B

C

So yes, it's in kpi, okay, under the Ripple, let's set for branch.

C

Okay, so we can see a Secret guidelines, print burdens and strategy.

C

So yeah, just scroll down under the assets want to see the assets.

C

Okay, I'm not seeing anything here so I go back.

C

Okay, I can see logos.

C

Okay, let's just go back so and search for peace right.

C

So I'm at the repo and I'm just going to look for the brand yeah, okay.

C

Okay, let's see if this works.

C

Yeah so yeah we have it. We have the brand guidelines. You want to check out what it means by the front guidelines. I want to see the logos.

C

So we are we're designing the modeling as random page. So let's check the logos to see what we need there.

C

A

C

Okay, so yeah we have the logo for Studio. We are from nutellina. We are working on the modeling around the page, I'm just going to perform with them.

C

C

So here we have the.

C

C

I don't know, can you see my screen.

B

Yes, we can see your screen.

B

B

um So what are we looking for right now, Maya.

C

I'm looking for the model, okay,.

B

So I think we should. You should be going to the logos directory.

C

B

Okay, yeah yeah.

C

That's it I can't find it.

C

C

Okay, everyone, so once you are ready to get started, we are going to be invited to the figma board where you can work on all.

C

Let's just look for the design system here.

C

We have the colors yeah I, have the color here and how to use them.

C

So I already have this on my figma board, so I'm just going to show you straight something now.

C

C

So, can you see the screen.

B

Yes, we can see.

C

Okay, so I have the asyn kpl figma board and I have my own personal workspace, where I have all my contributions to async kpia. So let's say we are very decided. I want to start designing the modelina I'm going to name this.

C

Here we have the colors typography and everything you want to use this year.

B

I mean: how did you get all of this information.

C

C

Okay, so, as I've said once you are done once you are ready to start contributing, you'll be headed to the figma, but where.

B

C

So on the figma, but you already have the colors typography and everything you need to use. Yeah.

B

Okay, that is actually interesting, so you don't have to like worry um about anything. So you just.

C

B

Get uh invited to this um board.

C

Yeah so, instead of me, looking for the logo and designs.

C

Design skin, once you have been invited to the board.

B

Okay, make sense.

C

So I'm going to print in.

C

C

So this is the page I want to work on. They want us to redesign right.

A

C

Going to make a screenshot of this.

C

To serve as a guide.

C

And we'll be starting with the wireframe. The reason why we are going to be starting with the wireframe is that so you can give the team enough time and enough chance to brainstorm on what you have done.

C

You don't want to go straight into the design and start editing modifying stuffs every time.

B

Okay, so we are going to before you start a design contribution. You don't want to start designing. The final uh look, so you want to First, have a wireframe, so the wireframe is what you can use to collect feedbacks on how of the let's say the layouts should be right or am I wrong.

C

What he says, I can.

B

Yeah, can you hear me.

C

Yes, I can now.

B

Yeah I mean like the wireframe right. What you are you saying before you start any design contribution. You don't just go straight into like designing the final look you have to like. First, um have a wireframe just to collect feedback.

C

Yeah- and that actually also depends on you- some people are not comfortable with during the wireframe first I start designing, so do whatever works for you, but for like getting more feedbacks and for your work, it's better to start with a wireframe.

C

It give you enough times, like editor modified stuff before showing them the final look of how it's supposed to look like.

B

I mean open source requires patience right, so you should definitely do something that would make much like that would take time. Like you know, you don't have like being annoyed.

B

Yeah I would buy into the idea of the wireframe.

C

Yes, yeah about yesterday with that so I'm going.

B

To be dropping.

C

These shots, okay,.

C

C

And after by clicking on the frame.

C

You don't select the free, Ctrl, F right and yeah I'm, going to use a desktop and MacBook Pro 16.

C

Do I need to zoom in? Can you see my screen.

B

C

So the first thing I want to do here is to create the to create. The number here is the number where we have the modeling examples: playground, API, docs and star on the top yeah, so I'll do that by starting with the text.

C

C

I already have the modeling.

C

Start with examples.

B

I mean: are you sharing your figma file right now, because all I can say is just.

C

I'm, so sorry, yes,.

A

C

So I already have the modeling and, as I said, we are going to be starting with the nav bar. So here is the examples and trust me. You want to use the um text frogs, we already have so once you have been invited. As I've said, you have access to text short at home, um okay,.

C

I didn't see my screen. Is it moving because I think.

B

So all I can say is just examples highlighted.

C

C

B

Yeah, you can see now.

B

Do you mind zooming in the Beats detects are like way too tiny.

C

Okay, so yeah we have the example I'm going to use the.

C

I'm going to change this to.

C

Okay, I think that's fine and I'm going to give this an auto layout.

C

And change this, so the point of giving your frame Auto layout is to make it adapt. So any content you want to put inside so let's say I didn't give this okay, so this is how it works with auto layouts. We have examples, let's say uh one two something this is adapting right: we don't give it an auto layout. This is how it's going to look like.

A

C

So this is a text without Auto layouts. Let's say I want to write. I want.

C

Right duplicate, it.

C

That's like how to scale it down.

B

C

You see, but with this it's going to adapt, so any content you put inside.

C

So the next thing we have there is the playground and I'm going to change this I'm, going to name it as examples.

C

C

uh What's that, what do we have playground.

C

Hello playground and yeah, it looks.

C

Winds changes to playground.

C

C

So I'm going to have the top, as you can see here from the screenshots.

C

We have start on YouTube I'm, going to create that as well.

C

I'm going to look for a YouTube iPhone.

C

I already have my plugin, the plugin I use for the iPhone and I'm just going to use iconify.

C

Okay, where is it.

C

Yeah that was my last search. I guess: okay, I'm going to go with this! One can I just drag and drop it Geoff with my body or you can download it here as well.

C

B

Okay, for you all that are just joining the stream, um so what Maya is doing right now, um so why? Why is creating um the wireframe for the uh design she's going to like do for the motivina website? um So that is what she's currently doing.

C

Yes, yeah. We have a high coil.

C

C

I mean these are not only after as well.

C

Close I'm going to make the state bottom.

C

This is wireframe, we'll be using the colors just to show them a sketch of what I'm supposed to play. That's amazing, anymore,.

C

Yeah I'm going to give this a corner radius of 4.

C

You can select the screen.

C

And give it another layout.

C

Select this as well and give it I'm not clear. Thank you!

C

Okay! So since you already have the yeah I'm just going to bring it here, okay, let's change the color first, so it can make visible. Okay,.

C

I'm trying to scale it down, so it won't look too big.

B

I mean the the logo is white in color. Are you gonna change it or something yeah I'm going to change that? Okay,.

C

Okay, so um now why is almost done since then? It's on auto layout.

C

Yeah I was supposed to give the frame a layout.

C

I'll make the sound shows this system.

C

And the work I think so.

C

The space in here is the margin, the white space here, and here so that's like it's imagine so you can increase, it can be 80 depending on what works for you and gotai is the white line beside the column inside the column. Okay,.

C

I'm just going to give this a few color.

C

C

I'm going to stretch it out.

C

I'm trying to increase the space in here at this end, so did you have icon, is supposed to stay here.

C

Don't worry, I'm going to change the color I'm just trying to fix this first yeah.

B

It's looking beautiful already, okay,.

C

The ones that is going yeah can you see the model is also staying here.

C

I'm going to hide this very well and the playground is going to be white.

C

We've been swimming I make this.

C

This is brought in as well I'm going to make your white any content inside is going to be black.

C

So it can be very simple.

C

B

Nice I really have enough.

C

Okay, so we are done with enough. As you can see, this is not sitting where it's supposed to sit.

C

Supposed to be here right, so you just click on it and who is the space in here done.

C

So, let's go back to our screenshots. Okay I need capture on that scriptures, I'm, just going to show you so I'm, not in you can notice on this website. Apart from the logo.

C

That's that is small is that this modelina is not big enough and nothing is as a user. Let's say, I mean he's all right, I, don't understand what this section is all about: I, don't understanding making it better.

C

So and we are going to be using dummy text, don't forget I said it's a wireframe, so.

A

C

That accepted you can start with creating texts and all of that, so it's going to be removed.

C

Now I'm going to change this.

B

Yes, yes, we are still sharing the weather in um I.

C

B

C

Okay, so let me do so what I said was that I was going to start with the text or the modelina I like and I'm, going to change the size, the font size so adding Excel I, adding large Modena is a website on his own. It's not like it's inside uh another.

C

I'm going to increase this and give it another layout as well.

C

As you can see, um this is sitting like is left aligned; okay, it's even middle! That's fine! I'm! Going to change this to okay.

C

Okay, bring it down duplicate it I'm, trying to make the text.

C

So I'm just going to right click here and look for Lauren the dummy text yeah my.

B

C

Okay, so you can select like um just inputs how many sentence you wanted to generate. So let's have it for let's see how that looks like okay, this is not what you want so I'm just going to reduce this and make it sustain itself.

C

And scale it down yeah, that's fine.

C

Yes and I'm going to reduce the goodness so I'm going to change this to video. You don't want it to be too good and it's perfect and leave it unlocks.

C

I wanted to wear, let's say, throws yeah got done with the first session.

C

C

What I can understand here is that, okay, yesterday immediately with modeling through smkps here, like it's like you're, telling us how to get started with modeling, so let's try and create something see how we can modify this make it look better.

C

C

I'm going to duplicate this for the Lena, bring it out. That's the fun part of water, layouts.

C

And I'll change this to how so yeah that's it. As I've said you can, all these texts can be changed later on. The point is to show them what you want to present your work.

C

You need to secure this down to 36.

C

C

C

I'm going to duplicate this dummy text as well, because I want to explain how to get started. Just like a brief introduction on how do we get started with modeling.

C

If this are not the layout as well same tights and give it shots, I'll change the screen so.

C

Okay, so now we have this and.

C

I want to represent this.

C

I'll be using shapes, well images, so, instead of like downloading the images it's going to.

B

C

C

So uh the first thing is this: before your ship I'll read the rectangle.

A

C

Bring it down here, this right time is going to serve as this image we have here.

C

Thank you and I'm going to start with my texts. We have, uh let's see kpis here like get started duplicate this with you, I will.

A

C

I want to reduce this, you don't want, it should be well, let's go with 24 and that's fine.

C

C

So we have to get started using I'm, actually going to use the rims.

C

C

The green results please change this feel so black.

C

And the inside the text inside.

C

C

C

C

I want this rectangle to fill this container, so I'm just going to click on it and add.

C

Make you feel container.

C

So this is the design I'm proposing right.

C

Okay and I'm, going to give the whole rectangle a few color.

C

C

You need to give this a Cardinals performance.

C

I need to make you feel anything, your wife, okay finger, always fine.

C

C

Then give it to you for now: readers, it is fine.

C

I'll create the secondary builders.

C

You want to change the text to White because you don't want it, so it looks important.

A

Came this this.

C

And set it to the middle, not Steam, okay,.

C

So yeah we have the first image.

C

I don't like the way the video on GitHub is looking so I'm just going to play around and see what works.

C

C

C

C

So we have this order. What happening I, don't know why that is there or what is like.

B

Oh, you mean the code Snippets yeah.

C

B

Yeah I mean it's just uh probably a faster way for you to like get started I'm just like a single line of code and boom.

C

Okay, so let's try and incorporate that to this design as well, so I'm just going to duplicate this scale. It down.

C

C

Depending that's the whole point of the wireframe, so let's say you don't want this. So let's, let's try and bring it here or.

C

Just don't bring it after yeah, so.

B

We have okay, so we have like three options.

C

Let's just go with this one, as you can see, we have to sexually. We have the async API CLI and the installation so I'm going to go back to the top and okay duplicate this as a second one.

C

Then give it auto layout to put them together.

C

With this as well, because this is the section explaining these two images.

C

Okay, moving forward.

C

I'm going to increase the Heights.

C

So the next section we have section we have here is the usage. We also want to represent the usage. How is modeling available all.

A

C

Okay, I'm going to duplicate this, how to get started frame.

C

B

I mean you're not back in figma.

C

Why do you say, oh okay, oh God,.

B

C

C

It's not bad to use this. The ones I already created yeah, it's not bad! So, uh let's see size.

C

C

So I'm going to be using another image represent sorry a shapes represent this. Then we have a text here right: okay,.

C

Then, let's you have the image: okay,.

C

You don't need this one here too, can I see the way the auto layout is working. You don't have time.

B

I mean it's actually fantastic yeah. It.

C

Is I love it okay? So this is our image, and this is a text.

C

I want to make this more visible or.

B

C

I'm just going to play something like this step, one without a walk and that all depends on the feed on the feedback you get. That is what they were.

C

Designing same excuse me.

C

I want to make this more visible.

C

So we have our image and a little text on that all right, I'm going to bring this out.

C

These are putting it inside, let's just bring it down.

C

Still, looking small I don't know, okay.

C

Let me keep going all right so.

C

This is step one.

C

C

Then we can have this step through.

C

I'm going to give this enough to layout as well.

C

Let's delete this and to take this, bring it here.

C

I want to step one step, two and I'm going to bring it to the other side. Sorry.

C

Means coffee, okay, let's just pop it on here I. Did this make this that green.

C

I think we have like four Images right.

C

Oh yeah, what to eat.

C

B

I want to show them. You are still in.

C

A

C

I'm just going to group all this together.

C

C

I say we are done with all these images right next thing is.

C

So here is this trick: I used to do we're so freezing the super from scratch. I'll just screenshots is from here.

C

From the website.

C

C

I'll bring it back.

A

C

You know what you can also design it. Do we still have enough time.

B

C

C

I'm not sure we have a safe API as the don't worry I'm just going to copy.

C

I think it stops.

C

I'm going to have my text here, it says evening.

C

A

C

Next alignments.

C

Okay, this is so big, so Avengers still.

C

C

A

C

C

C

I thought it was real, then we have. These two shows.

C

Yeah, it really helps uh a little boy I'm just going to copy for you.

C

I'm gonna have it here I'm going to use my plugin.

C

Let's just use EPUB logo for all the.

A

C

C

A

C

You need to change it because.

A

A

I haven't changed.

C

Yeah the first one.

C

I already have shown someone.

C

C

C

I'm going to group The modelina and this text together.

C

I'm going to have this.

C

C

C

C

Sorry I'm still going to change the color I'm just trying to make it fit.

C

I'm just going to change this color of this photo, give it a few.

C

I'm going to give it a pad in here top here, I'm going to come to the side.

C

Let's see object before.

C

A

B

I think we lost Maya.

B

um So I think we're gonna have to like wait for a few minutes to see Maya I'll be back, um I think she's having some internet um Asia.

B

Okay, I think we lost Maya, so I'm going to reach out to her to see what the problem is.

B

I'm, so sorry for the um delay, um I believe Maya will be back in no time.

A

B

Okay, so while we went for Maya um so have enough time to go through the comments, um okay, so we had um greeting from Savio hi Savio thanks for joining this stream, and we also have Umi um thanks for joining yeah I can't wait to see up the design. Also, it's been amazing. So far uh we have um big from twitch, hey Biggs.

B

uh We also have Comforts High Comforts um thanks for the cheers, so we also have ulumi day um said: I, don't have much knowledge about design, but the process does seem attractive to me. Yeah, honestly, I don't have much comment about design also, but it's like during this stream I felt like a designer Italy um yeah, thanks videmi.

B

um This is so interesting and fun love. It's yeah I also love it uh I mean like yeah. It looks like a network issue. um Yeah I think she should be back in no time and yeah. So if you have any question, um I believe this is the best time to like to comment. And yes, so we can ask Maya once she's back, because I also have a lot of questions actually I mean I. Have so I'm gonna be asking her so yeah?

B

If you have questions, please do feel free to like drop them in the comment in the comment section below yeah. So if you haven't also like like um subscribe to this YouTube Channel, please do that now, because we will have um so much uh content I'm running up in the future, and we also have some past um streams you might want to like check out.

B

So my eyes are back yet so she should be back anytime from now and yeah. So while we wait for Maya, I just want to use this opportunity um to also like tell your folks about this and get back conference that is coming up so I'm going to share a link to the conference website.

B

So you might want to check it out and.

B

Yeah, so this get back on, French is coming up. um We have like um different.

B

um The conference should be held in different locations across the globe, but we have the one coming up right now, who is in London um yeah? So if you want to, if you are, you know in London or you closer to London, and you want to attend this get by conference that is happening in London yeah. You should probably go purchase the tickets right now, um yeah. So looking forward to like seeing um you all there I mean it's going to be an amazing conference, yeah. So still waiting for Maya.

B

So it's hey Maya.

B

Are you there hi.

B

Hello hi welcome back.

B

C

I'm, sorry, can you hear me? Yes, I can hear you yeah right, yes, I'm! So sorry.

B

It's fine, it's fine, it happens a lot.

C

Oh, let's go back now.

B

C

Is he okay now I need to see my spring.

B

um I think something is wrong.

A

B

Can you give me a few seconds I think it's showing something else on YouTube.

B

Why is it showing oh, okay, so yeah we can get started I, don't know why I'm thinking this loud.

C

Please confirm if you can't see my screen.

B

C

I, don't know, were you able to see how I did this before the network.

B

um Yeah, so you will actually um doing this alignment.

C

B

But I think you haven't got into the part where you like actually move this down down.

C

B

Was aligned on the left before you left foreign.

C

C

We have the modeling. Now we have how to get alignments.

C

C

B

Looks like we've lost my ID.

B

B

We just keep losing Maya okay, she's back.

C

B

C

Can you hear me, what's my network again.

B

Yeah I talk also like messed up.

C

B

C

So I was explaining: I want to uh Define the space between all these elements, the modeling, how to get started, use it and the filter so I'm just going to click on them, and you have 100 year right. So I'm going to use.

C

C

Click on this sorry, click on this and.

C

We are done with the design, so once you are done with the design or you want to do now is to I want to be sure, I'll element I will aligned something like this in the Berliner. This is not where we want it.

C

I'm just going to perform this a manually shift.

C

Yes, the point of this ruler is to guide me, make sure the elements are well aligned. So, if I turn on the layout grid, dancing, everything is here all around here same here as well.

C

Yes, so once you are done with the design, you want to show the community what you have done. If you are going to accept this or not no click on.

B

C

Then go to exports and Export it as a PNG or different, depending on what you want and which is PNG.

C

Exported then I'll go to the file the GitHub engine, where I made a comment: I'm interested in leisure.

C

I'm going to attach files by dragging and dropping click on this and then bring my salary. Sorry I said named: it's macro, MacBook Pro! No! It's not supposed to be that sorry! So I'm just going to change this to mode.

C

Yes, we have it here: okay and greens- I'm just going to make a comments. Please check this out space pick.

A

C

I want to review it right, so this is what we have.

B

I mean you're still on figma, so.

C

It's thank you for saving my life.

B

Yeah you're welcome.

C

So let me do this again: I'm sorry,.

C

So I've already downloaded my file and I want to show them I want to show you coming to what I've done I'm going to click on this then bring the modeling out the open, there's going to be a I'm going to say. Please.

C

Okay, yes, so this is it foreign.

B

C

Okay, so anyways you want, you want to show them this. So even if you have a slight mistake, okay- and you want to like edit it it's fine, the point is show them what they want from the design.

C

Let's see that first, they can edit our those ones later. It doesn't really matter so I'm just going to make the comments.

C

Okay, so yeah I think it has been updated. But let me refresh.

C

Yes, I made my first call to Russia.

B

Wow, this is really nice. I mean like one more thing that was I'm. Just like asking is: do you also like get to like share the feed? My link.

C

Where I did this? Yes, yes, thank you. I forgot.

C

So let's say you want to share the figma link.

C

C

So here's the signaling I'm just going to perform those things I'll go back to figma I'm, going to share this stuff click on share then copy.

C

And go back to leisure, I, already, click on the links at the link, then I'll put my URL hungry okay. So we have the link here I'm going to update comments.

C

So there you go I'm in my first contribution.

B

I mean it's actually really interesting of the fact that you walked us through um searching for design issue to designing that particular issue, then, to contributing to the issue like design I mean I never knew it's actually really fun like this.

C

This is once you understand the usual like how do you want to country? There I think it's very simple.

B

So now all we just have to wait for is um the feedback from um the folks that actually like um commented on the issue or they're hoping the issue, and so how? How does this communication work.

C

You have to do really.

C

The communication does not like work just like that. Oh I finished this, you stick it out, it takes time, can I say probably after a week or more or less, and someone said oh, this is nice. You can move on. So next thing you do is to start adding colors start designing the websites right. Once you are done, you are going to share it.

C

The same way I just shared this and developers are going to start working on it to implement. It. I think it's as simple as that.

B

I mean, like um the the um the interesting I think you just mentioned, something that actually caught my attention, um which is developers are going to work on it. So I mean like I, don't know, I know how it works in real life, but I'm curious I would also like works. I mean, like I, know how it works in organizations that are not open source uh but I'm just curious to know how it works in open source project.

B

um uh So when you say developers are going to work on it, I mean like a a contributor that contributes via a code once like implement this design.

B

um How do you have this communication with these uh developer and say? Oh I want this thing to look the way or exactly the way I've designed it. uh I mean like it's. It's it's it's open source right, I mean the the developer isn't getting paid to like Implement um the design. You also didn't get paid to design it right, I mean. So what? If the developer um starts, showing like saying um I, don't really care I just want to like implement it and you as a designer.

B

You have a test and you're like oh I, want this Pixel Perfect, so I mean how do you balance of this situation?.

C

C

To be implemented the same way I designed it once it has been approved, then it has to be implemented the same way. If the developer did not get enough for us, they will keep going on going on on it telling him what to do. Where is lagging and all of that, but it has to be the same way. It has been designed.

B

Okay, so which means you are actually at the top of the table. I mean like without your final approval, then the implementation doesn't like get matched.

C

Yeah it doesn't, since you have approved it. This is what the community we are going to work on it. You have to follow the procedure. You don't have to like change anything or even if you are going to change anything, then it has to be communicated and like do we want this thing to be changed. How do we want this change.

B

Oh okay, that that makes that makes so much sense now, because I've I've always liked thought. Oh, my God, how does this communication work I mean like so now? It makes sense that you also get to like um your your final approval. I mean like you designed it right, then you should definitely have enough, say or more say in the implementation of how it should look like okay, uh so we are getting to the end of the stream. uh So if you have any question now, is the time to you know start dropping them.

B

um So while we wait for their questions, I mean I still have another question, um and my question is uh so I'm sorry.

B

So my question is: what advice do you have for um I want to know those are designers, but I, don't really know how to like navigate uh their paths to contribute into open source, even the fact that or despite the fact that they love open source, they want to contribute to open source, but.

C

B

Are so confused on uh how do I get started like what am I I mean, like you, just showed us how to get started right uh to contribute to um to design uh in open source project right, but I mean like it's still kind of I mean it is far-fetched from what's a lot of Open Source, uh not open source, a lot of designers and I always like say I mean like I, didn't know how to get started. I mean you know how to get started.

B

Then why not get started? It's just like I, don't know I'm, not gonna, say gatekeeping, um but one of the advice. What are you gonna tell them like? What are they gonna do? What are they supposed to do? I mean somewhat of motivation or what just.

C

B

Started in contribution.

C

And so when I started, I was also nervous, like I was very nervous. I didn't know how to navigate marriage.

C

Since I reached out to community members and I'll be like, if there's any design issue you want to, you want me to work on just start with it or send me the link. So, instead of me going to get up and start looking for all the links, all the design he used to just send me. The link once I have the link I watch YouTube videos on how to like make comments.

C

Do this do the little little thing that does not need, like technical know, how to do once I'm done with the design, just as I explained now, I'm going to show interests, I want to work on. This. Can I work on this. Okay, fine, you can so I'll start designing, then send it back to YouTube. The point is you should not be nervous about this. Open source is a very welcoming Community, especially yeah I can't reach out to anybody. We have designed uh channels. You can tell us what you want.

C

How do you want to get started? There are resources that can be sent to you to understand how all this thing works.

C

Am I, audible, hey all right, yeah.

B

You're horrible, uh so my second question is so when contributing I know like when it comes to open source open source, like um it's actually mostly known for collaboration right, uh in fact, there's so many people that collaborate on something um so I I'm, trying to like think I mean for for developers, I have like experience. I know it works. uh You know for code, reviews and stuff, but I mean for design related issues like how does that work?

B

Like can more than one designer like actually work on an issue like collaborate on one particular issue like, for instance, I, say you, you did the mock-up and the mock-up light got approved and another designer is actually saying: hey, Maya, I'm, actually interested in um implementing the final design.

B

um While you like to review it and I get like um design it now. This is like more than one designer right now now this is like two designers like working on a single issue. Is there a possibility? um That's that kind of thing actually like exists when doing design contributions.

C

Yeah it does work, that's the point of Open Source collaboration collaboration, so designers. We can have uh two to three designers on an issue depending on the complexity of the issue, so it doesn't really matter and collaborate on what continues.

B

Okay, um so talking about collaboration, uh so I'm just sharing the link to this to our slack. So if you're interested in uh design issues- and you are so scared of like searching uh the whole GitHub repos or for design- it's just I know that can be overwhelming. So you can just join the slack Channel and reach out and join The Design Channel.

B

uh So just just done this on slack then go to The. Design Channel. Ask um there. If there's any design issue um I know someone will definitely drop one for you and yes, you can also like reach out to Maya personally or reach out to me I'm, Ace and Slack, so that I could refer you to some design issues right um so also so talking about collaboration uh Maya. Do you mind sharing the link to the uh discussion like the issue we just like created a wireframe for okay.

C

B

So, if you're interested in actually completing the design, so Maya already like help with the wireframe and now she's waiting for feedback right so the moment when she gets like this feedback. So if you're interested in uh contributing to these uh Final Phase of the design right I, think then you can also like collaborate with Maya on it and Maya will like help um review uh the designs for you and I. Tell you what to do and what's not yep. So I'm gonna share the link to the issue yeah.

B

So that's the link to the issue so any other question.

B

B

B

Okay, no question um so thank you. Maya I mean, like it's been an awesome session uh and, of course, like I'm, so looking forward um to hosting another design session um with you, I mean like another: let's talk contribution of design uh yeah, so thank you for joining this call Maya. It's actually been an honor and thank you for honoring um the invitation to stream with me and yeah. So what closing remark do you have before we say goodbye.

C

Is very well for me. We are interested, please join through this that channel, so it should be stuck linked and we welcome you with open hands. Thank you so much.

B

Yeah, so if you're interested in design contribution reach out to my own slack, which is very, very um active yes, so thank you, Maya for the call for joining the call and look for looking forward to like seeing you in another stream, sometimes in the future. um Yeah so have fun. Bye, bye,.

B

Yeah, so this is the end of today's um live stream. Where we spoke about contributing to of design um it's a kpi design issues and Maya actually did an amazing job. We actually walked us through and walked us from um searching for a design issue to actually designing uh or providing a solution for that particular design issue right and that is actually uh I mean it looks simple, actually uh I mean, but for beginners like for a first time, open sorcerer, it's not actually easy.

B

So thanks Maya for like for the help I mean like if you want, uh if you want to feature actually, if you want to feature um on one office to get that live streams yeah, we we feature a lot of folks um to that we can. That can share that knowledge and stuff. um So you can also like reach out to me. I'm slack object to Tully.

B

If you want to feature on one of it's in kpi, um live streams right if you under, if you, if you contribute to using kbi- and you have like this thing- you want to share with uh with the community which Community um so you can also like reach out to us. We can um have a live stream, uh a session with you, um so that is all for today.

B

uh So, as a closing remark, um don't be scared to contribute to open source right so as a designer don't be scared to contribute to open source and yeah. So if you are new to open source- and you want to get started, I think async API is the best community for you right as we welcome all kind of contributions. So thanks for joining this call guys uh folks um see you in the next call and amazing again once again.