Telegram UI Kit in Figma

[kuhel]

Summary

Objective

To design a comprehensive UI Kit in Figma of adaptive components for creating Telegram Mini Apps applications based on the Telegram design system and implements its interfaces for various platforms.

• Adaptability. The library adjusts to screens of different sizes, making the interface accessible on smartphones, tablets, and computers.
• Multiplatform. UI Kit are indistinguishable from the design of the platforms where Telegram is available
  • iOS
  • Android
  • Desktop
  • Web
• Different color schemes. Dark mode and support of Telegram’s custom user theme tokens.

Components

The UI Kit should include, but not be limited to, the following components:

Name	Type
AspectRatio	Layout
Center	Layout
Container	Layout
Group	Layout
Space	Layout
Stack	Layout
Tabbar	Layout
TabbarItem	Layout
FixedLayout	Layout
HorizontalScroll	Layout
Checkbox	Form
Chip	Form
ColorPicker	Form
DatePicker	Form
Fieldset	Form
FileInput	Form
Input	Form
NativeSelect	Form
PinInput	Form
Radio	Form
Rating	Form
Slider	Form
Switch	Form
Textarea	Form
TextInput	Form
Autocomplete	Form
MultiSelect	Form
Select	Form
Button	Form
Link	Navigation
Breadcrumbs	Navigation
Pagination	Navigation
Steps	Navigation
Tabs	Navigation
Loader	Feedback
Snackbar	Feedback
Progress	Feedback
Skeleton	Feedback
Affix	Overlays
Tooltip	Overlays
Modal	Overlays
Popover	Overlays
Accordion	Data Display
Avatar	Data Display
Badge	Data Display
Card	Data Display
Image	Data Display
Spoiler	Data Display
Timeline	Data Display
UsersStack	Data Display
Blockquote	Typography
Code	Typography
List	Typography
Text	Typography
Title	Typography
Box	Misc
Divider	Misc

Documentation

Each component should be accompanied by documentation that includes:

• Usage guidelines
• Sizing and spacing specifications
• Color palettes for light and dark modes
• Typography styles
• States (default, active, hover, disabled, etc.)

Deliverables

• Figma file(s) with organised layers and components
• Style guide and usage documentation
• Exportable assets (icons, images, etc.)

Approval

This specification must be approved by the project stakeholders before work commences. Any changes to the scope or deliverables should be documented and agreed upon by all parties involved.

Context

To design a comprehensive UI Kit in Figma of adaptive components for creating Telegram Mini Apps applications based on the Telegram design system and implements its interfaces for various platforms.

References

• https://www.figma.com/community/file/1248594479379883056/telegram-android-ui-kit
• https://www.figma.com/community/file/1248591742072330278/telegram-ios-ui-kit
• https://weui.io/
• https://vkcom.github.io/VKUI/
• https://mantine.dev/

Estimate suggested reward

Up to $10K

[mainsmirnov]

Good evening!

We are the Xelene Studio team, eager to participate. Explore our open concept for the Whales site here.
One of our designers actively participates in Telegram contests. Enjoy his creations on this page.

Desired reward: $10,000
Submission deadline: One calendar month after assignment.

Implementation plan:

1. Research the current system and its flaws, collect additional references
2. Design and document new components, considering guidelines
3. After completing each block, submit for community evaluation

[howardpen9]

nice!

[mainsmirnov]

Hi! We're actively working on creating components for the library. Later, we'll add more components, polish the color palette, and create templates to be inspired by.

You can check the current state here.

If you have any feedback, kindly let us know and we'll consider it. Thanks for your support!

[kuhel]

The only feedback is to stick original Telegram UI and it's color palette like it was done at this library for example https://www.figma.com/@firststagelabs

[designervoid]

@kuhel
Extend platforms on pages Colors pallete and Typography to Web · TWA, iOS · TWA, Android · TWA, Windows · TWA, Linux · TWA, macOS · TWA seems good practice?
Or need deeper sections, like Web · TWA · Desktop, Web · TWA · Tablet, Web · TWA · Mobile.
Not sure about cross-platform of deeper sections, we can easy inspect platforms via https://github.com/twa-dev/types/blob/master/index.ts#L174

