Figma, and the art of UI/UX design
Back in the day, there was a time when most work like this was done in Photoshop. This lead to a whole myriad of problems when it came time for developer-hand-off. Unless the developer had Photoshop as well (and many did not) they were left with the task of trying to recreate your beautiful design work, using code, and generally going by sight, while looking at a jpeg of your work. This obviously lead to a lot of headaches all around.
Figma is an online UI/UX design tool. It operates much in the same way that Photoshop did, but with a few obvious differences. One, it’s ONLINE. A file can be accessed with a simple URL. And two, when a developer selects an item, they can view all the CSS code they want, and easily copy it straight into their code database. This, right here, shows the significant difference between Photoshop and Figma. In Photoshop, you’re make a ‘picture’ of the thing. In Figma, you’re making the ‘actual’ thing.
Once you’ve designed an Atom in Figma, you have, essentially, the finished piece that’s ready to be included in your developers code base.
Figma to Liferay.
Let’s skip to another part of the problem, Liferay Integration.
Liferay is a leading portal software platform for Enterprise, and it has a robust array of tools and items available to developers so that they can create just about anything a designer has imagined.
Once you’ve gone through the list of Atoms that you need to create for your Portal project, you still have the issue of ‘As a designer, do ‘I’ now need to create the code for these pieces? Or can i just hand off the designs?
Well, you can absolutely send the Figma url. That will give any developer exactly what they need to recreate all your atoms.
If you wanted to take things to the next level. You could do it yourself.
Liferay Lexicon Customizer
Introducing a handy little application called ‘Liferay Lexicon Customizer’.
This Application (available for download at Github) is a collection of all the Atoms needed to create a fully functioning Design Guideline. It’s all there, buttons, cards, fonts, etc. Everything you could possibly need is right at your fingertips.
Using the code section on Figma, you can see all the relevant code needed to recreate this in the Customizer. You’ll see size, hex colours, fonts, drop shadow information, and so forth.
By going through each of these atoms, one at a time, you’re creating the codebase that liferay needs, in order to create your new ‘theme’
When you’ve gotten to the last atom on your list, you can simply ‘export’ the full works, and hand over the .scss file to your developer.