DEV Community: SHERKHAN ARIFZHONOV

Establishing Global Font Styles in a Flutter Project: Insights from the Xela Design System

SHERKHAN ARIFZHONOV — Thu, 27 Jul 2023 20:40:45 +0000

Hello, fellow Flutter enthusiasts! The role of fonts in your application's visual consistency and user interface experience is indispensable. They not only relay information but also set the tone and mood of your application. However, handling these styles can become an intricate task, particularly in large-scale projects.

In this article, we will examine how to construct global font styles in Flutter. This approach ensures uniformity across your application, makes your design more appealing, and significantly accelerates your development workflow. We will share insights from our experience of developing the Xela Design System, a unique library packed with a plethora of ready-to-use components, inclusive of font styles.

We aim to demonstrate how we exploited Flutter's capabilities to devise scalable, adaptable, and effortlessly customizable font styles in the Xela Design System. Follow along as we take you through the step-by-step process of this venture.

Step 1: Setting Up a Flutter Project in Android Studio

The first step in our endeavor is to establish a new Flutter project. If you've already dabbled in Flutter and Android Studio, this process should be straightforward. If you're a Flutter novice, fret not, we will walk you through all the necessary steps.

Launch Android Studio: Ensure you have the latest versions of Android Studio and the Flutter plugin installed. If you don't, you can procure them from the official Android Studio and Flutter websites.
Initiate a new Flutter project: Navigate to File -> New -> New Flutter Project.
Select the type of project: In the ensuing window, opt for Flutter Application and click Next.
Configure the project details: Fill out the necessary fields, including the project name, its location, and a brief description. Then, select the Flutter SDK version you wish to use (if you have multiple versions installed).
Choose a package name for your project: The subsequent step involves selecting your project's package name. This is conventionally the reverse URL of your website, but you can select any unique name.
Wrap up: Click Finish, and Android Studio will construct a new Flutter project for you.

Now, you're equipped with a new Flutter project, primed for further adjustments and development. In the next segment, we'll delve into how to start integrating font styles into your new project.

Step 2: Establishing a uikit Directory within the lib Folder

Our next move is to create an organized directory structure for our project. Effectively managing the files and directories within a project is integral to smooth and efficient development. Let's create a folder named uikit, which will serve as the home for our custom styles and UI components.

Access the lib directory: In the left panel of Android Studio, you will find the lib directory. This directory holds the primary code of your Flutter application.
Generate a new directory: Right-click on the lib directory and then navigate to New -> Directory. Input uikit as the name for your new directory.

You now have a uikit directory nested within your project's lib directory. This will be our base for UI styles and components. In the upcoming steps, we'll begin populating it with our font styles.

Step 3: Creating a text_style.dart Dart File

Now that we've got our uikit folder all set up, it's time to create a Dart file that will hold our font styles. We'll name this file text_style.dart.

Navigate to the uikit folder: Click on the uikit folder that we established in the previous step.
Generate a new Dart file: Right-click on the uikit folder, then select New -> Dart File. Input text_style as the name for this new file.

You've now got a text_style.dart file nestled within the uikit folder. This will be the file where we lay out our font styles. In the steps that follow, we'll begin adding code for our font styles.

Step 4: Importing Flutter's Material Package and Creating XelaTextStyle Class

With our text_style.dart file ready to go, let's get started with our coding process. We'll kick things off by importing Flutter's Material package, which provides a myriad of useful widgets and styles, and then create our XelaTextStyle class to house our font styles.

Incorporate the following code into text_style.dart:

import 'package:flutter/material.dart';

class XelaTextStyle {
  // Future home of our font styles
}

The code above starts by importing Flutter's material.dart library, a fundamental part of Flutter that provides a range of widgets and functionalities for app development. Following this, we declare a new class XelaTextStyle which will accommodate our font styles.

In the next step, we'll begin defining specific font styles within our XelaTextStyle class.

Step 5: Introducing the XelaTextStyle._() Constructor

