As a child that grew up in the village, with no access to a regular power supply or the internet and, losing her Dad at a very young age, the idea of a modern world never left me.

As a widow, my Mum understands the only chance I had as a girl child in the village is education. And education, she’d given me. While growing up in the village in the Eastern part of Nigeria, I had the opportunity of going to school.

Even when I juggle between grandma’s and mother’s house, I could see the determination in their eyes to give me the best. While I farm in the village to help grandma, I sold recharge cards on the streets of Lagos during the holidays so that Mum will know and understand that she isn’t alone.

The journey is the survival of a girl child and her widow mother. I graduated, but to find a job became another journey on its own. I’d eventually find one as a Customer Service Representative.

Me on duty as a customer service officer.

The sudden shakeup in the company, leading to disengagement of my colleagues, was the moment for me. It was my eye opener for many reasons, but only one stood out. I needed to create jobs and not be sacked from one.

This started my journey into software development. I vowed to teach myself when I found out I couldn’t afford the professional training at different training centers in Lagos. It didn’t matter because I was passionate about creating wealth and job opportunities through simple tech solutions.

I went online to search for learning materials. On 3rd of January 2018, I stumbled on freeCodeCamp and decided to give it a try.

I started with HTML and after some coding challenges, I was directed to join one of their Facebook groups. I joined the freeCodeCamp Lagos group.

While scrolling on the page, I notice a post by Hector Okolo (the admin) asking those who haven’t been paired for the #100DaysCodeChallenge to indicate for pairing.

I inquired what the #100DaysCodeChallenge meant, and the whole idea looked great. I indicated interest and was paired. I was still working as a Customer Representative at that time. It was a 7-hour job which could either be morning shift or afternoon shift. I decided to allocate 2 hours of my time every day to the code challenge.

I wrote code at home if I was on the afternoon shift, or stayed 2 hours back after work to do my 2 hours code challenge if I was on the morning shift. I posted what I learned every day on the freeCodeCamp Lagos Facebook page and on my twitter page hoping to get corrections from people who knew better than I did.

I did this for one month and was able to design a one-page non-responsive website I called Naijapedia.

Screenshot of the Naijepedia website

The idea was to tell the Nigeria story ourselves. I wanted other continents to know that Africa isn’t a dark continent as most refer to it, but made up of all shades of “Grey” (the bad, the good, and the best) including intelligent and innovative youths.

By now, I have joined Facebook Developers Lagos on their Facebook page. I took a screenshot of this one page and posted on Facebook Developers group and explained the idea behind it.

The words of encouragement I got from that one single page were amazing. Some persons asked if the project is open source so they can contribute. At the time, I didn’t know what open source and Github were, so I added them my to my To-Learn List.

One of the amazing people I meet that day — that I can’t tell this story without mentioning his name — is Joseph Jones Agunbiade. After seeing my post on Facebook Developers Circle Lagos, he started chatting with me.

We talked about a lot of things centered on my work and passion for programming. Learning that I was teaching myself and can’t afford to pay and learn from programming schools, he offered me a Scholarship to come to join his Frontend Development class at his programming school Univelcity at Yaba, Lagos, Nigeria.

I made the biggest decision of my life that day. I decided to take up the scholarship and quit my job. It was a hard decision but I made it anyways and I am not regretting it today.

Graduation Day at Univelcity Programming School Yaba Lagos.

After three months of hands-on practice, I was offered a paid internship by three different companies (Civic Media Lab, Tech Advance, and Robotics System). I interned with Robotics System, also known as School of Computational Intelligence Yaba, Lagos, Nigeria.

It was the lowest paying of the internship opportunities, but knowing that 18 young developers on different stacks were working on two great applications made me choose it.

At Robotics, I worked with the team that developed Secapay (a Fintech solution) and Evy (an Event management system). After the internship, I joined CodeLagos, an initiative by the Lagos State Governor Ambode to train youths in programming as a Facilitator.

The rest, as they say, is history. Today, I am developing an application for one of the leading Banks in Nigeria and currently training youths in the same field for free using GreyAfricaHub.

GreyAfricaHub Free Web Design training at DevamplifyHub Awka Anambra State Nigeria.

I am not yet there yet, I am still learning and evolving each day.

New office as a Software Developer

My goal in 2019 is to become a Senior Developer. My passion and inspirations come from within. The ambition to create jobs for fellow youths and help curb unemployment in Nigeria keeps me going.

