A Front-end developer using Figma
Tags: figma, design, learning, slides
Published: 2021-02-28 00:19:35

In this post I want to tell you my first experience with Figma, how I am defining my design system, what resources I have found and how to create slides with your own brand.

{% tweet 1365370135402450944 %}

## How a design system is helping me

Creating my own design system has helped me:

- To be **consistent** between the products I create. For example, my website uses the same components, style and typography as my slides. It helps to be **aligned** and create a brand.

- To **reuse** elements, creating components and use them in new pages, products or sections. Allowing me to **save** a lot of **time** both adding new content and modifying existing one.

Although a **design system** is time-consuming, the good thing is that you can do it little by little and define and **improve it over time**.

The **next steps** will be to create **guidelines**, in case one day I work with more people, and to **unify** the designs of my **side projects** with Dawntraoz's brand, but little by little.

For now, I leave you with this design system made in Figma, which is amazing, 🦄 [Pegasus Design System](https://www.figma.com/community/file/889142897767055377)

> If you want to know more about this topic, I recommend you to take a look at [Míriam González](https://twitter.com/miriamgonp)'s talk, where she shares super useful resources 👉 [Design Systems 101](https://miriamgonzalez.dev/charlas/design-systems-101)

## First steps learning Figma

I started reading the [Figma](https://www.figma.com/) Basics tutorial, where the concepts behind Figma are explained. I'll summarize what I found very useful in my journey:

- **Frames**: the Artboards of Figma where you have **preset sizes** as standard Desktop, Tablet and Phone sizes.

---

- **Constrains**: to **fix elements** to the sides of their parent, this is useful to **resize the elements** when you resize the screen.

  For example, the header element is fixed top-left-right to its parent -*Homepage Frame*-, when the homepage width increase the header will grow with it.

  > You can also check the chekbox -*Fix position when scrolling-* to simulate **position: sticky**.

---

- **Components**: to **reuse elements** of the design, creating new instances of them.

  To create a component you just need to right click the element already created and select the option *Create Component*.

  Once it's ready, to create a new instance: go to the *Assets panel* and drag & drop the component.

---

- **Styles**: to define a **set of properties** like colors, texts, shadows... which could be reused across the design.

  For example, to create a generic text: define the properties of your text, i.e. font family, size, decoration, ...; then, click on the Styles icon (the icon with 4 dots) and click on the + icon to save it.

  > If you want to know all the properties you can add to your custom text styles, check [Typography systems in Figma](https://www.figma.com/best-practices/typography-systems-in-figma/).

  To reuse it, just click on the Styles icon again and select the one you want. You will see something like this:

  ![Text styles ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6dd3bvvsayfi1i1iarvu.jpg)

- **Smart selection**: selecting multiple elements using Ctrl+Shift+Click allows you to **adjust** **spacing** between elements (click & drag - pink *lines*) and change the **position** (drag & drop - pink *circles*).

  ![Smart selection in Figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/881rmufofnsgct9qr2z0.jpg)

- **Exporting, commenting & sharing**: you can export in **PNG**, **JPG**, **SVG** and **PDF** formats all your elements and designs, more people will be able to **give you feedback** on your design by commenting on it and you will be able to **share** your designs **via a link** with anyone.

> To get to know these points in detail and practice them with a use case, just register at [Figma](https://www.figma.com/pricing/) ✨ It's free for your first 3 projects 🎉

## Organising my content

When I got to know the basics of Figma, I started to organise my project and to turn my website into a design, which was already designed (not ideal, but that's how I started).

Next, I will tell you how I have set up the project by sections.

### Style guide: Colors, typography and iconography

> Two of Figma's most powerful features are [components](https://help.figma.com/hc/en-us/articles/360038662654) and [styles](https://help.figma.com/hc/en-us/categories/360002042553-Using-Figma#Styles). They let you reuse UI objects and attributes so you can maintain designs systematically at scale. - by Figma

As I went through the main page of my website, I saved the styles, both colours and fonts, that I defined.

Once I had defined all of them, I created a page called Style guide where I represented the colours, their name and their hexadecimal value, as well as the typographies for each type of heading or text.

![Styleguide colors and gradients in Figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9afgpvp64haqpjm3n0v.jpg)

And the same thing happened with the iconography, as I added the SVG icons to my design I created components in the Style guide page. This way I can control from one place how they are displayed and export them in isolation.

![Iconography in Figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1tm64qgk3si4vv86ld35.jpg)

### Components

For those parts that make up my design and that I'm going to reuse, it could be none other than the components section. This is where the variants and properties that Figma offers us come into the picture, let's see what it's about.

> I will tell you how I've used them in my project, but as I'm not an expert, it's better to look at the recommendations Figma gives us at [https://www.figma.com/best-practices/creating-and-organizing-variants/](https://www.figma.com/best-practices/creating-and-organizing-variants/)

Well, the first thing I had to do was to **create the content of** what was going to be **my first component**, a custom heading with a gradient by colour. This component had a different **size** in **desktop** & **mobile** and a different gradient in **light & dark mode**, a total of **4 variants**.

To define the variants I had to take into account **2 properties**: the **screen**, which corresponds to the desktop or mobile version, and the **mode**, being light or dark.

![Heading component in Figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnh9jd3ec4tuy1ho6xvy.jpg)

In the image above the first heading on the **top left** would be the **desktop** version in **light** mode, and on the **bottom right** the **mobile** version in **dark** mode.

This grouping could have been done differently, we will see this in the next section with the Header layout component.

### Layout

> Although our layout elements, the header and footer, are components in Figma, it made more sense to me to have a special section for them and that's why I created the Layout page.

As I mentioned before, when I had to create 4 variants of each component to cover both desktop and mobile in light and dark mode, I wondered if I had done it correctly and when I asked on Twitter my doubt was solved.

That's how I discovered the [base components](https://www.figma.com/best-practices/creating-and-organizing-variants/using-variants-effectively/#using-base-components) (the master piece). Basically, when you **create a variant** you are making a **copy** of the content, **not an instance**, and when I wanted to modify something on desktop, for example, I would have to do it for light and dark mode and that's not ideal. That's why the **base component has saved me**!

- **Header**

    In the Header/Base component I design the desktop and mobile version of the header, I only take into account the screen property. Then I create the **Header** component that **uses the Header/Base instances** and there I design the light and dark mode variants. This way, the day I want to change something in the mobile/desktop design I will only have to apply it in Header/Base and Header will be updated automatically!

    ![Header base component in Figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ui64t77i5oowwk2mzbk2.jpg)

- **Footer**

    For the footer it was easier because it doesn't vary depending on the mode, so a **Footer** component was more than enough. But one thing I discovered when trying to add a **border bottom** to the footer titles is that I needed a **plugin** to help me apply the border I wanted: [Border](https://www.figma.com/community/plugin/740014625507871586/Border)

Once the header and footer were already created, I was adding them to the page layouts, until I decided to create a **template** to reuse the structure and add the container spacing in the body section. As you can see below:

![Layout components in Figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1mpp5hlx4waoocdrmp6.jpg)

### Grids

To avoid having to redefine the size and fit the components to the columns every time I wanted to modify one of the grids, I decided to create a section where I could isolate them and instantiate them in the design of my pages.

For example, for the blog listing I created a two column grid on desktop with a full width version for mobile (using variants with a screen property):

![Blog grid listing in Figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s740aj4o0uxzambheg2k.jpg)

### Pages

And now, having put all the pieces of the design together, it's time to define our pages!

Making use of the template we created on the layout page and choosing the corresponding heading component for desktop or mobile in light mode, as well as the listing grid, we are ready to go 🎉

![Page template for Blog in Figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wt4w3pdr1nuh7x2dgrm4.jpg)

### Article cards

And as I wanted to have a space for the feature images of the articles, I created a page called Article cards, where I design the images and export them.

![Article cards for blog posts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/unenj3jzucdpmzm8dwt7.jpg)

To export the frame with the feature image, I added one export option and set the type of file I wanted to export to JPG. Then I clicked the preview tab to see the result and the export button to get the picture.

> [Everything you need to know about export by Figma](https://help.figma.com/hc/en-us/articles/360040028114-Guide-to-exports-in-Figma)

![Export article card option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtw9ksm8g2zts1gcrn4z.jpg)

## Using plugins

After defining my project I decided to do some research and look for cool stuff. Let's see what I have found 🔍

### Custom Slides

> I'm quite proud of this part, to be honest 🙈.

I recently started giving talks but, doing it on my own, I didn't have a company template to make the slides. So, I decided to use free templates that I found on the internet. But, as you can imagine, it had nothing to do with my web design.

Searching on Google how to make my own slides with Figma, I found this video [Export slide deck presentations from Figma to Google Slides](https://www.youtube.com/watch?v=BkMRUL5SvmE), which explains the use of a plugin to convert frames made in Figma into Google Slides or, even, interactive slides generated in an url.

The plugin is [Pitchdeck Presentation Studio](https://www.figma.com/community/plugin/838925615018625519/Pitchdeck-Presentation-Studio), which I highly recommend. This is how it looks like:

![Custom slides to Google Slides](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1gdv6afgc9mfxrzujbk.jpg)

There you can add animations to the elements (not compatible with Google Slides), add speaker notes, change the slides order, ...

The wonderful thing is to be able to **use the components of your web design for your slides**, what a fantasy 🦄

### Illustrations

As I created new slides, I wanted to put in some cool geometric shapes and I thought, why not illustrations?

When I think of illustrations I always think of [Humaaans](https://www.humaaans.com/) by [Pablo Stanley](https://twitter.com/pablostanley), so I went straight to his website and found a wonderful plugin for figma so I could add my illustrations without leaving here, that's amazing 😍.

The plugin is called Blush and you can find it in the [community](https://www.figma.com/community) or by going directly to its page 👉 [https://www.figma.com/community/plugin/838959511417581040/Blush](https://www.figma.com/community/plugin/838959511417581040/Blush)

![Blush Humaaans by Pablo Stanley in Figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mj6r3z2jziby5q36moky.jpg)

### For TailwindCSS lovers

It is possible to export all our styles, colors and typography, as a preset for tailwind.config.js by using the plugin: [https://www.figma.com/community/plugin/785619431629077634/Figma-Tailwindcss](https://www.figma.com/community/plugin/785619431629077634/Figma-Tailwindcss)

> Side note: If the plugin doesn't have a description on how to use it, it's because you need to go to Files tab (or right click) > Plugins > Click on the plugin you want to use and voilà!

This is the result by using it in my project:

```javascript
{
 "colors": {
  "white": "#ffffff",
  "gray-light": "#e5e7eb",
  "gray-dark": "#111827",
  "fuchsia": "#a21caf",
  "black": "#000000"
 },
 "fontSize": {
  "sm": "0.75rem",
  "base": "1rem",
  "lg": "1.125rem",
  "xl": "1.5rem",
  "2xl": "1.875rem",
  "3xl": "2.25rem",
  "4xl": "3.75rem"
 },
 "fontFamily": {
  "gilroy-bold": "Gilroy-Bold",
  "segoe-ui": "Segoe UI"
 }
}
```