This week I properly started designing in Figma, and it took much longer than I originally expected. At first, I assumed it would be quite a quick task, but once I got into it, I realised there was a lot more to think about in terms of layout, consistency, and how each screen would work together. This made me reflect on how easy it is to underestimate the design stage of a project.
In a previous group tutorial, I mentioned that I was worried about getting too focused on making the Figma design look nice instead of concentrating on functionality. However, while working on it, I started to see this differently. Rather than viewing the extra time spent on the visual side as a bad thing, I realised it could actually help later in the development process. If the design is properly thought through now, then the coding stage should be quicker and easier because many of the decisions about layout and structure will already have been made.
Diana also helped us think about how to approach this in development. We decided that it would make sense to turn a lot of the design elements into reusable components, since I had already created the layouts visually in Figma. I think this will be really useful because components should make the coding process more efficient and consistent.
import { StyleSheet, Text, View } from "react-native";
interface BatteryCardProps {
bgColor: string;
text: string;
icon: string;
}
export default function batteryCard (props: BatteryCardProps) {
const {bgColor, text, icon } = props;
<View style = {styles.container}>
<Icon> {icon} </Icon>
<Text> {text} </Text>
</View>
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#3A86FF"
}
})At the moment, the main feature I still feel unsure about is coding the battery charging progress bar. Even so, this has shown me that some parts of the process will need more experimentation and problem-solving than others.