I am currently a contributor at freeCodeCamp Lagos, a moderator at Facebook Developers Circle Lagos and Founder of GreyAfricaHub. My goal is to mentor, train and help to raise youths who will be self-sufficient, self-dependent and self-employed.

I have organized Meet-ups, Seminars, Workshops and have equally spoken at some of the events with these groups.

Speaking at freeCodeCamp Lagos Meet-Up.

I look forward to having one of the best software solutions with the sole aim of curbing youth unemployment in Africa someday. I have also committed to mentoring 7 aspiring female developers in 2019.

I am not sure I will the best mentor but I promise we will learn together till we all reach our goal as Software Developers.

I may not have created 10 million jobs yet but hey, I’m on that path and I’m happy.

Earlier this year, when I was still very much actively involved in the tech community in Owerri, Imo state, Nigeria, my friends and I — mostly developers — discussed building open source projects. We wanted to help ourselves better hone our technical skills, while also solving societal problems and bringing some attention to the small but actively growing tech community in the state.

As the only designer amidst other developers, I had two ways to contribute: help mockup interfaces for the projects to be built, or pick up a front-end framework and participate directly code-wise since I already had some experience with frontend design. Our mantra was; ‘there is nothing you can’t learn as long as you are ready or there’s something at stake’ (like a design gig, full time job, or any form of career growth or material compensation.) These guys are still some of the most motivating and hardworking guys I have ever met.

“Surround yourself with good people; surround yourself with positivity and people who are going to challenge you to make you better.”— Ali Krieger

The initial idea

An icon pack containing icons that are relative to Nigeria — or Africa as a whole — and can be used in different projects, was the initial idea that came to mind. However, that didn’t see the light of day at that particular period as I got carried away with work and other personal responsibilities.

At some point, I also experienced self paralysis. I kept overthinking types of icons, style and usability in terms of context because some of the icon ideas that came to mind were things I thought wouldn’t fit well in web/mobile app products. This particularly discouraged me a lot so I only kept “dreaming” instead of actually working on the project.

“Go wide, explore and learn new things. Something will surely have a kick for you”
― Mustafa Saifuddin

I thought about my career as a designer. I wanted to be as good as I could at UI/UX as well as as other aspects of design and also be a source of inspiration to others. I believe trying out different things makes one better at their craft. As a Figma Africa Ambassador and design advocate, I also wanted to create, teach and share some of the cool things you can do with Figma besides designing and mocking up interfaces. So I started doing realistic isometric and 3d illustrations with Figma, such as this popular building in Nigeria and this.

Jollof Icons Isometric

The UI/UX field is quite wide and you simply can’t know it all. Learning continues every day on every new project/product, so I can’t also say I am an expert at it. But at the same time, I felt I should be able to test new waters, experiment and find other aspects of design and skills in technology I could pick up. After all, all these aspects of design and tech are interconnected one way or another.

The impetus to begin

In July this year, I got a new job and subsequently had to move to Lagos, Nigeria the following month — August. Without doubt, Lagos is the biggest tech hub in Nigeria and a sudden change in environment saw me overwhelmed with my “new community,” as I strove to adapt quickly while also trying to be on top of my game. Some of the best talent across Africa and the rest of the world can be found in Lagos. For me, it was a different ball game.

After achieving some level of stability at my new job and environment, I had to think back on some of my goals and projects I had always wanted to work on before the end of the year. Let me also add here that you have to always find time to work on projects on the side as this gives room for growth. This also makes it possible for you to become a better designer/developer and also double up on your interests and excitement to learn and do more.

I had always had these design ideas and concepts in my head — some of which I still haven’t been able to explore. However, I figured the best way to get them out was to design something. That prompted my decision to work on the icon pack.

Thinking I had already gotten more clarity on what I wanted to do, I spent days trying to figure out a style; something different. That was how I found myself in-between creating icons that can be used across different digital products and screens, creating something in the African context or just fleshing out all these design ideas and concepts in my head.

Jollof Icons 3d category

The first step was to get the domain name jolloficons.com, to make myself “committed” to the project. It’s a psychological hack I deployed to make sure I started work on creating the icons.

I saw and loved what Katerina Limpitsouni and Aggelos Gesoulis at Undraw were doing, same as Dave Gandy at fontawesome and Vancura at VSCode. But I wanted to do something different, something ‘original’ to Africa. Though I couldn’t figure it out in time.

