Forem: Neema Adam

Reflective — AI journaling companion built with Notion MCP and Claude

Neema Adam — Sun, 29 Mar 2026 23:11:43 +0000

This is a submission for the Notion MCP Challenge

What I Built

Reflective is a Chrome extension + Node.js backend that adds an AI journaling companion to your browser sidebar while you write in Notion.

Most journaling tools are write-only. You pour thoughts in, they sit there. Reflective makes your Notion journal a two-way conversation — without leaving the page.

How it works:

You write in Notion
       ↓
Click "Analyze this entry" in the sidebar
       ↓
Claude reads your entry + your journal history from Notion
       ↓
Opens a conversation grounded in what you actually wrote
       ↓
Click "Mark session complete"
       ↓
Mood score, tags, themes, and AI summary written back to Notion

Key behaviors:

Sits in the Chrome side panel alongside Notion — no new tabs
Context-aware: on a database view it loads your last 50 entries; on a single entry it reads just that page
Temporal awareness: if you're reading an old entry, Claude knows — it frames responses as looking back, not as if it's today
One conversation across the whole session — navigating to a new entry appends to the chat with a — now reading: [title] — divider
Analysis is always user-initiated. The extension makes zero API calls on navigation.
Mood sparkline shows your last 14 days, pulled live from a Notion database

One-click workspace setup. On first launch, it creates a Journal Entries database, Mood Log, Weekly Summaries database, a seeded starter entry, and a dashboard page — all via the Notion API. You paste your integration token, it does the rest in ~10 seconds.

Video Demo

Show Us the Code

Repo: https://github.com/neicore/notion-reflective

Stack:

Chrome Extension (Manifest V3, React + TypeScript, Vite, Tailwind)
Node.js + Express backend (TypeScript)
Anthropic Claude (claude-sonnet-4-5)
Notion API (@notionhq/client v2)
Server-Sent Events for streaming progress to the extension
pnpm workspaces

How I Used Notion MCP

Notion is where users read and write their data — and it's also the entire data model. Every piece of state lives there, accessed via @notionhq/client.

Reading: building context for Claude

When you click "Analyze this entry", the backend fetches in parallel:

const [rawHistory, recentMoods] = await Promise.all([
  fetchJournalEntries(journalDbId, 50, notionToken),  // last 50 entries
  queryMoodHistory(moodLogDbId, 14, notionToken),      // 14-day sparkline
])

Then reads the current page blocks directly:

const [pageObj, blocks] = await Promise.all([
  notion.pages.retrieve({ page_id: pageId }),
  notion.blocks.children.list({ block_id: pageId, page_size: 100 }),
])

The block content becomes the raw text fed to Claude alongside journal history. History is split into "before this date" and "after this date" relative to the entry you're viewing — that's what gives Claude correct temporal framing.

Writing: analysis flows back into Notion

When you mark a session complete:

await notion.pages.update({
  page_id: pageId,
  properties: {
    'Mood Score':       { number: result.moodScore },
    'Mood Tags':        { multi_select: result.moodTags.map(name => ({ name })) },
    'Themes':           { multi_select: result.themes.map(name => ({ name })) },
    'AI Summary':       { rich_text: [{ text: { content: result.aiSummary } }] },
    'Word Count':       { number: wordCount },
    'Session Complete': { checkbox: true },
  },
})

Your Notion database gets richer over time. On future analyses, entries with an AI Summary are used as-is (fast); entries without one get their blocks fetched (slower, shown in the loading progress bar). First load hydrates your journal — subsequent loads are instant.

The loading experience

Hydrating 50 entries takes a while the first time. The /api/init endpoint streams progress via Server-Sent Events:

data: {"type":"journal_count","total":47}
data: {"type":"hydrating","index":1,"total":47,"title":"March reflections"}
data: {"type":"hydrating","index":2,"total":47,"title":"A hard week"}
...
data: {"type":"done","entryContent":"...","openingMessage":"..."}

The extension consumes this with fetch + ReadableStream (more reliable than EventSource in extension contexts), updating the UI: Reading your journal — 3/47 — A hard week.

What Notion unlocks that a plain database wouldn't

Notion's multi-select properties for Mood Tags and Themes mean once entries are analyzed, you can filter, sort, and group your entire journal by mood or theme natively in Notion — no custom query interface needed. The AI populates the properties; Notion's built-in views do the rest.

The mood sparkline pulls from a separate Mood Log database that tracks daily mood independently from journal entries. You can log mood on days you don't write, and the chart reflects it. Two related databases — the kind of structure that's natural in Notion and would need real schema design anywhere else.

That's the part I keep coming back to: the AI populates the properties, Notion's built-in views do the rest. No custom query interface, no separate dashboard to maintain. Your journal just gets smarter over time.

Sell your products online with one API call; A technical guide to ClickPesa checkout link integration

Neema Adam — Wed, 14 Jun 2023 17:17:35 +0000

One of the newest features that we offer at ClickPesa is a checkout page.

ClickPesa's checkout page allows users to create a checkout page from their website or application for their customers to pay for products or services.

Creating a checkout page only takes one API call to ClickPesa and you will receive a checkout URL that can be shared with the customer to collect payments.

Here is what you need...

Base URL: https://sandbox.clickpesa.com/webshop/generate-checkout-url

Payload:

