How to couple Ux/UI design efforts with Phoenix/LiveView apps

General workflow question for other Phoenix shops, what does your workflow with designers look like?

We’ve decided to take advantage of some designers to improve the look of the app we’re prototyping. Phoenix/LiveView is a newish stack for us, and for them as well. I think their past engagements have been tooling heavy (Figma, Storybook, etc).

What has worked well for you to weld designers with your development efforts? We’re a small group, so looking to keep the tools/dependencies light ourselves, “first principles” sort of thinking.

We have been using Figma (having our designers base all mockup design in it) for years and it’s going pretty well. We don’t take the Figma produced CSS for granted of course, but it’s indispensable in terms of analyzing what layout to use as well as having most of the styling ready as it is.

The designers don’t need to be frontend developers themselves but they must be familiar with the layouts in CSS (flex, grid) and the way LiveView’s two-tier frontend works. One thing we learned was that designers with mobile-only experience are not a good fit for web apps.

Figma is ok when designing reusable components with basic states (hover, focus, pressed (active)) and trying those out. Other than that it’s more of how you organize the files and mockups within them, but that’s always the case regardless of the tool.

1 Like