Octoverse Report 2018

The push I needed

This year at the State of Octoverse Developer Conference in San Francisco, we saw Nigeria rise to the fourth fastest growing country in terms of the proliferation of organisations, repositories and contributions made by Nigerian Developers on Github.

There have also been concerns about us consuming Open source tools more than we produce, but things are now changing faster than we think, thanks to organisations like Andela and Ingressive who are nurturing tech talents and supporting the technology ecosystem.

I must equally mention some of our developer advocates, experts and mentors Aniedi Udo-Obong, Hanson Johnson, Prosper Otemuyiwa, Christian Nwamba, Ire Aderinokun, Adewale Abati ♠, Neo Ighodaro, Samson Goddy, Ada Nduka Oyom, Ridwan Olalere (Didi Kwang) and Namnso Ukpanah who are also at the forefront of building developer/designer talent and communities (GDG’s , Forloop Africa, Frontstack.io, Laravel Nigeria, Figma Africa etc) across Africa. And this is just to mention a few of the badass talents and organisations supporting the tech ecosystem here in Nigeria.

It’s just a matter of time, as we designers in Nigeria will soon have a lot of content and open source resources to share with the world, because we are already taking the bull by its horns and breaking boundaries.

There was a time the Figma Africa Design Advocate Lead, Namnso Ukpanah — who is also a friend — was looking for experienced Designers versed in iconography that could share their knowledge with us via an AMA session on our Figma Africa slack channel. I remember it took a while before we could get someone. We soon had Vancura of the VSCode project come on our channel to share his experience and knowledge designing icons for the popular VSCode editor. It was an educative and interesting session.

“Reject the tyranny of being picked. Pick yourself.”

― Seth Godin, Poke the Box

I usually don’t like missing out on opportunities to share my knowledge and contribute to the tech community. So I was a little disappointed with myself and felt bad, quite honestly, that I had not worked on the Icon project all this while. I felt I would have probably been able to share my own experiences and knowledge with the design community while we waited to get someone more experienced for the AMA session. But since I hadn’t done it, there was no proof of my experience or knowledge designing any icon set. ?

All these fueled my desire to do more, and I soon started working on it. Designing the icons was no easy feat, especially when trying to achieve uniformity and consistency across the icon set.

Building the icons

As a big fan of rap music, I used to joke at work with my colleagues that I was going to release a rap album on Christmas day (Lmao! What?!) but somehow I felt so responsible and didn’t want to disappoint. So what did I do? I channeled my energy and resources into making sure I was able to push the first version of the icons on the 25th of December — which was supposed to be the official launch date of my “much anticipated” rap album ?.

“For the things we have to learn before we can do them, we learn by doing them.” ― Aristotle, The Nicomachean Ethics

I had also designed a mock up of what the site would look like and shared it with some of my friends who were willing to help with building the site. Just a couple of days into December, I reflected on some of the goals and aspirations I had for the year — I had wanted to get into front-end development — and decided to take the challenge of building the site myself using a front-end framework.

I had already garnered experience doing front-end design so the only challenge was to be able to learn enough to get the site up even if it meant pushing back the Christmas day deadline I had set for myself. I now had to work on building something way simpler compared to what I had initially designed in the mockup.

So I picked up Vue.js and learnt a lot of new things on the go. Since it was an open source project, I thought it would be good to use as many open source resources as possible. I tried hosting with firebase but ran into some issues I couldn’t resolve on time — I was time conscious and eventually ended up using Github pages — which was another learning experience for me.

Always learning

They say the best way to learn is by doing.

Musicians try different styles, sounds and genres.

Developers try out different frameworks, technologies and programming languages.

Artists try different mediums and concepts.

Designers explore different concepts and aspects of design.

This is me trying to be a better designer.

This is me trying to contribute to Open Source.

Huge shoutout to Solomon Okwa and Michael Akanji who helped when I ran into some issues with vue.js and github while working on the project.

To everyone who has been a motivation in one way or the other, Thank you. Let’s do more, and let’s give them some sweet jollof ? (this rice isn’t red like our African jollof though) in 2019. ?

Happy Holidays!

Updates planned for 2019

• Add more icons
• Add Search functionality
• Improve on the UI/UX of the site

If you have any feedback, icon ideas, suggestions or contributions, please do drop a comment. You can also reach out to me on twitter GbMillz