{
  orderItems: [
    {
      name: 'Name of your product',
      product_type: 'DIGITAL_PRODUCT or PRODUCT',
      download_file_key: 'URL to file download', //OPTIONAL
      unit: 'unit of this item eg 1pc',
      price: 'price of the product',
      quantity: 'quantity of the product, eg 10',
    },
  ],
  orderReference: 'your order reference',
  merchantId: 'your merchant id',
  callbackURL: 'https://your_callback_url.com', //OPTIONAL
}

Here is a table to further explain each field that is added to the payload for checkout URL creation

Example:

curl --request POST \
  --url https://sandbox.clickpesa.com/webshop/generate-checkout-url \
  --header 'Content-Type: application/json' \
  --data '{
    "orderItems": [
        {
            "name": "Very cool ebook",
            "product_type": "DIGITAL_PRODUCT",
            "download_file_key": "uploads/c0f5a69d-28e8-434c-93ae-0e9dab972bb0.zip", //optional
            "unit": "1 pc(s)",
            "price": 25000,
            "quantity": 1
        },
        {
            "name": "Very cool book hardcopy",
            "product_type": "PRODUCT",
            "unit": "1 pc(s)",
            "price": 40000,
            "quantity": 1
        }
    ],
    "orderReference": "SHOP0.273114256151528d",
    "merchantId": "5f9beaa89c8d037a9b4f795d",
    "callbackURL":"http://hertha.biz" //OPTIONAL
}'

The above request will return the following response, which is a unique URL for the order's checkout page:

https://demo.checkout.clickpesa.com/checkout?serviceID=88&cartItemsCount=2&items=%5B%7B%22name%22:%22DIGITAL%20product%20THis%20Is%20a%20long%20lng%20test%20Maybe%20it%20is%22,%22product_type%22:%22DIGITAL_PRODUCT%22,%22download_file_key%22:%22uploads/c0f5a69d-28e8-434c-93ae-0e9dab972bb0.zip%22,%22unit%22:%221%20pc(s)%22,%22price%22:25000,%22quantity%22:1%7D,%7B%22name%22:%22TEST%20Cylinder%22,%22product_type%22:%22PRODUCT%22,%22unit%22:%22100%20pc(s)%22,%22price%22:50000,%22quantity%22:1%7D%5D&merchantID=5f9beaa89c8d037a9b4f795d&subtotal=75000&totalPrice=75000&discount=0&referenceID=SHOP0.273114256151528d

You can then share the URL with a customer via SMS/Email/WhatsApp or any other communication channel you have in place.

PRO TIP:

You can use services like https://www.shorturl.at to shorten the URL before sharing it with your customer. It's free.

When a customer opens the URL, they will get to the checkout page with all the details of the order.

Once a customer completes the payment, a notification will be shared via the callback URL added early on the request. The payload to the callback URL will have the following data:

{
  status: 'SUCCESS' | 'PROCESSING' | 'FAILED' | 'CANCELED',
  paymentReference: string, // Payment reference ID in our system
  orderReference: string, // Order reference ID you provided during checkout page creation
  collectedAmount: string, // Amount collected if the transaction is successful
  collectedCurrency: string, // Currency, currently TZS | USD
  message: string, // eg. 'Payment received'
}

If you don't have a callback URL in place, ClickPesa also provides an administration dashboard that you can use to track all your orders and their payment statuses. It's free!

Contact ClickPesa at info@clickpesa.com to get started. Takes a day max.

Transitioning from a designer to a frontend developer

Neema Adam — Mon, 08 May 2023 09:29:17 +0000

Transitioning from a designer to a self-taught front-end developer can be a challenging but rewarding experience. Acknowledging the learning curve and being prepared to learn is the first step toward achieving this goal. For successful learning, you can find learning resources that work for you, such as online courses, tutorials, or documentation. Remember to set goals and track your progress to help you stay motivated throughout the process.

In the following sections, I am excited to go through some tips that helped me successfully transition into this new career path.

Embrace the Learning Curve

Designing and developing share some common aspects but also require different skill sets. As a designer, you might be familiar with UI/UX design principles, but front-end development involves coding, debugging, and building UIs from scratch.

Start by breaking down the required skills into smaller chunks beginning with the basics and working your way up. Since you are probably a beginner, here is a simple roadmap and an overwhelming roadmap that you can use if you can't make your own. There is also this cool youtube video by Coder Coder that could help make things less overwhelming.

There are many online resources available to help you learn front-end development. I learned everything I know online. I started with FreeCodeCamp, Sololearn, and W3Schools then added YouTube channels such as Traversy Media, FreeCodeCamp, and Dev Ed. Find learning resources that work for you, such as online courses, tutorials, or documentation. The roadmap link I have shared also contains learning resources for each topic. Click on any topic and a drawer will open with links to different learning resources.

Build a Strong Foundation

Building a strong foundation in front-end development requires learning the basics of HTML, CSS, and JavaScript. These are the building blocks of any website. Once you understand these languages, you can start building more complex web pages and applications.

Learning how to use developer tools is also essential. These tools help you identify and fix issues with your code. Developer tools can also help you optimize your website's performance and improve its accessibility.

Familiarizing yourself with responsive design and accessibility is also important. Responsive design ensures that your website looks good on any device, while accessibility ensures that your website is usable by people with disabilities.

Apply Your Design Skills

One of the advantages of transitioning from a designer to a front-end developer is the ability to apply your design skills to create visually appealing websites or web applications.

Collaborate and Build Your Network

