gridaco / assistant

🤖 Bring your Figma design & development pipeline to the next level - with design to code, in-design-content-management, component management, tools for faster design
https://grida.co/assistant
Other
578 stars 47 forks source link
ai assistant chatgpt figma figma-flutter figma-plugin figma-plugin-example figma-to-code flutter grida plugin storybook ui-automation

framework: figma, flutter, react, solid-js platform: Android, iOS, Web, macOS, Linux, Windows title: 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

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 plugin link 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.git

cd 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 mode
yarn sketch

# [OPTIONAL 3 & Contributors only] Run plugin ui in webdev mode
yarn 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 by figma/flutter and the core builder is powered by Grida dynamic

Console & Cloud integrations

Watch the demo on our website

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 at console repository

UI Element Detection

Rule based button / input / icon detection with @reflect-ui/detection Higher quality ML based detection available at Grida'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

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 root
yarn webdev

# or..
cd webdev
yarn start

Debugging

Use console.log statements to inspect values in your code.

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

Docs

Contributing & Project Structure

general See this project's contributing guideline and technical overview here. And general Grida project contribution and collaboration guideline here.

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 on grida.co

All update logs available at CHANGELOG.md

Blogs

LEGAL

read LICENSE.

to shortly brief,

DISCLAIMER

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