Design Systems - freeCodeCamp.org

How to Move Figma Components to Penpot

Fatuma Abdullahi — Wed, 26 Mar 2025 23:20:33 +0000

Penpot is an open-source design tool for creating complete design systems. It is free, self-hostable, and allows multiple projects. Penpot supports reusable components and assets and allows files and libraries to be shared across projects. Penpot files can be exported in various formats to enhance collaboration.

Penpot designs directly translate to code that meets web standards, facilitating collaboration and hand-off between designers and developers.

This tutorial will walk you through recreating or moving existing Figma components to Penpot. It will include a rundown of the Penpot tool and how to use it, a brief comparison of the two tools, and important resources.

How to Recreate Existing Figma Files in Penpot
Understanding the Penpot User Interface
Understanding Penpot Layouts
How to Create and Use Penpot Components
How to Create Reusable Assets in Penpot
How to Add and Use Icons in Penpot
Figma Vs. Penpot - My experience
Resources and Notes

How to Recreate Existing Figma Files in Penpot

There are two ways to move or recreate existing Codex components from Figma to Penpot: By using the community-supported migration tool or by manually recreating the components and files.

Using the Community-Supported Migration Plugin

You can use this plugin to move your Figma designs to Penpot. It is a straightforward way to migrate from Figma, especially if you have many components.

To do so, add it as a Figma plugin and find the option in the context menu. Then, click on the "Penpot Exporter" option to activate the plugin. The plugin will then create a zip file for your component and download it.

Over in Penpot, in your Projects dashboard, click on the three dots context menu and select "Import Penpot files" to open a file picker window. Click on the zip file downloaded from Figma, and Penpot will create a new project with the same name as the zip file. This new project will contain your Figma component translated to the Penpot environment.

Looking at the new component, you'll notice that the migration plugin correctly picks up any child components and typography variables while keeping things fairly organized. But it does not pick up color variables.

Manually Recreating Figma components

Another way to move Figma components to Penpot is to recreate them manually. While this option is more tedious than the previous one, it gives you fine-tuned control over how the component looks, how the files are organized, and how the assets are carried over.

It is an excellent excuse to spruce up the existing components, especially if there are few. It is also a good exercise for first-time users to grasp Penpot.

To effectively move components using this method, you will need to understand how Penpot works. The following concepts will help make this process more efficient.

Understanding the Penpot User Interface

Penpot's UI is pretty similar to Figma's, except that Penpot defaults to Dark Mode. You have your controls on the right and your files, assets, and layers on the left, with a canvas in the middle.

Both have a toolbar that enables you to interact with the canvas. The toolbars have slightly different icons and names but have the same functionality. Notably, in Penpot, the Frame tool is called Board.

Penpot supports most of Figma's features, except for Design Tokens, which will be added soon.

Understanding Penpot Layouts

Penpot supports Flex and Grid layouts. These layouts allow you to position items precisely and simplify creating fluid designs. For those familiar with CSS Grid and Flex, they work in the same way.

Flex layout allows you to organize the elements within a parent container, like a board or an encompassing shape, across one dimension, width, or height. It enables you to determine the spacing and positioning of the child elements via visual controls with labels on the right side panel.

Grid layouts allow the same controls as Flex layouts but with the added flexibility of simultaneously spanning a child element across both dimensions. This makes Grid layouts quite helpful in creating complex and nuanced designs.

How to Create and Use Penpot Components

Creating a component in Penpot is relatively straightforward. You select the elements that will make up the component, then right-click and click "Create component," turning your selection into a component.

Your new component will be available under the "Assets" tab on the left side panel. To use, drag it onto the canvas.

You can also create copies of the component. By default, the copies are tied to the main component, and any changes to the main will be reflected in all copies. You can override this by detaching the copies from the context menu.

How to Create Reusable Assets in Penpot

Penpot has three asset types: Typography, Colors, and Components, with Penpot design tokens coming very soon. Typography refers to information on font types and weights that make up text styles. Colors enable you to create and sort your repeated colors. Components refer to reusable design pieces and, in this context, include graphical items like icons and images.

To create a color or typography asset, click the "Assets" tab and the plus icon on the relevant accordion item. For color, it will open a color picker. Paste the hex value in the appropriate place, then save it. The color will show up in the accordion drop-down. You can click on it to give it a semantic name if desired.

For typography, click on the plus icon at the relevant accordion. This will open a panel where you can specify the font, font weight, letter spacing, and line height. You can also change the asset's name after it's saved.

How to Add and Use Icons in Penpot

You can add icon packs and libraries in Penpot from the Project dashboard. At the bottom of the page, a banner containing a list of commonly used libraries is displayed. These libraries usually include a few icon packs. You can scroll through to choose one or click on the explore more option at the end of the slider to open up the dedicated Penpot templates page.

If you find a relevant library from the bottom banner, click the download icon. Penpot will prompt you to add the selected library. Once you accept it, it will be added to the "Libraries" menu item on the left side panel.

If you click through to the dedicated templates page, clicking the download icon will download a Penpot file. You can then drag it to the projects page, and it will also be available in the "Libraries" section of the projects page.

To use the libraries within your project file, click the "Assets" tab on the left side panel, then click the "Libraries" button below it. This will open a modal with all your libraries listed under "Shared Libraries."

Click on the plus icon on the ones you want to use in your project. This will link that library to your project and be available in the left side panel. You can then search for any particular icon from the search bar and drag it onto the canvas.

To remove a library from your project, click on the libraries button. In the modal, under "libraries in this file," all used libraries are listed. Click on the link icon next to the library you want to remove. This will delink it and remove it from the side panel.

Figma Vs. Penpot – My experience

As a first-time user of Penpot and a long-term casual user of Figma, I noticed some differences and encountered some teething problems.

Swapping Out Icons

You can swap out components in Penpot! It's too bad that I discovered this after I had finished my first component migration.

Renaming Files and Folders

I struggled to find how to rename files and folders in Penpot. I kept looking for the shortcut or a menu item in the context menu. It turns out you have to double-click on the title to change it. You can rename files in the same way in Figma, but I just never did it like that.

Adherence to Web Standards

I was pleasantly surprised at the code quality that Penpot provides, along with your designs. It meets the w3c standards, but the HTML could be more semantic.

Penpot Design System

Penpot avails its design system along with lots of little libraries that help you understand how the tool works. This is very nice as it allows you to get a good understanding of design language and how to organize design systems.

The Penpot toolbar lacks essential shapes such as pen, arrow, and triangle. While you can recreate this with the path tool or use a library to import them, it is definitely something I missed that was readily available in Figma.

It took me a few tries to get comfortable with Penpot and in the end, I really liked it. Plus, its open-source nature makes it even more endearing.

Resources and Notes

Using Penpot has a learning curve, even if you are familiar with other design tools like Figma. These resources can help you get up to speed faster and make you more efficient with Penpot.

How to Use a Design System – a Case Study

Faith Olohijere — Tue, 17 Oct 2023 14:37:29 +0000

You may have heard of, studied, or used a design system at some point in your coding career. But what role do design systems actually play in our projects? Why should we even bother to create or use them?

In this guide, you'll be learning what design systems are, why they're important, typical elements of a design system, and a practical example of how to implement a design system as a designer. Let's dive in!

What is a Design System?

Design Systems are structured collections of reusable design components and elements. We use them to create a consistent and cohesive user experience across a range of products or services.

A design system is like a set of building blocks and rules for creating digital products like websites and apps. Design systems are made up of key elements like typography, color palette, icons, spacing and layout, and so on.

Importance and purpose of a Design System

Design systems are important for many reasons.

Efficiency

Design systems help you become more efficient. Because it's a collection of reusable components, it saves the time of producing new elements, and helps designers produce new features quickly in projects. It also serves as a productivity booster.

Collaboration

A team trying to build a product may consist of designers, developers, product managers, and others. The design system helps all members of the team make reference to the brand guidelines, no matter what they working on. It also helps to make sure everyone, including stakeholders, are involved in the design process, and facilitates collaboration.

Consistency

Design systems ensure consistency in the user interface and user experience across various products and platforms.

We wouldn't want a scenario where a button design is inconsistent on different screens, would we? That's where the design system comes in. It helps our design assets and elements stay consistent, and it can always serve as a reference point.

Scalability

Scalability here refers to the ability of the design system to grow and adapt to the changing needs of a project or an organization.

A crucial element of any design system is scalability. Design systems help in situations where the project might need to expand to accommodate different devices and platforms or when the team is expanding or when trying to accommodate new trends and practices.

How Design Systems work

To understand how a design system works, you just need to know the kinds of assets or components that make up the system and their roles.

A typical design system comprises of the following parts:

Colours

When you open a design system, one of the first things you'll see is a colour palette section. It's one of the most common elements in a design system.

Design systems define a set of of primary and secondary colours, as well as their various uses. This includes background colours, text colours, and so on.

