natinusala / borealis

Hardware accelerated, controller and TV oriented UI library for PC and Nintendo Switch (libnx)
Apache License 2.0
260 stars 83 forks source link

IDEA: Open Source Design System #50

Open alfatreze opened 4 years ago

alfatreze commented 4 years ago

How interested would you and other developers be on having a consistent design system working along with Borealis?

I started last year to build one, called Aurora Ds, but ended up stopping due to a couple of reasons.

You can check out the skeleton here, with a few elements borrowed from a few people for a quicker ramp up :P

The idea is to document and support all current and future Borealis components and layouts and simplify the work of developers and makers on bringing new apps to life.

Using figma with it's very permissive free tier, allows easy replication and building new UI's from components, that will be mapped to Borealis's code.

Eventually a plugin for figma could be built to export either themes or layouts, with it's simple plugin framework, or directly through API access. This is similar to what I already today with Diez Framework: https://diez.org/.

I think this could vastly simplify building in a very visual way and create richer experiences. I also loved how attuned we are 😁 , Aurora (design system) Borealis (UI library).

natinusala commented 4 years ago

Hey, I think that's awesome! I love that the names match 😄

So the idea would be to implement all of borealis's views in Figma, and eventually be able to design the UI from Figma and output something that the library can automatically use? That would be really dope!

Does Figma support layouts?

alfatreze commented 4 years ago

That's it in a nutshell!

I also believe it will lower the barrier curve in building well designed, useable UI's since we can also easily have pre-defined patterns just ready to use.

The easiest to output will be just tokens, as there are many easier ways to do it, and quickly match it to a theme. For components, maybe look into react or html plugins, to understand the best way to marry the two, either import and use those components, which might make them easier to update, or export based on specific object names or heuristics. A bit of investigation an testing will help here.

Figma has a very robust component based approach, to which you apply overrides, so it's quite easy to extract those properties for both layout and theming. I can more or less imagine some buildup of feature increments, but as usual the best is to start with the quick wins.

The Prototyping support also enables setting navigation, overlays and animations so translating these might also be doable.

The available plugins should also make it easy to test translations, connecting to data (csv, json, gsheets), as well as a few other potentially interesting use cases.

I would be creating all the components and documentation on how to use them for now, and obviously testing :P. I Read a bit through the documentation, and while it seems to allow quite a bit of flexibility, I think the best way to go is to focus on the most important UI patterns and make sure to support each one well at a time. Or optionally collaborate with specific devs using Borealis and growing it along side the needs.

I am unsure if there are other UI libs, or what other homebrewers are using, but it would be great to have wide use and be able to support a growing community.

For now I'll try to start mapping Borealis's built in views to components and make a couple of the most relevant atomic components and patterns, then we can review what works well, what I might have missed and where to go from there.

Let me know were we can have a quick chat or call, you can reach me at alfatreze@gmail.com, oh I'm on GMT - Lisbon

natinusala commented 4 years ago

The thing is, you will still need to write actual C++ to glue everything together. Will Figma be able to output something that's usable in C++ without being painful, but still powerful enough to be worth using? I fear that Figma will lack flexibility in its output, and users might need to rewrite what Figma gives to make it usable...

Do you have an example of what can Figma give us? To gauge the feasability.

You can message me on Discord if you want, this is where the Switch stuff happens (RetroNX or switchroot servers), DM me directly

natinusala commented 3 years ago

@alfatreze I am digging this from its grave - I am currently rewriting the library to use a more sane layout approach. Basically the views would be defined by XML files, like Android. The layouts are also unified under one single flexbox-like layout.

The flexbox layout is done using the Facebook Yoga library, which has a JS version. That means one could theoretically create a web interface to parse any borealis UI XML file and render it exactly as it would in a C++ app (with some work).