Collaborating with other developers and designers is an excellent way to build your network and learn from others. Joining developer communities and attending local meetups or events can help you to meet other like-minded individuals and build relationships.

Seeking feedback on your work is also important to improve and grow as a developer. Feedback can help you identify areas where you need improvement and areas where you excel.

Practice

Building projects and solving challenges is a great way to help you understand concepts that you will be learning and discover new things that you may want to pursue such as learning a frontend framework or exploring Canvas and WebGL. You can get project challenges from places like Frontend Mentor, CodePen Challenges, or Frontloops.

Conclusion

In conclusion, transitioning from a designer to a self-taught front-end developer can be a daunting task. As a beginner, It's easy to get bogged down trying to make sense of everything, but it's important to remember that building projects is a great way to discover new knowledge gaps and keep learning. Don't be afraid to make mistakes and seek feedback; this is how you'll continue to grow and develop your skills as a front-end developer. With determination and perseverance, you can achieve your goal and embark on an exciting and rewarding career in front-end development.

Thank you for reading. If you're interested in learning more about software development, fintech, and other related topics, be sure to check out the ClickPesa publication. Our team is constantly writing and publishing articles that cover a range of topics related to software development, product design, and entrepreneurship.

At ClickPesa, we are passionate about building products that help people and businesses succeed in today's digital economy. If you're interested in learning more about our products and services, be sure to visit our website and follow us on social media.

Testing React apps with Testing library

Neema Adam — Thu, 13 Apr 2023 00:11:29 +0000

Testing is an essential aspect of software development that ensures the quality and reliability of software products. React, being one of the most popular JavaScript frameworks, requires a robust testing strategy to ensure that the application functions as expected. Throughout this March and April, I had a chance to learn a lot about writing tests in React while building ClickPesa’s UI component library. In this article, I will share some of the things that I have learned.

Essential things you can test for in React components

Render: Ensure that the component renders without throwing any errors.
Props: Test that the component accepts and uses props correctly.
State: Test that the component updates its state correctly.
Events: Test that the component handles events correctly.
Lifecycle methods: Test that the component correctly handles its lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount.
Snapshot testing: Use snapshot testing to ensure that the component's UI doesn't unexpectedly change over time.
Accessibility: Test that the component is accessible to users with disabilities.
Integration testing: Test that the component works correctly when integrated with other components.
Performance: Test that the component doesn't have any performance issues or memory leaks.
Error handling: Test that the component handles errors and edge cases gracefully.
API calls: Test that the component makes API calls correctly and handles the response appropriately.
Security: Test that the component doesn't introduce any security vulnerabilities.
Routing: Test that the component navigates correctly between routes in the application.
Authentication: Test that the component handles authentication and authorization correctly.
Edge cases: Test that the component handles edge cases, such as empty or null props, correctly.

What is React's Testing Library?

React's Testing Library is a testing framework designed to test React components in a way that closely mimics how users interact with the application. The Testing Library provides a set of utilities that allow developers to write tests that simulate user interactions with the components and check that the application behaves correctly.

The Testing Library is built on top of the Jest testing framework, which is a popular testing tool in the React community. Jest provides a test runner and an assertion library, while the Testing Library provides a set of utilities to help developers write tests.

The key philosophy behind the Testing Library is to test components as if you were a user interacting with the application. This approach makes it easier to write tests that closely resemble the user experience and ensure that the application is working as intended.

How to use React's Testing Library?

To use React's Testing Library, you need to install it as a dependency in your project. If you created your project using create-react-app or bit dev, this library comes pre-installed. To install manually, you can do this by running the following command in your terminal:

npm install -D @testing-library/react @testing-library/jest-dom @testing-library/user-event @types/jest

Once you have installed the Testing Library and other dependencies, you can start writing tests. Let's take a look at an example of how to test a simple React component using the Testing Library.

Suppose we have a simple component called "Counter" that displays a counter value and allows the user to increment and decrement it. Here's what the component looks like:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  }

  const handleDecrement = () => {
    setCount(count - 1);
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
}

export default Counter;

To test this component using the Testing Library, we can write a test that checks that the counter value starts at 0, increments when the "Increment" button is clicked, and decrements when the "Decrement" button is clicked.

Here's what the test looks like:

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('counter increments and decrements correctly', () => {
  const { getByText } = render(<Counter />);

  // check that the counter starts at 0
  const counterValue = getByText('0');
  expect(counterValue).toBeInTheDocument();

  // click the increment button and check that the counter increments
  const incrementButton = getByText('Increment');
  fireEvent.click(incrementButton);
  expect(counterValue).toHaveTextContent('1');

  // click the decrement button and check that the counter decrements
  const decrementButton = getByText('Decrement');
  fireEvent.click(decrementButton);
  expect(counterValue).toHaveTextContent('0');
});

In this test, we first render the Counter component using the render function from the Testing Library. We then use the getByText function to find the "0" text node and check that it is in the document. We then simulate a click on the "Increment" button using the fireEvent.click function and check that the counter value is updated correctly using the toHaveTextContent assertion.

We then simulate a click on the "Decrement" button and check that the counter value is updated correctly using the same assertion.

This is a simple example, but it illustrates the power and simplicity of the Testing Library. With just a few lines of code, we can test that our component behaves correctly and that the user experience is what we expect.

Best practices for testing with React's Testing Library

To get the most out of React's Testing Library, there are some best practices that you should follow:

