Todo App - Designing with Figma

There might be some people who want to code their own design. As a one of them, i am planning to write a blog about that which has two part.

In this blog, we will make a todo app. We will use Figma as a designing tool and we will code that design using ReactJS+Redux at Part2. On the backend side, We will use an API that I wrote earlier. I can briefly say that blog about Figma+Mern Stack. But I do not intend to focus on the backend side in this blog. Maybe I can write Part3 in the future, and I can even turn it into an application that lives on Heroku with Part4.

What is Figma?

It has a beautiful structure which you can progress on the same project with your teammates at the same time. It is an application that offers up to 2 editors and 3 projects for free. You can use it on MacOS, on Windows and on Web. I suggest to you after read this, take a look their website and start to try something.

About design

Before starting the design, I am looking for answer the question of “What i need?” To be honest, it can easily handle in one screen because our app will be very simple, but i want to use Routing so i will make it two page and i will use menus. One of them for adding, one of them for listing. I will not focus details, just wanna do basic things.

In Figma..

You can see the menus and design tools on top left (like adding lines and texts, creating some shapes etc.), under that you can see your layers, assets(components, we will talk about it) and pages. The other specifications like colors, borders, constraints, effects, positioning, text sizes etc. on the right of the page. Our playground is on the middle!

P.1: We are in!

When i starting a new design, firstly i am creating a frame. Our design will be for web so as you can see(P.1), i prefer to use 1366x768.

P.2: Presented Frames

By the way, you can use the presented frames(P.2) provided by the Figma.

Figma also has constraints feature for making responsive designs. (today we will not use we will go for only 1366x768)

Components

The most important thing that i want to mention about Figma for today is component structure. I can say that, Figma has similar component structure with ReactJS component structure. One on coding, one on designing. How it works? For example, we can set buttons, input boxes, headers and footers etc. on our page as component. So what convenience does this provide us? Imagine that you are not progressing in the component structure, you have made dozens of page designs on the layout with your same header and footer. Then, when you want to change the size, position, etc. of an element in the header or you want to add something new, you need to make this change individually in the header on all pages. Instead of that, if you initially select this layout as a component and proceed by creating instances from it, your changes on your main component will be reflected in all instances and you will get rid of a big load. To make an element component, you can select that element after that click the component icon top middle of the page or just right click then click create component(Ctrl+Alt+K on web).

P.3: Our Layout as a component

Todo and List fonts will be our clickable buttons that can works as menu(P.3). We will make this layout a component so if we decide to change something in the future on this layout like font sizes, footer placement etc. we will not need the change other two page one by one.

Elements and Distances

You can hold down the ctrl key to select one or more of your design elements(on web). This way, you can avoid selecting or modifying the wrong elements, especially in your nested designs.

One of the other thing you need to pay attention to in design is distances. Figma is very helpful in positioning to reach smooth and measured designs. If you want to check the distances detailed, select that element and hold down alt key then move your mouse over other elements to see distances(P.4) (on web).

P.4: Distances

Code

P.5: CSS codes

Another beauty of the figma is that it outputs the css details (not only css there is also some codes for ios and android developers) that will help us in coding the design. Of course it will not solve all our coding work, but it will make it easier.

Final Design

P.6: TODO
P.7: LIST

Part2: Todo App - ReactJS+Redux

Software Development Engineer @alo_tech