Colour palette section of Rayna UI design system

Colour palette section of Atlassian design system

Typography

Another typical element of a design system is typography. Every design system usually includes guidelines for typography, specifying fonts, font sizes, line height, and so on.

It may also define how typography is used for different content types like headings and body text, making sure they're accessible and legible for design use.

Typography section of Google's Material Design

Typography section of Shopify's Polaris

Icons

Icons are very important when trying to give visual clues to your users. Design systems provide a set of standard icons and guidelines for their usage, ensuring they are recognizable and consistent.

Iconography section of Atlassian design system

Iconography section of Google's Material Design

Grid and Spacing Styles

A grid system helps establish a consistent structure for different components or pages.

Design systems provide spacing guidelines specifying margins, padding, and other layout-related rules to maintain alignment to create a visually pleasing and organized design.

Grids and spacing styles section of Rayna UI design system

Spacing section of Atassian design system

Documentation

Every well-structured design system has some form of documentation that usually explains how to use the elements and guidelines effectively. The documentation also helps designers and developers understand how to use and implement the design system.

Documentation for button styles in the Rayna UI design system

Documentation for App icons on Apple's Human Interface Guidelines

UI Patterns and Components

UI patterns and components are the building blocks of a user interface. Design systems define UI patterns and components such as buttons, forms, modals, accordions, navigation bars, and so on, along with guidelines on how and when to use them.

UI Components section of Shopify's Polaris

UI Patterns section of Aplles's Human Interface Guidelines

Content Guidelines

These cover how text and imagery is used in the user interface. They may specify tone, image use, and content hierarchy, ensuring that the content is consistent and aligns with the brand guidelines.

Content guidelines section of Shopify's Polaris

Content guidelines section of Google's Material Design

Accessibility Guidelines

Most design systems contain accessibility guidelines in order to increase the usability of products for people with all kinds of abilities. These guidelines ensure that the design is inclusive and complies with accessibility standards like WCAG (Web Content Accessibility Guidelines). This includes colour contrast, keyboard navigation and other accessibility features.

Accessibility guidelines of Google's Material Design

Accessibility guidelines of the Atlassian design system

Examples and Use Cases

Most design systems also contain examples and use cases of the design system in action to help designers and developers understand how to implement it effectively.

Fintech Dashboard use case from Rayna UI design system

Applying type use case from Google's Material Design

Differences Between a Design System and a Style Guide

Style guides and design systems are very similar and can often be confused for the same thing – but they're different.

Some differences between design systems and style guides are:

Scope

Style guides are relatively limited in scope and may not include detailed UI components or interactions.

Design systems on the other hand, are more comprehensive and encompass a broader range of elements including interactive components, user interface guidelines, amongst others.

Consistency

Style guides typically focus on ensuring brand consistency, helping maintain a uniform look and feel across various materials and platforms.

Design systems aim to establish both brand and user interface consistency, by providing reusable components and interaction patterns.

Evolution and Scalability

Style guides tend to evolve more slowly, and might not be as scalable as design systems. Design systems are more adaptable and evolve with the product or service.

Collaboration

Style guides are mainly used by designers to ensure visual consistency across a brand. They have a limited role in facilitating collaboration amongst designers and developers.

Design systems, on the other hand, promote collaboration by providing a common language and shared resources between designers and developers.

Real-Life Examples of Design Systems

A lot of software corporations have created their own design systems to help ease the work of their designers and generally make it a smoother experience to build products.

Google, for instance, has a design system which they use for their products – you can see similar styles and elements in most of their products.

Most of these design systems are free and available to the public for use. Some examples of real life design systems are:

Google Material Design by Google
Apple Human Interface Guidelines by Apple
Atlassian Design System by Atlassian
Polaris by Shopify
Carbon Design System by IBM

How to Use a Design System for Your Designs – Rayna UI Design System Example

For this article, we'll be using the Rayna UI Design System to illustrate how to use a design system for your designs.

It's a newer design system that I recently learned about, so I thought I'd share my experience by using it for a challenge.

Step 1 – Download the Design System

The first step will be to download the design system you're trying to use. In this case, we'll download the Rayna UI Design System. Go to their landing page @Rayna UI and grab it from there.

Rayna UI Landing page

Next, click on "Get Rayna UI" to download the design system.

Rayna UI Landing page

Next, type your email in order to get the design system sent to your email address.

Provinding your email address

The link to the Figma file will be shared to your email, and you can open it.

Checking your email

Scroll down in the email to find the link to view the Rayna UI Figma file.

Checking your email

Click on the link sent to your email to open the design system. The link will open up the Rayna UI Design System on the Figma community.

Opening the Rayna UI file in Figma Community

Next, click on the "Open in Figma" button by the right side of your screen. This will open up a Figma file containing all assets and components of the Rayna UI Design System.

Opening the Rayna UI file in Figma

Step 2 – Publish the Rayna UI Design System to your libraries.

The next step is to publish the Rayna UI Design System to your libraries, so you can use it for any design.

The third page on the Figma file (Get Started) contains a guide to getting started with the design system. Included in this guide are resources for beginners so you can gain a solid grasp of the basics, along with steps to take to publish and enable the library in other projects.

Getting Started with the Rayna UI design system

Exploring the getting started section

Follow the steps given in the guide to publish the library. First, go to the assets panel in the top-left area of your screen, and press the book icon.

Clicking on the "Assets" panel

Clickiing on the "book" icon

When you click on the book icon, it'll bring up a modal for you to publish the library.

Publishing the library

Click on the publish button next to the file on the modal.

Moving the library to a professional team

I was asked to move the library to a professional team, so I could publish there. Click on the "Move to team" button to move the file.

Selecting a team.

Next, select the team file you want to publish the library to.

Selecting a team

After selecting a team, you'll have to publish the design system to the team files.

Publishing the design system

You'll receive a notification that your library has been published.

How to Use the Design System in Your Projects

Next, we'll be learning how to implement the design system in a design. I'll be designing a sign up screen for a fintech website to illustrate this.

Before starting your design, you can copy some icons you may need from the design system to your design file. I tend to copy the buttons and input field styles I may need, if I want to adhere strictly to the design system.

Copied elements from the design system page.

For the sign up page I'm going to be designing, the details I need are the name of the website, input fields (full name, last name, email address, password, confirm password), and the buttons or CTAs (sign up and sign up with Google).

Step 1 – Select a Frame

Firstly, I'll open the frame I'll be using. For this design, I'll be using the desktop frame (1440 x 1024).

To open a frame, go to the tools panel on the top left-hand corner of your screen. A panel with different kinds of frame types and sizes will come up.

Tools panel-Frame

Open the Desktop section and choose "Desktop" (1440 x 1024). The frame will appear on your screen, and you can start designing.

Choosing a frame

Step 2 – Add Grid Styles

I like using grids for arrangement and consistency in my designs, so I'll add a grid layout to the frame.

In the Rayna UI Design System, there are already existing grid styles so I can just choose one. To add a grid style, go to the panel on your right, and click on the 4-block menu on the layout grid section.

Grid style panel

A list of different grid styles on the design system will come up, and you can choose any which corresponds with the kind of screen you're designing for.

Choosing a grid style

Since I'm designing with a desktop frame, I'll choose Large.

Choosing a grid style for a frame

You can detach instance to see the specifications of the grid style you chose. To detach instance, click on the detach icon next to the eye icon on the layout grid section.

Detaching style

You can now see the specifications for the grid style you chose. Since I chose Large, the grid specifications are:

Count – 12, using columns
Colour – F4BBAE, with opacity set to 20%
Type – Stretch
Width – Auto
Margin – 112
Gutter – 32

Grid style specifications

Step 3 – Add Content

I'll go ahead to start adding content to the screen. I'll use a text to represent my logo – Ketusha.

You can also control text styles and sizes on the design system. To do that, go to the Text panel on the left hand side of your screen.

Editing text size

Confirming text size

Following the same format, I typed a heading for the form called "Sign Up".

Sign Up form heading

Earlier, I suggested that you copy the icons, buttons, and input fields samples from the design system file, so you can use them easily while designing. Now, I'm going to paste the input field sample I copied in my frame.

Pasting input field sample in frame

Since I want the input field to be longer, I'll elongate it slightly to 400 width. It was previously 375 width.

Elongating input field width

Next, I'll structure the input field to how I want it to look like – without icons.

Input field without icons

Next, I'll edit the label to the label I want for my design.

Editing label

Next, I'll just duplicate the input field until I'm satisfied, and also edit all the labels.

Adding other input fields

Next, I'll add the buttons to the screen.

Adding CTAs

I'll add the "Sign up with Google" button, so the user can have different options for signing up on the platform.

Adding other sign up options

Next, I'll try to paste the google icon inside the "Sign up with Google" frame but that might not be possible.