Test behavior, not implementation

When writing tests, focus on testing the behavior of your components, not their implementation details. This means that you should test what your component does, not how it does it. This approach makes your tests more resilient to changes in the implementation and ensures that they remain valid even if you refactor your code.

Test user interactions

Since the Testing Library is designed to test components as if you were a user interacting with the application, you should focus on testing user interactions. This means that you should simulate clicks, key presses, and other user actions to ensure that your components behave as expected.

Keep your tests small and focused

When writing tests, it's important to keep them small and focused. Each test should test a single piece of functionality or behavior. This approach makes it easier to debug failing tests and ensures that your tests remain maintainable over time.

Use descriptive test names

To make your tests more readable and understandable, use descriptive test names. Your test names should describe what the test does and what it's testing. This makes it easier to understand what your tests are doing and what they're testing.

Conclusion

React's Testing Library is a powerful tool that can help you create high-quality and maintainable code. By testing your components as if you were a user interacting with the application, you can ensure that your code behaves correctly and meets your users' expectations. In this article, we've explored how to use React's Testing Library and some best practices for writing tests. By following these best practices, you can write tests that are resilient, maintainable, and easy to understand.

Thank you for reading this article on testing React applications using React's Testing Library. We hope that you found it informative and helpful in your development process. If you're interested in learning more about software development, fintech, and other related topics, be sure to check out the ClickPesa publication. Our team is constantly writing and publishing articles that cover a range of topics related to software development, product design, and entrepreneurship.

Setting up SSH Keys for Github, GitLab, and Bitbucket in one windows pc

Neema Adam — Tue, 07 Mar 2023 08:11:37 +0000

What are Github, Gitlab and Bitbucket?

Github, GitLab, and Bitbucket are all popular web-based Git repository hosting services that allow developers to collaborate on code and manage version control.

GitHub is the most well-known of the three and is used by millions of developers worldwide. It offers both free and paid plans and is a popular choice for open-source projects.

GitLab is another web-based Git repository hosting service that offers both free and paid plans. It is known for its built-in continuous integration and deployment features, making it a popular choice for DevOps teams.

Bitbucket is a Git repository hosting service that is owned by Atlassian, the company behind popular products like Jira and Confluence. It offers both free and paid plans and is known for its tight integration with other Atlassian products.

All three services offer similar functionality and are widely used by developers for managing code and collaborating on projects.

Connection method

There are several methods available to connect to Github, GitLab, or Bitbucket, including HTTPS and SSH. HTTPS is the default method and uses a username and password for authentication. SSH, on the other hand, uses a public and private key pair for authentication.

Using SSH has several advantages over HTTPS. First, it is more secure because it uses encryption to protect your credentials. Second, it is more convenient because you don’t need to enter your username and password every time you push or pull code. Finally, it allows for more fine-grained control over access to your repositories.

This guide shows you how to set up SSH keys for Github, GitLab, and Bitbucket on your Windows PC.

While SSH has several advantages over HTTPS, there are also some potential disadvantages to consider.

One is that setting up SSH requires more initial configuration than HTTPS. Additionally, if you lose your private key or it is compromised, it can be difficult to recover access to your repositories. Finally, some corporate firewalls may block SSH traffic, which could prevent you from using it to connect to remote repositories.

Setting up SSH Keys for Github, GitLab, and Bitbucket in One Windows PC

SSH keys are a secure way to authenticate with remote Git repositories like Github, GitLab, and Bitbucket. In this guide, we will show you how to set up SSH keys for all three services on your Windows PC.

Step 1: Check for existing SSH keys

Before generating new SSH keys, we need to check whether any SSH keys already exist on our machine. Open the Git Bash terminal by right-clicking on your desktop and selecting “Git Bash Here”. Then, enter the following command in the terminal:

ls -al ~/.ssh

If any files with names like id_rsa or id_rsa.pub exist in the output, you already have an SSH key pair. If not, we will generate a new key pair in the next step.

Step 2: Generate a new SSH key pair
In the Git Bash terminal, enter the following command to generate a new SSH key pair:

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

This command will prompt you for a file name and passphrase.

Step 3: Add the SSH key to Github, GitLab, and Bitbucket

Next, we need to add the SSH key to our Github, GitLab, and Bitbucket accounts.

Github

Log in to your Github account and go to “Settings”.
Click on “SSH and GPG keys”.
Click on “New SSH key”.
Give your key a title and paste the contents of your id_rsa.pub file into the “Key” field.
Click “Add SSH key”.

GitLab

Log in to your GitLab account and go to “Settings”.
Click on “SSH Keys”.
Give your key a title and paste the contents of your id_rsa.pub file into the “Key” field.
Click “Add key”.

Bitbucket

Log in to your Bitbucket account and go to “Settings”.
Click on “SSH keys”.
Click on “Add key”.
Give your key a label and paste the contents of your id_rsa.pub file into the “Key” field.
Click “Add key”.

Step 4: Test the SSH connection

To test the SSH connection, enter the following command in the Git Bash terminal:

ssh -T git@github.com

Replace “github.com” with “gitlab.com” or “bitbucket.org” to test the connection to those services.

If the SSH connection is successful, you should see a message like “Hi username! You’ve successfully authenticated, but GitHub does not provide shell access.”

Congratulations! You have now set up SSH keys for Github, GitLab, and Bitbucket on your Windows PC.

Creating a design system from scratch

