DEV Community

Cover image for CSS Logos: Figma logo
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

CSS Logos: Figma logo

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:

Figma logo

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

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.

Figma blocks not ordered

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
grahamthedevrel profile image
GrahamTheDevRel

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! 🤣) ❤️🦄

Collapse
 
renanfranca profile image
Renan Franca

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

Collapse
 
grahamthedevrel profile image
GrahamTheDevRel

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 🤣

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

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

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

  }
Enter fullscreen mode Exit fullscreen mode

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!

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Hmm yep!
For now I refactored it to just contain the height, as it's a known thing 💖

Collapse
 
dailydevtips1 profile image
Chris Bongers

Ah nice one, I love new shiny things so always want to try those out. 😂
But great point, and can easily switch to solid height for these.

Collapse
 
grahamthedevrel profile image
GrahamTheDevRel

I love shiny, but because of a11y I very rarely get to use shiny stuff, I feel so far behind the times sometimes because of it lol!

Collapse
 
waylonwalker profile image
Waylon Walker

flexbox FTW

Collapse
 
dailydevtips1 profile image
Chris Bongers

Indeed 💪