Code up a Figma Design in React Native

In this guide, we’ll use React Native to recreate the design for a single todo item from Figma.

Challenge

1. Consider the design

With a partner, look carefully at the design below:

Decide on the following:

• Where will you find the values for things like font size and colour in Figma?
• Open the design you have been given from Figma and explore the interface to find the following:
  • the font family
  • font sizes
  • font weights
  • line heights
  • text alignment
  • text colours
  • background colour
  • border colour
  • padding
  • margin

- Styles and colours

We can lift things like colour, font and text size directly from Figma.

For example, just select a text element and copy the colour code from the ‘Fill’ field.

As you can see, the font family, size, weight, line-height and alignment are all available as well.

- Padding and margins

In a similar way, we can measure the padding and margins of elements in Figma.

Click on the element in your layers panel and, if this is an autolayout frame, you can see the padding and margin values on the right of your screen.

- View and Text components

Here again, Figma can help. Broadly speaking, each frame in Figma can be thought of as a View component in React Native.

Look at how the design below can be broken down into three View components:

Here we have:

• a main parent (outlined in blue)
• a child component for the checkbox (outlined in pink)
• a child component for the text (outlined in green)

Viewing design attributes in Figma

2. Clear out starter code

With this structure in mind, let’s take a look at how we might build the component in React Native code.

1. Open the project in your code editor and run the app with the command below:

   npm run dev

2. Decide if you want to see the app on your phone or in the browser by following the instructions in your terminal.

3. Open app/index.tsx and replace all the code inside with the following:

   app/index.tsx

   import { View, Text } from "react-native";
   
   export default function HomeScreen() {
     return (
       <View className="flex flex-1 py-32 bg-background">
         <Text className="text-white text-center">Hello, world!</Text>
       </View>
     );
   }

   This gives us a simple View component with a Text component inside it:

   

3. Plan out the components

Challenge

Remind yourself how we said the component structure might look:

With your pair programming partner, plan out and implement the View and Text component structure in React Native Code. In particular, experiment with:

• breaking down the design into View and Text components:
  • you will need a single parent View component (represented by the blue outline in the design above)
  • how will you apply Tailwind’s flexbox classes to the parent View component to match the design?
  • what would be the child View components be?
  • how and where would you use the Text components?

At this stage, don’t worry about the styling too much as this will be the next challenge. Good luck!

1. To recreate this, I’m going to:

   • delete the ‘Hello, world!’ placeholder text
   • create a parent View component and give it an articfical height and border so that it matches the outlines above:

   app/index.tsx

   import { View, Text } from "react-native";
   
   export default function HomeScreen() {
     return (
       <View className="flex flex-1 py-32 bg-background">
         <Text className="text-white text-center">Hello, world!</Text>
         <View className="flex h-20 w-full flex-row border-2 border-cyan-400"></View>
       </View>
     );
   }

   

2. Next, I’ll add two View components inside the parent, and give these temporary borders that match the plan above:

   Important!

   Be sure to place the code highlighted in green below INSIDE the parent View component that has the cyan border.

   app/index.tsx

   import { Text, View } from "react-native";
   
   export default function HomeScreen() {
     return (
       <View className="flex flex-1 py-32 bg-background">
         <View className="flex h-20 w-full flex-row border-2 border-cyan-400">
           <View className="flex w-24 h-full border-2 border-pink-400"></View>
           <View className="flex flex-1 h-full border-2 border-green-400">
   
           </View>
         </View>
       </View>
     );
   }

   

3. Let’s add some text inside the green View component:

   app/index.tsx

   import { Text, View } from "react-native";
   
   export default function HomeScreen() {
     return (
       <View className="flex flex-1 py-32 bg-background">
         <View className="flex h-20 w-full flex-row border-2 border-cyan-400">
           <View className="flex w-24 h-full border-2 border-pink-400">
             <Text className="text-foreground">Feed the cat</Text>
           </View>
         </View>
       </View>
     );
   }

   

Component structure code solution

3. Style the todo item

Challenge

With your pair programming partner, style the todo item to match the design.

Your final implementation should look and behave something like this:

Tips

1. Style the text inside the green View component to match the design. You will need to think about:

   • the font size
   • the font colours (tip - use the text-foreground and text-foreground-transparent classes)

2. Add a checkbox in the pink View component.

   Tip

   You already have a checkbox component in your project at components/ui/checkbox.tsx.

   • Research how to import and use this by following the documentation.

3. Remove the placeholder borders from the View components and style them to match the design. You will need to think about:

   • the border along the bottom of the todo item (tip - use the border-b and border-foreground-transparent classes where you feel is correct)
   • the padding and margins

Good luck!

app/index.tsx

import * as React from 'react';
import { Checkbox } from '@/components/ui/checkbox';
import { View, Text } from 'react-native';