Neema Adam — Sun, 19 Feb 2023 23:04:57 +0000

This is the third and final part in my series about my notes on the design system, you can find the introduction part here and the second part here. In the first part, I talked about design systems, and in the second part, I talked about customizing a prebuilt design system. In this article, I’ll go over some things that I and my team at ClickPesa did to successfully ship our custom design system.

1. The Scope

The first thing to do when creating a design system is to determine the primary usage of your system. You might want your design system to be a general system that designers and teams building different products can use or you might want it to be something specific to only your projects or narrow it down even more to a single project. The wider the target usage of your system, the broader the scope.

The scope of your system will determine how many colors and text styles you will have to set up and how many components and their variants you will have to create. Let’s say you want to create a design system like Untitled UI that designers and teams can buy and use in their own projects, in this case, you will have to consider the needs of a lot of designers and create a general solution that will be a time server and yet customizable enough to fit into their products. You might end up creating and maintaining hundreds of components with their variants.

Another case is if you want to create a design system for your products or for a single product. In this case, you will only have to set up colors and text styles that are needed and create only the components that your products use. At ClickPesa, we decided to ship a design system that can be used to design all of our products. We decided that our products will share components and only use different primary colors and font families so I only created components that we need for our products with a few variants. This makes it easy to use and maintain the design system.

2. Creating the system

Intro

The team and I dedicated two days and went over our products to determine what components do we need to design, then we prepared a list in google sheets with six columns; name, type, description, states, variants, and URL to component. This document serves as documentation, a rule book, and also a design system checklist. We chose to use google sheet so that every member of the team can have access to it and take a look whenever they want to.

Design Tokens

I started by preparing the design tokens. I only prepared colors, text styles, drop shadows, and border-radius. So far those are the only things we needed in our products.

Icons

After setting up all the tokens, I prepared the icons. I used Phosphor icons and migrated outlined and filled icons to my design system.

I also added common keywords that I’d use to search certain icons in their description so it’s easy to find them.

Components

For ClickPesa we decided on 33 components that are going to be used in all our products including GetPaid. We have essential components such as input, textarea, buttons, and other product-specific components such as the balance card component that we use to display account balances.

If you are interested to learn about my process of creating complex components in Figma, I wrote an article about it here.

3. Documentation

Apart from having a google sheet with a description of what each component is and where to use it, I also prepared documentation in Figma that goes into specifics on how to use the component.

Conclusion

If your product is huge, creating a design system from scratch can seem daunting, but it's an important investment for any company that wants to create consistent, efficient, and memorable products. Just start small and evolve it according to usage needs.

Customizing a prebuilt design system in Figma

Neema Adam — Thu, 22 Dec 2022 16:36:33 +0000

This post is part of a series about everything I have learned about design systems and I’ll write it from a designer’s point of view. This is the second part, you can find the introduction part here

Customizing design tokens

After getting a new design system, you might need to customize all the design tokens to match your product’s. Check if your design system takes full advantage of the Figma Tokens plugin, which will allow you to change the style of the entire design system in a few minutes. For this post, I’ll be working with this open-source design system file I found in the Figma community. This one doesn’t support Figma tokens so this post won’t cover it.

This file ships with design tokens and a few essential components. You can take a look around by navigating the pages found in your left panel.

Fonts

Once duplicated the file, on the right side, you will see all the local styles available. We want to edit the text styles.

Hover over one of the styles, eg. H1 and you will see a controls icon button, click it and a window for editing will appear.

There you can change the name of the text style, you can add a description to help designers in your team understand what this text style is used for, and can change the font family and other text properties. For this example, I will change the font family from Poppins to Chivo, and I’ll repeat the same steps for all text styles so the font family used across the design system is Chivo.

When changing the font family you might find that some font-weight styles from the current font are not found in the font you are trying to use, so instead, you can use a font-weight close to that one. In this case, Chivo doesn’t have a medium font weight so I used bold, in fact for H1 through H5 my font-weight is set to bold.

After changing the font family and weight in all text styles, this how the typography preview look.

Colors

Our example design system ships with five types of colors, the default black and white, neutrals, primaries, critical, and success. I want to add more colors and edit the current color values and their names.

Adding new colors

On the left panel, there is a category for color styles, I am going to hover over the title ‘Color Styles’ and use the plus button to add more colors.

The new colors I am going to add are yellow color for warning and blue color for progress. I like using the colors created by TailwindCSS, so I’ll visit the link attached and copy the yellow and sky colors from values 500 - 300. I want to only have three colors for each group except neutrals, so my scale will be from 100 to 300.

Editing existing colors

For editing existing color styles, I want to delete all the criticals, success, and primary colors from values 70 - 5, and then rename them and change their values. After deleting the values I don’t need and renaming them, here is what I have:

For my primary colors, I am going to use Tailwind Fuchsia, values 500 - 300. For errors, I’ll use Tailwind Red from 500 - 300. And for Success, I’ll also use Tailwind Green, values 500 - 300’. This is what my color styles look like:

I also renamed the neutrals:

I also edited the colors documentation and now it looks like this:

Components

The example design system ships with a couple of essential components. You might need to add your own components or edit the existing ones.

Editing existing components

Let’s start by fixing the button component. When I edited the color styles, by deleting some values I broke the styling of the buttons, they are now not using the color styles defined.

I’ll fix this by selecting the frame containing all buttons and going to the selection colors section in the right panel where I’ll click and change the values to use my color styles.