If you like the project or find it interesting, give it some stars on github, link below. Thanks ?

Also visit jolloficons.com to keep up to date with new icons for use in your projects.

gbmillz/jolloficons
_Open source icons (3d, Abstract, Emojis, Isometric) for your projects. - gbmillz/jolloficons_github.com

Want be a part of our community? Join us on the Figma Africa Slack Channel

Here are the links to some of the resources that sped up my learning process and helped when building the site.

• Vue.js

https://www.youtube.com/watch?v=z6hQqgvGI4Y&t=2921s

• Github pages

• Official Vue.js Documentation

• Stackoverflow

As members of the Nigerian tech community, we’re fortunate to have met some of the world’s most talented individuals in development, digital marketing, and more. But one person in particular stands out among the crowd — Lynda Chiwetelu.

She’s a female developer who advocates working remotely. But what impresses us most is her willingness to share her story and encourage others, especially on Medium and Twitter.

We reached out to her to learn more about her perspective on staying productive as a remote developer, navigating the tech community as a woman, and communicating the value Nigeria adds to the tech community.

Hi Lynda! What do you enjoy most about working remotely?

This is a tough question, because I enjoy quite a lot of things about working remotely. The flexibility, how productive I become, etc. But yes, if I had to rank it in order of most enjoyable, it would be productivity. I love how productive I am working remotely compared to working on-site.

Anything you dislike about remote work?

Almost nothing. The isolation can be hard sometimes, but it’s not so bad for me as I do well with a little isolation. It is also relatively easy to solve.

With so many distractions at home, how do you stay focused?

I stay focused by ensuring that my computer is the only interactive device close to me at any point. Occasionally, I use site blockers and productivity trackers. But this has become rarer as I keep working remotely. I am usually able to focus well enough now whenever I have my computer in front of me. I have to mention that I mostly live alone, so I have even less human distraction than normal.

How important is networking as a remote developer?

Do you have any tips for someone who’s looking to make more connections?

While I didn’t exactly go the networking route, I will definitely state that I think networking is super important.

It doesn’t hurt at all to have connections that can help point you to opportunities, or to give a referral. Great places to network are at tech conferences and meetups. You can also network online with your local and the international dev community.

With social media, it’s a little bit easier to have direct access to literally anybody, so be proactive about visibility and reach out whenever you want to connect — it’s easy to do.

What skill sets have you picked up as a remote developer that you wouldn’t have in a traditional job setting?

My textual communication skills have definitely gotten a boost. Another thing I have picked up while working remotely is the ability to manage my time appropriately. I’ve gotten way better at time management — blocking out times for certain tasks and making sure they get done at that time, and even taking breaks.

What does your dream remote job look like?

How can employers create a better work environment for their off-site team members?

A great remote job is one that has flexibility, transparency, and communication as a huge part of the company culture. Of course, great pay helps, too.

I think one way for employers to create a better work environment for their off-site team members is to continuously communicate clearly, advocate communication, have informal meetings, and hold real life meetups occasionally where you get a chance to connect physically with your colleagues.

One more thing that’d make for a better work environment for off-site team members is proper organization and processes. Because you don’t have the human aspect to guide your daily work, it helps when things follow a certain process that is clear and as foolproof as possible.

In your experience, are there remote jobs for developers in Nigeria, or do you have to look internationally?

Internationally for now, I think. Before my current job, I considered some Nigerian roles but didn’t find any that were completely remote-friendly.

Surely remote Nigerian jobs exist, but there is still a healthy amount of skepticism with fully-remote work in Nigeria (and even many other countries).

But online, you get access to all the places where this isn’t totally the case. So try to find Nigerian remote jobs if you can, but chances of finding one internationally are probably higher.

Why should international employers look to Nigeria to find their development talent?

Nigerians are smart, hardworking, and equally as talented as development talent that can be found anywhere in the world. We adapt, learn quickly, and ship awesome code.

What’s it like being a woman in tech?

Do you feel like it’s an inclusive environment for females?
If not, what can we do to make it better?

I think a lot of work has been done on inclusivity, which pleases me. I personally have had an okay experience being a woman in tech. But, it could be better.

Lots of women still get sexist remarks at a professional work setting everyday that kills their drive a little bit. These remarks are sometimes normalized because the ratio of women to non-women in most workplaces are still largely in favor of non-women.

