Figma Assistant by Grida — Supercharge your design & development workflow
TL;DR — Get it now; use it first. → Get the Figma plugin here
It’s been a while, Lots have changed 🏔
Before we start.
Before we start, we are excited to share for the first time, about our new name Grida. After serious discussions, we’ve came up with our new name and brand identity, Grida. We’ll share you about our story and what we aim for with our brand shortly with another blog ;)
Alright!. Let’s dive in and take a deep look about this release (2021.8.0b)
What’s new?
- Speed
- Navigation UX Renewal
- The code
- Code interaction
- Figma to Flutter
- Figma to React (React as preview feature)
- Icons loader
- Design Lint now on beta channel
Shall we install first?
10X Faster Loading time
First, at a glance, we made our plugin more reliable. By reliable, we mean launching plugin should not be a heavy task and should not make you consider to open it or not.
Compared to previous version, we’ve made some interesting performance boost. It’s now 10 times faster, takes up only 0.1 ~ 0.3 second to open (without thread lock).
A new navigation system
Nothing much changed, but pretty much everything is changed.
You can either interact with Code or Design mode. This state will be saved for your next re-launch. It makes designers use designer’s feature and developers to use developer’s feature in a most intuitive way.
Interacting with code
We’ve came up with a cute way to configure your code output. We call it @code-ui/docstring( It’s available on github & npm ). And here’s how it works.
Design to Flutter
We’ve made preview feature that you can upload your designs with linked Flutter code. All you’ve got to do is Click “Next” after code is ready.
designTo.react() - A preview feature
We are also very excited to share design to react on Assistant.
Few problems remain.
- css codegen is incomplete (as in syntax)
- — color variables are not supported (black is
rgba(0, 0, 0, 1)- should beblack) - not all nodes (layer types) are supported — ellipse, vector and line is not supported
- tsx(jsx) formatting is not native (it’s via remote api, takes few seconds for the code to be formatted)
- — only styled-component style syntax is available for now. (will soon support css-in-js & jsx + css coding styles)
- preview & uploading is not ready — currently you cannot remotely compile your react code run it online like flutter can.
- detected components are still plain html code — we can detect buttons, icons, etc.., but we have not yet found a best way to make it as a component code.
- — Since react does not have a standard ui library like flutter does, we have to choose which library we will support (unless you want your code to be super long!)
We believe you can still save lots of time with it, yet please keep in mind that this is a preview feature!
→ If you have any ideas, or want to contribute click below
Icons loader (🤔 And why does it matter?)
Icon is one of the most beautiful artifact of the design. It represents the philosophy of the good design — simplicity, intuitiveness and aesthetic.
But for small teams, like us, have a high chance ending up using Icons set such as Google’s material icon or Ant design icon. (Let’s be honest. we all once used them. at least for instagram icon)
Well, you might think our Icons loader as yet-another-lame-icon-loader, but it isn’t. What’s drawn with us, we know what that is and provide a linked data, makes it no need to hand off or manage any further.
Take a look at the demo. you can see, icon loaded from us is tracked and can be exported as code (not a dirty svg code, but a clean and neat flutter code.)
Design lint — Tidy up your design
Design lint was available on previous version, but we’ve made some major updates on it.
🗓 New Linting rules every week — subscribe on github (press 👀 watch)
It’s good for you and your team to always lint your design before handoff, extracting code out from it. With linting, you can benefit below.
- 👀 Better widgets detection — from clean design, it’s easier for us to detect components like input, button, etc..
- 🧹 Cleaner code — You don’t want
Frame 231in your code right? You wantContentWrapperInstead. - 🙋 We can ask you questions — we can ask you questions about the intend of the design, make sure our understanding of your design is correct.
We don’t want to limit your creativity or force any rules. Design tools should remain for fast and rapid prototyping. We recommend you to run lint only on the final step before code generation or handoff 😉
Best Practice
- Design your page, manage it with components
- Select your page / component and run lint on it.
- Fix the design errors to make..
- the layer name that makes sense (even in code)
- layout that is responsive
Switch tab to code, and click your component. check if the code is as you’re expected, alter the design if something minds you.
And. click click. Job is done.
Feedbacks & Contributing
We think anyone should have full access to the code and have chance to contribute. This kind of technology cannot be closed source. It just does not make any sense.
For making great product, we need you help. (We really do.) Any kind of contributions are welcome. You can be part of anything, from design to core development, fixing the docs suggesting ideas and simply reporting issues.
Care to weigh in?
What’s next?
For next Assistant update, we will bring 4 big features.
- Components manager — to automatically design model (data mode / interface / props / slots) for the component and make it available to the code.
- Contents loader — with along icons loader, we will add image & text content loader. this will be used with Components manager and provide you how the component will look with different data. (for both as design and as runtime app)
- Figma variant support & Full autolayout support — currently we don’t have Variant support. to do this we need to accomplish
1 - Components managerfirst. And also we hae baby-level autolayout support, we will make it much more powerful along with new linting rules about layout. - Components linking — since lots of fragments will be made along using components, variants and all kind of interfaces, we need to build component reference management system from scratch. (This shall be provided with intuitive UI)
Wrapping up.
This is just a small step. we have so much more to share, and so much ideas waiting to be a product. Hope you enjoy our release 2021.8.0b
Grida is a Opensource project. We are redefining user interface design.
We are a small team with one purpose — save your time.
- Don’t forget to share this blog and ⭐️🌟💫star & 👀⌚️watch the repo so we can know that you care 😉
- We are recruiting, email or slack me if you think you are the right person for this journey.
Follow us
Please subscribe / follow to our medium, github, youtube, facebook, twitter and instagram for latest news on how we change developer’s life easier.
#We build together 2021 #Until next time 🚀
References