Let's further refine our XelaTextStyle class by adding a private named constructor XelaTextStyle._(). This constructor ensures that our class cannot be instantiated or extended, essentially turning it into a "static" class.

Modify your code as follows:

import 'package:flutter/material.dart';

class XelaTextStyle {
  XelaTextStyle._();  // The newly added private constructor

  // Font styles will be defined here
}

In the above snippet, we've added XelaTextStyle._(); to our class. This is a private named constructor, preventing the creation of instances of our XelaTextStyle class. This ensures that the class remains "static", with only static members (in this case, text styles) and no capability to create an instance of the class.

This approach is advantageous for grouping and organizing code, particularly for styles and templates that you'll reuse throughout your app without needing to instantiate the class each time.

Step 6: Integrating a Custom Font into Your Project

In most design undertakings, you'll likely encounter a need to use custom fonts. For our case, we'll be incorporating the Nunito Sans font from our Design System. Let's proceed to add this font to our project.

Generate an assets folder: Right-click on your project's root directory and select New -> Directory. Name this new folder assets.
Inside the assets folder, create a fonts folder: Right-click on the assets folder you've just created and select New -> Directory. Label this new folder fonts.
Include your font files: Move your Nunito Sans font files (usually with .ttf or .otf extensions) into the fonts folder. You can do this by dragging and dropping the files into the Android Studio window.
Revise your pubspec.yaml: Open the pubspec.yaml file and include the path to your font files under the assets section. Your pubspec.yaml should look somewhat like this:

flutter:
  assets:
    - assets/fonts/

Remember to save the changes to your pubspec.yaml file and run the flutter pub get command in the terminal to update your project's dependencies after each modification.

You now have a custom font at your disposal for use in your Flutter application! In the following step, we'll employ this font in our text styles within the XelaTextStyle class.

Step 7: Defining a Static fontFamily Constant

One of the best practices when managing font styles is to create a static constant for the font family. This enables you to change the font throughout the entire application without having to adjust every individual style.

Incorporate the following code into the XelaTextStyle class:

import 'package:flutter/material.dart';

class XelaTextStyle {
  XelaTextStyle._();  

  // Font family
  static const String fontFamily = "Nunito Sans";

  // Font styles will be defined here
}

Now, we've created a static fontFamily constant that contains the name of our font. In the subsequent steps, we'll use this font name when we define our font styles. Should you decide to alter the font of your application later on, you'll only need to update this single value, and the changes will be propagated across all font styles that utilize fontFamily.

Step 8: Understanding Font Styles in the Xela Design System in Figma

Before we start translating our font styles into Flutter, let's first understand what styles are available in the Xela Design System in Figma. This will help us determine which styles we need to create in our Flutter project.

Here are the styles we have at our disposal:

Title1, Title2, Title3: These styles are typically employed for various levels of headings in your app.
Headline: This style is often designated for leading headlines or standout elements on the screen.
Subheadline: This style is used for secondary headings or supplementary text under main titles.
Body, Body Bold, Body Small, Body Small Bold: These styles are utilized for the primary text in your app. They include normal weight variations, bold, and a reduced font size option.
Caption: This style is typically designated for captions under images or smaller text notes.
Button Large, Button Medium, Button Small: These styles are intended for text on different sizes of buttons.

With an understanding of these styles, let's proceed to the next step where we'll start defining these styles in our Flutter project.

Step 9: Defining the Title1 Style

It's time to start applying font styles from our Design System to our Flutter project. We'll kick things off with Title1.

Incorporate the following code into the XelaTextStyle class:

import 'package:flutter/material.dart';

class XelaTextStyle {
  XelaTextStyle._();  

  // Font family
  static const String fontFamily = "Nunito Sans";

  // Font styles
  static const TextStyle Title1 = TextStyle(
    fontSize: 60,
    fontWeight: FontWeight.w800,
    fontFamily: fontFamily,
  );

  // Other styles will be defined here
}