How to detect is TWA App or not:

1. https://github.com/Telegram-Mini-Apps/tma.js/blob/11085926061efbb4c5c92263441c6e2ed43ca59d/packages/sdk/src/misc/isTMA.ts#L6
2. https://gist.github.com/slavafomin/f22c8e2e9317685b95b7cd6ce846499b#file-is-twa-ts-L5

How to detect TWA · Platform || OS:
https://github.com/twa-dev/types/blob/master/index.ts#L179 is Windows or Linux.

I'm not detected in any telegram client unknown state, only get it only from Web, not inside TWA -
https://github.com/twa-dev/types/blob/master/index.ts#L183 usually Web (but not sure).

[mainsmirnov]

Hi! We're continuing to actively work on implementing components and expect to complete this stage in approximately a week. Here's the current progress:

Name	Progress
Space	✅
Stack	N/A
Tabbar	✅
TabbarItem	✅
FixedLayout	N/A
HorizontalScroll	N/A
Checkbox	✅
Chip	✅
ColorPicker	✅
DatePicker	❌
Fieldset	❌
FileInput	❌
Input	✅
NativeSelect	❌
PinInput	❌
Radio	✅
Rating	❌
Slider	✅
Switch	✅
Textarea	❌
TextInput	✅
Autocomplete	❌
MultiSelect	✅
Select	✅
Button	✅
Link	✅
Breadcrumbs	❌
Pagination	✅
Steps	❌
Tabs	✅
Loader	✅
Snackbar	❌
Progress	❌
Skeleton	❌
Affix	❌
Tooltip	✅
Modal	❌
Popover	❌
Accordion	❌
Avatar	✅
Badge	✅
Card	❌
Image	N/A
Spoiler	❌
Timeline	❌
UsersStack	✅
Blockquote	✅
Code	✅
List	✅
Divider	✅

[mainsmirnov]

Hi! We're excited to announce that the Telegram Mini Apps Library is done ✅

Note that it is still in Beta and there might be some issues that we will fix as soon as reported. We'd also like to publish it to the Figma Community if it's OK. Let us know if you have any additional feedback.

Thanks for giving us the chance to contribute to the TON Community!

[mainsmirnov]

Wallet in Tron (TRC20): TSMm71b9pLWdiYimFCv9MkRBjMxKfQAsSr
We will submit a pull request to the Hall of Fame after we are done with issue #364

[delovoyhomie]

Wallet in Tron (TRC20): TSMm71b9pLWdiYimFCv9MkRBjMxKfQAsSr
We will submit a pull request to the Hall of Fame after we are done with issue #364

@mainsmirnov, I am pleased to congratulate you on the successful completion of the work. We reward contributors in TON equivalent, so please attach your TON wallet here.
Thank you!

[mainsmirnov]

Wallet in Tron (TRC20): TSMm71b9pLWdiYimFCv9MkRBjMxKfQAsSr
We will submit a pull request to the Hall of Fame after we are done with issue #364

@mainsmirnov, I am pleased to congratulate you on the successful completion of the work. We reward contributors in TON equivalent, so please attach your TON wallet here. Thank you!

@delovoyhomie, thank you for your warm message. We would like to request a reward in USDT. Could we please arrange this?

If we can't, here is my TON address: UQCU3iMvFaNcCoG_0pTLLSBEQN9nPtG6k0oThpnNYldltZdl

[delovoyhomie]

Rewards sent!

To accurately recognize your valuable contributions in our repository, we kindly request you to submit a Pull Request to the Hall of Fame file, providing the wallet address and a link to the bounty with the number.

Please follow these steps:

1. Fork the repository (if you haven't already).
2. Edit the Hall of Fame file, commit, and push your changes.
3. Create a Pull Request from your fork to the main repository, providing the wallet address and a link to the bounty with the number (for example, Pull Request Article: Generation of block random seed #136).

For reference on what your entry should look like, please see the examples of past merged pull requests.

@mainsmirnov Thank you for the contribution!

• https://tonscan.org/tx/F6OJUMzWPzht27HLmj1pUiH8QcG6SXYCBxzLCOexv3g=

Questbook proposal