DEV Community: Keno Reloaded Ⓥ

Vibe-design And Vibe-coding Best Practices

Keno Reloaded Ⓥ — Wed, 23 Apr 2025 16:57:26 +0000

Best Practices for Prototyping and Prompting

Listen to the podcast version of this article:

AI-Prompting for Design Best Practices

Using v0

Use AMBOSS Design System v0 Starter

v0 <> AMBOSS Design System starter https://amboss-registry.vercel.app/starters
Select a starter and click “Open in v0”

Prompting Fundamentals

High-Level Prompting Structure (Starting point)

TL;DR Prompting Checklist

Context: Set the scene
Task: Say what you want
Instructions: Add constraints, tools, logic
Examples: Optional, but improves results
Output Format: Say how you want it back

1. Context

Why does this matter? What is the background or goal?

Give the AI enough info to understand the bigger picture. This helps tailor the tone, complexity, or domain-specific terms.

Example:

"I'm building a budgeting app focused on Gen Z users who love TikTok-like UI."

2. Task / Objective

What do you want the AI to do, specifically?

Be precise. Is it generating code? Naming ideas? Reviewing UX? Answering a legal question?

Example:

"Generate a component in React to display upcoming subscription renewals."

3. Instructions / Constraints

What are the rules, preferences, or specific features to include or avoid?

Add details here:

Required fields, logic, UX behavior
Tech stack
APIs or services
Libraries to use or avoid

Example:

"Use TailwindCSS. Pull brand icons via Clearbit. Include a dark mode toggle."

4. Examples (Optional but Powerful)

Show a sample input/output if possible on what’s the expected answer and which one not.

This anchors the AI’s response style and format.

Example:

✅ "Spotify — $9.99 / month — Renews May 1"

❌ "Spotify $9.99"

5. Output Format

How should the response be structured?

This ensures clean results for the prompter. Specify formats like:

Markdown
Code block only
JSON
Bullet points
CSV

Example:

"Output a CSV file with the user data only."

Bonus: Naming Conventions Used in Prompting

You might see these labeled differently depending on the tool or framework, but they map to the same principles:

Common Label	Maps to...
`Context`	Context or Background
`Problem`	Task or Objective
`Instructions`	Instructions / Constraints
`Examples`	Demos
`Output Format`	Output / Expected Result

💡 If you don’t know where or how to start, ask Chat GPT to create a prompt for you dedicated for the tool you are prompting. In this case is still good to give the AI context. You can also copy and paste the TL;DR above and prompt AI to complete it based on what you need.

Prompt Refinement

Iterate your prompt:

Add follow up questions or rephrase the task. The more context the better.
As Albert Einstein once said:

Insanity is doing the same thing over and over again and expecting different results.

If you are not getting the results you want, try different things, here are some ideas:

Ask questions from a different angles, try to explain the problem, don’t give the solution unless you want something to be solved exactly as you want using a specific method, tool or approach.
Clarify vague language. Instead of saying “please update the image on the thing that switches on and off” say “Please replace the dark mode icon in the <ToggleTheme /> component to a moon <svg> icon from https://feathericons.com/”
Start a new chat, copy and paste where you left of in the previous prompt.
Change to another AI model, ChatGPT, Claude, Gemini
Provide more detailed context or examples.
Add screenshots, files, copy and paste context information.

Expert Prompting Tips & Tricks

Speak the Language of the AI Prototyping tools:

Use the exact component and file names used in your project (e.g., home-page.tsx) to limit the context
Wrap your text in single backticks () to refer to short code snippets or file names: (e.g.,header.tsx`)
Wrap your text in triple backticks (`) to include multi-line code.
Use consistent naming conventions and follow the generated code convention to refer to these (camelCase, PascalCase, kebab-case, etc.)
- camelCase: subscriptionCard.tsx
- PascalCase: CardWrapper.tsx
- kebab-case: home-page.tsx
Use quotes and markdown headers to emphasize hierarchy or sections.
- Markdown cheat sheet