We've now defined the Title1 style, which can be applied throughout our app. This style sets the font size to 60, the weight to 800 (corresponding to extra bold in Flutter), and uses our custom "Nunito Sans" font.

In the subsequent steps, we'll continue defining the remaining styles from our Design System.

Step 10: Incorporating the Remaining Styles

Let's proceed with adding the rest of the font styles to our XelaTextStyle class.

The updated XelaTextStyle class should look as follows:

import 'package:flutter/material.dart';

class XelaTextStyle {
  XelaTextStyle._();  

  // Font family
  static const String fontFamily = "Nunito Sans";

  // Font styles
  static const TextStyle Title1 = TextStyle(
    fontSize: 60,
    fontWeight: FontWeight.w800,
    fontFamily: fontFamily,
  );

  static const TextStyle Title2 = TextStyle(
    fontSize: 48,
    fontWeight: FontWeight.w800,
    fontFamily: fontFamily,
  );

  static const TextStyle Title3 = TextStyle(
    fontSize: 34,
    fontWeight: FontWeight.w900,
    fontFamily: fontFamily,
  );

  static const TextStyle Headline = TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.w800,
    fontFamily: fontFamily,
  );

  static const TextStyle Subheadline = TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.w800,
    fontFamily: fontFamily,
  );

  static const TextStyle Body = TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.normal,
    fontFamily: fontFamily,
  );

  static const TextStyle BodyBold = TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.w800,
    fontFamily: fontFamily,
  );

  static const TextStyle SmallBody = TextStyle(
    fontSize: 14,
    fontWeight: FontWeight.normal,
    fontFamily: fontFamily,
  );

  static const TextStyle SmallBodyBold = TextStyle(
    fontSize: 14,
    fontWeight: FontWeight.w800,
    fontFamily: fontFamily,
  );

  static const TextStyle Caption = TextStyle(
    fontSize: 12,
    fontWeight: FontWeight.w700,
    fontFamily: fontFamily,
  );

  static const TextStyle ButtonLarge = TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.w700,
    fontFamily: fontFamily,
  );

  static const TextStyle ButtonMedium = TextStyle(
    fontSize: 14,
    fontWeight: FontWeight.w800,
    fontFamily: fontFamily,
  );

  static const TextStyle ButtonSmall = TextStyle(
    fontSize: 12,
    fontWeight: FontWeight.w800,
    fontFamily: fontFamily,
  );
}

The XelaTextStyle class now includes all the font styles based on your Design System. You can employ these styles throughout your app by referencing them as XelaTextStyle.Title1, XelaTextStyle.Body, etc.

Please keep in mind that the font weight in Flutter might not precisely match what you see in your Design System, depending on the font you're employing. This is due to the differing interpretation of font weights between Flutter and some design systems. If the font doesn't appear as expected, you might need to adjust the font weight to achieve the desired appearance.

Step 11: Demonstrating Font Style Usage

Now that we've established our font styles, let's illustrate how they can be utilized in a Flutter application.

Implementing Styles in a Text Widget

The Text widget in Flutter accepts a style argument, which lets you set the text style. We can directly pass our styles from XelaTextStyle into this argument.

Text(
  'Hello, Flutter!',
  style: XelaTextStyle.Headline,
)

Applying Styles to Buttons

We can also implement our text styles in other widgets, such as buttons.

ElevatedButton(
  onPressed: () {},
  child: Text(
    'Press me',
    style: XelaTextStyle.ButtonLarge,
  ),
)

Utilizing Styles in AppBar

The AppBar in Flutter also permits you to customize the text style for its title.

AppBar(
  title: Text(
    'Hello, Flutter!',
    style: XelaTextStyle.Title1,
  ),
)

Using Styles in ListTile

ListTile allows you to set text styles for its leading and title text.

ListTile(
  leading: Text(
    'Leading Text',
    style: XelaTextStyle.Subheadline,
  ),
  title: Text(
    'Title Text',
    style: XelaTextStyle.Body,
  ),
)

As you can see, our font styles can be employed in diverse contexts within our app, fostering consistency and simplifying the management of text styles.

