Chris Bongers

Posted on Mar 29, 2022 • Originally published at daily-dev-tips.com

CSS Logos: Figma logo

#css

While creating the CSS Slack logo I couldn't help but think it looks a lot like the Figma logo in the primary setup.

So why not look at how we can create the Figma logo in CSS.

The logo looks like this:

Analysing the logo

Much like we've seen with the grid solution for the slack logo, we could also opt to make this with a grid.

Or we could use flexbox for this one.

Since I couldn't choose, I'll do both, and you can decide which one looks neater.

We can use single grid element options for the grid that will get auto-placed on a 2x3 grid.

We force two elements per row for the flex and wrap them. This way, we achieve the same output.

The corners will be the same as we saw for the Slack logo, but as you can tell, these all have different shapes, so the best bet is to state it for each element.

Creating the Figma logo in CSS

The HTML for this project will be two times the same, but we will change the main wrapping class.

<div class="figma-flex figma-grid">
  <div class="block red"></div>
  <div class="block orange"></div>
  <div class="block purple"></div>
  <div class="block blue"></div>
  <div class="block green"></div>
</div>

We can choose either figma-flex or figma-grid in the above HTML.

Then we can add some styling that is needed for each block, which will make them a certain size:

.block {
  width: 5rem;
  aspect-ratio: 1;
}

Now we can add the colors for each block and give them the needed border-radius.
Since every color has a different border-radius, this is the easiest way.

.red {
  background: #f24e1e;
  border-radius: 50% 0 0 50%;
}
.orange {
  background: #ff7262;
  border-radius: 0 50% 50% 0;
}
.purple {
  background: #a259ff;
  border-radius: 50% 0 0 50%;
}
.blue {
  background: #1abcfe;
  border-radius: 50%;
}
.green {
  background: #0acf83;
  border-radius: 50% 0 50% 50%;
}

This should now take care of all the block styling, and at this point, we should have all the blocks available but not ordered correctly.

Let's start by trying to order them in flexbox, which is as simple as adding the following classes.

.figma-flex {
  max-width: 10rem;
  display: flex;
  flex-wrap: wrap;
}

Note: The max-width is twice the size of one block!

And this already takes care of everything for the flex solution.
For the grid we can use the following code:

.figma-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 10rem;
}

And as you can see, it's super similar to the flex solution. We choose to show two columns so that the rows will auto-flow. Then we make sure the max-width doesn't exceed.

You can find the complete result in this CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (10)

GrahamTheDev • Mar 29 '22

Hey Chris, loving this series but may I suggest to stop using aspect-ratio as anyone on iPhone will just get a blank screen.

Just give them a height and width as aspect ratio is not production safe yet unfortunately (AKA Apple is the new IE! 🤣) ❤️🦄

Renan Franca • Mar 29 '22

I am an Android user, good to know! Web dev life isn't easy 😅🤣

GrahamTheDev • Mar 29 '22

I think I spend about 20% of my time on caniuse.com, followed by the inevitable “so how the hell do I have a fallback while still future-proofing” Google session 🤣

Chris Bongers • Mar 30 '22

Did you find a "fallback" so you can still use aspect-ratio?

GrahamTheDev • Mar 30 '22

@supports not (aspect-ratio: auto) { 
    padding-top: 100%;
    height: 0;
    position: relative;
    overflow: hidden;

  }

Something like that using the padding hack?

However it would need “reversing” so that you start with that and then reset everything if it Does have @supports For it, and then use aspect ratio instead if you wanted to support ancient browsers!