There’s also a lot of harmful stereotypes present that end up being destructive to women — for example, thinking that women aren’t naturally or typically great at coding (which I have heard, actually). This, for instance, can lead to unfair impatience directed at junior women coders, which will further cause them to believe that maybe, they just suck.

Some of the stereotypes make it so that women have a lot to prove when it comes to their tech skills, which just increases the odds of having fewer women in tech.

Also, there’s harassment. Sadly a lot of women still face sexual harassment at the workplace. This is disappointing.

To make tech a better place for women, we have to dismantle all the silly and harmful stereotypes. In their place, we need to respect women for their craft and approach them the way we’d approach any professional who is great at what they do. Harassment in every form also has to stop.

What are your professional goals for 2018?

In 2018, I plan to brush up my front-end development skills, and add one more back-end development language to my stack. I also plan to get at least one side project out of the planning phase and into the execution stage.

As far as professional goals that relate to work go, my goal is to contribute more value than I currently do to my workplace.

We hope you enjoyed this interview with Lynda Chiwetelu! Follow Charisol on Medium, Facebook, Instagram, Twitter, and LinkedIn for more interviews and tech stories.

This article does not quite follow the conventional tutorial format. This is a blend of storytelling and broad explanations, a well-documented expression of my thoughts.

Since I designed my first 3D object in Figma, I’ve become more interested in recreating different complex objects and illustrations. This will ultimately help me better my design skills. I want make designs that make people go “Wow! Did you really use Figma to do that?” I want to hear them express their surprise, as they thought Figma was only a UI design tool.

That is how I personally want to position Figma within and beyond my immediate community. Just like developers say, “it’s not about the available tools but how well those tools can be put to good use.” Indeed, it’s about how these tools can be used for the desired results. Besides, the most important aspect of software development is what determines your level of proficiency in a particular programming language. I also do little front-end as well, though.

I have some design projects as well as accompanying posts that I will be preparing in an effort to document how I created them. I will be pushing these to the public as soon as I am done.

Though isometric designs are gradually getting popular, I want to push my designs beyond the conventional isometric 3D designs. I want them to head towards something more realistic while also keeping their originality.

Now, let’s get back to business. I want to take it back to the roots (Africans, a-woo! I know some of us know that popular JJC song. Lol.) Well, this is the first design from my Isometric Nigeria 3D landmark project, and it’s also one of the most complex. I believed that if I could successfully design this building (the National Theater, in Lagos) I could easily design any other isometric 3D object.

Stage 1: Pre-design

I started out by spending some time studying the building. I used a picture I got off Google as a reference point by bringing the picture into my Figma workspace. While I worked on the design, I kept studying the reference image and continued to tweak the design until I got something nicely crafted.

I approach my designs like I want to draw or paint them on paper. I study the shadows, perspective, contrast, direction, and reflection of light. These are some of the most important elements and features to look out for when creating isometric 3D objects and realistic illustrations. Strategically applying gradient layers give objects that solid appearance.

Stage 2: Design proper (Creating upper seat-section of the theater)

First, I created the body of the upper part of the building using a rectangle. I then modified the rectangle to give me a shape similar to what I have in the reference photo. After that, I did something similar for the other part (rectangle) of the building that looks like it’s behind the first, check the second image below.

Step 1 of design.

Now we need to replicate these two shapes, edit them to make them appear bigger and place them behind the initial/original layers. This lays a foundation for what will later look like a roof/top of a real building structure. This process is demonstrated in the images below.

Step 2 of design: laying foundation

Gradient fill.

Gradient fill 2.

Gradient fill 3.

Once completed, the next stage was to create the lower part of the building.

Stage 3: Designing the outer part of the stage of the theater

I created a rectangle, applied a corner radius of 100px to the upper left and right corners, and also applied a linear gradient fill. The corner radius and gradient are used to show that the structure is circular. The result is the image below.

Next, I added another rectangle with a gradient fill, and bent it outwardly towards the bottom. The two rectangles in this stage show that the concrete base of the first section we created above is also circular. The new rectangle has a wider circumference so it extends more outwardly than the section above it. This is also reflected in the width of the rectangles. The combined result is in the image below.

Things are getting more interesting. In the image below, I created another rectangle, then applied a linear gradient fill. You can see the center is brighter and has a kind of shiny effect. This was done to give the next layer a glassy effect, as seen in the reference photo.