Conclusion

Incorporating font styles effectively in your Flutter project is of paramount importance. It not only ensures visual consistency throughout your app but also enhances the user experience. Moreover, centralizing font styles in a dedicated class, as we've done with XelaTextStyle, streamlines their management and makes it easier to apply changes uniformly.

We hope this step-by-step guide has provided valuable insights into how to create and utilize font styles in a Flutter project, drawing from our experience in developing the Xela Design System. By following these practices, you can elevate the appeal and professionalism of your Flutter applications.

To further simplify your Flutter UI development, we invite you to explore our website at xelaui.com. There, you'll discover our comprehensive Flutter library, replete with numerous pre-built components for your projects. And as a token of appreciation for our readers, we offer a 25% discount with the promo code 4EOJFLM.

For a hands-on experience, you can check out our library's demo in an existing project. This demo also showcases a section dedicated to font styles, similar to what we've discussed in this article.

Thank you for taking the time to read this article. We hope it will assist you in creating captivating and professional Flutter applications.

Unleashing Creativity with Xela Design System for Figma: An In-depth Look at Components (Part 3)

SHERKHAN ARIFZHONOV — Thu, 27 Jul 2023 15:57:31 +0000

Greetings! This is part three of our detailed exploration of the Xela Design System for Figma. This all-inclusive design kit has been instrumental in elevating the design and coding processes for myriad projects.

In this piece, we are set to examine the following components:

Tabs
Dialogs
Date Picker
Accordion
Charts
Toast
Breadcrumbs
Pagination
Divider
Lists
Rating

The Xela Components: Revolutionizing Designs

Every component within the Xela Design System is intricately designed to enhance the aesthetics and functionality of your projects. Let's unpack what each of them brings to the table:

Tabs:

Our Tabs component, featuring 74 unique variations, facilitates the seamless traversing of various sections within your app or website. With multiple states and icons, it aids in crafting an intuitive UI.

Dialogs:

Our Dialogs component, with 16 diverse variations, helps in structuring informative dialog boxes that promote smooth communication with users.

Date Picker:

The Date Picker component is designed to simplify date inputs, thus providing users with a reliable and easily understandable interface.

Accordion:

With 16 variations to choose from, our Accordion component effectively handles the presentation of extensive information while maintaining a neat and readable layout.

Charts:

The Charts component, boasting 25 chart variations, allows for visually appealing representation of data, thus enhancing users' comprehension.

Toast:

With 72 variations, our Toast component ensures that your users are well-informed about real-time updates or messages in an uncomplicated manner.

Breadcrumbs:

The Breadcrumbs component enhances user navigation through your application or website by accurately displaying their current location.

Pagination:

Our Pagination component, with 10 unique variations, ensures a simple and user-friendly navigation experience.

Divider:

The Divider component aids in structuring content in a way that boosts clarity and cleanliness of design.

Lists:

The Lists component allows for a structured display of list data, improving presentation and understanding.

Rating:

The Rating component invites users to rate items, thereby promoting interaction and encouraging user feedback.

Unleash the Potential of the Xela Design System Today!

As a token of our gratitude, we offer an exclusive 25% discount on any of our products to our readers. Use the code 4EOJFLM at checkout to avail this discount.

Stay tuned for the upcoming parts of this series where we delve into the blocks and templates of the Xela Design System. Visit our website XelaUI.com and commence your journey towards efficient design and coding with the Xela Design System!

Embark on this fascinating journey with us and share your insights and reviews - we're all ears!

Unleashing Creativity with Xela Design System for Figma: An In-depth Look at Components (Part 2)

SHERKHAN ARIFZHONOV — Tue, 25 Jul 2023 19:06:39 +0000

Welcome to the second part of our detailed series on the Xela Design System for Figma. Our initial exploration brought forward several pivotal components that can elevate your design and coding processes. Now, we'll delve deeper into an array of additional components that promise to streamline your project execution.

