Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

🤖 Bring your Figma design & development pipeline to the next level - with design to code, in-design-content-management, component management, tools for faster design

License

NotificationsYou must be signed in to change notification settings

gridaco/assistant

 
 

Repository files navigation

frameworkplatformtitle
figma, flutter, react, solid-js
Android, iOS, Web, macOS, Linux, Windows
Grida Assistant for Figma

Grida assistant

Grdia Assistant plugin (figma to flutter & react)

Any design to high quality code, with live preview.

Grida figma to code demo with live preview

  • ✅ Human readable code generation.
  • ✅ Code generation built with CoLI, developed especially for assistant usage, ensuring the best code generation quality.
  • ✅ Slots support (Component with parameters)
  • ✅ Modularized code generation / readability. All production level code, code beign generated as Functions, Varables, Ect..
  • ✅ Design Linting - Visaully makes sence, Structure made sence.
  • ✅ Cloud Resource Copy. Copy your resource in 1 second. (No need to download images and move underres/)
  • ✅ Live preview viaconsole - compiles output source remotely makes design to living application within seconds
  • ✅ Context detection - Grida assistant understands the design, than converts it into a hight quality code. we don't generate rect and text code for a button. We generate button code for a button.

Usage

Install figma plugin via below link. Note that the published plugin is always behind few new features behind this repository. For trying out the latest and mindblowing features, please build from your local environment directly.

Install via figma pluginlink here.

Cloning and running the project:

  • We use yarn workspace for maintaining this project as monorepo.
  • Some additional steps are required to run this project properly.
# [REQUIRED] we use git submodules for `packages/`. you have to explicitly execute this command instead default clone.git clone --recurse-submodules https://github.com/gridaco/assistant.gitcd assistant# [REQUIRED] Yarn will install dependencies, link packages, and generate compiled code of packages, so it can be referenced by root projects.yarn# [OPTIONAL 1] Run figma plugin in dev mode (use localhost server) (recommanded)yarn figma# [OPTIONAL 1-2] Run figma plugin in dev mode (native)yarn figma-native# [OPTIONAL 2] Run sketch plugin in dev modeyarn sketch# [OPTIONAL 3 & Contributors only] Run plugin ui in webdev modeyarn web# visit http://localhost:3303/init-webdev to work on browser

Soon as the subpackages are released as stable, we will remove git submodule dependency for ease of use. until then, this will be the primary repository and all the edits and PRs will be caused by this project. -Learn more here

Sometimes, when pulling this repo from remote, if new submodule package is added, you'll need to run below command to pull with updated submodules (we recommand you to know what this command actually does in a nut shell.)

git submodule update --init --recursive

Pre-requisites

Flutter code builder

flutter widget builder is done byfigma/flutter and the core builder is powered byGrida dynamic

  • figma/flutter
  • grida/flutter-builder
  • grida/dynamic
  • Theme.of Textstyle support
  • Colors. Color support
  • ✅ Slots support (not static content)
  • ✅ Modularized builder functions - (not all-in-one widget tree)
  • ✅ Formatted Dart code
  • ✅ Best code quality (I Assure,) in this planet

Console & Cloud integrations

Watch the demo on ourwebsite

Grida console integrated with assistant enables you to manage your design's content in one place. even if text, image is updated, you don't need to update your code. our cloud service got your back.

Learn more atconsole repository

UI Element Detection

Rule based button / input / icon detection with@reflect-ui/detectionHigher quality ML based detection available atGrida's context engine

Design Assistant

We provide various tools for you for creating stauning designs, and making you 10 times faster to create a working prototype.

Features

Development guide

Building the plugin

  • Figma: Seeplugin README
  • Sketch:Sketch platform will be available soon

Running as Webdev

webdev is a mode that you can run assistant as a standalone appliaction for ui development purpose of its' you can't acccess or call api to design tools.

Learn more at./webdev

yarn# on rootyarn webdev# or..cd webdevyarn start

Debugging

Useconsole.log statements to inspect values in your code.

To open the developer console in the Figma desktop app, go toPluginsDevelopmentOpen Console.

Docs

Contributing & Project Structure

generalSee this project's contributing guideline and technical overviewhere.And general Grida project contribution and collaboration guidelinehere.

supported platforms and frameworks

Changelog

we release new updates in a by-monthluy cycle. Watch this repository on github or signup for our news letters ongrida.co

All update logs available atCHANGELOG.md

Blogs

LEGAL

readLICENSE.

to shortly brief,

  • Any form of modifing this software, including clone, fork, merge is allowed with no restrictions.
  • Making profit "by using" this software is allowed with no restrictions.
  • Making profit "by re-distributing" is not allowed. Recap, you cannot publish this plugin as an alternative to this original plugin.-- Why is that? We are taking "minimum" profit from this software, we will prevent from other enterprise from copycatting this software.
  • The code and packages distributed via this repository is free to use without any restrictions.
  • The code and design is free to use and modify. (Just don't make any profits by re-distributing this plugin.)

DISCLAIMER

Re-use of this software and it's license is overrided bycontributing-and-license

About

🤖 Bring your Figma design & development pipeline to the next level - with design to code, in-design-content-management, component management, tools for faster design

Topics

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Sponsor this project

    Contributors5


    [8]ページ先頭

    ©2009-2025 Movatter.jp