After editing here is what I have

To edit the contents of a component, you can edit the master component at the top of the variants. Example here is the master component of the input component:

You can choose to edit this by adding an icon before the hint text or adding an icon after the label text and your changes will be reflected across all variants. And you can even make new variants that use or don’t use your new elements.

Adding new components

To add new components, create a new page, give it a name related to your component and start creating.
Publishing Changes

With the free plan, you can only publish your styles, like text, color, or effects. With a team or professional plan, you can publish your components. Whenever you publish new changes, files that use your design system will get a notification that there are some new changes needed to be reviewed and applied.

Here is the version I have been working on in this article, you can duplicate the file and explore it.

My Notes on Design Systems: Introduction

Neema Adam — Thu, 24 Nov 2022 13:59:50 +0000

My Notes on Design Systems: Introduction

This post is part of a series about everything I have learned about design systems and I’ll write it from a designer's point of view.

What is a design system?

A design system is a collection of design tokens and reusable components defined by specific standards to reduce redundancy and maintain consistency while designing projects that scale.

Things most design systems I have encountered contain:

Design tokens; things like color palette, spacing, font families and sizes, shadow effects, and more.
Reusable UI components such as buttons, inputs, cards, chips, or other components that might be native to a specific use case.
Documentation; a clear usage guide for all tokens and components included in the design system.

Design systems in Figma

Figma is a design tool we use at ClickPesa and GetPaid while designing our products. Figma makes it easy to work with design systems because it provides a way to publish the design system file to be available for the entire team where team members can access all the components and design tokens in any design file in the team. You can check out Ant Design System, an open-source design system published in the Figma community.

Why design system

Here are some why and why not use a design system I have learned so far.

Why use a design system

To maintain consistency across the designs created for a particular product.
To reduce redundancy that might occur while designing.
Design maintainability. Design systems allow for changes to be made once and applied across the design.

Why not use a design system

It's a lot of work. It takes time to create and maintain.

Create a design system from scratch or use a premade one

Creating a design system from scratch

Making a design system from scratch allows you to add only the items that you will need for your use case but as it grows it becomes more difficult to maintain which will increase the workload to you or your design team.

Using a premade design system

Using a pre-made design system is convenient because it is created and maintained by a third party whether it is open source or a vendor that sells design system(s).

A challenge I faced with this approach was that pre-made design systems contain a lot of things that I don’t need in my use cases and don’t have a lot of things that I need in my use cases so I had to get in there and add things that I’ll have to also maintain as I go. I suppose this is a less workload compared to maintaining a custom one.

In the next article in this series, I’ll go more in-depth about using a premade design system and customizing it to your specific use case so be sure to follow the ClickPesa publication so you don’t miss it.

GetPaid: A platform that uses the Stellar network to simplify online transactions for East Africans

Neema Adam — Wed, 12 Oct 2022 04:44:03 +0000

Introduction

GetPaid is a platform that helps East Africans send and receive money online via the Stellar blockchain. Users can use their usual payment methods such as mobile money or bank to deposit and withdraw funds from their GetPaid accounts and use their GetPaid accounts to send and receive funds internationally.

Building blocks of GetPaid

Deposit

Withdraw

Swap

Blockchain overview and why the Stellar network?

What is blockchain?

A blockchain is a network of computer systems that are all connected or linked together, similar to a chain. This network has a digital ledger of transactions duplicated and distributed across its entire network making it difficult or impossible to change, hack, or cheat the system*.*

Why do we use the Stellar network?

Stellar is an open-source, blockchain-based distributed ledger- that facilitates low-cost financial transfers and cross-border transactions between any currency. Our decision to use the stellar the network is based on the following advantages:

Stellar Network allows for a global payment system with faster transaction speeds than banks and with lower fees. Anyone using the network can send and receive any currency regardless of their physical location. This is achievable through Stellar tethering a token to a traditional asset like USD, Yen, or the Euro.
Transactions on the Stellar network take under five seconds and the average cost of each transaction is a fraction of a Lumen(XLM), which equates to a millionth of a cent. The low transaction cost opens use case potentials such as micropayments.
The Stellar Network is truly decentralized, run by peers on the network, and not owned by anyone, just supported by its non-profit organization.

Problems GetPaid is trying to solve

Lack of appropriate online payment methods in the East Africa region.

East Africans primarily use mobile money and banks to perform their day-to-day transactions like sending money, getting paid, paying bills, etc. These payment options are often not available online or when they are available they have high fees which makes it difficult for most people to perform different transactions online.

High transaction costs on cross-border payments.

Cross-border payments incur very high fees in the East Africa region. One example is online freelancers receiving wire transfers are charged between $15 - $30 per transaction which is almost as much money as what this freelancer earned in a job.

Our solution

To solve the above problems, we are building a platform to help people in the East African region make fast and secure payments online with minimum transaction fees.

Target users

Our target users are people who are looking to reap the benefits of modern-day work and business environments. People like freelancers selling their skills online, content creators selling digital products to their audiences, or traders trading the cryptocurrencies, stocks, or forex markets.

User personas

Product features

Currently, GetPaid offers two assets, XLM and USDC.

Deposit or receive funds

Users can deposit funds to their GetPaid accounts or funds can be sent to their GetPaid accounts via mobile money, bank deposit, and credit card.

Withdraw or send funds

