I find a lot of visual finessing (padding, sizing) is easier in code than building all the auto layout stuff in Figma too

Yeah having a clear vision def helps speed up iteration 👌

That’s a balance that I could probs get better at ... would save me from smashing keys for hours until something good comes out.

Tend to do a few high-fi mocks in figma, then into code, then sometimes back into figma !

Usually jump into code if it’s a clear enough idea in my head

It depends what your making but starting with data is almost always the way to go. Then you get a compact piece of code to visually iterate.

There all good materials, you gotta do whatever gets your creative intent out the best.

Oh totally! And I don’t bother mocking up interactions either .. way easier to explore in code.. and I’m probs more creative with it too

Makes sense! I guess I tend to start creeping in features over time as I’m building .. maybe just a few small things here and there as I’m using the things I’m building. 

I guess is why I start with code first.. I get more inspired when I have something functional

Interesting. Are you considering user interface components as stocks and interactions with them as flows?

I design first to get the basics: typography, what stays where, colour and styling. Once these basics are sorted (with as little time as possible, and not geeking much about pixels), every other design that follows is done with code. The browser is my favourite design tool.

Designers who code, do you draw mocks before coding or do you yolo it and jump into code first? 

I jump into code first. Probs slower as I have no idea what I’m going for but I think it helps me get to better solutions in the long run.

Oooooooo that’s interesting! Do you have an idea of all the features first and then you do data model?

Let‘s say you start designing for a new /users/{user} route. You know you‘ll need the User model. What data do you need from the User record? Name, handle, followers, following, avatar … Great, that‘s the data you‘re going to design with/for.

Yeah I jump into figma when the thing I’m building starts to look real shitty.. sometimes I should do it a little earlier 😅

Exactly. Will share an example here later if you are interested

Instead of mocking pixels, I tend to mock the data model first. UI decisions become clearer after that.

Yeah, makes sense, that’s also true. I think that’s more an iterative and “continuous improvement” phase. Or at least, it is for me :)

It works both ways, too: When building out the UI you ‚need‘ something that‘s not in the data mock? Just add it. But then you already know what model and records you‘re referencing.

I don’t code but I always start here anyways. I use something I learned from the book “thinking in systems” called stocks and flows. It helps me a ton to define exactly what needs to display and how each component/data point interacts with each other.

Often I’ll get excited and start coding and then get annoyed that I’m not making it look nice enough so I’ll jump into figma and make a pretty version to keep me going

I used to just jump into the code, but I usually create a rough mockup so I see the vision more clearly.

Then I clean it up during coding.

Definitely, when I just jumped in without a vision I would encounter even more bugs than I usually would.

Plus extra frustation with the result not being as good as I wanted it to be.

For me, I start with a core idea/feature and build for that. Eg an app that compiles an image, a video and a sound file into a single asset.. and then along the way I’ll be like “I want filters and fx options” and then I’ll build that.. and just keep adding until it feels right

I used to jump right into code, especially if I had the feeling that the project was simple enough, or already defined in my mind.  With time I realized that I work in different “modes”. Now depending on the project, I spend time out of code and focus on explorative design mode

You can iterate significantly faster on paper with simple wireframes.

Posts