The glassy layer is a complex shape (a single layer of many similar shapes). I use complex shapes to reduce the number of layers I have in my layers panel, when designing without grouping or flattening layers. You can read my post on it here. Right after this, I added another rectangle as seen in the next image. This part forms a wall used as a demarcation between the different openings and entrances of the building.

Stage 4: Ground floor design

Next, I added another rectangular layer, which I edited and modified to look like what is in the picture below. This layer forms the top for the next layers. It, and the other layers I will be adding afterwards, all play a role in the look of the structure and how it’s perceived by the viewer.

I added another rectangle that was blurred to form the shadow for the next layers I created in the next image.

In the image above, I created 12 rectangles placed neatly on top of each other which I modified to have the picture below

Stage 5: Adding more effects

I applied a linear gradient fill and drop shadow to the six light grey rectangles above. The gradient gives it the realistic look of a block of walls with light bouncing off it. I added the drop shadow to buttress that look and effect. The darker rectangles below are just flat walls/the base of the building. The shadows of the six light grey rectangles outwardly extend to the curved walls/pillars above that it was casting on.

Gradient fill.

I also applied a gradient fill to the dark grey rectangles. These are darker because they are the lowest part of the building.

At this stage I needed to add some layers to perfect the look. I added another five narrow rectangles to fit the spaces between the 12 rectangles I created.

Then I added some narrow rectangles, and placed them vertically. This gives the thick block/pillar effect of a real building, at the point where the six grey rectangles meet with the flat layer above it. This is shown in the image below.

At this point there was something still missing. I added new rectangular layers and modified them to add that layer that looks like a wall at the far right of the 12 rectangles I created above. As captured in the reference photo, I modified the lightest rectangle and placed it behind the 12 rectangles. It now protrudes more towards the right. I modified the darker rectangles to look like the image below:

Stage 6: Working on the outer pillars

I went back to the upper part and put some things in place. As shown in the image below, I created narrow-sized rectangles to represent the vertical pillars.

vertical pillars

I then created another set of rectangles. These were modified, and one was flipped in the opposite direction. I grouped both shapes to form the horizontal inner pillars and replicated it to look like the picture below. Though they aren’t neatly arranged at this point, I worked on this later.

In the later parts of this post, you will observe that the upper part of each individual horizontal pillar is brighter than the lower parts. Also, the ones closer to the left side of the building are brighter than the ones on the right — remember the building is circular in structure ?

Horizontal pillars

Stage 7: Designing the rooftop

I did some magic at the top-most part of the vertical pillars. I created a new rectangle, and used the ‘edit object’ option to modify it to look like what we have below. I modified it to suit the different parts of the circular structure of the rooftop. You can see they are different sizes and also reflect how much light is hitting them from the top.

Creating roof tops

Rooftops

The rooftops in the image below are just rectangles I modified, and filled with color to blend with the surface of the roof itself. I created another copy, shifted it up a little to have a kind of stroke at the topmost edges, giving it a contrasting effect with the sky. If I didn’t do that, it would disappear into the sky at the background.

In the image below, the yellow arrows show the direction and curvature of the building. Light rays falling on the roof of the building reflect quite differently, making us see some parts of the building darker while others are lighter. The areas marked blue are brighter and sizes are bigger as the building curves towards the right. Towards the left side, they are darker and shorter until the building’s circular structure becomes more visible and higher behind, at the left.

It’s just like when you are driving on roads with sharp corners — you only see further ahead when you drive past the curve. It’s all these little things that make the eye perceive the building as a circular structure.

Stage 8: Adding effects to the pillars

Here are images of the different ways I applied linear gradient fill to the vertical pillars. This gives them a solid look. You will also observe that the vertical pillars were tilted to follow the direction of the curvature of the building ?

Stage 9: Adding the windows and glass walls

Just before adding the vertical pillars that spread around the building, I created complex shapes of lines. These represent what look like blocks of polished wood, neatly arranged side by side. I used this as a sort of padding layer on the outer walls of the upper section of the building, then blurred it. The result is shown in the image below.

Blurred black lines

I also did something similar to create the glass windows in the image below.

You will notice a black background behind the white lines in the image below. In this layer, I applied a gradient fill to give the shining bright effect of the glass walls/windows, and to give that circular structure of the building. That’s the reason why the right and left sides of the rectangle are darker that the bright center part. You will also notice that the white lines were bent and tilted parallel to the vertical pillars.