Pasting Google icon

To be able to paste and replace an item inside the selection, I'll have to detach the instance. To do this, right click on the item you're trying to replace. A list of options will come up. Click on "detach instance".

Detach instance

After that, right click on the icon again, and "paste to replace".

Paste to replace

The icon will be replaced instantly.

Web sign up form

We just created a sign up page using the Rayna UI Design System!

Keep in mind that using a design system doesn't mean you cannot be creative and add your own flair. You can add your own style and creativity as much as you'd like as you go.

Conclusion

Using design systems is a necessary skill every designer and developer should cultivate.

Design systems are a critical component of modern product design and development, fostering collaboration, efficiency, and innovation.

Thank you for reading!

How to Create a Design System in Next.js with Tailwind CSS and Class Variance Authority

freeCodeCamp — Thu, 21 Sep 2023 07:58:30 +0000

By Olasunkanmi Balogun

Building a web application and producing a smooth user experience in the always changing world of web development requires more than just good looks – you also need to make sure that your application's design is efficient and consistent throughout.

If you have a design system in place, you can easily build UI components that are consistent and can be reused across numerous projects while still looking nice.

A design system is a set of reusable UI components and design tokens. These tokens are like building blocks that include things like buttons, colors, and fonts. Its goal is to enable developers and designers to create engaging product experiences by providing consistent user experience across all products.

Designers often use tools like Figma to create these systems. Here's an example of a design system made in Figma:

After designers make these parts, developers can use different tools to actually use them and build the website. There are various frameworks that frontend engineers can choose from to do this. Some popular ones are MaterialUI and ChakraUI. These libraries can make things easier, but they might not cover all the special cases you want.

If you or your design team have specific designs in mind that don't match what existing libraries offer, you'll need to dive into writing a substantial amount of code. However, this process can quickly become tiresome and burdensome, especially when the code you're creating lacks consistency or when you find yourself repeatedly constructing the same UI elements.

This is where a design system becomes incredibly valuable. Armed with the knowledge of how to implement a design system, you gain the ability to craft a tailored design that seamlessly integrates with the existing design system, offering the level of flexibility you desire.

Furthermore, this approach offers the advantage of only having to construct only the components you truly need. Unlike using libraries, which often come with numerous pre-built components you might never use, this method keeps your codebase focused and efficient.

Creating your own design might sound appealing, but it's not as straightforward as it might appear.

Nonetheless, with the assistance of styling tools such as Tailwind CSS (which is ideal due to its high level of customization), a library known as cva (which is short for class-variance-authority), and along with TypeScript, the process of establishing your custom design system within Next.js becomes notably achievable.

Now that you have a clear understanding of what a design system is and its significance, continue reading to discover how these tools can be effectively combined to achieve our objectives.

Project Setup: Installation Of The CVA Library

For the purpose of this article, it is assumed that you have already set up your Next.js project and incorporated TypeScript and Tailwind CSS.

If not, integrating these two elements into a new Next.js project is a straightforward process.

Following this initial setup, you can effortlessly add the CVA library to your project using the following command:

npm i class-variance-authority

With the inclusion of CVA, a user-friendly interface is at your disposal, simplifying the definition of variants.

These variants enable the conditional application of class sets, while also offering the means to express default variations. If this sounds a bit complex at the moment, don't worry – we'll delve into practical examples as we move forward.

Practical Example: Implementing a Custom Design System

Imagine a situation where you're constructing a CRUD application, equipped with buttons to carry out various actions such as create, read, update, and delete.

While these buttons might share common attributes like font-size and border-radius, they might differ slightly – for instance, in their colors. Perhaps you'd prefer a red button for the delete action, a blue one for create, and a black one for update.

Traditionally, you might consider creating separate components for each button and assigning them distinct colors. For instance, to make the black button, you'd include the Tailwind CSS utility class bg-black to set the background color:

export default function Button() {
  return (
    
  );
}

However, instead of creating separate components for each button, you can streamline the process by designing a single button component that can adapt to the various button variants you need. This concept is the heart of a design system.

Let's explore how we can transform this same button component we previously created to suit our needs.

Our first step is to import the cva function and the VariantProps from the class-variance-authority library. As we proceed, the significance of these imports will become apparent:

import { cva, VariantProps } from 'class-variance-authority'

Subsequently, we will define a variable named buttonStyles. This variable will house the invocation of the cva function.

Within this function, we'll first provide the default styles for the buttons, followed by the variants object. This object will contain the variations for the different types of buttons we desire. This segment is pivotal when implementing the design system.

In your code, include the following code snippet:

const buttonStyles = cva("rounded-3xl py-2 text-white w-80 font-sm", {
  variants: {
    intent: {
      primary: "bg-blue-700",
      secondary: "bg-black",
      danger: "bg-red-600",
    },
    defaultVariants: {
      intent: "primary",
    },
  },
});

Within the embedded variants object, there exists another object named intent. This is where you assign names to the distinct button variations you desire – for instance, primary, secondary, and danger, corresponding to the create, update, and delete buttons respectively.

The style defined for the intent specified when rendering the button will be applied to that button, wherever it appears.

Additionally, the variants object features another property called defaultVariants. The intent within the defaultVariant object will be applied when no explicit intent is provided. In this instance, we have set the default intent to primary.

Next, we'll define an interface named ButtonProps which extends the VariantProps type provided by the class-variance-authority library:

interface ButtonProps extends VariantProps {
  text: string;
}

This interface is used to define the props that the Button component will accept. The VariantProps type from class-variance-authority adds the intent property, which will be used to determine the variant of the button. The interface also includes an additional property called text, which is of type string, it is the actual text that will appear on the button.

Having done this, we can go ahead and implement the Button component with respect to this defined interface:

export default function Button({ intent, text, ...props }: ButtonProps) {
  return (
    
  );
}

In the Button component function, we used object destructuring to receive the intent property from the ButtonProps passed to the component.

Additionally, we used the spread operator (...props) to spread any other props that might be passed to the component. This allows us to easily pass down any other attributes or event handlers to the

How to Create and Implement a Design System with CSS

Beau Carnes — Tue, 08 Feb 2022 01:45:18 +0000

If you are going to build a multi-page website, it is good to create a design system to help tie everything together.

We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to create and implement a design system with CSS.

Kevin Powell created this course. Kevin is a CSS guru who has created many popular web development courses on a variety of platforms.

This course will teach you how to bring high-quality Figma designs to life in the browser. You will learn how to create a space travel website from scratch.

In this course, you’ll test your HTML, CSS and JavaScript skills by building out a responsive, multi-page site featuring a homepage, buttons, a navigation bar, tabs, keyboard navigation and underline, dot and number indicators.

You’ll also learn how to create an effective design system to ensure that your site is sharp and professional, and your coding is as efficient as possible.

After completing this course, you’ll have a deep understanding of CSS and responsive design and the knowledge to build an interactive site which users will love.

Here all the topics covered in this course:

Creating design systems
CSS resets
Utility classes
Using color
Responsive typography
Adding spacing
Effective buttons
Underline indicators
Dot indicators
Number indicators
Grid containers
Responsiveness
Adding background images
Navigation
Open/close buttons
Accessibility tweaks
Skip to content
Alignment
The picture element
Keyboard navigation
Tabs
Refactoring

Watch the full course below or on the freeCodeCamp.org YouTube channel (7-hour watch).

How to build design system with SwiftUI

freeCodeCamp — Mon, 09 Sep 2019 23:42:20 +0000

By Vince MingPu Shao

Building a design system to support one product is not easy - it has to be robust and flexible at the same time for scalability. Though challenging, lots of great resources have shared useful principles and approaches that help teams build a good system both visually and programmatically. Standing on their shoulders, this article tries to contribute to an untouched ground by focusing on building a good system in SwiftUI.

Why do I write this article

During my first summer in ITP at New York, I'm lucky to have the opportunity to work as an iOS developer intern at Line Break Studio. One task I've been assigned to is building a design system in two steps: first visually in Sketch, and then programmatically in SwiftUI. The experience of experimenting with the new framework and building a design system with it has been amazing, but also buggy along the way. That's why we'd like to share our experience with the community, hopefully making your development process easier.

What is SwiftUI

Apple released this groundbreaking new framework in WWDC 2019, which is one of the bests in years. From the point of view as a web developer, the project development experience in SwiftUI is closer to which in conventional front-end stack and frameworks.

This is definitely an awesome move because programming interface and managing states are drastically easier than before. And the best part of this improvement is that one can integrate UIKit and SwiftUI smoothly. To learn the basics of SwiftUI, the official tutorials provided by Apple are very helpful.

The demo project

For demonstration purpose, I put up a simplified version of design system we built in Line Break Studio. It a set of button components in different forms, which are built on top of two lower level parts: typography and colorPalette.

Dynamic rendering view of the demo project