As a special thank you for joining us in this exploration, we have a unique surprise for our readers. Ensure you stick around till the end to discover an exclusive promo code offering a discount on any of our offerings.

In this exploration, we'll concentrate on the following noteworthy components:

Toggle
Slider Input
Range Slider Input
Segmented Control
Tooltips
Tables
Badge
Alert
Steps
Chips

Diving Deeper into Xela Components

Let's dive in and discover the potential these components can bring to your design:

Toggle:

With 12 different forms, our Toggle component is a sleek and user-friendly tool for binary inputs. This versatile component can be customized by size, style, and state.

Slider Input:

This interactive component, available in 60 versions, provides an engaging way for users to pick a value from a range. Slider Input also supports tooltips and progress indication.

Range Slider Input:

Offering an impressive 400 variants, the Range Slider Input extends beyond the basic slider by allowing a range of values selection.

Segmented Control:

Our Segmented Control component, with its 66 versions, provides a logical way to organize multiple interconnected buttons, enhancing your application's navigation.

Tooltips:

Tooltips are essential for offering contextual assistance to users. With 13 versions to choose from, you can customize the tooltip that best fits your application's aesthetics.

Tables:

Our Tables component comes in multiple layouts, perfect for clearly presenting data, making it digestible and accessible to your users.

Badge:

Available in 16 different styles, the Badge component is excellent for highlighting notifications, statuses, or supplemental information linked to your content.

Alert:

The Alert component, with its 16 styles, is designed to inform users about crucial information or changes within the application.

Steps:

Our Steps component, available in 128 variations, is perfect for illustrating progression or a sequence of tasks in an understandable format.

Chips:

The Chips component, with its 144 variations, is designed to showcase complex entities in a compact, user-friendly format.

Propel Your Design and Coding Workflow with the Xela Design System

Harness the power of the Xela Design System and elevate your design and coding workflows to a new level. To celebrate our readers, we're gifting an exclusive 25% discount on any of our products. Simply use the code 4EOJFLM at checkout.

Look out for the next articles in this series as we'll be inspecting the blocks and templates of the Xela Design System. Discover the potency of our design system today by visiting XelaUI.com.

Embark on this thrilling journey and share your experiences and feedback with us. Step into the future of design and coding with the Xela Design System!

Unleashing Creativity with Xela Design System for Figma: An In-depth Look at Components (Part 1)

SHERKHAN ARIFZHONOV — Tue, 25 Jul 2023 15:34:46 +0000

Welcome to the first part of our series, where we explore the intricate details of the Xela Design System for Figma. For developers in need of an all-encompassing UI Design Kit, or designers seeking a well-structured design system, Xela Design System is the key to transforming your design and coding workflow.

As a token of our appreciation for joining us on this journey, we have a special gift for our readers. Make sure you read through to the end to find an exclusive promo code for a discount on any of our products.

In this article, we'll be exploring these powerful components:

Typography
Colors
Buttons
Select
Text Input
Number Input
Textarea
User Avatar
Radio Button
Checkbox

Exploring the Efficiency of Xela Components

Each component in the Xela Design System is designed to enhance your project's visual appeal and functionality. Here's how:

Typography:

The Typography component allows you to create uniform and visually pleasing text styles across your project. With a broad spectrum of font styles like Title 1, Title 2, Headline, Body and more, this component ensures elegance and visual consistency.

Colors:

The Colors component brings your application to life with beautifully curated colors, hues, and gradients. Create engaging and visually appealing interfaces with a wide array of color options at your disposal.

Buttons:

The Buttons component, featuring a staggering 288 variations, ensures you can craft the perfect call-to-action elements for every scenario.

Select:

The Select component, with its 24 Input Select and 22 Dropdown Item options, offers a simple and efficient way for users to input data, enhancing user experience.

Text Input:

Our Text Input component is designed to streamline form creation. With 96 variations, it provides a seamless user interaction experience while maintaining aesthetic appeal.

Number Input:

The Number Input component, with its 72 variations, simplifies numerical data input for users. Control states, labels, helper text, and icon positions for a personalized user experience.

