Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mastersam07/figdart

Convert Figma styles to Flutter effortlessly.
https://github.com/mastersam07/figdart

figma figma-plugin flutter flutter-theme flutter-theming hacktoberfest

Last synced: 25 days ago
JSON representation

Convert Figma styles to Flutter effortlessly.

Host: GitHub
URL: https://github.com/mastersam07/figdart
Owner: Mastersam07
License: mit
Created: 2023-09-09T23:20:28.000Z (over 1 year ago)
Default Branch: master
Last Pushed: 2024-03-22T17:10:04.000Z (10 months ago)
Last Synced: 2024-03-22T18:34:28.828Z (10 months ago)
Topics: figma, figma-plugin, flutter, flutter-theme, flutter-theming, hacktoberfest
Language: TypeScript
Homepage:
Size: 2.3 MB
Stars: 30
Watchers: 2
Forks: 1
Open Issues: 5
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

Figma Styles to Flutter

Figdart demo

## The Problem

When it comes to translating styles like textstyles and colors, there are a couple of problems that could arise. Some includes:

- Manually converting Figma text styles to Flutter code
- Greater risk of inconsistencies appearing in text styles between the design files and the coded application
- Manually converting styles often results in code duplication
- Manual conversion can lead to errors such as incorrect values, typos, or even omitted styles, which can be costly to debug and fix
- Every time a designer updates a text style in Figma, developers have to manually update the corresponding code, which is both time-consuming and error-prone

## Solution

By automating the conversion process, FigDart aims to eliminate these issues, making the design-to-code workflow more efficient, accurate, and consistent.

### Editor Mode
How the plugin works in editor mode

### Dev Mode on View Only Access
How the plugin works in dev mode

## Further features

### Use Theme Extensions

You may choose to register your textstyles as a theme extension.

### Editor Mode
theme extension editor mode

### Dev Mode on View Only Access
theme extension dev mode

### Vary textstyle properties

You may select some other textstyle properties like font family

TODO:
- [x] Text decoration
- [x] letter spacing
- [x] line height.

textstyle options