export default function HomeScreen() {
  const [checked, setChecked] = React.useState(true);

  return (
    <View className="bg-background flex flex-1 py-32">
      <View className="flex h-20 w-full flex-row border-2 border-cyan-400">
        <View className="flex h-full w-24 border-2 border-pink-400"></View>
        <View className="flex h-full flex-1 border-2 border-green-400">
          <Text className="text-foreground">Feed the cat</Text>
        </View>
      </View>
    </View>
    <View className="bg-background flex-1 items-center justify-center gap-5 p-6">
      <View className="flex w-full flex-row">
        <View className="flex h-full w-24 px-8 py-5">
          <Checkbox
            className="border-foreground checked:bg-foreground"
            checked={checked}
            onCheckedChange={setChecked}
          />
        </View>
        <View className="border-foreground-transparent flex h-full flex-1 gap-1 border-b py-4">
          <Text className="text-foreground text-xl">My test item</Text>
          <Text className="text-foreground-transparent text-xl">Test category</Text>
        </View>
      </View>
    </View>
  );
}

Single Todo Item Styling

4. Create a dummy ‘Task’

Inside app/index.tsx, add a single object called task to the HomeScreen component.

We will use this as a dummy task to test our new Task component.

app/index.tsx

export interface ITask {
  title: string;
  category: string;
  isChecked: boolean;
}

export default function HomeScreen() {
  const [checked, setChecked] = React.useState(true);

  const task: ITask = {
    title: "My test item",
    category: "Test category",
    isChecked: false,
  };

return (
  <View className="bg-background flex-1 items-center justify-center gap-5 p-6">
    <View className="flex w-full flex-row">
      <View className="flex h-full w-24 px-8 py-5">
        <Checkbox
          className="border-foreground checked:bg-foreground"
          checked={checked}
          onCheckedChange={setChecked}
        />
      </View>
      <View className="border-foreground-transparent flex h-full flex-1 gap-1 border-b py-4">
        <Text className="text-foreground text-xl">My test item</Text>
        <Text className="text-foreground-transparent text-xl">Test category</Text>
      </View>
    </View>
  </View>
  );
}

Info

Notice how we’ve created a new ITask interface here and exported it from the app/index.tsx file?

This is so that we can import it into other files, which we will be doing later 😉.

5. A dedicated Task component file

Challenge

Challenge

Create a new file at components/Task.tsx and extract your todo item JSX code into a new component called Task.

• The new component should accept just one prop:
  • task (ITask)
  • You will need to import the ITask interface from app/index.tsx

components/Task.tsx

import React from 'react';
import { View } from 'react-native';

import { Text } from '@/components/ui/text';
import { Checkbox } from '@/components/ui/checkbox';
import { ITask } from '@/app';

interface TaskProps {
  task: ITask;
}

function Task({ task }: TaskProps) {
  const { title, category, isChecked } = task;
  const [checked, setChecked] = React.useState(isChecked);

  return (
    <View className="flex w-full flex-row">
      <View className="flex h-full w-24 px-8 py-5">
        <Checkbox
          className="border-foreground checked:bg-foreground"
          checked={checked}
          onCheckedChange={setChecked}
        />
      </View>
      <View className="border-foreground-transparent flex h-full flex-1 gap-1 border-b py-4">
        <Text className="text-foreground text-xl">{title}</Text>
        <Text className="text-foreground-transparent text-xl">{category}</Text>
      </View>
    </View>
  );
}

export { Task };

Task Component Code Solution

6. Import the ‘Task’ component

Finally, update your HomeScreen JSX to use the new Task component.

Pass the task object as a prop to the Task component.

app/index.tsx

import * as React from 'react';
import { Checkbox } from '@/components/ui/checkbox';
import { View, Text } from 'react-native';
import { View } from 'react-native';
import { Task } from '@/components/Task';

export interface ITask {
  title: string;
  category: string;
  isChecked: boolean;
}


export default function HomeScreen() {
  const [checked, setChecked] = React.useState(true);

  const task: ITask = {
    title: 'My test item',
    category: 'Test category',
    isChecked: false,
  };

  return (
    <View className="bg-background flex-1 items-center justify-center gap-5 p-6">
      <View className="flex w-full flex-row">
        <View className="flex h-full w-24 px-8 py-5">
          <Checkbox
            className="border-foreground checked:bg-foreground"
            checked={checked}
            onCheckedChange={setChecked}
          />
        </View>
        <View className="border-foreground-transparent flex h-full flex-1 gap-1 border-b py-4">
          <Text className="text-foreground text-xl">My test item</Text>
          <Text className="text-foreground-transparent text-xl">Test category</Text>
        </View>
      </View>
      <Task task={task} />
    </View>
  );
}

::::

Summary

In this guide, we have:

• Recreated the todo item design from the Figma file
• Created a new Task component
• Passed a task object as a prop to the Task component

Next steps

In the next guide, we will learn how to edit a task via a dialogue box.