Textarea:

The Textarea component ensures smooth text input across your application. With 48 variations, this component provides a highly customizable input field for users.

User Avatar:

The User Avatar component adds a personalized touch to user profiles. It offers 132 variations, including size, style, type, counter text position, indicator, and decoration.

Radio Button:

Our Radio Button component simplifies user choices with an easy-to-use design. This component offers 60 variations, all customizable to suit the needs of your project.

Checkbox:

The Checkbox component facilitates multiple user choices. With 84 customizable variants, this component ensures your checkboxes align with the rest of your design.

Discover the Power of Xela Design System Today!

As a token of our appreciation, we're offering an exclusive 25% discount on any of our products. Just use the code 4EOJFLM at checkout. Transform your digital experiences with the Xela Design System today!

Keep an eye out for the next parts of this series where we dive into the blocks and templates of the Xela Design System. Visit our website XelaUI.com and begin your journey towards efficient design and coding with Xela Design System!

Join us on this exciting journey, and don't hesitate to share your thoughts and feedback with us!

Boosting Developers' Efficiency with Xela Design Kit: A Comprehensive Solution for UI Design and Coding

SHERKHAN ARIFZHONOV — Mon, 24 Jul 2023 19:52:22 +0000

In search of a flexible UI Design Kit to streamline your coding process? Or maybe you're a designer hunting for a comprehensive design system? Your search ends with the Xela Design Kit, which is set to transform how you design and develop.

The Xela Design Kit is your all-in-one remedy to every design and development requirement. It boasts potent libraries for numerous platforms: React, Flutter, Swift, and Jetpack Compose.

Unleash the Potential of Our React and Flutter UI Kits

React and Flutter have seen a surge in popularity among developers, owing to their strong, cross-platform capabilities that notably cut down development time. Our React UI Kit and Flutter UI Kit take full advantage of these platforms, offering a plethora of responsive and interactive components. With Xela Design Kit, web and cross-platform app development becomes swift and efficient.

Capitalize on the Sophistication of Swift and Jetpack Compose Components

Native development offers its unique benefits. It harnesses the device's full power and provides a smoother, more responsive user experience. Our iOS UI Kit for Swift and Jetpack Compose Components for Android cater to this need with precision. They're comprehensive, customizable, and designed to enhance your native app development journey.

An All-Inclusive Figma Design System

The Xela Design Kit also features a Figma Design System. It's a unified collection of design components that helps maintain consistency across platforms. It's versatile, user-friendly, and aids in speedy prototyping.

Why Xela Design Kit Stands Out

At Xela, we acknowledge that time is precious. That's why we've developed an all-embracing UI design system that conserves your time and energy. With our design kits and libraries, you can concentrate on your application's logic and functionality, leaving the visuals and interface to us.

Additionally, all our UI kits and libraries are supplemented with extensive documentation. Be it a beginner or a seasoned developer, you'll find our guides simple to grasp and implement. We've got your back!

In essence, the Xela Design Kit is not merely a product; it's our pledge to assist developers and designers in crafting remarkable digital experiences. It's a tool that bridges the gap between design and code, realizing your vision.

Ready to explore the Xela Design Kit? Visit our website XelaUI.com or try our desktop and mobile demos to witness the prowess of our design system. Your journey towards more efficient design and coding begins with the Xela Design Kit. Join us in embracing the future of design and development.

Аfter several years of development, we are finally launched. B2App No code mobile app builder.

SHERKHAN ARIFZHONOV — Fri, 11 Mar 2022 14:04:55 +0000

For several years, I nurtured the idea of a mobile application builder, because I understood that it is very difficult and time-consuming to develop mobile applications, and for online stores this is a huge plus in sales.

In total, at the end of 2019, I finally began to experiment with the interface of the future constructor, created the project architecture, deleted it and changed it again.

Somewhere in the middle of 2020, the MVP of the project was finally ready and he created only android applications, moreover, written in Java.

