github.comPosted Jul 18, 2020, 2:15 PM UTC
literally just 2 hours ago i was thinking that i need sth to convert figma to flutter then i found this post right when i opened reddit. thank you so much!
thanks!! If you need anything, feel free to ask! Even though there are 99% of tests, sometimes the tests are wrong (someone found on day 1 there was a typo in alignment.. lol)
hahaha it happens, this is still great work, i will try it out and tell you if i need sth! thank you for your help!
While it's not as terrible as XD's stack-based render, this still bases everything on absolute sizes, and does not solve the problem of flexibility of the screen size (At least, not in the flutter version)
Kudos for making it and actually getting something out that looks like the original sketch, however, this still ain't the magic wand, chief. (Not yet, at least)
> does not solve the problem of flexibility of the screen size
How would you solve that on Flutter? I feel I could have used some Expanded() here and there, but wanted to have a MVP before. Also, not sure if Expanded would be the right thing. On Tailwind it was easy, because I try to do 1/2, 1/3, 1/5, full, etc. The back-end is the same, it is a simple if/else to change between this and the always fixed size which I'm using in Flutter.
> this still ain't the magic wand
Thanks! Haha! The biggest "issue" I feel is when having too many items without alignment, it will also go to Stack. I'm thinking about solving this with a k-means clustering or something like that, but I still need time to see what I should do. And Figma is (probably) going to announce a Grid AutoLayout in the coming months, so it should minimize the pain.
The only effective way of doing it would be to have a design editor that understands constraints up to a point. Figma, XD, and all of those do not, they're raw, pixel perfect editors that are designed to always reproduce something perfectly no matter the device, shape, size or any other constraint.
IMO the only way to have a "perfect" translation between a design tool and an app, would be to make the design tool understand what the format the framework the app uses is, AKA something that's basically dedicated to flutter.
I can see your tailwind engine is pretty up there as far as auto-translation goes, If you can't get flutter far enough before a flutter-based design tool pops up, keep that part going, I'm sure it can get you far.
Yeah. And all the time I need to keep guessing what the user would want. You might not believe, but I tried to "relax" the constraints and only set the width/height when strictly necessary. I tried to have a mix between responsiveness and fidelity. So far, I am happy that most of the things that you "need" to do are remove or rename things (Column to ListView, for example). This makes the plugin a lot easier to use than the opposite way. The designer can see "hey, there is an additional Padding that can be removed, pfff, gone!".
Regarding other Flutter based design tools, I can't wait to see them, but it is taking too long. Really wish the official team stepped in. Their official position of "hot refresh is good enough" might not be sufficient. Still, this plugin has the advantage of being inclusive and can be run anywhere. I'm currently experimenting with SwiftUI. In the US everybody has a Mac, but in other countries no one has. So sometimes the designer can optimize their layout and export the code to the developer that has the Mac. A lot of curious cases should be enabled.
Thanks for the final comment!
You're absolutely right. Figma's built as a design tool first so layouts/constraints don't exist or break during translation.
How Bernardo's guessing the alignment is pretty genius though. The plugin is very well architectured!
Why do you think the stack based approach is terrible? There's an alternative approach you think would be better for doing layout out an unknown number of layers on top of eachother?
There's an alternative approach you think would be better for doing layout out an unknown number of layers on top of eachother?
No, but that's exactly my point, stacks are the easiest way (short of doing something like a CustomMultiChildLayout delegate, or a custompainter) to make a pixel perfect copy of a design into a widget, and, for doing that, for the purposes of demo, or for something like a fixed size kiosk, it's great!
Why do you think the stack based approach is terrible?
The problem is, that's not what XD2Flutter and other conversion tools are sold, and bought, as, people call it the "new way to write apps" and the "no code" revolution for flutter, touting it as something that can make your designers "take care of the UI" and let the developers just pipe stuff in, and for these purposes, it is awful.
Reality of things is, phone screen sizes vary, a lot. Phone screen density varies, a lot. Phone aspect ratios vary, a lot. Split screen support makes that variation take even more forms! And out of all of these, your design probably only properly supports nothing but a 375x812 screen size (iPhone x UIKit size). Unless 100% of your app users are nothing but iPhone X users, and your app only needs minor levels of interaction with the logic (Show text, take input as buttons), you're going to trade off time developing a flexible, maintainable UI with having to repeatedly go in the generated heap of text in order to be able to patch in flexible visuals and button inputs.
Everyone agrees Responsive layout support is needed, I think you'll be really happy with a future update to Flutter for XD coming very soon :)
Can you elaborate on that? Currently pondering whether to go for Figma or XD as our UX prototyping tool...
I was literally just needing this!
Bro this is what we really needed.. The official one to flutter is trash..
Hahaha thanks! I never tested it, but their codebase didn't inspire much confidence 😂. It is veeeery obscure, they are using javascript to compare types everywhere (instead of typescript which, well, was made to help with this) and they have zero tests. ZERO. It was time consuming for me to cover 99% of almost 6000 lines of code, but totally worth it. I could fix bugs I never imagined.
This is amazing.
This is something I would sponsor through GitHub Open Source Sponsorship. A project like this has potential if it can be maintained and developed further. With that said, I haven't actually used it yet to see.
Awesome! Take my Internet points pls.
Is this web only?
This is a plugin for Figma. There is an unofficial Figma app for iPad, which is just a webview.. lol So yes!
Thanks, great job nonetheless!
AWESOME!
I'm planning to make a simple FOSS prototyping tool like this for Sketch, so your code might come in handy. Love that it's copyleft, btw — was planning to do the same with mine! :)
btw, did you take any code or inspiration from Adobe's official XD to Flutter extension: https://github.com/AdobeXD/xd-to-flutter-plugin/ ?
I was thinking of reusing parts of that before, but I haven't taken a close look at it yet.
No. But looking it really fast, it looks [really really bad](https://github.com/AdobeXD/xd-to-flutter-plugin/blob/e5503c692ed47c53b8d9594dc494288c80e08209/src/core/nodes/container.js#L83). I don't even understand why they used JavaScript. They are comparing types everywhere, it makes no sense.
I tried to comment on the full source code, you will see comments everywhere. There are sooooo many random edge cases that can occur, that I just tried to document everything. Additionally, tests? They have zero. ZERO. I have currently 128 tests in 32 files, covering 99% of the project, which is almost 6000 LOC.
If I were you I would get the AltNodes conversion I did and apply the Sketch structure into it. Even if you make the Sketch plugin for another language, the structure that I built will help you a lot.
I'll look into it. It's a hobby project of mine and I'm only a beginner hobbyist developer, so I'm not sure how easy it will be to orient myself in the code. (I'm a UX designer by trade, though I did go to a technical school.)
If I have any questions, I'll be sure to PM you. :)
In any case, thanks a ton for making this!
Sure, feel free! You are welcome!
Regarding the development level, you should be able to understand, I don't do anything super advanced. When I began this project I didn't even know how to compare types in TypeScript. It is true I have an undergraduate degree in computer science, but anyone can learn it too.
Yay! I tried out the plugin and it is fantastic! You're the stealth developer that's been working on a Figma to code converter this whole time ;)
Thanks!! Haha I started it like ~2 days before the XD converter was announced.
Thank you!! I'm still going through the codebase to improve my understanding of how everything works but I'll definitely be reaching out to you.
From an architectural standpoint, I'm so happy that you're doing things IMHO "right".
Maybe because we were both Android developers that we think about things the same way. It's so refreshing to find someone that understands there are base essential problems that HAVE TO be solved with design-to-code or else it becomes garbage.
That's one thing Android development teaches better than any other framework. Your architecture choices matter and they will hunt you sooner or later. I tried to use a builder scheme. It is not perfect, but was the best I could do. My idea, at the end, was to have the same main file between different languages. But so far I haven't been able to, since there are maaaany things that change between them, and if I abstract too much it won't be useful either. But it is good. Just not perfect.
I was able to add 90% of swiftui in 2h yesterday. So it pays off.
Thanks!!
I was able to add 90% of swiftui in 2h yesterday. So it pays off.
0.o wow
For Android developement, especially before 2019 when Google recommended MVVM as an architecture, we got a lot of practice juggling the Android framework and design patterns. That experience is in a sense unique.
I still need to wrap my head around the codebase but having built many libraries using the Builder pattern, I recommend that if you feel things getting out of hand, try adding in some Delegate patterns which makes the code a lot more manageable.
[removed]
Thank you. I didn’t want to use XD just to test some flutter layouts
Thanks! Haha
It is (probably) going to be a lot better in basic usage than the "official" one for XD (look at the README, no one is doing that.. Not even the paid ones), but there might be some advanced areas here and there where.. Hmm.. It is incomplete or missing something. If you have any ideas, bugs or feedback, feel free to reach me.
One of the things I'm still thinking is how to correctly identify ListView (instead of Column) and I haven't reached a conclusion yet.
Hm... maybe if it's in a frame, it's a list view? If I need something scrollable in Figma, the only way to do that is to put it in a frame.
Or you could let the user specify somehow (using the name, or perhaps it might be possible in Figma to specify custom properties — it's definitely possible in Sketch).
I'm thinking about adding Lists when I detect that there is a child in a position larger than the Frame size. Otherwise, the issue is that there is no difference between a "list" and a "vertical frame" in Figma. And funny enough, for HTML it doesn't matter, because Columns and Lists are the same thing. But for mobile devices it isn't.
I personally only use frames for scrollable lists. Otherwise, I just use groups — don't really see a reason to use frames for columns.
That said, I get that other people could be using frames differently.
The XD to flutter is generally garbage, produces really bad code and often doesn't even work. Hope for creator that this one performs a bit better
XD is just a camouflage for layout testing