The project is public on GitHub, and I'm using Xcode 11 Beta 5 for development. An Airtable base as design system management hub (read more about workflow management) is also public for reference.

Principles of building design system

Design system in code is a middleware between designers and developers. Developer of the system takes inputs from design system in visual form, and produces API that's identical with which for further development. Following two principles should be recognized to complete this system in code:

1. Communicate with tokens

Fundamentally, the purpose of having a design system in program is not about better code management or development efficiency, but to make sure the view is consistent with design files. To achieve that goal, using tokens to signify certain color, font, size or any visual elements is crucial to maintain quality of communication between developers, designers and managers in a team.

Lightning Design System's tokens built by Salesforce

2. Levels of hierarchy

In EightShapes' article, it points out that we should "Show options first, then decisions next", because "You can't make decisions without options."

EightShapes' article about design tokens

This kind of ordering architecture loosens the degree of coupling between different levels, hence providing more flexibility and dynamic for possible revisions. The way I structure the levels is in this order from bottom to top: material → base → token. But it could be anyway the team's comfortable with.

Diving into code

Following section is a list of highlights we'd like to point out based on our experience. Please visit the GitHub repo for complete code. Any feedbacks or critics are welcome for improvements.

1. Architecting levels of hierarchy

There're two ways of stacking materials at lower level to construct tokens at highest level:

Use enum for type safety and code literacy

Advantages of using enum in code as grouping wrapper or parameter in function have already been well recognized. One point worths mentioning here is the implementation of levels of hierarchy.

We always store the raw values, including font size (CGFloat) and font name (String), at the lowest level, because we don't want to mess around with it. But because raw value must be a literal in enum, we can't just assign a case to be a value from the other enum.

To work around this problem, we implement a function getValue, which returns the raw value in switch case when necessary.

Use struct for easier structure

Though enum is great, we don't need its unique feature in some cases. For example, because Xcode takes care of the heavy job of processing dynamic colors, and no parameter options are required in API endpoint, we can set up color palettes by simple two levels of struct.

2. Clear and straightforward naming of `API` endpoint

Naming convention is another broad topic for discussion and debate. In addition to basic Swift conventions, the only two rules we abide are, 1) no acronym and 2) making it simple. For example, to use typography and color system, instead of creating new endpoints, we make extension from Font and Color structs. This approach decreases the effort to memorize unfamiliar API names for developers.

3. Manage color sets dynamically in two modes

So dark mode has become a standard in industry, and both iOS and Android team have implemented this feature. It's a good trend for users, but could bring designers and developers some challenges, including managing and naming the color sets, especially gray scale ones.

Material Design's dark theme guide

To think and communicate about gray scale colors dynamically, using terms like white, light, black or dark doesn't work. Because if we referred to a dynamic color #000000 (black in HEX) black or dark in light color scheme, how do you talk about this particular color, which should turn into #FFFFFF (white in HEX), in dark color scheme? defaultDark or lightDark?

Confusing transition of color sets

It is very confusing to name gray scale dynamic color sets in conventional approach. To avoid this confusion, we use theme and contrast to manage one set of color in light and dark schemes instead.

Example color naming in demo Airtable base

Note that a gray scale color doesn't always need to be reversed in opposite color mode. In these situations that light color remains light and dark remains dark, we simply name name it light or dark instead.

Once we wrap our head around this naming method, managing this architecture of color palette is easy in Xcode. To create a color set, simply create a new Asset Catalog file → add a new Color Set → and change Appearances to Any, Light, Dark will do.

How to add color asset in Xcode

4. `environment` settings

One awesome feature in SwiftUI framework is the environment modifier, which provides ability to control environment values on target view. In terms of building design system, this ability provides convenient approach to change app's font at root level. And the other advantage of using environmentValue is to change and test light and dark color schemes in development.

5. `buttonStyle` and button label

Comparing to the old days in UIKit, constructing reusable buttons in SwiftUI is drastically easier. The Button view consists of two parts, which are action closure (event to be fired as button is pressed) and label (body of the button). The view can then be chained with a modifier buttonStyle. To learn details about building reusable buttons,I recommend reading Alejandro's tutorial, which is comprehensive and useful.

In our customized button components, first step is to create two structs, including TokenButtonLabel and TokenButtonStyle. These two structs are programmed according to the types of buttons we have in design files. For example, there're only two types of labels: icon and text. Each type has an according init function designed with different parameters for new instances.

On the other hand, there're four major types of button styles: circle icon, icon, capsule and text. To follow ButtonStyle protocol, a makeBody func has to be implemented. This function brings us a configuration property, providing a native isPressed value to monitor if the button is pressed or not.

Finally, stacking on top of TokenButtonLabel and TokenButtonStyle, the endpoint of the button component API will be TokenButton - a grouping that wraps content and style of button together, conforming to the button types in visual design system.

6. `AnyView` as wrapper

As we're dealing with the makeBody function brought by ButtonStyle protocol, we found a useful tip to work with View. To store a view in a variable, the type annotation could be indicated as AnyView, which works as a general container of views in SwiftUI.

In our case, because we want to add the opacity modifier to configuration.label to all types of buttons, instead of doing so repeatedly in each switch case, it makes more sense to chain the modifier at the end altogether. We can achieve this pattern by using the advantage of AnyView in this way:

7. Build view modifier with `mutating` function

To update styles of the buttons dynamically, we can build our own modifier. First instantiate customized mutable state properties in view, and then create a mutating function which returns a Self type after updating the target state property.

8. Tricky border style

One drawback of SwiftUI is styling a circle shape with circular border is not straightforward at all. I struggled for a while, and finally found a solution here on StackOverflow. A clipShape and an overlay modifier are required to make it work.

Conclusion

SwiftUI is an incredible improvement Apple makes. Though flaws still exist, building a robust and flexible design system with it, and furthermore complicated UI in iOS is way efficient than ever. I hope this article is helpful for any iOS team trying to build UI, and always welcome to any feedbacks!

? Read more of my works at vinceshao.com / Follow me on Twitter or LinkedIn

How to connect a React Design System with Firebase and Redux

freeCodeCamp — Tue, 02 Apr 2019 20:41:58 +0000

By Nazare Emanuel Ioan

After almost two years of working with ReactJS at Creative-Tim, years while I’ve been creating simple front-end ReactJS projects, front-end templates, I have started to learn more about React, and create some tutorials.

After long hours of watching and reading firebase tutorials, firebase & react tutorials, and reading the officials docs of firebase, I am ready to write myself a tutorial.

What I am going to use in this little tutorial article:

We are going to use Redux and Firebase for Login, Register and to create some dynamic stat cards.

I will focus my attention on Firebase, and give explanations just about this. If you do not know Redux, it would be best to take a look at my other tutorial about what Redux is, and what it does. After that, you can easily return here.

Getting started with a React Design System

Since we do not have time to walk through creating our own design system — this would require days, weeks or even months to do — we will take one I’ve already worked on.

To get this project you can do one of the following (I am going to use the first option):

Clone from Github:

git clone https://github.com/creativetimofficial/argon-dashboard-react.git

Download from Github (by pressing the link, it will automatically start the download)
Download from Creative-Tim (you will need to have an account there)

After you’ve got the project, cd into it (in my case will be):

cd argon-dashboard-react

Let’s start the product and see how it looks like:

npm run install:clean

npm run install:clean — output

Adding Redux to this starter template

Actions, Reducers, and Store

Let’s go back into the terminal and run:

npm i -E redux redux-thunk react-redux

When I ran this command, on my machine the installed versions were as follows:

redux@4.0.1
redux-thunk@2.3.0
react-redux@6.0.1

At the beginning of the tutorial, we’ve set our goal to make two things happen: login and register (auth) and to be able to add some dynamic cards from our database (simple add). This means we’ll have two reducers, one for authentication and one for the dynamic cards (also, we’ll need one root reducer that will combine these two). We’ll also have four actions, one for login, one for register, one for adding the cards to our database (you can think about these as to some todos) and one for getting from the database all these cards (which we’ll render in our app). And also, just a store.

So, this being said let's run the following commands:

1 — Linux/Mac commands

mkdir src/actionsmkdir src/reducerstouch src/actions/addStatCardAction.jstouch src/actions/getAllStatCardsAction.jstouch src/actions/loginAction.jstouch src/actions/registerAction.jstouch src/reducers/statCardReducer.jstouch src/reducers/authReducer.jstouch src/reducers/rootReducer.jstouch src/store.js

2 — Windows commands

mkdir src\actionsmkdir src\reducersecho "" > src\actions\addStatCardAction.jsecho "" > src\actions\getAllStatCardsAction.jsecho "" > src\actions\loginAction.jsecho "" > src\actions\registerAction.jsecho "" > src\reducers\statCardReducer.jsecho "" > src\reducers\authReducer.jsecho "" > src\reducers\rootReducer.jsecho "" > src\store.js