Until the end of 2020, I improved the project written for iOS on SwiftUI and realized that I made a mistake in choosing a technology for android, especially after creating it on SwiftUI. Since the beginning of 2021, the news came out that Jetpack Compose became stable enough for large projects, and I completely rewrote the Android version on Jetpack Compose.

Finally, a few days ago we finished working on the landing page, connecting payment and editing in the constructor itself and launched.

What it does?

B2App - Android & iOS native apps builder without using code for online stores based on Woocommerce, Shopify, Shops-Script and others. It will allow you to create a beautiful and multifunctional mobile application in a few clicks.

Why do we need it?

Mobile e-commerce apps allow you to sell products to your customers more flexibly. But their development is long and expensive, with the help of B2App you can get it in minutes and without using code for Android and iOS.

Who is it for?

For any owners of online stores based on Woocommerce, Shopify and other platforms.

What makes it stand out from the crowd?

Easy to use - pre-built templates & themes, the intuitive interface lets you customize colors, layouts, and more. Native Apps with world class UI. Build and update App in Real-Time - no need update app in AppStore.

What's next for B2App - No code mobile app builder for eCommerce.

The ability to get the source code of the project for Android and iOS in a matter of minutes from the created application in B2App for further use and customization. The ability to create not only e-commerce projects.

B2App No code mobile app builder

Figma2Android: How we made a Figma plugin to speed up UI development in Jetpack Compose.

SHERKHAN ARIFZHONOV — Mon, 13 Dec 2021 09:38:53 +0000

Figma2Android is a Figma plugin that quickly and easily converts designs from Figma to Jetpack Compose (Android) code.

I (developer) with my partner (designer) do the Figma Design System and libraries for them in SwiftUI (iOS) and Jetpack Compose (Android) to order, and when developing one of the libraries, we realized that it takes a lot of time to transfer the properties of an element from Figma, such as dimensions, colors, styles, padding and more. That is, application development has become more of a transfer of properties into code. Figma already had similar plugins for SwiftUI, VueJS, Html and much more, and one for Jetpack Compose, but it required a bunch of body movements besides installing the plugin itself. Then the idea arose why not write your own converter from Figma to Jetpack Compose, in addition, in those solutions, some properties of the elements that we needed in our work were not implemented.

In begin, we saw the plugin as a simple internal tool for converting the properties of a selected element into code, but with a deeper study of the Figma API, ideas began to appear that it is possible to export completely blocks and pages, including their properties and child elements. Then, of course, the fantasy played out and I wanted to immediately export a ready-made functional element, for example, it is not easy to Text, and also a TextField, but then the plugin would become more difficult to use and there would be more design requirements, which is a waste of time for us at the moment, in the future it is possible we will implement this one of the ideas for the development of the plug-in, about the ideas for the development of the plug-in will be described in more detail below.

When we made it for ourselves and began to use it, we realized that such a tool would greatly facilitate the work of most developers on Jetpack Compose, and especially those projects that are starting to move from Android Layout to Jetpack Compose and decided to release it as a final product as a plugin and release it. See it in Figma Community.
When creating the plugin, we used several different technologies, below is a list and a small description of what, where and how it was used.

Jetpack Compose (Android) — well, of course, the first item is Jetpack Compose itself, now there is a lot of controversy about the pros and cons of this technology, but for me who develops and supports projects simultaneously on SwiftUI and Android Layout, the release of the stable version was a holiday, I think this is the future, if you understand how to use it correctly, you can do incredible things.

Figma API + TypeScript + Visual Studio Code — Figma’s Plugins API is well documented, plus, of course, I had to use console output in order to better understand the content of each Figma element and its properties. Also, the Figma API documentation explains quite well how to deploy development tools in this case, Visual Studio Code and TypeScript as the development language of the plugin itself.

Gumroad + Gumroad API + PHP — we used these tools for the future monetization of our product, plus see how difficult it will be to integrate a subscription into the plugin. More details on monetization will be given below.