The final result is shown below.

The glass makes the center appear brighter because that’s the only part of the building our eyes can see. It’s reflecting the sky and surrounding environment, but gets a little darker moving towards the left and right due to the circular structure of the building. If this was a normal non-circular glass building or skyscraper, all the glass will be shining bright!

I kept on tweaking the design by applying gradients on the vertical pillars to give them a solid look. The lower portion of the vertical pillars are bent outwardly to support the structure. I thought of how I was going to achieve this for a while, considering the fact that the vertical pillars were rectangles and not a shape I created with a pen tool. Upon further review, I found it was necessary to add another rectangle, and blend them using gradient at the intersection of both rectangles.

Something from behind the scenes

Behind the scenes ? lower portion of the pillar

You will notice that I made some changes to the horizontal pillars to reflect the effect and direction of light in the pictures below. The upper part of each horizontal pillar is lighter than its lower part. The overall appearance of the horizontal pillar gets darker/duller towards the right part of the building.

At the lower portion of the building at the right, I added some rectangles to represent the entrance/driveway of the building. I did this by applying inner shadow to depict an entrance tunnel.

Then I worked on the sky image below and surrounding landscape. The green flat surface that represents the vegetation around the building is just a large rectangle with single color fill ( you can see the image of the grass layer in the second image).

Gradient to form the sky.

reactangular grass layer

Stage 10: Nigerian Coat of Arms

At this stage, I was almost done with the design. Because I wasn’t satisfied, I tried to create the Nigerian Coat of Arms. It was a fast one, though, as I preferred to design something not perfect than not put anything there at all.

The horses and eagle were created using pen tool. For the the ‘Y’ part, the layers below the shield and the shield background were modified shapes. I also applied a drop shadow to the grouped Coat of Arms to make it “pop” out of the background.

Rough sketch (Coat of Arms).

Stage 11: Vegetation and geography

And the trees! The reason for using circles with shadows and gradient layers is to depict different hidden branches and leaves casting shadows on each other at different parts of the trees. I also made the tree with circles much bigger, closer, and strategically placed. The trees cast shadows underneath to give the building a distant effect in the eyes of the viewer.

The shadows below the trees are just circles which were stretched to have a saucer look and flat appearance. These were then blurred to look like real shadows.

Tree shadows.

I also created some objects in the design to represent shrubs and green flowers. These were planted at different locations to look like the reference image. The shrubs and flowers are rectangles that I created, applied round corners at the upper parts, filled with a gradient layer, and blurred to give that distant effect. Objects get sharper and more distinct the closer you get, but the shrubs and flowers are far away. This is also the reason for their small sizes.

Shrubs when zoomed.

The final design is shown below.

The link to the design is here.

Thanks for reading

You can reach out to me on twitter here

Don’t forget to join Figma Africa Community on Slack here.

Prior to using Figma, I used Adobe Illustrator for most of my designs (like logos, mockups, illustrations, and so on). But since I joined the “Figma gang” , I’ve dropped illustrator so I can focus on Figma and learn as much as I can about it.

I wanted to discover more tricks with the software, so I could arrive at end-results that aren’t “typical Figma.” This stemmed from the fact that the designs I hope to make aren’t necessarily what the software was developed to do.

Figma is more of a UI/UX design tool than a visual designing or illustrating tool like Adobe Illustrator.

This post is about me exploring Figma beyond UI/UX to uncover new ways of using it and new things I could discover while using it as my complete design tool. In the end, it didn’t really matter what type of design I might want to do or venture into.

So, I will take you through the process of how I came up with the above image.

Step 1: Create a similar box

The first thing I created was a box that looks similar to the brown one in the picture above. This was created with the use of shapes (rectangles only). I know some people are fans of the pen tool. But in the above example, the pen tool doesn’t afford us the flexibility to create shadows, add gradients, or do any sort of object manipulation to individual shapes or parts of the box.

step one ?

In the above illustration, I used the edit object tool to resize and manipulate the rectangles to make a rhombus-like shape. The next thing I did was recreate the same rectangles and turn them backwards to make up the third and fourth sides of the box.

edit object tool

Step 2: adding shading

I added color to differentiate each side of the box, and also to give an idea of how the shadows, contrast, and gradient fill would be applied. This laid a foundation so that the sides of the box could be worked on independently. I also created the box lid pieces.