Use Visual and Structural Context

Upload screenshots of your UI for feedback.
- ⇧ + ⌘ + ⌃ + 4 in Mac will create a virtual screenshot and automatically copy it to the clipboard and then you can paste it into the prompt
Include sketches, drafts, folder structures, or diagrams.
Screenshot your component tree and including the file extensions in your prompt to help AI understand your architecture.

Prompt Formatting Best Practices

`markdown

Feature: Dark Mode Toggle

Context

We want to offer users the ability to toggle dark/light themes.

Instructions

Add a button in the navbar
Store the preference in local storage
Use Tailwind for styling `

💡 Pro Tips

🏥

The more you tell your doctor the better the diagnosis

Always refer to existing components or files by their exact name.
Use markdown to show hierarchy and structure.
- For example # Heading gets rendered as an <h1> and what this means for the AI prompt is that # Heading is an important title of a section and helps AI understand the emphasis, hierarchy and context sections
Separate content blocks with dividers or headers.
- Use “—-” 3 dashes or more to let AI know when you are starting a new line or a different context, for example when you paste information, and then you want to add your instructions, separate them. (in markdown this renders as an <hr /> horizontal rule (divider)
Provide file paths to refer to your project structure helps AI understand more context and this will get you better results.

`markdown

/Projects/design-system/
├── main.js
├── utils/
│ └── helpers.js
└── assets/
└── icon.png
`

Expert prototyping Tips

Upload a wireframe screenshot or high-definitions prototype screenshots (for example from Dribbble or your own designs).
Add screenshots and images to your prompt describing what you want from those images and reference them.

For example:

👉

The first image called “460x0w (1).png” is the home page UI of my app, and the second image is the user profile.

</aside>

Paste the existing folder/file structure to reference locations of files and folders for AI reference.

For example:

Refer to specific section IDs or file names. Use back ticks to write single line code, and triple back tick to write code blocks (multi-line code).

For example:
👉 *can you separate the main `page.tsx` into different components? otherwise the page has too many lines of code*
For example:
👉 *In the tab component `` add a new tab called “insights”* 👉 *In the `` with the id of `id="test"` add another `` component to display the user information.*
When referencing code is good practice to write the name of the file as a comment in this case index.tsx so AI knows exactly where this piece of code belongs, and the answer will be more accurate in the future too.

👉 Please replace margin with padding in this code:

`
// index.tsx
import { Global, css } from "@emotion/react";

const GlobalStyles = () => (
  <Global
    styles={css`
      .docblock-source {
        margin: 0;
      }
    `}
  />
);

Packages and Libraries

When we refer to “packages” and/or “libraries” these are pieces of code that were created to tackle specific but commonly encountered problems or challenges.

https://www.npmjs.com/

NPM JS is “Node Package Manager” and “JS” for Javascript

Best Practices for V0 or other prototyping tools

Prompt Template

`markdown

Task

Build a Subscription Tracker Web App using Next.js. The app helps users manage their recurring payments efficiently.

Context

Focus on delivering a fast, lightweight, and visually appealing UI that allows users to easily track subscriptions at a glance.

Features & Instructions

Add a Subscription

Fields:
- Subscription name
- Price
- Currency (selectable)
- Renewal date (date picker)
- Brand icon (auto-fetch from public API)
- Website URL (display with button)

Calendar View

Show upcoming renewal dates in a monthly and/or weekly layout.
Suggested libraries: react-calendar, fullcalendar.js, or a lightweight alternative.

Orbit Visualization

A dynamic visual orbit UI where each subscription is positioned based on its renewal date.
Subscriptions closer to the current date appear closer to the center.

Additional Requirements

Multi-currency support using an API like ExchangeRate-API
Brand logo fetching from services like Clearbit, Logo API, or SimpleIcons
Dark mode toggle
Store data using Firebase, Supabase, or Planetscale (depending on available support in V0)

Tech Stack

Frontend: Next.js, TypeScript, TailwindCSS
APIs: ExchangeRate-API, Clearbit or similar

Output Format

Provide component breakdowns and suggestions for folder structure in a Next.js app.

Extras

Use any open source popular packages or libraries to help you achieve the best user experience based on commonly used best practices
`

Commonly Used Open Source APIs for Prototyping

Images & Assets

API	Use Case	URL
Unsplash	Free high-quality images for UI placeholders	unsplash.com
Lorem Picsum	Placeholder images with URL manipulation	picsum.photos

Fake User Data

API	Use Case	URL
Random User Generator	Create fake user profiles	randomuser.me
Faker API	Fake data like names, addresses, emails	https://fakerapi.it/

Charts, Data & Misc

API	Use Case	URL
Open Weather Map API	Weather API	https://openweathermap.org/api
ChartJS	Charts	https://www.chartjs.org/

From Paper to Pixels: Navigating the Evolution of Web Design for Impactful Digital Products

Keno Reloaded Ⓥ — Tue, 04 Jul 2023 08:09:17 +0000

Rethinking Web Design: Current Issues and Challenges

In today’s digital landscape, discussions about the origins and evolution of design may not be as present as it once was. While we now have access to modern, digital visual design tools, it’s interesting to note that the core principles have remained largely unchanged since the early days of print. In the past ~5 years the way we design started shifting for good.

Reflecting on the progress made, it’s worth pondering how far web design tools have genuinely advanced in recent years. It seems like each year we are introduced to a new tool that requires further learning. However, it’s worth noting that these new tools, despite their diversity, are increasingly aligned with the fundamental principles of web development. Their aim is to facilitate the translation of designs into intricate, interactive, and cohesive interfaces, keeping the same standards that have shaped the field.

Paper vs Box paradigms

Page or paper paradigm

Most of the tools we used to use in design, were built with the page paradigm in mind — they were based on pixels or vector images developed for print — but the internet doesn’t work this way. Working in an environment essentially different from the final medium may not be the best way to do things.

Photoshop is the most effective way to show your clients what their websites will never look like.
Stephen Hay, Creative Director at Rabobank, Author of Responsive Design Workflow

Isn’t it the goal to create a medium-specific design output?

Thinking in paper

Of course in the creative process, prototyping, and proof of concepts anything is valid.

Thinking in a more free-flowing way, open-ended, and starting on a blank sheet of a paper implies a less structured approach, where ideas and concepts are explored and expressed without strict boundaries.

Thinking in “paper” may involve brainstorming, mind mapping, or engaging in creative and loose thinking.

Thinking in boxes

Content: It represents the actual content of the element, such as text, images, or other media.

Padding: The padding is the space between the content and the border of the box. It provides a buffer area around the content.

Border: The border surrounds the padding and content and separates them from neighboring elements. It can have a specific thickness, style, and color.

Margin: The margin is the space between the border of the box and other elements in the layout. It creates a gap or separation between elements.

By understanding and applying the CSS Box Model, web developers can effectively control the sizing, spacing, and positioning of elements on a webpage. Thinking in “boxes” means considering the dimensions and properties of these box-like elements and how they interact with one another.

Cross-functional collaboration

Achieving Seamless Integration of Design, Content, and Coding

A common downside of a project life-cycle is working on design, content, and coding separately.

Nowadays this is less and less the case, where a designer creates a design that content and developers have to adapt either to the software architecture or to the design and/or vice versa.

The design, however, could be adjusted to our software foundation from the very beginning.

We know that by asking people for their input early in the process, you help them feel invested in the outcome, and the final delivery of a quality product. This is one of the many aspects of why design, content, and development teams have evolved to become more cross-functional and collaborative.

Many designers and developers are also individually becoming more cross-functional with designers learning the basics of HTML, CSS, and Javascript to prototype ideas and developers with a heavy eye for user experience.

Close collaboration between design, marketing, and development teams is crucial for achieving the highest quality products, happy customers, and great companies.

Design-to-code

Designers have ceded too much ground
Brian Chesky (Industrial Designer, CEO & Co-founder ofAirbnb)

Then, there’s also the moment of the design-to-code, the transition of design assets has to be smooth and integral so that not a single tiny thing is lost or neglected in the process.

Using advanced tools that allow previewing the final results and editing them in real time helps preserve a direct connection to the medium we are trying to reach with our designs.

That way, more complete, consistent, and bigger projects can be achieved, and Designers would make the contribution they should be making, “taking their seats at the table”. That’s why it is crucial we —designers— embed ourselves in every aspect of the process, it should be part of our nature to have a deep understanding of the topic and help identify areas where to improve the product.

The evolution of coding in a nutshell

Enhancing Representation of Complex Design Work

As creative professionals, we work with tools and we think in pages while the thing we’re actually working on is far more complex and specific in its final form. So wouldn’t it be more reasonable to find a way to better represent our design work?

Coding Designs within the Constraints of HTML’s Early Days

For example, when I started implementing my designs in coding, more than 15 years ago, the flexibility of HTML (as its intended way of structuring documents), was very limited in what we could do to represent more complex designs. Using HTML tags available at the time.

How it’s started

    // An extremely simplified view of how we would position elements
    // next to each other

    <table>
      <tbody>
        <tr>
          <td>Left element</td>
          <td>Right element</td>
        </tr>
      </tbody>
    </table>

How it evolved

Then the <div> or “content Division” came along…

    // An extremely simplified view of how we would position elements
    // next to each other
    <div>
      <div class=”float-left mr-16”>Left element</div>
      <div class=”float-left  mr-16”>Center element</div>
      <div>Right element</div>
    </div>

    <style>
      .float-left {
        float: left;
      }
      .mr-16 {
        margin-right: 16px;
      }
    </style>

How is going

Flexbox or grid and other ways as well (columns CSS property)

    <div class=”flex gap-4”>
      <div>Left element</div>
      <div>Center element</div>
      <div>Right element</div>
    </div>

    <style>
      .flex {
       display: flex;
      }
      .gap-4 {
        gap: 16px;
      }
    </style>

In these examples, thinking in boxes feels like packing things inside a box. When packing a present for a birthday for example, usually the box is sized to contain the present. (unless you are pranking someone to think that something bigger is inside the box)

Or for example when an e-commerce delivery item comes in a box within a smaller box inside another box. With foam padding around it so it does not move and damage the item inside.

In this case, the content is the item, and the box is the div or parent element containing it, and then the rest of the CSS Box Model properties, Padding, Border, and Margin.

Abstraction layer

Design systems have evolved (as much as the code frameworks) to abstraction layers methods that remove the amount of code that has to be read/written/understood by a developer/designer to achieve complex layouts or solve common problems.

For example, the code below could render the example mentioned above but represented in a much simpler way. And a host of other benefits that is out of the scope of this post.

    <Inline space=”m”>
      <Text>Left element</Text>
      <Text>Center element</Text>
      <Text>Right element</Text>
    </Inline>

Empowering Non-Coders — Design mental model switch

“Paper” model

“Box” model

From Box Models to Creative Collaboration

Nowadays new tools, like Webflow, Wix, Figma, Adobe XD, Framer, etc., took the initiative to evolve into the box model system.

This enables those who do not code to work on projects at a bigger scale, directly impacting the development stages, and helping us have a say and push for our hypothesis, and new creative solutions.

Modern digital product design is transitioning to where the way of thinking resembles closer to how a code would approach it.

Not to say that the paper model is still going to be a core part of the design.

Free mode vs Systematic (Left side more logical of brain vs right side more creative)

Design & Code relationship

More and more design is becoming very similar to how a front-end developer would build that design with code, which creates the perfect hand-off for consistency, efficiency, and implementation of a design and removes friction between the designer and the coder.

Of course, this coupled with having a design system on the design side that matches the one used in the coding environment would further remove discrepancies in the final product.

One of the things that’s obviously difficult for a Designer to interpret is exactly what type of code, what type of abstraction layers, and what type of systems you might be using in your development environment.

For more about this topic, I invite you to read my previous article “How to design like a front-end developer — Design Stack & Tech Stack”

Design-to-code: Auto-Layout & Plugin

On the following image:

The white box on the left is the layers panel of Figma. Each name has purposely been chosen to match that of each coded design system component at

AMBOSS

. The indentation of the layers panel depicts the cascading and nesting of elements. The Card layer is the parent and it has what in programming is called “children” representing each other elements, and those children can also be parents of other elements.

On the right top, we have the actual design of the card, and each layer is one of those elements, spacings, alignments, and content.

In the dark box below we have the abstraction layer of our design system on how we would build the design of the proposed card.

We can immediately see the co-relation of how the ways of designing for the right medium can have its benefits.

For more information about this, I invite you to read my previous article: “Streamlining Design to Code Workflow: How I Created a Figma Plugin to Convert Designs into ReactJS Design System Components”

Conclusion

Navigating the Evolution of Web Design for Accurate Representation and Impactful design involvement in product

As web design continues to evolve, the need for representing complex design work more accurately becomes increasingly apparent. Creative professionals must explore ways to bridge the gap between their tools and the final form of their work. Striking a balance between the freedom of creative expression and the systematic thinking of the box model approach can lead to more complete and consistent design projects.

In conclusion, embracing the evolution of web design, fostering cross-functional collaboration, and finding ways to better represent design work are crucial steps toward achieving high-quality, impactful digital products. By adapting to new tools and methodologies, breaking down silos, and nurturing a collaborative mindset, designers can play an instrumental role in shaping the future of web design.

Streamlining Design to Code Workflow: How I Created a Figma Plugin to Convert Designs into ReactJS Design System Components

Keno Reloaded Ⓥ — Fri, 16 Jun 2023 09:13:14 +0000

Introduction

In today's fast-paced tech world, efficient design-to-code workflows are crucial for seamless product development. As a Senior Product Designer at AMBOSS, a medical knowledge platform for doctors and students, and a self-proclaimed to be able to do some front-end development, I recognized the need to bridge the gap between design and development to improve efficiency while boosting quality.

Leveraging Figma's Plugin API, I embarked on a journey to create a plugin that would translate designs into our ReactJS Design System components with just one click. In this blog post, I'll share my experience and the valuable lessons I learned along the way.

How it all started…

Every time I create a new File in Figma, it starts as a blank canvas and has no page structure to help organize my work, so I wanted to save that valuable time of setting up a document just to start doing the core work. I usually use almost the same page structure for every file:
📘 Cover (Set as a thumbnail)
ℹ️ Project Info

🔀 UX Flows

🌈 Playground
🧩 Components
👀 Benchmark
🧪 Discovery
- - - - - - - - - - - - -
🟢 Final
- - - - - - - - - - - - -
🟣 In progress
- - - - - - - - - - - - -
🟡 Prototype V1
🟡 Prototype V2
🟡 Prototype V3
- - - - - - - - - - - - -
🔴 Not considered

I knew that there might be some already existing Figma Plugins that could help me in this situation, but all of the ones I found were not fulfilling my particular use case and were not simple to use and/or fast enough. With this in mind, I decided to create a Plugin that was able to do what I needed at the time.

I named this plugin, PageGenius, and at the time of writing this blog post, it has been used by 40+ other Figma users (not as many as my first community file with 5k+ users, but slowly ramping up). This Plugin creates pages with the structure I showed above and sets a cover thumbnail for the file, in 1 click.

PageGenius Plugin Demo

This successful experience inspired me immensely to wonder how else could I automatize and improve my and other designers' workflow.

Challenging the status quo

Let's be honest, Designers and Front-end developers often face challenges in design-to-code collaboration. Countless hours are spent to do a design and subsequently, countless hours to manually write down markup of those designs into code, before even getting started with the real code, the logic behind it, interactions, states, tracking events, API calls, etc, resulting in delays, design inconsistencies, and a drain on resources. This frustrating process negatively impacts productivity and prevents teams from focusing on their core tasks and can be overwhelming for both designers and developers. Recognizing these issues, I set out to find a solution that could connect both worlds:

Figma designs to Design System Components Markup

Seizing the opportunity

The opportunity to improve our design to code workflows was crystal clear. By developing a Figma plugin that seamlessly translated designs into 1:1 ReactJS Design System components, we could reduce manual effort, improve accuracy, and expedite the delivery of code-ready designs. This would allow developers to concentrate on the core coding logic to bring features to life and boost the product development process.

Diving deeper into Figma's Plugin API

I discovered a world of possibilities. The API empowered me to access design elements, properties, and metadata programmatically. Armed with this knowledge, I began developing the initial version of this Figma plugin
Minimum Viable Product (MVP)
To transform my vision into reality, I started by creating a prototype of the plugin. With a clear understanding of our Coded Design System's components, I focused on mapping out our most commonly used design elements like:

<Card {props}>[...]</Card>
<Box {props}>[...]</Box>
<H2>[...]</H2>
<Button {...props}>[...]<Button/>
<Divider/>
<Inline {props}>[...]</Inline>
<Icon {...props} />
<Text {...props}>[...]</Text>
<Stack {...props}>[...]</Stack>

I iterated over and over to get most of the properties to match and look for the result I wanted for the MVP.

Figma to AMBOSS Design System Plugin Demo

Testing and Feedback

To ensure the plugin met the needs of our design team and front-end developers, I started a thread on our internal chat to inspire and gather feedback and thoughts. This is the starting point as I write this post and I'm looking forward to further collaboration with the Design System team to keep exploring new boundaries.

Caveats and considerations

The MVP proved to be helpful, but there are some things to consider, and is unclear the future usage of this tool as it requires some important changes:

Optional: Our Figma Design system component properties could match 1:1 with our Coded Design System component properties. Recommended: We could implement the necessary mapping to make this work, although this approach would not be optimal and would require maintenance. Having our Coded Design System components and our Figma Design System library matching the properties naming 1:1 would remove maintenance work time as any new property could be easily translated from code to Figma without development efforts.
Setbacks: A setback for the recommended point above, would be the initial re-work of how our design system components are constructed in Figma.
Not for everyone: For this plugin to work and improve designers' workflow, designers have to design in a specific way using Figma's Auto-Layout feature, designers would have to name their layers in the specific naming convention to match that of our Coded Design system components and understand the coding structure to follow to make it work. Meaning that having a coding background will help a lot here.

What's next?

I imagine a future where we aim to expand this plugin's capabilities, allowing for the mapping of more complex design elements and introducing advanced features, and extrapolating it to other systems and frameworks.

This can be extrapolated to any design system, check out my second iteration for React-Bootstrap library:

Leveraging AI

During the development of the Figma plugin, I leveraged ChatGPT to brainstorm solutions to challenging problems when building the MVP.
Also, as I embarked on writing this blog post, AI became a helpful writing partner. It helped me overcome the "blank canvas syndrome" (as much as my first plugin PageGenius helps with as well).
However, it's important to note that while ChatGPT provided me with valuable assistance, the ultimate responsibility for the content and ideas of the Plugin and this blog post rests with me as a Senior Product Designer.

How to design like a front-end developer — Design Stack & Tech Stack

Keno Reloaded Ⓥ — Wed, 08 Jun 2022 10:34:15 +0000

First of all, let’s break down some key concepts that will become useful to continue reading this article:

stack/stak/

Dictionary meaning- A pile of objects, typically one that is neatly arranged.

But let’s focus on the tech environment meaning:

A Tech Stack is a combination of technologies that a company or person uses to build and run an application or project. A tech stack typically consists of programming languages, frameworks, databases, front-end tools, back-end tools, and applications connected via APIs.

Similarly to the concept mentioned above, we can consider thinking of Design Stacks, which is a combination of tools a designer or company uses. This could consist of wireframing, whiteboards (online or offline), design, illustration, or photo editing software.

A REAL day in the life of a (digital) Product Designer:

If you have experienced what the Product Designer above had just now, you are not alone.

“Understand your materials”Alan Dix — Professor, Expert in Human-Computer Interaction

To be a good Product Designer, auditing the current status quo, implementing key design principles, analyzing user behavior and stakeholder management might not be the end of a Product Designer's journey but the beginning.

Understanding the company’s or a project Tech Stack or what type of systems you might be using in your development environment, could help you to present better proposals that align with your team and increase the developer’s efficiency.

From my experience of working in several start-ups and having competed in several hackathons, I would say more often than not a Product Designer is more prompted to be advised or indirectly drawn to understand a bit of code, than the developers training their design skills.

So, how do we design with a Front-end developer mindset?

More and more design is becoming very similar to how a front-end developer would build that design with code, which creates the perfect handoff for consistency, efficiency, and implementation of a design and removes friction between the designer and the coder.

Of course, this coupled with having a design system on the design side that matches the one used in the coding environment would further remove discrepancies in the final product.

Figma to Reactjs

This is how a button component could look like in ReactJs (a Popular Javascript framework created by Facebook) and how could it look on Figma (a Popular design tool)

ReactJs Button component example

Understanding how a front-end developer could be building our Figma components and vice versa will provide your team with a structure that very closely matches properties and values from the development side, which will help to communicate better with your team, this is how we work faster together, we are all building the same product, right? So this really makes it a lot easier by understanding and getting closer to your development components structure. Obviously, there are going to be some differences in how designers are thinking about things and how developers work, but this is going to give us some of that shared language together.

From a design file to coding layout compositions

In the example above we explored a bit how composing the structure of a button component is a faster way to get from design to development.

But… what about spacings and alignments?

Consider the following example

A simple card component with a short title on the left and a button on the right.

Yes, we could specify the distance between the title and the button, but we would then need to specify this distance to every screen device breakpoint manually also it’s more prompt to discrepancies when coding by introducing a different number.

We want to keep the same structure no matter how wide the card is, we want the title to keep it’s position on the left and the button on the right.

In Figma, this is really easy. By setting its orientation to horizontal, specifying the alignment in the center and the justification to space between. Now if we make the card wider both elements will keep the space between them.

So far so good from a mobile device up, but in a mobile view, we might want to make the elements inside this card stack on top of each other.

By changing its direction to vertical we can achieve this in 1 click and we can maintain the paddings and other styles.

Why is this important and how does this translate to code?

In the image below we can see our card component properties on Figma UI on the left, and on the right, we have the CSS properties that might be used to recreate this on code.

In the CSS code example above flex-direction is set to row but if we set it to column then the elements inside will stack on top of each other.

Nowadays the tools used to design UI have a very close relationship to that of the development environment, this removes communications barriers between developers and designers, making the product design process more efficient for the team.

The less we can as designers utilize “hard-designed” values, floating elements, or manually positioned components, let alone not using components at all will make your work more difficult to maintain in the long run, and will slow down your team’s efforts.

To summarize, being able to master your working tools and having a good understanding of coding languages will help you build better design solutions and improve the communication with the development team, and all together thrive to build an awesome product.

Extras

This is an example of Tech Stack acronyms:

Back-end Stack

LAMP = Linux, Apache, MySQL, and PHP

Front-end Stack

MERN = MongoDB, ExpressJs, ReactJs, NodeJs
MEAN = MongoDB, ExpressJs, AngularJs, NodeJs

Design Stack?

We, designers, haven’t adopted these types of acronyms, but after reading this article maybe we should start? Here are some ideas:

FIMP = Figma, Illustrator, Miro, Photoshop
AIMP = AdobeXD, Illustrator, Miro, Photoshop

If you are working with developers I invite you to search more about front-end technologies and then go ahead to this free file on the Figma community where you will find Tech Stacks and Design Stacks icons and see how many of those you can recognize!