SVG Path Data — I had to study and add almost at the very end, since today icons are used a lot in any interface, and without them the converted result looked frankly bad, of course, as a developer, I recommend exporting icons separately and adding them to the project resources, but what can you do for the sake of a beautiful picture :)

I’ll tell you a little about the difficulties we encountered.
Group in Figma, namely GroupNode and not FrameNode, inside them designers very often create such game that it is impossible to convert them normally into some readable and editable code, because of this there was a decision to refuse to export them altogether, as explained to me my partner is a designer that a well-done design should use AutoLayout and Frame, and everything will be logical and convenient there, which I myself was convinced of when developing the plugin.
Constraints Sigma — in the ideology of Jetpack Compose, you do not need to use Constraints, although there is support for them, we tried to convert Constraints from Figma to Jetpack Compose without using Constraints in the code using indentation and positioning.

Text — in Figma, text has vertical positioning, which Jetpack Compose Text does not, I struggled for a long time to solve this problem and as a result I simply ignore the height of the text block, and position itself depending on Constraints or the parent of the text if it is AutoLayout. I understand that this is most likely not the best solution, but in my opinion this is the best compromise. The second problem that we did not touch is fonts, each font has different default properties, such as size, leading, kerning, tracking and much more, which can be rendered in one form in Figma, since it is still browser rendering and with differences in mobile rendering, so we decided not to export the fonts, but left the export of their properties, such as size, letter spacing, and weight.

Learning the principles of design in Figma. I think every good programmer understands that in order to create a truly useful product, you need to at least understand how the users who will use this product think. Oddly enough, the use of ready-made designs from Figma did not help at all in understanding the construction of the design and is very different from the principles of building interfaces in programming, although at first glance everything is very similar to each other. Thanks to my design partner, I managed to study this issue and finally understand how designers think.

Images in Figma — we wanted to export images from Figma, but realized that this is a useless function for real use in projects, since any raster image is loaded from the Internet or from project resources anyway, plus this would greatly slow down design conversion into the code, since working with images in Figma is asynchronous.

Monetization in the plugin is a coin with two sides, on the one hand, I want to share a good tool with the community for free, on the other hand, I still need to eat. Therefore, for the initial period, we made a Promo period for everyone — full functionality with the export of all child elements. In the future, there will be a FREE version where the selected element without child elements is exported, and the PRO version where all the functionality will be plus all future updates of the plugin with additional functionality, in fact, we set the nominal price for the plugin at $5/mon so that we would be interested in it in the future. I can say by myself the amount of time it saves during development is in no way comparable to its price.

Before publishing a plugin in Figma, we read a lot of articles on the Internet about creating plugins and the difficulties faced by developers, and we can say that if you passed approval in the AppStore and GooglePlayStore, then go through the review in Figma for free :). The Figma team is great, they wrote the complete instructions in the documentation that you need to check in your plugin, and you just need to read and do what they write. We did not have any difficulties, only for a long time, so please be patient. In terms of timeline, we sent it for review on October 26, and received approval on November 1, I still think it’s not very long if you remember the times when Apple could review an application for 3–4 weeks.

In future plans for the development of the Figma2Android plugin:

Add the ability to select export with children or just the selected item.

More complete support for Shapes

Different types of export for example: export of the selected Instance element immediately into a separate component in the code.

Ability to export ready-made functional elements such as TextField, CheckBox, etc.

Release a similar plugin for SwiftUI

and much more :)

And of course we will be glad to hear your comments and suggestions for plugin development.

Links to tools and documentation when developing a plugin, and of course the plugin itself and its documentation:

Figma plugin: Figma2Android — https://www.figma.com/community/plugin/1030354617366499719/Figma2Android

Documentation for Figma2Android — https://figma2android.tech/docs.html

Figma Plugins API — https://www.figma.com/plugin-docs/intro/

Figma Plugins API Reference — https://www.figma.com/plugin-docs/api/api-reference/

Gumroad — https://gumroad.com/

Gumroad API — https://app.gumroad.com/api