Actions

src/actions/addStatCardAction.js

The stat card that we want to dynamically create is one of these:

stat cards to dynamically create

As we can see, they have a name, a stat, an icon (that varies in color), a footer icon and percentage (that once again, varies in color) and a footer text.

So, we’ll need to create the action that will accept all of the above, like so:

const addStatCardAction = (  statName,  statDescription,  statIcon,  statIconColor,  statFooterIcon,  statFooterIconState,  statFooterPercentage,  statFooterText) => async dispatch => {  // here we'll make a call to our database (firebase)  // to add our new stat card with the above details

  dispatch({    type: "addStatCard",    payload: {      statName: statName,      statDescription: statDescription,      statIcon: statIcon,      statIconColor: statIconColor,      statFooterIcon: statFooterIcon,      statFooterIconState: statFooterIconState,      statFooterPercentage: statFooterPercentage,      statFooterText: statFooterText    }  });};

export default addStatCardAction;

As we can see, we’re going to work with async action creators, since we are making calls to a database. After the call is done, we’ll need to send to our store the data that we’ve just added to our database in firebase.

src/actions/getAllStatCardsAction.js

This one will not require any params, since it only retrieves something from the database. So the code will look like this:

const getAllStatCardsAction = () => async dispatch => {  // here we'll make a call to our database (firebase)  // that will retrieve all of our stat cards

  dispatch({ type: "getAllStatCards" , payload: {}});};

export default getAllStatCardsAction;

src/actions/loginAction.js

For login, we’ll have an email and a password, so this is the code for this action (also our login form has an email and a password):

const loginAction = (email, password) => async dispatch => {  // at the moment, since we haven't yet connected to the database  // we are going to say that each time we try to login  // we should not be able to log in (that is why we send false)

  dispatch({ type: "login", payload: false });};

export default loginAction;

src/actions/registerAction.js

const registerAction = (name, email, password) => async dispatch => {  // at the moment, since we haven't yet connected to the database  // we are going to say that each time we try to register  // we should not be able to register (that is why we send false)

  dispatch({ type: "register", payload: false });};

export default registerAction;

Reducers

src/reducers/statCardReducer.js

Since we have two actions about the stat card, we’ll have two cases in this reducer:

export default (state = {}, action) => {  switch (action.type) {    case "addStatCard":      console.log("adding ", action.payload);      // since we will always fetch our stat cards      // from firebase, each time we add one new      // we will just return the state      return state;    case "getAllStatCards":      console.log("getting ", action.payload);      console.log(action.payload);      return {        // keep the old state        ...state,        // add all the cards from the database        // they will come in a json format,        // so we need to convert them to array        statCardState: Object.values(action.payload)      };    default:      return state;  }};

We’re also logging what we are adding and what we are trying to get from our firebase.

src/reducers/authReducer.js

export default (state = {}, action) => {  switch (action.type) {    // in both cases, we want to tell our app,    // if the user is logged in or not    // if the user registers, he will automatically be logged in

    case "register":      console.log("register is ",action.payload);      return {        // keep old state        ...state,        // add true/false if the user is or not logged in        loggedIn: action.payload      };    case "login":      console.log("login is ",action.payload);      return {        // keep old state        ...state,        // add true/false if the user is or not logged in        loggedIn: action.payload      };    default:      return state;  }};

When we register a new user, we’ll automatically log them in. We’ve also added some logs to see if the registration or the login is successful.

src/reducers/rootReducer.js

This is for combining the above reducers:

import { combineReducers } from "redux";

import authReducer from "reducers/authReducer";import statCardReducer from "reducers/statCardReducer";

export default combineReducers({  // the authReducer will work only with authState  authState: authReducer,  // the statCardReducer will work only with statCardState  statCardState: statCardReducer});

Store

src/store.js

Since we have async action creators, we’ll need a middleware that will allow us to use these actions creators, hence the usage of redux-thunk:

import { createStore, applyMiddleware } from "redux";import reduxThunk from "redux-thunk";

import rootReducer from "reducers/rootReducer";

function configureStore(  state = { authState: {}, statCardState: {} }) {  return createStore(rootReducer, state, applyMiddleware(reduxThunk));}

export default configureStore;

Connecting our app to our store

At the moment, if we were to start our app, nothing would happen, since all the actions and our store are not being rendered in our app. So this is what we are going to do now.

First, let’s add our store, for this, we need to fo inside src/index.js.

Before the ReactDOM.render() function we need to add the following imports:

import { Provider } from "react-redux";import configureStore from "store";

And after that, we’ll wrap the BrowserRouter from the ReactDOM.render() function inside the Provider tag as follows:

  <BrowserRouter>    <Switch>      <Route path="/admin" render={          props => <AdminLayout {...props} />      } />      <Route path="/auth" render={          props => <AuthLayout {...props} />      } />      <Redirect from="/" to="/admin/index" />    Switch>  BrowserRouter>,

Our next concern is to make our users to be redirected to the login page if not authenticated and if they are authenticated to be redirected to the user page. Basically, if they are logged in, they will not be able to access the Auth layout (src/layouts/Auth.jsx), and if they are not, they won’t be able to access the Admin layout (src/layouts/Admin.jsx).

Let’s go inside src/layouts/Auth.jsx and after the React import, make the following imports:

import { connect } from "react-redux";import { Redirect } from "react-router-dom";

After that let’s change the export of this component as follows:

const mapStateToProps = state => ({  ...state});

export default connect(  mapStateToProps,  {})(Auth);

After this, we go inside the render function of this component, and before the return, add the following code:

if (this.props.authState.loggedIn) {  return <Redirect to="/admin/user-profile" />;}

So, if the user is authenticated, they will be redirected to their profile page.

Next, we go inside src/layouts/Admin.jsx and make the same changes as with the Auth layout. So add the following imports:

import { connect } from "react-redux";import { Redirect } from "react-router-dom";

Change it’s export to:

const mapStateToProps = state => ({  ...state});

export default connect(  mapStateToProps,  {})(Admin);

Once again, in the render function, before the return we add:

if (!this.props.authState.loggedIn) {  return <Redirect to="/auth/login" />;}

This time, we say !this.props.authState.loggedIn, since we want the user to be redirected to the login page if they are not authenticated.

Let us start again our project and see how, each time if we try to navigate to the Dashboard or Profile, we are not allowed since we are not logged in.

Project after adding the redirects

Now, we need to go inside the Login and Register view-pages and add Redux to them as well.

First, let's go inside src/views/examples/Login.jsx and after the React import, add these imports:

import { connect } from "react-redux";

import loginAction from "actions/loginAction";

Then, change the export at the end of the file with this:

const mapStateToProps = state => ({  ...state});

const mapDispatchToProps = dispatch => ({  loginAction:   (email, password) => dispatch(loginAction(email, password))});

export default connect(  mapStateToProps,  mapDispatchToProps)(Login);

Now, before the render function we write:

state = {  email: "",  password: ""};onChange = (stateName, value) => {  this.setState({    [stateName]: value  });};

We’ll need to keep a local state for the email and password and send these two to our firebase.

Then, we need to change line 85 from:

"Email" type="email" />

To:

"Email"  type="email"  onChange={e => this.onChange("email", e.target.value)}/>

We’ll also change line 99 from:

"Password" type="password" />

To:

"Password"  type="password"  onChange={e => this.onChange("password", e.target.value)}/>

We’re almost set for the login. Next we need to change the Sign in button so that, when we press it, it will call the loginAction. So change it from:

To:

Now go back in your browser, and on the Login page, open your console, and try to log in. You should get an output of login is false. So we know that our action and our reducer work.

login is false

Connecting our Register page to redux using registerAction

Go inside src/views/examples/Register.jsx and do the same as the above. So first add the imports (this time with the registerAction):

import { connect } from "react-redux";

import registerAction from "actions/registerAction";

Then, the export to:

const mapStateToProps = state => ({  ...state});

const mapDispatchToProps = dispatch => ({  registerAction: (name, email, password) => dispatch(registerAction(name, email, password))});

export default connect(  mapStateToProps,  mapDispatchToProps)(Register);

Add the following before the render function:

state = {  name: "",  email: "",  password: ""};onChange = (stateName, value) => {  this.setState({    [stateName]: value  });};

Change:

"Name" type="text" />

To:

"Name" type="text" onChange={e => this.onChange("name", e.target.value)}/>

Then:

"Email" type="email" />

To:

"Email" type="email" onChange={e => this.onChange("email", e.target.value)}/>

And lastly, the password as well:

"Password" type="password" />

To:

"Password" type="password" onChange={e => this.onChange("password", e.target.value)}/>

One more thing — the button, we need to change it from:

To:

So, we are all set with Redux. Again, go to the Register page, type something inside the form, and then press the Create account button with the console opened. You should get a register is false.

register is false

Connecting our Header component to redux using addStatCardAction and getAllStatCardsAction actions

Now we need to make our Stat Cards from the Header component (this component can be seen for example inside the Dashboard page) to be rendered from our store/firebase, and also, make them create dynamically — for example on a button click.

Go inside src/components/Headers/Header.jsx and add the following imports (after the React import):

import {connect} from "react-redux";

import addStatCardAction from "actions/addStatCardAction";import getAllStatCardsAction from "actions/getAllStatCardsAction";

import { Button } from "reactstrap";

Change the default export to:

const mapStateToProps = state => ({  ...state});const mapDispatchToProps = dispatch => ({  getAllStatCardsAction: () => dispatch(getAllStatCardsAction()),  addStatCardAction: (    statName,    statDescription,    statIcon,    statIconColor,    statFooterIcon,    statFooterIconState,    statFooterPercentage,    statFooterText  ) =>    dispatch(      addStatCardAction(        statName,        statDescription,        statIcon,        statIconColor,        statFooterIcon,        statFooterIconState,        statFooterPercentage,        statFooterText      )    )});

export default connect(  mapStateToProps,  mapDispatchToProps)(Header);

Then, let’s add a componentDidMount function right before the render one as follows:

componentDidMount(){  this.props.getAllStatCardsAction();}

And now, after the first div inside the return statement of the render function, we’ll add a Button that will add our stat cards inside our firebase:

  <Row>    <Col lg="6" xl="3">      <Button        color="primary"        onClick={() =>          this.props.addStatCardAction(            "Performance",            "49,65%",            "fas fa-percent",            "bg-info text-white rounded-circle shadow",            "fas fa-arrow-up",            "text-success",            " 12%",            "Since last month"          )        }      >        Add stat card      Button>    Col>  Row></Container>
>

And, we now need to delete the whole contents of the Row tag (~lines 48–165 — from ow> to ), and replace it with the following:

{// we first verify if the statCardState is undefined this.props.statCardState && // then verify if the statCardState.statCardState is // populated with cards from our firebase this.props.statCardState.statCardState && // and lastly, we render them using the map function this.props.statCardState.statCardState.map((prop, key) => { return ( {prop.statName} {prop.statDescription} {" "} {prop.statFooterPercentage} {" "} {prop.statFooterText} ); })}
Adding Firebase

Setting Firebase Account

For this, you need to have a Google Account. If you do not have one, Google offers you a fast (1 minute) Guide.

After you’ve made your account, sign into it, or if you have one, sign into that one.

After that, navigate to this page (this is the homepage of firebase) and press the GO TO CONSOLE button, or just navigate directly to this link.

After that press on the Add project button. You will be prompted with a modal, with an input for a name (you can type whatever name you would like). For me, it will be react-redux-firebase-tutorial. You can leave everything else as is. Accept the terms and then press the Create Project button. You’ll have to wait a bit until it creates the project (around 30 seconds).

After that press the Continue button. That will automatically redirect you to the new project page. In the left menu press the Authentication link. On that press the Set up sign-in method. You will have a table with Provider and Status. Press on the line Email/Password. And check the first Switch and then press the Save button.

Now, go to Database link, scroll down the page and press Create database button, under the Realtime Database. After this, on the modal prompt that opens, choose Start in test mode radio and then press Enable and wait a few seconds.

Next, you’ll need to get your config file (config file that we will add it to our project in the next section). For this press on Project Overview link in the left menu, and after that press on the <;/> (Web) button. Copy the config variable and the firebase initialization. We’ll paste this in a new file, in the next section.

We are done!

We won’t need to create any tables for our users, our users’ details, or our dynamic cards, since firebase will automatically create them — we’ll talk about this in the next section.

Here are the above steps, as images:

Setting up a firebase project

Adding Firebase to our project

Let’s install firebase in our app:

npm i -E firebase
After this, we need to create a file for configuring our firebase in our app, so:

1 — Linux/Mac commands

touch src/firebaseConfig.js
2 — Windows commands

echo "" > src\firebaseConfig.js
And let’s import firebase in this file, and then export firebase with the initialization (you need the code from the previous section — see the last image):

import * as firebase from "firebase";
// replace this variable, with your own config variable// from your firebase projectvar config = { apiKey: "YOUR_KEY_HERE", authDomain: "YOUR_DOMAIN_HERE", databaseURL: "YOUR_URL_HERE", projectId: "YOUR_ID_HERE", storageBucket: "YOUR_BUCKET_HERE", messagingSenderId: "YOUR_ID_HERE"};
let firebaseConfig = firebase.initializeApp(config);
export default firebaseConfig;
Now, we can import our firebaseConfig everywhere we need it.

Register

Let us first make our registerAction functional. So, we go inside src/actions/registerAction.js and at the beginning of the file we import our firebase config:

import firebase from "firebaseConfig";
After this, we may need for our users to keep stuff, like their name, their photos etc. so we are going to create a new table called user-details. If it doesn’t exist, add in it the name of our user.

Our form only has email, password, and name — firebase will automatically create a database table in which it will only put the credentials (email and password) of the account. So if we want to keep more details about our users, we’ll need to create a new table — my table will have the ID of the user, from the table with the credentials, and the user’s name.

So after the above import, we say:

// get me the firebase database
const databaseRef = firebase.database().ref();
// get me the table named user-details// if it does not exist, firebase will// automatically create it
const userDetailsRef = databaseRef.child("user-details");
After that, we’ll change our dispatch code from:

dispatch({ type: "register", payload: false });
To:

// firebase offers us this function createUserWithEmailAndPassword// which will automatically create the user for us// it only has two arguments, the email and the password
firebase.auth().createUserWithEmailAndPassword(email, password)
// then() function is used to know when the async call has ended// that way, we can notify our reducers that register was succesful
.then(function(user) {
// we take the user id and it's name and we add it in our // user-details table
userDetailsRef.push().set({userId: user.user.uid, userName: name});
// after that we dispatch to our reducers the fact that // register was succesful by sending true
dispatch({type:"register", payload: true});
// if the register was not succesful we can catch the erros here
}).catch(function(error) {
// if we have any erros, we'll throw an allert with that error
alert(error);
});
So in the end, our registerAction will look like this:

import firebase from "firebaseConfig";
const databaseRef = firebase.database().ref();const userDetailsRef = databaseRef.child("user-details");
const registerAction = (name, email, password) => async dispatch => { firebase .auth() .createUserWithEmailAndPassword(email, password) .then(function(user) { userDetailsRef.push().set( { userId: user.user.uid, userName: name } ); dispatch({ type: "register", payload: true }); }) .catch(function(error) { alert(error); });};
export default registerAction;
Open the app again, and go to the register page. Type a name, a valid email and a password (something simple to remember — something like qwerty). After you press the Create account button you should be redirected to the user-profile page — this means that our registration was successful. We can now go back to our firebase project (https://console.firebase.google.com/u/0/ — press on your project), click the Authentication link, and we’ll see that email that we’ve just written. Also, if we go to the Database link, we’ll see our user-details table.

Register action is now working

Login

we go inside src/actions/loginAction.js and at the beginning of the file we import our firebase config:

import firebase from "firebaseConfig";
For this action, we won’t need anything else, so the next thing is to change our dispatch code from:

dispatch({ type: "login", payload: false });
To:

// firebase offers us this function signInWithEmailAndPassword// which will automatically create the user for us// it only has two arguments, the email and the password
firebase .auth() .signInWithEmailAndPassword(email, password) // then() function is used to know when the async call has ended // that way, we can notify our reducers that login was succesful .then(function(user) { // if the login was succesful, then // we dispatch to our reducers the fact that // login was succesful by sending true dispatch({type:"login", payload: "true"}); })
// if the login was not succesful we can catch the erros here .catch(function(error) {
// if we have any erros, we'll throw an allert with that error alert(error); });
So in the end, our loginAction should look like this:

import firebase from "firebaseConfig";
const loginAction = (email, password) => async dispatch => { firebase .auth() .signInWithEmailAndPassword(email, password) .then(function(user) { dispatch({ type: "login", payload: "true" }); }) .catch(function(error) { alert(error); });};
export default loginAction;
If we open again our app (we should be redirected by default to Login page), and if we enter our email and password, we will be able to login to our new account.

Login action working

Add stat cards and render them

Now, we need to make some changes to our actions regarding the stat cards.

Inside src/actions/getAllStatCardsAction.js we need to add the following imports:

import firebase from "firebaseConfig";
const databaseRef = firebase.database().ref();// this is to get the stat-cards table from firebaseconst statCardsRef = databaseRef.child("stat-cards");
Then we need to change the dispatch from:

dispatch({ type: "getAllStatCards", payload: {} });
To:

// this function will get all the entires of the// stat-cards table, in a json formatstatCardsRef.on("value", snapshot => { dispatch({ type: "getAllStatCards", // if the json returns null, i.e. the // stat-cards table is blank - empty // then we'll return an empty object payload: snapshot.val() || {} });});
This is how the action should now look:

import firebase from "firebaseConfig";
const databaseRef = firebase.database().ref();const statCardsRef = databaseRef.child("stat-cards");
const getAllStatCardsAction = () => async dispatch => { statCardsRef.on("value", snapshot => { dispatch({ type: "getAllStatCards", payload: snapshot.val() || {} }); });};
export default getAllStatCardsAction;
Next, is the src/actions/addStatCardAction.js. Like the previous one, we need some imports:

import firebase from "firebaseConfig";
const databaseRef = firebase.database().ref();const statCardsRef = databaseRef.child("stat-cards");
Now, instead of the simple dispatch, we’ll overwrite it from:

dispatch({ type: "addStatCard", payload: { statName: statName, statDescription: statDescription, statIcon: statIcon, statIconColor: statIconColor, statFooterIcon: statFooterIcon, statFooterIconState: statFooterIconState, statFooterPercentage: statFooterPercentage, statFooterText: statFooterText }});
To:

statCardsRef // the push function will send to our firebase the new object .push() // and will set in a new row of the table stat-cards // with the bellow object .set({ statName: statName, statDescription: statDescription, statIcon: statIcon, statIconColor: statIconColor, statFooterIcon: statFooterIcon, statFooterIconState: statFooterIconState, statFooterPercentage: statFooterPercentage, statFooterText: statFooterText }) // when the push has terminated, we will dispatch to our // reducer that we have successfully added a new row .then(() => { dispatch({ type: "addStatCard" }); });
So, it now should look like:

import firebase from "firebaseConfig";
const databaseRef = firebase.database().ref();const statCardsRef = databaseRef.child("stat-cards");
const addStatCardAction = ( statName, statDescription, statIcon, statIconColor, statFooterIcon, statFooterIconState, statFooterPercentage, statFooterText) => async dispatch => { statCardsRef .push() .set({ statName: statName, statDescription: statDescription, statIcon: statIcon, statIconColor: statIconColor, statFooterIcon: statFooterIcon, statFooterIconState: statFooterIconState, statFooterPercentage: statFooterPercentage, statFooterText: statFooterText }) .then(() => { dispatch({ type: "addStatCard" }); });};
export default addStatCardAction;
And we are all set. Run again the app, login into your account, navigate on the Dashboard page, and then press the Add stat card button. Stats should now start adding to your Header.

App is done

Thanks for reading!

If you’ve enjoyed reading this tutorial give it a clap. I am very keen on hearing your thoughts about it. Just give this thread a comment and I’ll be more than happy to reply.

Useful links:

Get the code for this tutorial from Github

Read more about ReactJS on their official website

Read more about Redux here

Read more about React-Redux

Read more about Firebase

Check out our platform to see what we are doing and who we are

Read more about Reactstrap, the core of Argon Dashboard React

Read my Webpack tutorial and/or my Redux tutorial

Find me on:

Facebook: https://www.facebook.com/NazareEmanuel

Instagram: https://www.instagram.com/manu.nazare/

Linkedin: https://www.linkedin.com/in/nazare-emanuel-ioan-4298b5149/

Email: manu@creative-tim.com

How to use wireframes with design systems

freeCodeCamp — Mon, 17 Dec 2018 17:06:20 +0000

By Leon Barnard

In my 10+ years as a UX designer, one of the most frequent questions I’m asked about wireframes is how much visual detail to put into them.

There’s an attractive elegance to a simple black and white sketch, but it can sometimes lead to gaps in the shared understanding of what the final product will really look like.

Wireframes shine during the early phases of product development when ideation and rapid iteration are most valued. But what makes them ideal for this phase also hinders them in the next phase, when pixel precision and visual details are called upon for implementation.

As a result, many people (I’ve been guilty of this) try to incorporate fine-grained and aesthetic details into their wireframes by tuning fonts, adding colors, and using other visual effects.

This can often lead to confusion when these proto-high-fidelity wireframes are used as implementation specifications and sent “over the wall” to the development team. Most wireframing tools are not optimized for creating artifacts that look and feel like a finished product. Yet creating polished renditions of every screen or a high-fidelity prototype is time consuming and may not translate well to the final product anyway.

But, is there another way?

There sure is! A way where you can keep your wireframes low fidelity, yet achieve that powerful shared understanding of the implemented look and feel.

Design Systems to the Rescue

An alternative to pushing wireframes beyond their limits is to keep them low fidelity and let another tool do the work of specifying the look and feel.

In this article, I’ll explain why, for web applications and sites at least, an excellent tool for this job is a design system.

Before diving in, let’s define what a design system is.

Like their precursor, style guides, design systems define the application’s look and feel. They go one step further though, in that they often define behavior as well and are backed by working code.

Large companies have been using design systems for a long time. Until recently, they were too labor intensive for smaller companies, as they often required dedicated designers and developers working outside of the primary product teams.

Here is an example, from the IBM Carbon Design System, showing appearance and code for buttons.

_[Carbon Design System](https://www.carbondesignsystem.com" rel="noopener" target="blank" title=") buttons

The design system landscape changed after the Bootstrap framework was released in 2011. It is a free starter kit for web development that provides compliant, robust HTML templates and generally good-looking CSS styles that can be customized to your brand.

It comes with its own grid and typography definitions as well as styles for buttons, forms, and more. In short, it takes a lot of the hard work out of starting a web project and making sure that it works across browsers.

Bootstrap and other frameworks like it have been used as a foundation for design systems for smaller companies that don’t have the resources to build their own.

As you can see below, Bootstrap is very similar to corporate design systems like the one shown above.

_[Bootstrap](http://getbootstrap.com" rel="noopener" target="blank" title=") buttons

Design Systems + Wireframes in Practice

The main advantage of pairing a design system with a wireframing tool is that it can free you from worrying about look, feel, and behavior when wireframing. Yet, they provide pixel-perfect renditions of the final product components.

When you already know what a button (or tab, menu, etc.) is going to look like and what its state transitions will be when you click it, then you don’t have to style it in your wireframe. Black and white and Balsamiq Sans is just fine.

Having a design system to refer to can allow you to jump straight from wireframes to code without leaving the final vision undefined.

Here’s how you can pair them together. You’ll find that they get along quite well together!

If you already have a design system, great. If not, you can start with a customized download of Bootstrap or Foundation. The next step is to create a mapping between it and the controls in your wireframing tool.

A mapping basically means developing a shared agreement of “this means that”. You can do this by creating a document showing these mappings or by just having a meeting with the design and development teams around a screen to work it out.

Here’s an example of how you might map some Balsamiq controls to Bootstrap components (you could also start with the Bootstrap Wireframes To Go library).

Simple mapping of wireframe controls to coded UI controls

Note: It’s ok to use some color, but it should only be used as much as necessary to indicate states and selections, for example.

Having this kind of mapping means that developers no longer have to wonder whether the colors in the wireframe are supposed to be used in their code. They can just translate in their head that a blue button in the wireframe actually means a green button in the UI (if that’s the color you use), and that breadcrumbs separated by the &gt; character should actually be separated by the / character in the app, for example.

You can also extend your design system by creating your own Balsamiq controls as Symbols to map to other components in your library, like this:

Balsamiq symbols mapped to design system components

This mapping can evolve and grow over time as needs and design language change in your organization.

Here’s a simple example showing what a completed wireframe could look like when built in conjunction with a design system.

Note: Blue in the wireframe doesn’t have to mean blue in the finished product.

Created in Balsamiq

Created with code

Wireframe to working code with no additional design artifacts in between!

Having a design system also means that you’re reusing the same code across all parts of your application so that different developers produce the same UI which leads to better standards and consistency. And if the design system gets updated, the wireframes don’t have to change.

Finally, designers can rely more on the stock controls inside the tool rather than spending hours trying to replicate the look on their own, so both the design and development cycles are shortened.

Summary

Nothing works for everyone, of course. This approach isn’t guaranteed to work for all projects or organizations. For example, it is better suited to in-house teams.

Clients outside your organization are more likely to want to see a high-fidelity mockup. Also, most of the starter design systems are for web-based products. Desktop and mobile application design system templates and examples are less common.

Lastly, and perhaps most importantly, you should have good communication between design and development teams for this approach to work.

Much of the shared understanding of the connection between wireframes and design systems is created by having a conversation about it. Announcing it over email or simply posting it on your intranet alone probably won’t work. Waterfall and distant remote teams trying this might not fare as well.

That said, it does offer lots of advantages for many teams, such as:

Saves time when wireframing

No mismatch between wireframe and reality

Good for Lean/Agile methodologies where deliverables don’t need to be so formal

Good for small teams and startups without many resources (especially when using frameworks)

Different skillsets can be applied to different design areas (e.g., visual designers and developers for the design system, interaction designers or PMs for the wireframes)

Design processes (wireframes vs. design system creation) can be done independently, resulting in fewer bottlenecks

More UI consistency across the product

More Design System Resources

Design Systems Gallery

“Designing Design Systems”

“Getting Started with Pattern Libraries”

Introduction to Atomic Design

Pattern Lab Design System Tool

Website Style Guide Resources

8-Point Grid: Typography On The Web

freeCodeCamp — Wed, 13 Jun 2018 16:22:43 +0000

By Elliot Dahl

Web typography is confusing. Do you know the best practices?

When I started looking around at popular websites to figure out the best practices for web typography, I must admit I was baffled. Below are some examples of typography scales I pulled from a few popular websites and design systems. Can you find the unifying pattern?

Samples simplified to fit onto a standard scale

Clearly there are different approaches to type systems. The reality is that as a web community we don’t all agree. However, like most design problems, it really starts by addressing the user’s needs.

The three archetypes of typography systems

Here are three general typography system archetypes. Most companies will utilize all three of these at some point but it’s important to recognize the underlying user needs being addressed by each orientation.

Marketing site

Purpose: Built to tell a specific story and inspire visitors to spend their time and/or money on the site.

Requirements: Each typeface will need its own set of styles and the variety of sizes will be based on art direction more than element fitting.

Responsive use case: The system will need to flex through multiple sizes from mobile up to desktop.

Web experiences geared to pitch you something end up in this category. The ambitious ones break all the rules of typography to create compelling and captivating experiences.

While a lot of thought goes into these sites, the focus is on making a splash rather than an extensible system that can be built upon in the future. These sites generally have a short shelf life and are discarded entirely for a top-to-bottom redesign.

An advanced example of this is the interpolation function used by Leigh Taylor and Nick Jones on Invision’s landing page.

The <h1> has a font-size: calc(32px + ((24 * (100vw — 800px))/799));. The typography on the page is meticulously calculated to work at every screen size.

“Using math to do dynamic art direction” — Leigh Taylor

Blog/Info site

Purpose: To convey a large amount of text-based information.

Requirements: The main reading area may utilize a ratio based line-height system, just like this Medium article does.

Responsive use case: Will likely be responsive but maintaining focus on readability.

This Medium article is an example of a web experience built for long-form reading.

The focus is not about interpreting little visualizations or filling out forms. The size ratios they’ve chosen are specifically built for readability constrained to get the desired line-length. I can comfortably read each line because the typography has been carefully crafted to fit my needs as a reader.

Product

Purpose: Built to solve a user problem like filing taxes, managing a git repo, or visualizing performance metrics.

Requirements: Text must fit nicely into the element hierarchy. Text is mostly utilized for labels, instructions, and displayed data.

Responsive use case: Minimally responsive. Highly developed products will be utilizing adaptive design meaning different experiences for mobile and desktop. The focus is on the hierarchy of elements that support the user experience.

Google’s Material Design is a popular design language that is applicable to many product use cases.

Material’s spacing method is based on an 8pt component grid system and a 4pt baseline grid for typography. They try to scale line-heights with increments of 4. Scaling by increments of 8 with your baseline grid can be difficult because the available line-heights are too far apart for some text sizes.

Allowing some of the font-sizes to be accompanied with a more appropriate line-height is a great path forward. You can always bump the spacing above or below a given line by 4px to make it align with the greater atomic grid.

When applied, the baseline grid system has the ability to align the element spatial system (8pt grid) with the typography system to create a compelling vertical rhythm in the design.

Implementation of web typography — in reality

It is possible to have an opinionated and structured UI adhering to an 8pt grid that also has a long-form reading area.

Allow the fixed baseline grid system to handle the text inside of your structured components and use a modular scale to create an optimal reading experience for the blog or docs you’ve added onto your site.

Most digital product companies do this already between their marketing landing page, the digital product, and their documentation. Making the decision to structure these typographic realms separately can free you from an unsustainable complexity.

Mixing content types together

The pitfall — Ems, rems, and pixels oh my!

To express a clear and consistent system, typography measurements need to be easily interpreted by the product team building it.

Relative units like rems and ems are sometimes misunderstood and, in my experience, this leads to an unsustainable typography system. For example, the ratio between 14px font-size and a 20px line-height shouldn’t be captured in relative units because that ratio should change as the font-size increases.

Defining a line-height of 1.4285714286em is ridiculous, because most folks can’t do that kind of math in their head. If the font-size increases to 16px the browser will render a line-height of 22.857142px and that kind of pixel splitting is a headache waiting to happen. This creates confusion and is a misuse of relative units. See a complete list of absolute vs relative units here.

Why are so many design systems based on relative sizing today? The answer is “accessibility”.

However, browsers don’t scale the base font-size when you zoom in with command +. There are accessibility tools that will scale base font-sizes for users who need it. I recommend properly testing it to make sure it’s the experience you want users to have. Check-the-box accessibility can hurt more than it helps.

Utilizing rems and ems in your site/app is amazingly powerful. There are many very interesting use cases and they should be an important part of your toolkit.

My suggestion is to use them sparingly until you have a solid use for them. Baking them into the core of your typography system can open you up to confusion and unexpected user experiences.

8pt Grid Typography

The most powerful part of the 8pt grid concept is its ability to drive consistency throughout your designs. You will need to assess the needs of your users and the best way to scale your typography to meet those needs.

I highly encourage design and engineering to collaborate on finalizing these standards for a company/product.

Here are samples from a few familiar names: Google Material, Pivotal, Atlassian, Intuit.

Samples simplified to fit onto a standard scale

References and Related Reading

Priyanka Godbole: A framework for creating a predictable & harmonious spacing system for faster design-dev handoff

Richard Rutter: The Elements of Typographic Style Applied to the Web

Ian Yates: How to Establish a Modular Typographic Scale

Nathan Curtis: Space in Design Systems

Vincent De Oliveira: Deep dive CSS: font metrics, line-height and vertical-align

Kezz Bracey: Why You Should Be Using Rem-Based Layouts

Previous 8-Point Grid Articles:

Intro to The 8-Point Grid System

8-Point Grid: Borders and Layouts

8-Point Grid: Vertical Rhythm

Questions:

This is something I am still exploring. Do you have a good example to share? Do you have a different approach to an 8pt typography system?

If you’ve got thoughts, please leave a comment or reach out on Twitter.

Design Systems - freeCodeCamp.org

How to Move Figma Components to Penpot

Table of Contents

How to Recreate Existing Figma Files in Penpot

Using the Community-Supported Migration Plugin

Manually Recreating Figma components

Understanding the Penpot User Interface

Understanding Penpot Layouts

How to Create and Use Penpot Components

How to Create Reusable Assets in Penpot

How to Add and Use Icons in Penpot

Figma Vs. Penpot – My experience

Swapping Out Icons

Renaming Files and Folders

Adherence to Web Standards

Penpot Design System

Limited Shape Options in the Toolbar

Resources and Notes

How to Use a Design System – a Case Study

What is a Design System?

Importance and purpose of a Design System

Efficiency

Collaboration

Consistency

Scalability

How Design Systems work

Colours

Typography

Icons

Grid and Spacing Styles

Documentation

UI Patterns and Components

Content Guidelines

Accessibility Guidelines

Examples and Use Cases

Differences Between a Design System and a Style Guide

Scope

Consistency

Evolution and Scalability

Collaboration

Real-Life Examples of Design Systems

How to Use a Design System for Your Designs – Rayna UI Design System Example

Step 1 – Download the Design System

Step 2 – Publish the Rayna UI Design System to your libraries.

How to Use the Design System in Your Projects

How to Design a Sign Up Web Screen

Step 1 – Select a Frame

Step 2 – Add Grid Styles

Step 3 – Add Content

Conclusion

How to Create a Design System in Next.js with Tailwind CSS and Class Variance Authority

Project Setup: Installation Of The CVA Library

Practical Example: Implementing a Custom Design System

Wrapping Up

How to Create and Implement a Design System with CSS

How to build design system with SwiftUI

Why do I write this article

What is SwiftUI

The demo project

Principles of building design system

1. Communicate with tokens

2. Levels of hierarchy

Diving into code

1. Architecting levels of hierarchy

2. Clear and straightforward naming of API endpoint

3. Manage color sets dynamically in two modes

4. environment settings

5. buttonStyle and button label

6. AnyView as wrapper

7. Build view modifier with mutating function

8. Tricky border style

Conclusion

How to connect a React Design System with Firebase and Redux

Getting started with a React Design System

Adding Redux to this starter template

Actions, Reducers, and Store

Actions

Reducers

Store

Connecting our app to our store

2. Clear and straightforward naming of `API` endpoint

4. `environment` settings

5. `buttonStyle` and button label

6. `AnyView` as wrapper

7. Build view modifier with `mutating` function