Users can withdraw funds from their GetPaid accounts to a mobile money account, bank account, or another cryptocurrency wallet, e.g XLM to XLM transfer or USDC to USDC transfers.

Swap funds

Users can swap funds from USDC to XLM or from XLM to USDC

Welcome to checkout GetPaid

Creating a simple table component in Figma

Neema Adam — Mon, 12 Sep 2022 05:19:28 +0000

Creating a simple table component in Figma

In this post, I will show my approach to creating a simple table component in Figma.

Cells

I want the cells to support different data types like text, image, text plus image, icons, tags, etc so I’ll create a placeholder component that has information about the recommended height and width of components that can be passed inside a cell.

To create a cell, I’ll make a frame around an instance of the placeholder component, add auto layout with width and height set to hug, align content to the left, add padding of 20 in all directions and name the frame Cell. By default, the cell has left alignment, and width and height are set to hug, but later when I put the cells into rows or columns and I’ll set some to center alignment, and width and height to fill container.

I want to have three types of cells, one without a border, another with a border on the bottom, and another with a border on the right to provide division of cells from the column-based tables and row-based tables respectively so I’ll duplicate my Cell frame two times, set one to border-bottom and another to border-right and rename them to Cell/Bottom and Cell/Right respectively, and the first one to Cell/None.

Finally, I’ll create the cell component by selecting all three frames and use the create a component set option on the top-center toolbar and rename the property to Border.

Rows

For the rows, I am going to take five cells, I’ll create a frame around them and name it Row and create a component from it.

I can now use the row instance and replace the placeholder component with my custom components, setting the background color or border. For the action cells, I have set the width to be fixed because the title and the view didn’t have the same width with using hug setting.

Columns

For the columns, I’ll take four instances of the cell component, arrange them vertically, frame them, rename the frame to Column, and then create a component.

Now I can use the column component to create a column-based table.

Limitations

I can only use the number of cells available when the row or column component was created.
The height of cells in a column-based table cannot adjust automatically when one cell in a row changes its height.
The width of cells in a row-based table cannot adjust automatically when one cell in a column changes its width.

Tools and assets I use in my UI design workflow

Neema Adam — Fri, 05 Aug 2022 13:36:00 +0000

Tools and assets I use in my UI design workflow

Research & Learning

Google

Internet research is a crucial part of my workflow and in most cases I don't know exactly what I am searching for but by using a powerful search engine like Google, I am able to input different keywords until I find what I need.

Youtube

Youtube has played a major role in my journey to become the designer I am today. Here's a list of YouTube channels where I've been watching design videos.

Mizko
Designcourse
Malewicz
DesignCode
AJ & Smart
Satori Graphics (is about graphics designing but worth checking out)

Figma community

Figma community members share their works, design lecture slides, and templates. I have cloned a lot of these works and learned how other designers implement certain things and I have gained a lot of knowledge from presentation slides shared in the community.

Inspiration

UI-Patterns

My life changed when I found this website. It really helps me get ideas when hitting creative blocks. They have a list of design patterns that solves common design problems.

Dribbble, Pinterest, & Figma community

Whenever I hit a creative block the first place I go is dribbble, enter my search term, filter by mobile app or web design and then start exploring. The works of other designers in all these platforms show me how they have solved certain design problems which then gives me ideas on how I could also solve mine.

Behance

The difference between Behance and dribbble is that in behance I can also find detailed case studies which are normally very insightful.

Designing

Figma

Words are not enough to describe how much I love working with Figma. It’s all the amazing features available and learning resources that have helped me understand the platform and use it to the fullest.

Design systems

Design systems have helped me speed up my workflow. At ClickPesa we use Ant Design system from Matt Wierzbicki, and on my side project I use Tailwind css style guide by Bonnie Hong

Icon Library

I use Bytedance icons, Heroicons, and Bootstrap. They all have different content, look, and feel so I used them in different projects depending on what I want.

Figma Shortcuts

The ones in blue are the shortcuts that I use often. You can see this menu in figma by pressing Ctrl + Shift + ? on windows.

Plugins

Here are some of my Figma plugins that i can’t live without:

A selector

Very useful for when I want to select something that is occurring on multiple places and has the same name.

Blobs

Very useful for when I want to create some organic blobs to enhance my design

Design system organizer

I use this to bulk edit my design systems

Downsize

I use this to resize images in my designs so the design file doesn’t take too long to load.

Figma Data Faker

I used this one for generating multiple fake data for my design because I can’t be putting lorem ipsum everywhere

Figmoji

I use this one to add emojis to my designs

Image Palette

This one helps me generate color palettes from images quickly

Lorem ipsum

For generating dummy text for long paragraphs

ProtoPie

Helps exporting Figma frames to ProtoPie for prototyping

Remove BG

This magical tool removes background from images so smoothly

Typescales

I use this for generating typescales

Unsplash

This one is my favorite. I get to insert images into my designs without going to google.

Prototyping

Figma prototyping

I use Figma for clickthrough prototyping and interactive components helps enhance the prototypes. But I hope one day Figma adds conditional logics so we can minimize those wires.

ProtoPie

ProtoPie recently released a free forever plan which I have been using to learn how to use the platform. So far I like the experience while using the platform and the availability of learning resources in their Youtube channel.

If you like this article there are more like this in our blogs, follow us on dev.to/clickpesa, medium.com/@clickpesa and clickpesa.hashnode.dev/

