Design Lesson – Copy for science

In this lesson you will look into how Figma works. For that we will rebuild an existing design so we do not need to focus on creating something new but can start learning to use the tool.

At Dribbble, look for a simple Mobile screen you like. "Mobile Login" could be such a search term. Download the picture and put it into a frame within a new Figma file. Now recreate the dribbble design pixel perfect. Be very accurate to the extend that you count the distance between two elements in pixels and think why might be the reason for this exact number.

In the end you can overlay the two elements and set the upper element's Layer-style from "Pass through" to “Difference”. If your result is pure black, good job. the colorful spots indicate differences in your copy and the original.

Goal

• Learn basic Figma Feature: Fill, Stroke, Effects, Groups Vs. Frames. Layering
• Get a sense for the right values used in Products design.
  • What is a reasonable font size?
  • What are commonly used distances?
• How is the page structured

Theory

Atomic Design is the concept to break down big ares and define them on the smallest element until they cannot be broken down further without loosing their meaning. Brad Frost is the person who coined the term and at An Event Apart he explains the idea behind it.