creating covers

Step 3: making it more realistic

I added a gradient fill to the visible box lids (f1 & f2) to make it look much more realistic and flat. Notice the way the gradient is layered on f2? I did the same for f1, and then adjusted the degree of the gradient fill to match the direction of light on the box.

After adding the gradient, I added the shadows. When rays of light fall on an object, a shadow is automatically formed relative to the direction of light and the object.

creating shadow layer by copying existing layer and editing it

Note: The layer highlighted above is actually beneath the visible on. That’s what will be resized to form the shadow.

Step 4: making adjustments to the lid

To add shadow, I simply copied f1 and pasted it on the same layer. I then chose the original/initial copy of f1 (which is below the newly copied ‘f1,’) clicked the edit object tool, and resized it to protrude a little underneath “f1 copy”. This was done just to perfectly create the shadow effect. The default Figma shadow effect feature wouldn’t have given me the flexibility to create the brown box in the picture.

So I added a dark color to it and blurred it with a value of 20. You might also notice that the original f1 is not as sharp as the other layers. Blurring it gives it that cool realistic shadow effect and reduces the black color saturation. I then replicated the same process for f2.

In Figma, you can easily copy and paste a style/effect from one layer to another using ctrl + alt + c for copy and ctrl + alt + v on the layer that you want a similar effect or style to be applied to.

Step 5: dealing with the body

Now that we are done with the carton box cover, let’s work on the body of the box. We want to reflect the ray of light bouncing on it as well as the shadows that give the box a contrasting and realistic appearance.

First image: B1 with gradient applied. Second image : B1 and B2 with gradient applied

All we need for b1 and b2 is gradient fill, as seen in the above illustration.

b1 and b2

Did you notice that the box is starting to look more real? Can you spot the difference when a gradient is added to b1 but not yet to b2? Or when gradient fill is applied to both sides?

Let’s move on.

Step 6: the challenge of the interior

Working on the inner part of the box (b3 and b4) was a little bit challenging. I had to pause for a few minutes to study the shadows and level of saturation at different corners of the inner parts before thinking of a way to replicate it — all while still using shadows and gradients.

In the same way as before, I applied a layer of gradient fill on b4 with darker colors — since it’s the darkest part of the box — to achieve the level of saturation I wanted. See the image below:

Notice the way the gradients are being arranged vertically with one of the color boxes on the gradient liner close to the other one? The idea is to make the shadow appear like it grew from inside the box. Though we can not see inside the box, we do know that as it gets deeper, rays of light reduce, which makes the innermost parts get darker automatically.

Final part: shadows underneath the box

Here, we’ll take the same idea I used above to create the shadows for the box covers above (copying the layers, resizing, and applying some dark colors and effects) and repeat it. Though I already applied it in the picture above, the one below is the workaround ?

resizing the original b1 layer, extending the height towards the base and adding a darker gradient

I made extra copies of b1 and b2 and chose the original layer. I then dragged it down a little, added a darker color, blurred it a little, and also resized it to have that perspective view. Creating realistic images in art and architecture is all about perspective.

Now we have created a realistic 3D box — it’s not perfect, but it’s realistic enough. ☺️

our realistic 3d carton box

Final tweaks

At this stage, I stopped to compare what I had done with the original brown box I got off the internet. I wasn’t satisfied, so I decided to push further to see what I could achieve by attempting to make the box look very real with a high contrast.

So how did I achieve this?

I created extra copies of b3 and b4, and applied a gradient layer to their original copies (which are the dark parts facing us in the picture below).

applying gradient to b4 to increase contrast

Upon closer observation, you will notice that it does looks like the edges of b1 and b2 have a shadow of their own towards b4 and b3, respectively. This is because light rays have fallen on them from the sides, projecting their shadows on the closest available layer or object.

Remember the extra b1 and b2 copies that I made earlier to form the shadow beneath the box? Well, first I resized these two layers (original b1 and b2) to protrude above the copied versions of (b1 and b2). You can see them as the current outer sides of the box which the ray of light falls on. Then I added another darker gradient layer.

Below is what the box looks like now.

final version

Note: The picture above is a little different from the one in the introductory part of this piece, as I had to create another one to be able to explain some of the things I did in the first design. It was a really fast one ?

To get more details and understand everything I did, here is the link to both the original version and the example version I created.

Thanks for reading!

Feel free to reach out on twitter @GbMillz