Making Complex UI Components in Figma

Neema Adam — Mon, 18 Jul 2022 01:58:59 +0000

Making Complex UI Components in Figma

Components are pieces of UI elements that can be reused across the design. Apart from maintaining consistency in the design, a complex figma component offers the ability to create states using interactive components feature.

Figma offers a variety of features that I have been utilizing to create complex yet flexible components. In this blog post, I'll go through a sidebar component that I made for ClickPesa's admin dashboard to show my approach to making complex components in Figma.

Structure and components

I like to use the atomic design approach while making components in Figma. For example the sidebar I mentioned I'd treat it like an organism, the sidebar-item-groups as molecules, and the sidebar-items and sidebar-title as atoms.

The sidebar-item component

This component consists of two icon components and one text layer. I combined the left icon and the text layer into one frame with an auto layout set to center-left alignment and width of hug content. This will provide the flexibility I need if I ever remove the icon the text will just snap to the left and the hug content width will ensure that the text will always have as much room to the right as the frame container will allow. I’ll also name the frame left-content.

I then framed together the left-content frame with the other icon and add auto layout set to space-between or auto center, a width of 250px, and horizontal padding of 15 and vertical padding of 10. Now, I want this component to have three properties; state property which has three values: default, hover, and active, right icon property whose values are just yes or no, and inner sidebar property whose values are either true or false. Using slash-separated naming convention Figma will automatically group instances together, create properties and assign them values.

So I named the frame sidebar-item / default / yes / false so later Figma can create three properties and pass those names as values to each property starting at “default”. I then duplicated the frame and added a light grey fill and named it sidebar-item / hover / yes / false. I made another duplicate and this time I increased the grey value a little bit and named it sidebar-item / active / yes / false. The end result looks something like this:

I duplicated all three frames, removed the left icon and set auto layout to left-center. I then renamed the frames’ “/ yes” to “/ no”. The end result looks like this:

I then duplicated the above frames, detached the padding to independent paddings, assign padding left to 40, and then renamed the frames’ “/ false” to “/ true”. The end result looks like this:

I finally selected all the nine variations, click the component dropdown icon at the top center menu in Figma and I selected “Create component set”, which create a component with three properties. On the left panel, the properties have been assigned default names of property 1, 2, and 3 so I’ll rename them to State, Inner, and Right Icon respectively. See the image

The last thing is to make this component interactive. So, I switched to prototype mode and added a hover interaction to all default variant to change to hover variants on-hover. See the image

The sidebar-body component

In figma, once you create a component with certain number of children or nested components, you wont be able to add more children in an instance and that’s where most of us decide to detach an instance and live life freely until the product manager request changes and now you have to edit 20+ elements individually. To avoid that, I created a body component that houses sidebar-item components ranging between 1 and 10.

I got an instance of sidebar-item from my assets, duplicated it 10 times, selected all 10 instance, framed them with auto layout set to center-center and width and height set to hug content, and then named the frame sidebar-body / 10. I then duplicated it nine more times and decremented the amount of sidebar-items and the number in the name by one on each duplicate. The results looks like this:

I finally selected all ten variations, click the component dropdown icon at the top center menu in Figma and I selected “Create component set”, and renamed the property to “Number of items”.

With this component, I’ll always be able to increase number of sidebar-items anywhere without having to detach my instances.

The sidebar-item-group component

Some of the sidebar items will have inner items, so I need this component to be able to open and close them. This component consists of a sidebar-item and sidebar-item-body components. The sidebar-body component has 2 items for now. The steps I used to create this component is as follow; selected all needed instances > framed them > added auto layout set to center-center > set width and height to hug > rename the frame to sidebar-item-group > Ctrl + Alt + K (create component shortcut in windows).

The sidebar-title component

This component consists of three elements, the logo component, text layer, and icon component. And the reason I use components its so later its easy to swap the logo or the icon with something else. The logo component and text layer are framed together with an auto layout set to left-center, width set to hug, fill of white, and frame renamed to left-content. The left-content frame is then framed together with the right icon with auto layout of center-center and width set to hug.

I suppose I could have used the sidebar-item component but I have other plans in the future with this component that are outside the scope of this sprint so for now, this will do.

The sidebar component

This has two components, the sidebar-title and the sidebar-body component. For now the sidebar-body has four items. I then framed the two together, and this time without auto layout just fixed width of 275 and height of 1024. I placed a 20px gap between the sidebar-title and sidebar-body instances. I also added a fill of yellow.

Adding state to sidebar-item-group

I want the sidebar items to have open and close states and be activated when someone clicks in the prototype and also have the inner items link to specific pages. I can’t achieve the later because you can’t pass prototype links for every instance of a component. So what I decided to do is creating a component for each sidebar item that need inner items that way I can achieve both of my requirements.

So this consists of two instances of the sidebar-item-group component. On one instance has no inner items and icon on the right is chevron-down. The other instance has inner items and right icon is chevron-up.

Naming will depend with the name on the item. Example, for item user, I’ll name the component user / no and user / yes; yes and no being values of property open.

I’ll then select both instances and create a component (Ctrl + Alt + K ). Using prototype mode, I’ll add a click interaction to both instances that will point to each other.

Conclusion

Creating components in Figma has been a trial and error process. I made a couple of mistakes before that cost me a lot of time to fix. Important lessons I have learned is to properly structure my components and being willing to do the tedious work because its going to save a lot of time in the future.